github-learning-lab[bot] commented 3 years ago

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:

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 .

Cambie product-images en la columna de la izquierda por una declaración de stack-layout .
```
"flex-layout.col#left": {
  "children": [
    "stack-layout#brand"
  ]
}
```

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

"stack-layout#brand": {
  "children": [
    "product-images",
    "product-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 prop displayMode: "logo" .
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í.

vtex-course-hub[bot] commented 3 years ago

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