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.