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

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:

Tests

: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

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:

Tests

: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

Try again :grin:

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

: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

[github-learning-lab[bot]]

¡Ha completado este paso con éxito!

Vaya al siguiente paso!

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

: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

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

: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