Página de producto

[github-learning-lab]

Página de producto

✨ Branch: pdp1

Introducción

Una vez terminada la página inicial de nuestra tienda, comenzamos un nuevo template de la tienda: la página de producto. Las páginas de producto son probablemente el template que más tienen bloques diferentes, lo que las hace extremadamente personalizables y flexibles.

MVP

Así que construyamos una página de producto mínima donde solo tengamos lo esencial:

• imágenes
• precio
• nombre
• botón de comprar

Bloques de producto

La mayoría de los bloques de producto, a diferencia de los de contenido, tienen un contexto en el que están insertados. Todo esto hace que estos bloques sean un poco plug-n-play: colocar un product-images en la página de producto, automáticamente redenrizará las imágenes del producto de la página, tal como se hace con el precio y el nombre.

Sin embargo, nada de esto significa que estos bloques sean poco personalizables, como veremos más adelante.

Actividad

Construya una página de producto usando los bloques product-images, product-price, product-name y buy-button en el archivo product.jsonc declarado dentro de la carpeta store/blocks . Esperamos que en la estructura tengamos:

1. Una línea en store.product .

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

2. Dentro de la línea debe haber dos columnas.

"flex-layout.row#main": { 
  "props": { 
    "marginTop": 6
  },
  "children": [
    "flex-layout.col#left",
    "flex-layout.col#right"
  ]
}

3. Dentro de la columna de la izquierda debe haber un product-images.

"flex-layout.col#left": {
  "children": [
    "product-images"
  ]
}

4. Dentro de la columna derecha debe estar el product-name, product-price y buy-button.

Además, queremos que:

1. La columna derecha esté verticalmente alineada al centro (vea las props verticalAlign y preventVerticalStretch en la documentación de Flex Layout Column).
2. El product-price muestre el ahorro total y el precio de lista (showSavings y showListPrice).

ℹ️ Recuerde acceder a la documentación del product-images, product-price, product-name y buy-button si tiene alguna duda durante la actividad.

---

🚫 ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? 🙏

Crear feedback

---

Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.

[vtex-course-hub]

You did great! 😁

Results

✅✅✅✅✅✅✅✅✅

Tests

✅ Getting the file
✅ Code compilation
✅ Crete a product template page
✅ Create a main row inside the product page
✅ Define two columns inside the main row
✅ Define product-images on the left column
✅ Define product-name, product-price and buy-button on the right column
✅ Control stretch and alignment of right column
✅ Define product-price with props

[github-learning-lab]

¡Ha completado este paso con éxito!

Vaya al siguiente paso:

Evolucionando su página de producto (pdp)