Evolucionando su página de producto (pdp)

[github-learning-lab[bot]]

Evolucionando su página de producto (pdp)

:sparkles: Branch: pdp2

Introducción

En el último paso, aprendimos cómo hacer una página de producto simple con sus ítems mínimos, pero sabemos que lo que hicimos está lejos de ser una página de producto ideal, pondremos otros elementos que a menudo vemos en las páginas de producto de varias tiendas.

Más de 30 bloques de producto

En nuestra documentación es posible encontrar 30 bloques más relacionados con el producto. Al comienzo del curso hablamos sobre Shelf y sus bloques relacionados, además de haber visto 4 bloques más en la última parte. En este paso veremos 4 más:

• Breadcrumb
• Product Identifier
• Product Quantity
• SKU Selector

Es importante que al final del curso, usted se tome un tiempo para explorar nuestros componentes, así como las posibilidades de personalización que se tiene con estos.

Actividad

Evolucione la página de producto agregando los otros 4 bloques listados anteriormente de la siguiente forma en el archivo product.jsonc:

1. Defina un breadcrumb al inicio, antes de la línea principal del producto.

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

2. Defina el product-identifier.product debajo del product-name .
3. Cree una línea debajo del precio con el sku-selector y el product-quantity como children.

{
  ...
    "children": [ 
      "product-price",
      "flex-layout.row#qty-sku"
    ]
  },
  "flex-layout.row#qty-sku": {
    "children": [
      "sku-selector",
      "product-quantity"
    ]
  },
  ...
}

4. Defina shipping-simulator debajo de la línea con el SKU Selector y el Product Quantity.

:information_source: Recuerde acceder a la documentación del Breadcrumb, Product Identifier, Product Quantity y SKU Selector si tiene alguna duda durante la actividad.

---

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

Finalizando su pdp

[vtex-course-hub[bot]]

You did great! :grin:

Results

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

Tests

:white_check_mark: Code compilation :white_check_mark: Use a breadcrumb :white_check_mark: Used a product identifier :white_check_mark: Create a row inside the right col with quantity and sku selectors :white_check_mark: Define a shipping simulator in the right column