mirquintilianus

Forum Replies Created

Viewing 2 replies - 1 through 2 (of 2 total)
  • Forum: Plugins
    In reply to: [WooCommerce] Storefront homepage template
    Thread Starter mirquintilianus

    (@mirquintilianus)

    5 years, 5 months ago

    I would very much appreciate if anyone can elaborate a little bit more on the way these Gutenberg blocks are implemented in Storefront/Woocommerce.

    For example, where to look for the code behind a particular block, let’s say the code for the search or the recommend block, etc.?
    I am particularly asking about Woocommerce and Storefront, because, I guess you’d agree, it’s easier to understand the concepts when looking at a particular implementation.

    Forum: Plugins
    In reply to: [WooCommerce] Storefront homepage template
    Thread Starter mirquintilianus

    (@mirquintilianus)

    5 years, 5 months ago

    Dear @3sonsdevelopment,

    I immensely appreciate your detailed response.

    To provide some more context I also found the following article very helpful.
    So, in the admin panel of my wordpress I found that the my sotrefront theme is currently using the “Full width” template, that is the template-fullwidth.php to pull together the contents of the homepage.

    I drilled down further and consulted the general post table in the database, and it turns out the above file’s content loop gets a single post of type page (which obviously is created on activating the storefront theme) looking like this 

    <!-- wp:cover {"url":"http://localhost/wpstorefront/wp-content/uploads/2021/01/hero-scaled.jpg","id":25,"dimRatio":0,"customOverlayColor":"#ffffff","align":"full"} -->
<div class="wp-block-cover alignfull" style="background-image:url(http://localhost/wpstorefront/wp-content/uploads/2021/01/hero-scaled.jpg);background-color:#ffffff"><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","level":1} -->
<h1 class="has-text-align-center">Welcome</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#000000"}}} -->
<p class="has-text-align-center has-text-color" style="color:#000000">This is your homepage which is what most visitors will see when they first visit your shop.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#000000"}}} -->
<p class="has-text-align-center has-text-color" style="color:#000000">You can change this text by editing the "Welcome" page via the "Pages" menu in your dashboard.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">Shop by Category</h2>
<!-- /wp:heading -->

<!-- wp:shortcode -->
[product_categories limit="3" columns="3" orderby="menu_order"]
<!-- /wp:shortcode -->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">New In</h2>
<!-- /wp:heading -->

<!-- wp:woocommerce/product-new {"columns":4} /-->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">We Recommend</h2>
<!-- /wp:heading -->

<!-- wp:woocommerce/handpicked-products {"columns":4,"editMode":false,"products":[34,36,37,38]} /-->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">Fan Favorites</h2>
<!-- /wp:heading -->

<!-- wp:woocommerce/product-top-rated {"columns":4} /-->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">On Sale</h2>
<!-- /wp:heading -->

<!-- wp:woocommerce/product-on-sale {"columns":4} /-->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">Best Sellers</h2>
<!-- /wp:heading -->

<!-- wp:woocommerce/product-best-sellers {"columns":4} /-->

    And here I need your help again! Despite some research, this still doesn’t make much sense to my newcomer’s mind except that it looks like another template.

    Maybe some Gutenberg blocks getting referenced somewhere? Anything else?

Viewing 2 replies - 1 through 2 (of 2 total)