Order Bump - Produtos Relacionados

Esse recurso permite que ao adicionar um produto ao carrinho, os clientes tenham acesso a recomendações de produtos relacionados diretamente na modal de "Meu Carrinho" e na página de Carrinho, incentivando a exploração de outros itens.

Vale ressaltar que, para que o recurso seja exibido, o tema deve utilizar o modal padrão da plataforma. Assim, ao estar na página do produto e clicar para adicionar o item ao carrinho, a modal "Meu Carrinho" será exibida, mostrando o novo recurso logo abaixo.

Para habilitar o recurso, acesse pelo painel da plataforma em: Configurações > Produto > Geral > Produtos Relacionados (Order Bump).

Nele é possível ativar ou desativar a exibição de produtos relacionados na modal de "Meu Carrinho" e na página de Carrinho.

Em Funções adicionais, a opção "Adicionar produto ao carrinho sem sair da página" também deve estar selecionada.

Para mais detalhes acesse a doc.

Não é possível editar o HTML desse modal. Caso queira fazer algum ajuste junto aos arquivos da loja, o mesmo pode ser feito através de CSS e Javascript de maneira personalizada.

No checkout não é possível fazer nenhum tipo de alteração.

Também é possível fazer consulta a API e retornar os produtos. Recomendado para as lojas que não utilizam o modal padrão da plataforma na página do produto e possuem o carrinho lateral.

Para consultar produtos relacionados é obrigatório passar 2 parâmetros no header: o id da loja e o content type:

Store-id: <id da loja>
Content-Type: application/json

Também é necessário enviar, nos parâmetros da requisição, o nome de pelo menos 1 produto para buscar seus relacionados e no máximo o nome de 2 produtos.

{dominio_loja}/cart-api/partners/v1/products/related?related_product_1={nome_do_produto}
{dominio_loja}/cart-api/partners/v1/products/related?related_product_1={nome_do_produto}&related_product_2={nome_do_segundo_produto}

Exemplo de consulta a API:

const url = `/cart-api/partners/v1/products/related?related_product_1=${nomeProduto}`;
jQuery.ajax({
    method: 'GET',
    url: url,
    headers: {
        'Store-id': idStore,
        'Content-Type': 'application/json'
    },
    success: function(response) {
        console.log(response);                
    },
    error: function(error) {
        console.error(error.responseJSON?.message || "Erro desconhecido");
    }
});

A montagem e exibição do bloco fica de acordo com o desejado para o tema/loja.