Open github-learning-lab[bot] opened 3 years ago
:white_check_mark::white_check_mark::x::x::x::x:
:white_check_mark: Getting the files
:white_check_mark: Code compilation
:x: You didn't declare a breadcrumb
:x: You didn't use a product-identifier.product
: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
:white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::x:
:white_check_mark: Getting the files
:white_check_mark: Code compilation
:white_check_mark: Use a breadcrumb
:x: You didn't use a product-identifier.product
:white_check_mark: Create a row inside the right col with quantity and sku selectors
:x: There isn't a shipping-simulator
on the right column
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x:
: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
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
: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
:x: There isn't a shipping-simulator
on the right column
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
: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
Página de producto
:sparkles: Branch: pdp
Introducción
Una vez terminada la página inicial de nuestra tienda, comenzamos un nuevo template de la tienda: la página de producto. Las páginas de producto son probablemente el template que más tienen bloques diferentes, lo que las hace extremadamente personalizables y flexibles.
MVP
Así que construyamos una página de producto mínima donde solo tengamos lo esencial:
Bloques de producto
La mayoría de los bloques de producto, a diferencia de los de contenido, tienen un contexto en el que están insertados. Todo esto hace que estos bloques sean un poco plug-n-play: colocar un
product-images
en la página de producto, automáticamente redenrizará las imágenes del producto de la página, tal como se hace con el precio y el nombre.Sin embargo, nada de esto significa que estos bloques sean poco personalizables, como veremos más adelante.
Actividad
Haga clic en un producto para ir a la página del producto. Construya la página usando los bloques
product-images
,product-price
,product-name
ybuy-button
en el archivoproduct.jsonc
declarado dentro de la carpetastore/blocks
. Esperamos que en la estructura tengamos:Una línea en
store.product
.Dentro de la línea debe haber dos columnas.
Dentro de la columna de la izquierda debe haber un
product-images
.Dentro de la columna derecha debe estar el
product-name
,product-price
ybuy-button
.Además, queremos que:
verticalAlign
ypreventVerticalStretch
en la documentación de Flex Layout Column).product-price
muestre el ahorro total y el precio de lista (showSavings
yshowListPrice
).:information_source: Recuerde acceder a la documentación del
product-images
,product-price
,product-name
ybuy-button
si tiene alguna duda durante la actividad.: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í.