search

Microbito1974 / store-framework

https://lab.github.com/vtex-trainings/store-framework
0 stars 0 forks source link

Finishing your pdp #13

Open github-learning-lab[bot] opened 4 years ago

github-learning-lab[bot] commented 4 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 .

image

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).

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 .

  1. Cambie product-images en la columna de la izquierda por una declaración de stack-layout .
"flex-layout.col#left": {
  "children": [
    "stack-layout#brand"
  ]
}
  1. Defina el stack-layout y coloque como hijos product-images y product-brand.
"stack-layout#brand": {
  "children": [
    "product-images",
    "product-brand"
  ]
}

  1. 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" .

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

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

¡Ha completado este paso con éxito!

Vaya al siguiente paso!