O componente "connectif.product-recommendation" serve para exibir recomendações de produtos enviadas pela Connectif em formato de carrossel nas integrações com o VTEX IO.
Como usar
O componente "connectif.product-recommendation" é projetado para integrações com o VTEX IO, utilizando componentes nativos da VTEX como Slider Layout e Product Summary para exibir as informações do produto e configurar os ajustes do carrossel.
Requisitos
Para poder usar o componente "connectif.product-recommendation", é necessário ter a dependência da Connectif no tema, adicionando o seguinte trecho de código no manifest.json:
"peerDependencies": { "connectif.connectif": "1.x" },
Exemplo
O componente terá este formato:
"connectif.product-recommendation": { "props": { "id": "product-recommendation-home" }, "children": ["list-context.product-list-static#connectif-products"] }, "list-context.product-list-static#connectif-products": { "blocks": ["product-summary.shelf"], // Componente VTEX Product Summary "children": ["slider-layout#connectif-products"] // Componente VTEX Slider Layout }, "slider-layout#connectif-products": { "props": { "itemsPerPage": { "desktop": 3, "tablet": 3, "phone": 1 }, "infinite": true, "fullWidth": false, "blockClass": "shelf" } },
Explicação do exemplo:
- connectif.product-recommendation: recebe nas props um “id”. Esse id é o identificador que você deve configurar no nó "Compartilhar dados".
- list-context.product-list-static#connectif-products: envolve o bloco product-summary.shelf e contém o componente slider-layout#connectif-products.
- product-summary.shelf: é o componente nativo da VTEX usado para exibir as informações dos produtos.
- slider-layout#connectif-products representa as configurações personalizáveis do carrossel, permitindo definir quantos produtos exibir em cada tipo de dispositivo.
Continue aprendendo!
Para aproveitar ao máximo sua conta na Connectif, recomendamos seguir com os seguintes artigos:
- Guia para integrar com VTEX IO, para aprender como integrar sua loja VTEX IO com a Connectif.
- Inserir um inline no VTEX, para inserir conteúdo da Connectif usando um inline no seu VTEX IO.
- Configuração de Afiliados na VTEX, para aprender como sincronizar afiliados na VTEX com a Connectif e como funciona essa sincronização.
- Integração personalizada para envio de dados, para enviar dados da Connectif para sistemas ou aplicações externas.