O parceiro utiliza a WebAPI para consultar e consumir informações de produtos, clientes e carrinhos (basket), com o objetivo de montar um carrinho e disponibilizá-lo ao consumidor final.
Para que o link encaminhado ao cliente o direcione corretamente para o checkout, é necessário configurar uma rota de redirecionamento (Checkout Redirect) com um template customizado.
O primeiro passo é criar um rota, para isso siga os passos:
- Acesse Configs → Rotas.
- Clique em Adicionar rota.
- Configure os campos conforme indicado:
- Canal: Indiferente
- Status: Ativo
- Nome da rota: Checkout Redirect
- URL da Rota: checkout-redirect (preenchido automaticamente)
- Rota base: Carrinho
- Rota virtual: Checkout-Redirect
- Clique em Salvar.
Após configurar a rota, é necessário criar um template personalizado que executará o método de Checkout Redirect ao acessar a URL de compartilhamento.
Criando o arquivo do template
Acesse Aparência → Gerenciador de Arquivos → Shared.
Clique com o botão direito sobre a pasta Templates e selecione Novo arquivo.
No modal que será exibido, informe o nome do arquivo: checkout.redirect.template.
Clique em Criar.
Após criar o arquivo, insira o código abaixo que será responsável pelo redirecionamento:
<style>
body {
&::after {
content: '';
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
margin-left: -24px;
margin-top: -24px;
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
border-top: 3px solid #999;
border-right: 3px solid transparent;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
&::before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background-color: white;
z-index: 5;
border-radius: 10px;
}
}
</style>
<form id="form" action="{{ Urls.FullBaseUrl }}/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) {
const response = await fetch('/Logout/SignOut', {
method: 'GET',
credentials: 'include'
});
if (!response.ok) {
throw new Error(`Erro HTTP: ${response.status}`);
}
const data = await response.json().catch(() => null);
console.log('Logout OK', data);
}
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(".{{ Urls.FullBaseUrl | replace: 'https://', '' }}");
document.getElementById('form').submit();
})();
} catch (e) {
console.log(e);
}
</script>
Com a rota e o template criados, será necessário aplicá-los ao tema da loja.
- Acesse Aparência → Configurar Design.
- Abra o tema ativo da sua loja.
- Vá até o menu Landing Pages e busque por Checkout Redirect.
- Clique sobre o resultado encontrado.
- Em Conteúdo, selecione Alterar template.
- No modal exibido, escolha o template checkout.redirect.template e clique em Selecionar.
