Evoluindo sua página de produto

Introdução

Durante a última etapa, aprendemos como criar uma página de produto simples com uma quantidade mínima de conteúdo sobre produtos, mas sabemos que o resultado está longe de ser uma página de produto ideal, por isso adicionaremos outros elementos que aparecem com frequência nas páginas de produtos de várias lojas.

Mais de 30 blocos de produtos

Nossa documentação contém mais de 30 blocos relacionados ao produto. Exploraremos mais 4 nesta etapa:

• Breadcrumb
• Product Identifier
• Product Quantity
• SKU Selector

É importante que ao final do curso você reserve um tempo para explorar totalmente nossos componentes, além das possibilidades de customização que acompanham cada um.

Atividade

Desenvolva a página do produto adicionando os 4 blocos listados acima aoproduct.jsonc da seguinte forma:

1. Defina a breadcrumb logo antes da row;

   JSON

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

2. Defina o product-identifier.product logo depois de product-name;

   Diff

       },
       "children": [
         "product-name",
   +      "product-identifier.product",
         ...
       ]
     },
   

3. Crie uma row logo abaixo do preço, contendo o sku-selector e product-quantity como filhos;

   JSON

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

4. Defina o shipping-simulator logo abaixo da linha definindo o SKU Selector e o Product Quantity:

    "children": [
      ...
+      "shipping-simulator",
      "buy-button"
    ]

Note: Lembre-se de acessar a documentação do Breadcrumb, Product Identifier, Product Quantity e SKU Selector se tiver qualquer dúvida durante a atividade.

Está com dúvidas?

Veja o gabarito para esta etapa ou acompanhe nosso [office hours] no canal VTEX Developers(https://www.youtube.com/c/VTEXDevelopers)