Workshop video:

https://drive.google.com/file/d/1TOtrucJNGShY22VDjRSCRampbYJSv7f6/view?usp=share_link

Header

Breadcrumbs - generated automatically.

Screenshot 2023-02-10 at 10.29.21.png

Category Title and Category Description are managed in Magento's back office:

  1. On the Admin sidebar, go to Catalog > Categories.
  2. Set Store View.
  3. In the category tree, select the category you need.
  4. Change the Category Name if needed.
  5. Expand the Content section. For Description, enter the text that you want to appear on the category landing page.
  6. Click Save.

Filter Tabs

Screenshot 2023-02-10 at 10.29.43.png

Untitled

Products List

General info and behavior: In this image, we see content blocks from Contentful that are mixed with products in the product grid.

If the customer clicks on the "Load more" button, the new products will be added to the bottom of the product listing and the content blocks will remain in place. And if the user selects some kind of filter or order, then the content blocks inside the product grid will disappear.

How to add and manage content blocks on PLP in Contentful:

  1. Go to Contentful and specify a Space.
  2. Add a new Entry "Category Modules”.

Screenshot 2023-02-10 at 12.13.08.png

And fill in all necessary data:

Screenshot 2023-02-10 at 12.01.12.png

It is very important to indicate the Title in such a way that it is clear on which PLP this Entry will be displayed so that when some changes are needed in this Entry, it will be easy to find it in the general list. Category Modules Entry Title example: Custom blocks for Candle categories (classic, large)

Screenshot 2023-02-10 at 12.15.17.png

To add some content blocks inside the product grid, we need to click on Add content button in the "Blocks inside Listing" section and add a Block Wrapper inside it, you can create a new one or use existing ones. And if you create a new one then you need to fill in Entry Title and add the content Block you want (for example Product Banner), and again you can create a new one or use existing ones. Then you need to specify the position at which this block will be inserted in the Product grid.

It is very important to indicate the Block Wrapper > Entry Title in such a way that it is clear on which pages and at which position this Entry will be displayed in the product grid so that when some changes are needed in this block, it will be easy to find it in the general list. Block Wrapper Entry Title example: Product banner in the Listing on Candles PLP (position 1)

That's it, you just need to publish it.

In the same way, we can display different content blocks in different places.

Examples of using: Let's imagine you already have some content blocks on a Classic Candles PLP, and you want to display all these blocks on another category, let’s say Large Candles, - it's very easy to do, you just need to find the Category Modules Entry that is used for the Classic Candles PLP in the list of all entries, open it and in the Category IDs field add the ID of the category Large candles. And publish it. That’s it, all the content blocks that are displayed on the Classic PLP will be displayed in the category Large Candles. And if other blocks are already displayed on the Large Candles PLP, then they will be merged and all will be shown.

At the moment in the "Blocks inside Listing" section you can only display the five types of content blocks (Entries) that are specified in the design:

  1. Product banner
  2. Ecom push
  3. Editorial banner
  4. Editorial card
  5. Product push There is also a limitation: the "Blocks inside Listing" section can contain no more than 12 blocks in total

Examples of these Entries are shown below. Each of these blocks has its own fields to fill in. They are labeled in the images below.

Product Banner

Screenshot 2023-12-07 at 16.25.33.png

E-Com Push