search

JeissonSerpa / store-framework

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

Product page #11

Closed github-learning-lab[bot] closed 3 years ago

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

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:

image

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] commented 3 years ago

¡Ha completado este paso con éxito!

Vaya al siguiente paso!

vtex-course-hub[bot] commented 3 years ago

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