Open github-learning-lab[bot] opened 3 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Getting the file
:white_check_mark: Code compilation
:white_check_mark: Define related products shelf
:white_check_mark: Use and define a stack-layout
on the left column
:white_check_mark: Use product images and product brand within the stack layout
:white_check_mark: Define correct props on product-brand
:x: You didn't define the props correctly on sku-selector
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Getting the file
:white_check_mark: Code compilation
:white_check_mark: Define related products shelf
:white_check_mark: Use and define a stack-layout
on the left column
:white_check_mark: Use product images and product brand within the stack layout
:white_check_mark: Define correct props on product-brand
:x: You didn't define the props correctly on sku-selector
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Getting the file
:white_check_mark: Code compilation
:white_check_mark: Define related products shelf
:white_check_mark: Use and define a stack-layout
on the left column
:white_check_mark: Use product images and product brand within the stack layout
:white_check_mark: Define correct props on product-brand
:x: You didn't define the props correctly on sku-selector
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
:white_check_mark: Getting the file
:white_check_mark: Code compilation
:white_check_mark: Define related products shelf
:white_check_mark: Use and define a stack-layout
on the left column
:white_check_mark: Use product images and product brand within the stack layout
:white_check_mark: Define correct props on product-brand
:x: You didn't define the props correctly on sku-selector
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file
:white_check_mark: Code compilation
:white_check_mark: Define related products shelf
:white_check_mark: Use and define a stack-layout
on the left column
:white_check_mark: Use product images and product brand within the stack layout
:white_check_mark: Define correct props on product-brand
:white_check_mark: Define correct props on sku-selector
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
:Defina un
breadcrumb
al inicio, antes de la línea principal del producto.Defina el
product-identifier.product
debajo delproduct-name
.Cree una línea debajo del precio con el
sku-selector
y elproduct-quantity
como children.Defina
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í.