Histórico da Página

...

Painel

borderColor	#EBEBEB
titleColor	#FFF
titleBGColor	#ffa500#2C004B
title	Introdução

O parceiro utiliza nossa a WebAPI para consulta consultar e consumo consumir informações de informações relacionadas a produtos, clientes , e carrinhos (basket), entre outras, com o objetivo de montar um carrinho e disponibilizá-lo para o ao consumidor final.

Dessa formaPara que o link encaminhado ao cliente o direcione corretamente para o checkout, é necessário realizar a configuração de configurar uma rota de redirect para que, quando o parceiro enviar um link de pedido vinculado ao carrinho para o consumidor, esse link seja direcionado corretamenteredirecionamento (Checkout Redirect) com um template customizado.

""Primeiramente, será necessário criar uma rota de chekout redirect. Para isso

Painel

borderColor	#EBEBEB
titleColor	#FFF
titleBGColor	#2C004B
title	Criando a rota

de Checkout Redirect

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

Acesse Configs

>

→ Rotas

:

.

Image Removed

Clique em Adicionar rota

:

Image Removed

Então configurar a rota da seguinte forma

.
Configure os campos conforme indicado:
- Canal:

- Indiferente
- Status:

- Ativo
- Nome da rota: Checkout Redirect
- URL da Rota:

- checkout-redirect (

é preenchida

- preenchido automaticamente)
- Rota base: Carrinho
- Rota virtual: Checkout-Redirect
Clique em Salvar.

Image Removed

Image Added

Para saber qual o tema sua loja está utilizando, basta primeiro ir em:

Canais > Canais:

Image Removed

Irá identificar qual o canal da sua loja através do "Nome Identificador":

Image Removed

Após isso, acessar Aparência > Configurar Desing:

Image Removed

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

Image Removed

Navegar até a pasta "Template" do tema que está sendo utilizado na loja:

Image Removed

Com o botão direito do mouse, clicar sob a pasta "Template" e "novo arquivo":

Image Removed

Abrirá um modal para inserir o nome do arquivo, ele será "checkout.redirect.template", então clicar em "Criar":

Image Removed

Após criar o arquivo, você irá inserir o script responsável pelo redirect

, é 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:

Painel

borderColor	#EBEBEB
titleColor	#FFF
titleBGColor	#2C004B
title	Criando o template de compartilhamento

Após configurar

uma

a rota

de checkout redirect, devemos configurar um template para realizar o vinculo de forma correta. Para isso:

Vá em Aparência > Gerenciador de Arquivos:

Image Removed

A partir daqui, você precisará saber qual é o tema que o canal de sua loja utiliza:

Image Removed

Dica

title	Como descobrir?

<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> 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.

Bloco de código

language	js

theme	RDark
title	checkout.redirect.template
linenumbers	true
collapse	true

<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="

https://NomeDaLOJA.com.br

{{ 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

        enviar
    </button>

</form>

    
<script>
    try {

        (async function() {

                
            var urlParams = new URLSearchParams(window.location.search);

var

            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' }); }


                
                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

                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");

                    }
                }
            }
            deleteCookies(".{{ Urls.FullBaseUrl | replace: 'https://', '' }}");
            
            document.getElementById('form').submit();

                
                
        })();

            
            
    } catch (e) {

        console.log(e);

</script>

</body> </html>

Image Removed

Aviso

title	Importante

Image Added

Após criarmos

Painel

borderColor	#EBEBEB
titleColor	#FFF
titleBGColor	#2C004B
title	Adicionando o template

à Landing Page Checkout Redirect

Com a rota

de checkout redirect

e o template

do checkout redirect, vamos adicionar

criados, será necessário aplicá-los ao tema da loja.

Para isso, acesse:

Aparência > Configurar Desing:

Image Removed

Acessar o tema de sua loja:

Image Removed

Acessar o menu "Landing Pages", e pesquisar pelo checkout redirect:

Image Removed

Após selecionado, vamos clicar em "Personalizar" no cabeçalho e no arquivo, vamos clicar na pasta para "Alterar template"

Image Removed

Será aberto um modal, e neste modal você irá selecionar o template criado "

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

clicar em "selecionar":

Image Removed

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:

Image Removed