Evoluindo sua página de produto

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.

imageimage

Mais de 30 blocos de produtos

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

É 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;

    "store.product": {
      "children": [
        "breadcrumb",
        "flex-layout.row#main"
      ]
    }
    
  2. Defina o product-identifier.product logo depois de product-name;

        },
        "children": [
          "product-name",
    +      "product-identifier.product",
          ...
        ]
      },
    
  3. Crie uma row logo abaixo do preço, contendo o sku-selector e product-quantity como filhos;

    {
      ...
        "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 participe do nosso office hours


Ajude-nos a fazer este conteúdo melhor!

Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!

Faça uma contribuição

ou abra uma issue


Next step