Introdução

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.

Criando a rota "Checkout Redirect"

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

Criando template

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.

Adicionando o template

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.

  • Sem rótulos