Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
: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
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
ocollection
, 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 tipoproduct-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:
Actividad
home.jsonc
, declare un componenteshelf
en el templatestore.home
.shelf.jsonc
.shelf.jsonc
, defina el bloqueshelf
con todas las props propuestas en el ejemplo anterior.8
.4
.Nota: Es importante tener en cuenta que el bloque
product-summary.shelf
ya está declarado dentro del archivodefault.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:![image](https://user-images.githubusercontent.com/12139385/70187041-1209e800-16cc-11ea-85b8-80162239ce1d.png)
: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í.