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.

---

:no_entry_sign: Are you lost?

Is there any problem with this step? What about sending us a feedback? :pray:

Submit feedback

---

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

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

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

Tests

:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :white_check_mark: Rich-text Desktop props must be correclty declared :x: You haven't declared the props alt,link,maxWidth,src from image#mobile correctly. Review their names and values. :x: You haven't declared the props src,link,alt,maxWidth from image#desktop correctly. Review their names and values.

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::white_check_mark::x::white_check_mark::x::x:

Tests

:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :x: You havent declared responsive-layout.desktop#desktop,responsive-layout.mobile#mobile on you store.home :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :white_check_mark: Rich-text Desktop props must be correclty declared :x: You haven't declared the props alt,link,maxWidth,src from image#mobile correctly. Review their names and values. :x: You haven't declared the props src,link,alt,maxWidth from image#desktop correctly. Review their names and values.

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

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

Tests

:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :white_check_mark: Rich-text Desktop props must be correclty declared :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared

Try again :grin: