> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/desenvolver/order-bump-produtos-relacionados.md).

# 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.

<figure><img src="/files/2roYNsOJ289bmKgFsG6W" alt=""><figcaption><p><strong>Exemplo de exibição do Order Bump no Tema Padr</strong>ã<strong>o 2.0</strong></p></figcaption></figure>

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.

<figure><img src="/files/I086t04cvlMJcLl44WNK" alt=""><figcaption><p><strong>Exemplo de exibição do painel da plataforma</strong></p></figcaption></figure>

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

<figure><img src="/files/bMAErIY90fsilFN1uuZ4" alt=""><figcaption><p><strong>Exemplo de exibição do painel da plataforma</strong></p></figcaption></figure>

Para mais detalhes [acesse a doc](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6734047244827-Como-utilizar-a-ferramenta-de-Produtos-Relacionados?_gl=1%2A104fhm7%2A_ga%2AMTc1NDQxNTU0Ni4xNzM5Mjc0NDg3%2A_ga_7E8K3V34J2%2AMTczOTM1ODgzMS4yLjEuMTczOTM4MTY5Ny4zNy4wLjA.).

<figure><img src="/files/evtbtjJAx4gyjeIJ46lf" alt=""><figcaption><p><strong>Desktop - Exemplo de exibição do Order Bump na pagina de produto</strong></p></figcaption></figure>

<figure><img src="/files/u32DfCxn1z6Vh5FKdmuF" alt=""><figcaption><p><strong>Mobile - Exemplo de exibição do Order Bump na pagina de produto</strong></p></figcaption></figure>

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.

<figure><img src="/files/vg7L2p9JKoOPpsX4ZQnw" alt=""><figcaption><p><strong>Exemplo de exibição do Order Bump no checkout</strong></p></figcaption></figure>

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.

<figure><img src="/files/kbBRQXn5FAzbllGhzFdj" alt=""><figcaption><p><strong>Exemplo de exibição do Order Bump no Tema Netstore 2.0 Home Decor</strong></p></figcaption></figure>

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

```javascript
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.

```javascript
{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:&#x20;

```javascript
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.

<figure><img src="/files/iCY820HCVMTytrFfw8Dm" alt=""><figcaption><p><strong>Exemplo de exibição do Order Bump no carrinho lateral</strong></p></figcaption></figure>

<figure><img src="/files/AYTTxAhwCh9rAkagBvIN" alt=""><figcaption><p><strong>Exemplo de exibição do Order Bump no carrinho flutuante</strong></p></figcaption></figure>