# 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="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2F9UwkhIRiyehZm9dZxU6P%2FCPT2502121532-1197x898.gif?alt=media&#x26;token=a5606962-6017-493f-ad86-7faea91a19b2" 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="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2Fx9cz7qA0ES6JI4a6Y0Ni%2Fimage.png?alt=media&#x26;token=52718353-5f6e-4724-8a81-70d5c4abe790" 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="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FiUr6uUxa7ElzKKGExqHq%2Fimage.png?alt=media&#x26;token=bebf8aaa-a77d-4a49-9b0d-c01690d40aba" 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="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FBqJPr9sUo42z0ulp5IhO%2Fimage.png?alt=media&#x26;token=7d5c7783-fd03-4b12-952c-d8950cd2182f" alt=""><figcaption><p><strong>Desktop - Exemplo de exibição do Order Bump na pagina de produto</strong></p></figcaption></figure>

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FCUaVoTPV2VEfFNjWJQIh%2Fimage.png?alt=media&#x26;token=8d9cff29-f360-4d2e-9e95-7d9770cc805d" 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="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FK2N2NNoyfsINVLTw7oJC%2Fimage.png?alt=media&#x26;token=a0ac9fed-6503-4f53-8407-e77d28ad4bae" 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="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FyjXUxReb2jiwBa52XoO6%2FCPT2503100901-1898x868.gif?alt=media&#x26;token=73cfea23-0973-453c-a0c9-a15699c4a672" 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="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FSWEJh3x7v4rfsVsJzXQI%2Fimage.png?alt=media&#x26;token=db2cca6a-af6d-4c93-b5ce-5314dc715cdd" alt=""><figcaption><p><strong>Exemplo de exibição do Order Bump no carrinho lateral</strong></p></figcaption></figure>

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2F5U1WvBbMPjlok5HEaRHv%2Fimage.png?alt=media&#x26;token=01c82f07-559f-4873-933c-1dd94096abed" alt=""><figcaption><p><strong>Exemplo de exibição do Order Bump no carrinho flutuante</strong></p></figcaption></figure>