| Painel |
|---|
| borderColor | #EBEBEB |
|---|
| titleColor | #FFF |
|---|
| titleBGColor |
|---|
|
...
...
...
...
...
...
...
com o objetivo de montar um carrinho e disponibilizá-lo |
...
...
Para que o link encaminhado ao cliente o direcione corretamente para o checkout, é necessário |
...
...
redirecionamento (Checkout Redirect) com um template customizado. |
| Painel |
|---|
| borderColor | #EBEBEB |
|---|
| titleColor | #FFF |
|---|
| titleBGColor | #2C004B |
|---|
| title | Criando a rota |
|---|
|
...
...
|
O primeiro passo é criar um rota, para isso siga os passos: - Acesse Configs
|
...
...
Image Removed
...
Image Removed
...
- .
- Configure os campos conforme indicado:
|
...
...
- Ativo
- Nome da rota: Checkout Redirect
- URL da Rota:
|
...
...
- preenchido automaticamente)
- Rota base: Carrinho
- Rota virtual: Checkout-Redirect
- Clique em Salvar.
|
...
 Image Added
|
| Painel |
|---|
| borderColor | #EBEBEB |
|---|
| titleColor | #FFF |
|---|
| titleBGColor | #2C004B |
|---|
| title | Criando o template de compartilhamento |
|---|
|
Após configurar |
...
...
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
...
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
...
, é necessário criar um template personalizado que executará o método de Checkout Redirect ao acessar a URL de compartilhamento. | Nota |
|---|
| Antes de criar o template, confirme qual tema está aplicado ao canal. |
Identificando o tema da lojaAcesse Canais → Canais. Localize o canal da sua loja pelo campo Nome Identificador. Vá em Aparência → Configurar Design. Siga as etapas abaixo: - Em Site, abra o menu suspenso.
- Selecione o canal identificado anteriormente.
- Em Tema, verifique o tema atualmente aplicado.
 Image Added
Criando o arquivo do templateAcesse Aparência → Gerenciador de Arquivos. Abra a pasta Templates do tema utilizado pela loja. 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 script responsável pelo redirecionamento:
| Bloco de código |
|---|
| language | js |
|---|
| theme | RDark |
|---|
| linenumbers | true |
|---|
| collapse | true |
|---|
| <html>
|
|
...
...
<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;
|
|
...
...
...
...
...
...
...
...
...
<body>
<form id="form" action=" |
|
...
{{UrlDaLoja}}/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="" />
|
|
...
...
...
...
<script>
try {
(async function() {
|
|
...
var urlParams = new URLSearchParams(window.location.search);
|
|
...
var
BasketID = Number(urlParams.get('BasketID')),
|
|
...
CustomerID = Number(urlParams.get('CustomerID')),
|
|
...
...
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) {
|
|
...
...
...
});
}
basketsIds.push(BasketID);
|
|
...
localStorage.setItem('basketsIds', JSON.stringify(basketsIds));
|
|
...
...
const
d = window.atob(h),
|
|
...
...
...
CustomerID = o.CustomerID;
|
|
...
}
function deleteCookies(domain) {
|
|
...
var cookies = document.cookie.split(';');
|
|
...
for (var i = 0; i < cookies.length; 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(".{{DominioDaLoja}}");
document.getElementById('form').submit();
|
|
...
...
...
...
...
...
...
 Image Added
|
...
...
...
- substitua
{{UrlDaLoja}} pelo domínio correto do site (com ou sem “www”), conforme configurado para acesso público. - Na linha 77, substitua
{{DominioDaLoja}} pelo domínio do site sem “www”.
|
|
| Painel |
|---|
| borderColor | #EBEBEB |
|---|
| titleColor | #FFF |
|---|
| titleBGColor | #2C004B |
|---|
| title | Adicionando o template |
|---|
|
...
| à Landing Page Checkout Redirect |
|
Com a rota |
...
...
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
- 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
|
...
...
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
Você irá localizar a div "siteStructure", e ao expandir, procurara o title "Página livre":
Image Removed
Selecionando a "Página livre", no menu "Style", localizará o display: none; e irá desmarca-lo:
Image Removed
Após desmarca-lo, repare que aparecerá uma nova opção em branco:
...
- clique em Selecionar.
 Image Added
Ajustando o layout na estrutura da página - No campo Estrutura, localize o tema oculto Página livre.
- Para exibi-lo, inspecione a página e encontre o campo com display: none.
- Desmarque essa opção.
- Será exibida uma nova opção em branco.
- Selecione-a e clique
|
...
Image Removed
...
- em Salvar.
 Image Added
| Dica |
|---|
Após concluir essas configurações, o Checkout Redirect estará habilitado e pronto para uso. |
|