Produto/carrossel relacionado: Componente (React)

Olá! Comunidade.

Exigimos um carrossel de produtos, mas filtrando os similares (produtos relacionados).

*Prateleira/Produtos Relacionados: Semelhantes

Observação: Precisamos trazê-lo em um componente React que estamos construindo

Aprecio sua ajuda. Obrigado

Olá, @developer-vtex-01. Acredito que essa documentação possa te ajudar:
https://help.vtex.com/pt/announcements/lancamos-nossas-novas-apis-de-cross-selling-e-up-selling--37Lc6sI2owMCiUamocgAcc

Ela mostra como pegar os produtos relacionados pelos campos de sugestão, similar e Acessórios a partir do Id do produto.

Caso essa resposta te ajudou, marque como uma solução para ajudar outros da comunidade.

2 Likes

Hola Leonard (@developer-vtex-01), todo bien?

Aunque el bloque Shelf.RelatedProducts está en desuso segundo la documentación de la app VTEX Shelf, todavía funciona.

Llamando el bloque Shelf.RelatedProducts adentro del bloque store.product es posible renderizar una shelf en la página del producto que puede ser configurada para retornar productos automaticamente o productos definidos en el catálogo de VTEX.

{
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "flex-layout.row#product-main",
      "shelf.relatedProducts",
      "product-reviews",
      "product-questions-and-answers"
    ]
  }
}

Hay seis posibles tipos de recomendación de productos que se configuran utilizando la prop “recomendation” del bloque “shelf.relatedProducts”:

  • similars, suggestions y accessories (que dependen de los datos del catálogo del productos)

  • view, buy, viewandBought (que se generan automáticamente según la actividad de la tienda)

Sigue un ejemplo de la implementación del bloque:

"shelf.relatedProducts": {
    "props": {
        "recommendation": "view",
        "productList": {
            "titleText": "Quien vio también vio",
            "itemsPerPage": 5
        }
    }
}

Saludos!

Olá @andremiani!

Sim, está certo, entendi. Meu problema que estou tendo atualmente é que preciso consertar e foi exatamente isso que você me disse, mas em um componente customizado no React. No PDP temos um componente de guias de navegação https://styleguide.vtex.com/#/Components/Navigation/Tabs que precisamos para chamar o carrossel recomendado/semelhante em uma das guias. Se entende?

Obrigado

Saudações.

Olá @imperiano!

Agradecemos a sua ajuda. Mas não é disso que precisamos.

Obrigado

Saudações.

Olá @andremiani!

É isso que tenho no momento, me traz o universo de produtos aleatórios, mas não filtra pelos recomendados. Eu tentei vários adereços, mas não funcionou para mim.

Obrigado

Saudações.