O parceiro utiliza nossa WebAPI para consulta e consumo de informações relacionadas a produtos, clientes, basket, entre outras, com o objetivo de montar um carrinho e disponibilizá-lo para o consumidor final.
Dessa forma, é necessário realizar a configuração de uma rota de redirect para que, quando o parceiro enviar um link de pedido vinculado ao carrinho para o consumidor, esse link seja direcionado corretamente.
Primeiramente, será necessário criar uma rota de chekout redirect. Para isso:
Acesse Configs > Rotas:
Adicionar rota:
Então configurar a rota da seguinte forma:
Canal: Indiferente
Status: Ativo
Nome da rota: Chckout Redirect
URL da Rota: checkout-redirect (é preenchida automaticamente)
Rota base: Carrinho
Rota virtual: Checkout-Redirect
Salvar
Após configurar uma rota de checkout redirect, devemos configurar um template para realizar o vinculo de forma correta. Para isso:
Vá em Aparência > Gerenciador de Arquivos:
A partir daqui, você precisará saber qual é o tema que o canal de sua loja utiliza:
Como descobrir?
Para saber qual o tema sua loja está utilizando, basta primeiro ir em:
Canais > Canais:
Irá identificar qual o canal da sua loja através do "Nome Identificador":
Após isso, acessar Aparência > Configurar Desing:
Na funcionalidade, você poderá seguir os seguintes passos para identificação:
A: Site, abrir o dropdown
B: Identificar o tema
C: Em "Tema" estará qual o tema utilizado
Navegar até a pasta "Template" do tema que está sendo utilizado na loja:
Com o botão direito do mouse, clicar sob a pasta "Template" e "novo arquivo":
Abrirá um modal para inserir o nome do arquivo, ele será "checkout.redirect.template", então clicar em "Criar":
Após criar o arquivo, você irá inserir o script responsável pelo redirect:
<html> <head> <title>Redirecionando...</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> body { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif; padding-top: 60px; font-size: 14px; } div { display: flex; justify-content: center; align-items: center; flex-direction: column; } </style> </head> <body> <form id="form" action="https://NomeDaLOJA.com.br/web-api/v1/Shopping/Basket/CheckoutRedirect" method="post" style="display:none;"> <input type="hidden" name="BasketID" id="BasketID" value="" /> <input type="hidden" name="CustomerID" id="CustomerID" value="" /> <button type="submit"> enviar </button> </form> <script> try { (async function() { var urlParams = new URLSearchParams(window.location.search); var BasketID = Number(urlParams.get('BasketID')), CustomerID = Number(urlParams.get('CustomerID')), h = urlParams.get('h'); localStorage.setItem('queryBasketID', BasketID); localStorage.setItem('queryCustomerID', CustomerID); document.getElementById('BasketID').value = BasketID; document.getElementById('CustomerID').value = CustomerID; var basketsIds = JSON.parse(localStorage.getItem('basketsIds')) || []; if (basketsIds?.includes(BasketID) === false) { await $.ajax({ url: '/Logout/SignOut' }); } basketsIds.push(BasketID); localStorage.setItem('basketsIds', JSON.stringify(basketsIds)); if (h != null) { const d = window.atob(h), o = JSON.parse(d); BasketID = o.BasketID; CustomerID = o.CustomerID; } function deleteCookies(domain) { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i]; var eqPos = cookie.indexOf('='); var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie; var cookieDomain = document.domain; if (cookieDomain.endsWith(domain)) { document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; } } } deleteCookies(".omnichat.core.dcg.com.br"); document.getElementById('form').submit(); })(); } catch (e) { console.log(e); } </script> </body> </html>
Importante
Na linha 23, deverá constar a URL da loja "https://nomedaloja.com.br/web-api/v1/Shopping/Basket/CheckoutRedirect" ou "https://www.nomedaloja.com.br/web-api/v1/Shopping/Basket/CheckoutRedirect" de acordo como é a url configurada para acesso ao site.
Após criarmos a rota de checkout redirect e o template do checkout redirect, vamos adicionar ao tema da loja.
Para isso, acesse:
Aparência > Configurar Desing:
Acessar o tema de sua loja:
Acessar o menu "Landing Pages", e pesquisar pelo checkout redirect:
Após selecionado, vamos clicar em "Personalizar" no cabeçalho e no arquivo, vamos clicar na pasta para "Alterar template"
Será aberto um modal, e neste modal você irá selecionar o template criado "checkout.redirect.template", e clicar em "selecionar":
Após, iremos mexer no fieldset "Estrutura", pois iremos utilizar um tema que encontra-se oculto. Para localizar este tema, deveremos inspecionar a página, conforme GIF:
Você irá localizar a div "siteStructure", e ao expandir, procurara o title "Página livre":
Selecionando a "Página livre", no menu "Style", localizará o display: none; e irá desmarca-lo:
Após desmarca-lo, repare que aparecerá uma nova opção em branco:
Selecione-a e clique em salvar:
Após salvar, estará pronto a configuração de redirect.