Product page

[github-learning-lab[bot]]

Página de producto

:sparkles: Branch: pdp

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

Haga clic en un producto para ir a la página del producto. Construya la página 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!

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::x::x::x::x::x::x:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Crete a product template page :x: You didn't use nor defined a flex-layout.row in your product page :x: There aren't two flex-layout.col inside your flex-layout.row :x: You didn't define product-images on the left column :x: You didn't define product-name, product-price and buy-button on the right column :x: You didn't use the props preventVerticalStretch and verticalAlign :x: You didn't define product-price or defined the expected 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::white_check_mark:

Tests

:white_check_mark: Getting the file :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