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::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
Finalizando su pdp
:sparkles: Branch: pdp3
Introducción
En este paso, terminaremos de construir nuestra página de producto. Aprenderemos cómo apilar bloques usando Stack Layout, cómo sugerir productos similares y cómo personalizar mejor el SKU Selector para productos con imagen de SKU.
Para probar este step, utilice la url del producto
/3-colors-retro-stand-mixer/p
.Stack Layout
stack-layout
es un tipo de layout que permite apilar bloques sobre otros. Es muy útil cuando desea colocar un badge encima de una imagen o producto. También es útil para componer textos compuestos sobre imágenes (usandorich-text
eimage
).(En la imagen, un shelf apilado sobre un carrusel :point_up_2:)
En este paso, usaremos
stack-layout
para colocar la marca sobre las imágenes de producto.Actividad
Evolucione la página de producto añadiendo los siguientes pasos al archivo
product.jsonc
:Declare un
shelf.relatedProducts
debajo de la línea principal de producto.:warning: Recuerde, este estante de productos aparece solo en el producto
/3-colors-retro-stand-mixer/p
.Cambie
product-images
en la columna de la izquierda por una declaración destack-layout
.Defina el
stack-layout
y coloque como hijosproduct-images
yproduct-brand
.Consulte la documentación para cambiar la forma en que se muestra
product-brand
. Debe hacer que el logo aparezca con una altura de 30 e incluir la propdisplayMode: "logo"
.Consulte la documentación para hacer que el
sku-selector
:image
como el valor de la prop, mostrado en la documentación.:information_source: Recuerde acceder a la documentación del Stack Layout si tiene alguna duda durante la actividad.
:information_source: Recuerde utilizar el producto
/3-colors-retro-stand-mixer/p
para probar este paso.: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í.