Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::white_check_mark::x::x:
: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:
: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
Evolucionando su página de producto (pdp)
:sparkles: Branch: pdp2
Introducción
En el último paso, aprendimos cómo hacer una página de producto simple con sus ítems mínimos, pero sabemos que lo que hicimos está lejos de ser una página de producto ideal, pondremos otros elementos que a menudo vemos en las páginas de producto de varias tiendas.
Más de 30 bloques de producto
En nuestra documentación es posible encontrar 30 bloques más relacionados con el producto. Al comienzo del curso hablamos sobre Shelf y sus bloques relacionados, además de haber visto 4 bloques más en la última parte. En este paso veremos 4 más:
Es importante que al final del curso, usted se tome un tiempo para explorar nuestros componentes, así como las posibilidades de personalización que se tiene con estos.
Actividad
Evolucione la página de producto agregando los otros 4 bloques listados anteriormente de la siguiente forma en el archivo
product.jsonc
:breadcrumb
al inicio, antes de la línea principal del producto.product-identifier.product
debajo delproduct-name
.sku-selector
y elproduct-quantity
como children.shipping-simulator
debajo de la row con el SKU Selector y el Product Quantity.:information_source: Recuerde acceder a la documentación del Breadcrumb, Product Identifier, Product Quantity y SKU Selector 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í.