Product shelf

[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:

Solucionar problemas

Si estas utilizando su propia cuenta VTEX, asegúrese de que la categoría 1 sea funcional y activa.

---

: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í.

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

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

Tests

:white_check_mark: Getting the files :white_check_mark: Code compilation :white_check_mark: Use a breadcrumb :white_check_mark: Used a product identifier :x: You didn't use and define a flex-layout.row in the right col with sku-selector and product-quantity :x: There isn't a shipping-simulator on the right column

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

Tests

:white_check_mark: Getting the files :white_check_mark: Code compilation :white_check_mark: Use a breadcrumb :white_check_mark: Used a product identifier :x: You didn't use and define a flex-layout.row in the right col with sku-selector and product-quantity :white_check_mark: Define a shipping simulator in the right column

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 files :white_check_mark: Code compilation :white_check_mark: Use a breadcrumb :white_check_mark: Used a product identifier :white_check_mark: Create a row inside the right col with quantity and sku selectors :white_check_mark: Define a shipping simulator in the right column

[github-learning-lab[bot]]

¡Ha completado este paso con éxito!

Vaya al siguiente paso!