Estante de productos

[github-learning-lab[bot]]

Estante de productos

:sparkles: Branch: shelf

Introducción

El siguiente bloque que usaremos es Shelf, nuestro estante para una colección de productos. En esta sesión aprenderemos cómo renderizar y configurar este estante en el home de nuestra tienda.

Shelf

Analizando la documentación de Shelf, vemos que es posible configurar cuál colección de productos queremos mostrar a través de las props category, specificationFilters o collection, de acuerdo con los productos registrados en el catálogo.

Las demás props son para configuración en la manera en que se muestran los ítems. Es importante tener en cuenta que el componente shelf siempre pide que un bloque del tipo product-summary forme parte de su composición. Consulte la documentación del bloque product-summary para entender más sobre su funcionamiento.

A continuación, tenemos el ejemplo de la implementación de un Shelf:

{
  "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"
    ]
  }
}

Actividad

1. En el archivo home.jsonc, declare un componente shelf en el template store.home .
2. Dentro de la carpeta blocks, cree un archivo shelf.jsonc .
3. En el archivo shelf.jsonc, defina el bloque shelf con todas las props propuestas en el ejemplo anterior.
4. Altere el número máximo de ítems mostrados a 8.
5. Altere el número de ítems por página a 4.

Nota: Es importante tener en cuenta que el bloque product-summary.shelf ya está declarado dentro del archivo default.jsonc . Por esta razón, no fue necesario declararlo en esta actividad.

:information_source: Recuerde acceder a la documentación del Shelf si tiene alguna duda durante la actividad.

El resultado final esperado debe ser semejante a este:

---

:no_entry_sign: ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:

Crear feedback

---

Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.

[github-learning-lab[bot]]

¡Ha completado este paso con éxito!

Vaya al siguiente paso:

Carrusel de bloques

[vtex-course-hub[bot]]

You did great! :grin:

Results

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

Tests

: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