Finishing your pdp

[github-learning-lab[bot]]

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 (usando rich-text e image).

(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:

1. Declare un shelf.relatedProducts debajo de la línea principal de producto.

   "store.product": {
     "children": [
       "breadcrumb",
       "flex-layout.row#main",
       "shelf.relatedProducts"
     ]
   }

:warning: Recuerde, este estante de productos aparece solo en el producto /3-colors-retro-stand-mixer/p .

2. Cambie product-images en la columna de la izquierda por una declaración de stack-layout .

   "flex-layout.col#left": {
     "children": [
       "stack-layout#brand"
     ]
   }

3. Defina el stack-layout y coloque como hijos product-images y product-brand.

   "stack-layout#brand": {
     "children": [
       "product-images",
       "product-brand"
     ]
   }

4. 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 prop displayMode: "logo" .

5. Consulte la documentación para hacer que el sku-selector:

   • Comience sin ningún SKU seleccionado.
   • Muestre el nombre por variación de SKU, utilizando image como el valor de la prop, mostrado en la documentación.
   • Muestre error si no se selecciona una variación de SKU.

   :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í.

[github-learning-lab[bot]]

¡Ha completado este paso con éxito!

Vaya al siguiente paso!