Open github-learning-lab[bot] opened 3 years ago
:x::x::x::x::x:
:x: Request failed with status code 404 :x: Could not find a slider-layout in your home :x: Did not find expected images in your slider-layout :x: Could not find images with a src prop :x: There is something wrong with the autoplay configuration in your slider-layout
:white_check_mark::white_check_mark::white_check_mark::x::x:
:white_check_mark: Getting the files :white_check_mark: Add a slider-layout#home block to your home :white_check_mark: Make slider-layout have 6 brand images as children :x: Could not find images with a src prop :x: There is something wrong with the autoplay configuration in your slider-layout
:white_check_mark::white_check_mark::white_check_mark::x::x:
:white_check_mark: Getting the files :white_check_mark: Add a slider-layout#home block to your home :white_check_mark: Make slider-layout have 6 brand images as children :x: Could not find images with a src prop :x: There is something wrong with the autoplay configuration in your slider-layout
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Getting the files :white_check_mark: Add a slider-layout#home block to your home :white_check_mark: Make slider-layout have 6 brand images as children :white_check_mark: Add correct image src to each image block :x: There is something wrong with the autoplay configuration in your slider-layout
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the files :white_check_mark: Add a slider-layout#home block to your home :white_check_mark: Make slider-layout have 6 brand images as children :white_check_mark: Add correct image src to each image block :white_check_mark: Make slider-layout have autoplay behavior but stop playing when the user hovers over an image
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)
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í.