Product shelf

[github-learning-lab[bot]]

Product shelf

:sparkles: Branch: shelf

Introduction

The next block that we'll use is the Shelf, on which we display a product collection. This session will show you how to render and configure this shelf on your store's homepage.

Shelf

After a closer look at the Shelf documentation, we see that it's possible to configure which product collection we want to have displayed using either category, specificationFilters or collection props, according to the products added in the catalog.

Other props help to configure how the items are displayed. It's important to remember that the shelf component always requests that product-summary type blocks be part of its composition. Check out the product-summary block's documentation for more info on how it functions.

Below, we have a Shelf implementation example:

{
  "store.home": {
    "blocks": [
      ...
      "shelf"
    ]
  },
  ...
  "shelf": {
    "blocks": ["product-summary.shelf"],
    "props": {
      "category": 1,
      "orderBy": "OrderByTopSaleDESC",
      "paginationDotsVisibility": "desktopOnly",
      "productList": {
        "maxItems": 10,
        "itemsPerPage": 5,
        "minItemsPerPage": 1,
        "scroll": "BY_PAGE",
        "arrows": true,
        "titleText": "Top sellers"
      }
    }
  },
  "product-summary.shelf": {
    "children": [
      "product-summary-image",
      "product-summary-add-to-list-button",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "product-summary-price",
      "product-identifier.summary",
      "product-summary-buy-button"
    ]
  }
}

Activity

1. In home.jsonc, declare a shelf component is the store.home template;
2. Inside the blocks folder, create a shelf.jsonc file;
3. In shelf.jsonc, define the shelf block with all the props given in the example above;
4. Change the maximum number of displayed items to 8
5. Change the number of items per page to 4

Note: It's important to remember that the product-summary.shelf block is already declared in default.jsonc. Therefore, it wasn't necessary to declare it during this activity.

:information_source: Remember to access the Shelf's documentation if you have any questions during this activity.

The end result should be similar to the one below:

Troubleshoot

In case you're using your own VTEX account, make sure that the category 1 is functional and active in your environment.

---

If you're still unsure as to how to send your answers, click here.

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::x::white_check_mark::x::x:

Tests

:white_check_mark: Getting the file :white_check_mark: Add a shelf to store.home blocks :x: Request failed with status code 404 :white_check_mark: Add the declarations found at this module's text to shelf.jsonc :x: The maximum number of products displayed by your Shelf differs from 8 :x: The number of products per page differs from 4

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::x::white_check_mark::x::x:

Tests

:white_check_mark: Getting the file :white_check_mark: Add a shelf to store.home blocks :x: Request failed with status code 404 :white_check_mark: Add the declarations found at this module's text to shelf.jsonc :x: The maximum number of products displayed by your Shelf differs from 8 :x: The number of products per page differs from 4

Try again :grin:

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Getting the file :white_check_mark: Add a shelf to store.home blocks :white_check_mark: Create a shelf.jsonc file :white_check_mark: Add the declarations found at this module's text to shelf.jsonc :white_check_mark: Update maximum number of products displayed by the Shelf to 8 :white_check_mark: Update number of products per page to 4

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!