Página de producto

[github-learning-lab[bot]]

Página de producto

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

:information_source: Recuerde acceder a la documentación del product-images, product-price, product-name y buy-button 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:

Evolucionando su página de producto (pdp)

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

Tests

:white_check_mark: Code compilation :white_check_mark: Crete a product template page :white_check_mark: Create a main row inside the product page :white_check_mark: Define two columns inside the main row :white_check_mark: Define product-images on the left column :white_check_mark: Define product-name, product-price and buy-button on the right column :x: You didn't use the props preventVerticalStretch and verticalAlign :white_check_mark: Define product-price with props

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

Tests

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