Introdução

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.

Criando a rota de Checkout Redirect

O primeiro passo é criar um rota, para isso siga os passos:

  1. Acesse Configs → Rotas.
  2. Clique em Adicionar rota.
  3. 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
  4. Clique em Salvar.



Criando o template de compartilhamento

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

  1. Acesse Aparência → Gerenciador de Arquivos → Shared.

  2. Clique com o botão direito sobre a pasta Templates e selecione Novo arquivo.

  3. No modal que será exibido, informe o nome do arquivo: checkout.redirect.template.

  4. Clique em Criar.

  5. Após criar o arquivo, insira o código abaixo que será responsável pelo redirecionamento:

checkout.redirect.template 
<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>

Adicionando o template à Landing Page Checkout Redirect

Com a rota e o template criados, será necessário aplicá-los ao tema da loja.

  1. Acesse Aparência → Configurar Design.
  2. Abra o tema ativo da sua loja.
  3. Vá até o menu Landing Pages e busque por Checkout Redirect.
  4. Clique sobre o resultado encontrado.
  5. Em Conteúdo, selecione Alterar template.
  6. No modal exibido, escolha o template checkout.redirect.template e clique em Selecionar.



Após concluir essas configurações, o Checkout Redirect estará habilitado e pronto para uso.

  • Sem rótulos