Índice

Como utilizar

Personalização

Personalização avançada

Coletando os dados e enviando pelo Whatsapp

Como utilizar

O Carrinho de Compras é a extensão número 6 do Interago. Ela utiliza o localStorage do navegador para gerenciar uma lista de produtos.

DEMO: https://componentes.interago.com.br/catalogo/index

O carrinho é inserido na página por meio da tag script, preferencialmente ao final da página, conforme o código abaixo:

V 2.0.1 - 23/03/2023  - aprimoramentos na interface e css

Adicionado o cálculo de fretes.

🚚 O campo para estimativas e seus resultados aparece automaticamente caso o script shipping.js esteja presente na página. 

V 2.0 - 14/02/2023  - aprimoramentos na interface e css

<script src="https://www.interago.com.br/App/Extensions/6/tag/cart2.js" loading="lazy"></script>

V 1.0 - primeiro protótipo

<script src="https://www.interago.com.br/App/Extensions/6/tag/cart.js" loading="lazy"></script>

Após inserir o script é necessário inicializar o carrinho, conforme o código abaixo:

<script id="iCartScriptSource" src="https://www.interago.com.br/App/Extensions/6/tag/cart2.js" loading="lazy"></script><script>   let cart = new Cart();    cart.mainEvents();</script>

Com o código acima o carrinho padrão está pronto para receber produtos. O carrinho funciona basicamente com eventos de clique em divs com classes e atributos específicos.

Inserção em HTML para um link se tornar um produto do carrinho:

<a class="cartAddProduct cartPopupView" cartitemid="ID" cartitemname="Título" cartitemimage="URL" cartitemlink="URL" cartitemprice="0.00" cartaddlimit="N">adicionar</a>

O código acima utiliza as classes cartAddProduct e cartPopupView para iniciar os eventos que coletam:

1. cartitemid: código do produto para a loja (id, sku, mpn...)
2. cartitemname: título do produto e como será descrito no carrinho
3. cartitemimage: url completa da imagem, desde o https://
4. cartitemlink: url completa do link para o produto, desde o https://, este link é usado dentro do carrinho
5. cartitemprice: preço do produto, com 2 casas decimais conforme moeda
6. cartaddlimit: limite de unidades que podem ser inseridos por produto

Veja abaixo um exemplo de como chamar os itens no Layout do catálogo em PHP (desatualizado):

<a style="cursor:pointer;" class="cartAddProduct cartPopupView" cartItemId="'.$product['id'].'" cartItemName="'.$product['title'].'" cartItemImage="'.$productImg.'" cartItemLink="https://'.$mainData['siteDomain'].$mainData['configPath'].'/'.$product['url'].'" cartItemPrice="'.$product['price'].'" cartAddLimit="5">adicionar</a>

veja outro exemplo, mas utilizando a chamada assíncrona de produtos com JS no Layout do catálogo (desatualizado):

<a style=\'cursor:pointer;\' class=\'cartAddProduct cartPopupView\' cartItemId=\'"+product.id+"\' cartItemName=\'"+product.title+"\' cartItemImage=\'"+product.img+"\' cartItemLink=\'https://'.$mainData['siteDomain'].$mainData['configPath'].'/"+product.url+"\' cartItemPrice=\'"+product.price+"\' cartAddLimit=\'5\'>adicionar 🛒</a>

⚠️ VERSÃO ATUALIZADA DO LAYOUT PARA LOJAS VIRTUAIS COM DESCONTOS E VARIAÇÕES COM PREÇOS

<a class="cartAddProduct cartPopupView" cartitemid="'.$productData['productSKU'].'" cartitemname="'.$productData['productTitle'].'" cartitemimage="'.str_replace('w_0_', 'w_100_', $productImg).'" cartitemlink="'.$mainData['configPath'].'/item/'.$productData['productUrl'].'" cartitemprice="'.$productPrice.'" cartaddlimit="5" originalProductPrice="'.$productData['productPrice'].'" discountedProductPrice="'.$productPrice.'">Adicionar na sacola</a>

Veja um exemplo de HTML gerado:

<a style="cursor:pointer;" class="cartAddProduct cartPopupView" cartitemid="108024" cartitemname="Tulum no México - Quintana Roo" cartitemimage="https://cdn.interago.com.br/img/jpg/w_400_q_8/1/mc/produtos/praias/tulum" cartitemlink="https://componentes.interago.com.br/catalogo/tulum-no-mexico-quintana-roo" cartitemprice="3200.00" cartaddlimit="5">adicionar</a>

Personalizando o carrinho

Forma 1:

O carrinho é um script de JS, então pode-se copiar o script e fazer as alterações necessárias para o projeto. Não há backend. ⚠️ Essa é a forma menos recomendada pois o script não será atualizado com correções e novas funcionalidades.

Forma 2:

Todas as variáveis do objeto utilizadas no construtor podem ser substituídas, conforme exemplo:

⚠️ Como as variáveis estão com strings sem conteúdo, o formato padrão é invocado.

<script id="iCartScriptSource" src="https://www.interago.com.br/App/Extensions/6/tag/cart.js" loading="lazy"></script><script>let cart = new Cart(options, label, css, buttonHTML, cartItemHTML, cartSum, cartActionButtons);let options = '';let labels = '';let css = '';let buttonHTML = '';let cartitemHTML = '';let cartSum = '';let cartActionButtons = '';let cartStructure = '';let style = '';cart.mainEvents(options, labels, css, buttonHTML, cartItemHTML, cartSum, cartActionButtons, cartStructure, style);</script>

Examinando cada parâmetro da função

options: são opções gerais. Atualmente há 2 itens. openCartOnAdd para abrir o carrinho sempre que um item é adicionado e alwaysShowCart para exibir o botão fixo do carrinho. Ambos iniciam com true. Exemplo abaixo com o valor padrão:

let options = {"openCartOnAdd" : true, "alwaysShowCart" : false};

labels: Valores utilizados para os textos do carrinho. Veja os valores padrão abaixo:

let labels = {"cartButton" : "Ver Sacolar", "cartInnerTitle" : "Carrinho", "truncate" : "Limpar", "finish" : "Finalizar pedido", "close" : "Continuar comprando", "viewProduct" : "Ver", "limit" : "O limite é ", "empty" : "Nenhum item ainda...", "truncate" : "Limpar", "invalid" : "Valor inválido", "total" : "<span class=\'sumCartLabel\'>Valor total</span> <small>R$</small>", "currency" : "R$" }

css: Valores utilizados para tamanhos e cores da disposição padrão do carrinho. Valores padrão abaixo:

let css = { "backgroundColor" : "#fff", "elementsColor" : "#055ed0", "elementsColorHover" : "#044495", "fontColor" : "#fff", "fontColorHover" : "#fff", "errorColor" : "#f95548", "popupFontColor" : "#333", "popupDetailsColor" : "#666", "popupPriceColor" : "#055ed0", "boxShadow" : "0 10px 10px black", "overvalyColor" : "#09090973", "overlayBlur" : "5px", "desktopSize" : "600px", "mobileSize" : "320px" }

Estes são os campos para personalização padrão. Abaixo são as configurações avançadas que podem anular o css padrão, assim como as labels.

Personalização avançada

A peronalização avançada envolve HTML e suas alterações invibializam o uso das labels e css. ⚠️  Não remove as classes padrão, utilize novas classes para customização.

buttonHTML: HTML do botão padrão e container que abre o carrinho. Veja o código padrão abaixo:

let buttonHTML = ` <div id="callCartButtons"> <div class="cartPopupView" id="openCartPopupButton"><span id="openCartPopupLabel"></span><span id="openCartPopupButtonQtd"></span></div> </div> <div id="cartPopupView"></div> `;

cartItemHTML:  O HTML que compõe a linha de cada produto no carrinho. É necessário que as posições de cada elemento seja mantida. Essa é a função mais avançada. Valores padrões utilizados:

cartItemHTML = [` <div class="row productPopupCartRow" data-id="`, `"> <div class="col-3 col-sm-3"> <a href="`, `"> <img loading="lazy" src="`, `" class="productPopupCartImg"/> </a> </div> <div class="col-6 col-sm-6 cartProductTitle"> <a href="`, `"> `, ` <span class="productPopupCartDetails">`, `</span> <span class="productPopupCartPrice">` , `</span> </a> <div class="cartButton cartRemoveProduct" data-id="`, `">remover</div> <span class="cartProductTitleErrorLabel" data-id="`, `"></span> </div> <div class="col-3 col-sm-3"> <div class="cartUpdateItemsRow"> <div class="cartUpdateItemsRemove"> <span class="cartButton cartUpdateProduct" data-id="`, `" data-act="remove"></span> </div> <div class="cartUpdateItemsQtd"> <input type="number" class="cartQtdLabel" data-act="change" data-id="`, `" value="`, `"> </div> <div class="cartUpdateItemsAdd"> <span class="cartButton cartUpdateProduct" data-act="add" data-id="`, `"></span></div> </div> </div> </div> </div> `];

cartSum: É o HTML da linha que faz os cálculos de preço dentro do carrinho. Valores padrão:

let cartSum = `<div class="row sumPrice"><div class="col-12"><div id="sumCartPrices"></div></div></div>`;

cartActionButtons: É o HTML da linha com os botões de limpar o carrinho ou finalizar o pedido no layout padrão. Valores padrão:

let cartActionButtons = ` <div class="row actionButtonsOnPopupCart"> <div class="col-6"><div class="cartButton cartTruncate">`+this.labels.truncate+`</div></div> <div class="col-6"><div class="cartButton cartFinishShop" id="cartFinishShopButton">`+this.labels.finish+`</div></div> </div> `;

cartStructure: HTML responsável pelo overlay (proteção para não clicar nos demais elementos e composição dos itens da janela do carrinho. Os valores padrão utilizam labels, exemplo abaixo com labels alteradas manualmente:

let cartStructure = `<div id="cartPopupOverlay"></div> <div id="cartPopupModal"> <div id="closeCartPopupModal" class="cartButton">`+this.labels.close+`</div> <div id="cartLabel"><h2 id="cartLabelH2">`+this.labels.cartInnerTitle+`</h2> <hr /> <div id="cartPopupModalContent"></div> </div>`;

style: É todo o estilo utilizado no carrinho. Utiliza todos os valores do parâmetro css. Exemplo com valores já interpretados abaixo:

this.style = `<style> #cartPopupOverlay {position: fixed;top: 0;right: 0;bottom: 0;left: 0;cursor: pointer;background-color: #09090973;z-index: 20;width: 5000px;backdrop-filter: blur(5px);}.cartPopupIn {-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;top: 0;position: fixed;height: 100%;}.closePopupModalOut {height:100%;-webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}.productPopupCartRow {align-items:center;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #dedede;}.productPopupCartImg {object-fit:fill;width:100%;min-height:64px;border-radius:10px;}.cartButton {background-color:#055ed0;color:#fff;display: inline-block;padding: 5px 10px;border-radius: 5px;cursor: pointer;transition:0.3s ease;}.cartButton:hover {background-color:#044495;color:#fff;}.cartQtdLabel {width: 30px;text-align: center;padding: 0;border: none;background-color: #fcfcfc;-webkit-appearance:none;margin: 0;-moz-appearance: textfield;}.productPopupCartDetails {color:#666;display:block }.productPopupCartPrice {color:#055ed0;display:block;font-size:13px;font-weight:normal;margin-top:2px;}.actionButtonsOnPopupCart {text-align:center;}#openCartPopupButton {position: fixed;top: 0;right: 0;margin: 10px;background-color:#055ed0;color:#fff;padding: 10px 30px;box-shadow: 0 10px 10px #dedede;border-radius:10px;font-size: 15px;cursor:pointer;transition:0.3s ease;}#openCartPopupButton:hover {background-color:#044495;color:#fff;}#openCartPopupButtonQtd {font-size: 11px;background-color:#fff;color:var(--primary);padding: 3px 5px 2px 5px;margin-left: 10px;border-radius: 5px;font-weight: bold;margin-top: -10px;}#sumCartPricesLabel {font-size:16px;color:undefined;}#sumCartPricesValue {font-size:18px;font-weight:bold;}#cartFinishShopButton {width:90%;}.cartUpdateItemsRow {grid-gap:0px;}.cartUpdateItemsRemove {text-align:right;}.cartUpdateItemsQtd {text-align:center;}.cartRemoveProduct {font-size:12px;padding:2px 10px;margin-top:5px;}.cartProductTitleErrorLabel {color:#f95548;display:inline-block;}@media only screen and (max-width: 600px) {#cartPopupModal {width:320px;}.productPopupCartImg {min-height:48px;}.cartProductTitle {font-size:12px;}.cartQtdLabel {padding:0 5px;font-size:13px;}.cartUpdateProduct {padding:3px 7px;}.productPopupCartRow {grid-gap:10px;}}#openCartPopupButton #openCartPopupLabel {display: none;}#openCartPopupButton.cartPopupView {position: fixed;bottom: 10px;top: auto;right: 10px;margin: auto;background-color: var(--primary);color: #fff;padding: 10px 10px;box-shadow: 0 10px 10px rgb(0 0 0 / 5%);border-radius: 10px;font-size: 15px;cursor: pointer;transition: 0.3s ease;z-index: 999;display: flex;align-items: center;}div#openCartPopupButton:before {content: "";background-image: url("https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/icone-carrinho.svg");background-repeat: no-repeat;background-size: contain;height: 25px;width: 25px;display: inline-block;}span#openCartPopupButtonQtd {font-size: 11px;background-color: #fff;color:var(--primary);padding: 3px 5px 2px 5px;margin-left: 10px;margin-top: 0px;border-radius: 5px;font-weight: bold;}div#cartPopupView {z-index: 999;-webkit-animation: none;animation: none;width: 100%;right: -100vw;transition: all 0.3s ease-in-out;display: block;top: 0;position: fixed;height: 100%;}div#cartPopupView.cartPopupIn {right: -65vw;}div#cartPopupView.cartPopupIn.closePopupModalOut {-webkit-animation: none;animation: none;right: -100vw;}div#cartPopupModal {position: relative;z-index: 60;width: 100%;max-width: 35vw;height: 100%;margin: 0;background-color: #fff;padding: 15px;bottom: 0;right: 0;overflow-y: auto;scrollbar-width: thin;transition: all 0.6s ease-in-out 0.5s;box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;}div#cartPopupModal::-webkit-scrollbar {height: 4px;width: 4px;}div#cartPopupModal::-webkit-scrollbar-thumb {background: #888;border-radius: 10px;}div#cartPopupModal::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 10px;}div#cartPopupModal .cartHeaderInfo {display: flex;justify-content: space-between;align-items: center;}div#cartPopupView #cartPopupOverlay {opacity: 1;transition: all 0.3s ease-in-out;width: 100%;}div#cartPopupView.closePopupModalOut #cartPopupOverlay {opacity: 0;}div#cartLabel h2#cartLabelH2 {font-size: 16px;display: flex;align-items: center;gap: 10px;font-weight: 400;margin: 5px 0px;}div#cartLabel #cartLabelH2:before {content: "";background-image: url("https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/icone-carrinho.svg");background-repeat: no-repeat;background-size: contain;height: 16px;width: 16px;display: inline-block;filter: brightness(0);}div#cartPopupModal .cartButton {background-color: var(--primary);padding: 10px;}div#cartPopupModal .cartButton:hover {transform: scale(1.05);}div#cartPopupModal #closeCartPopupModal {background-color: transparent;box-shadow: none;color: #fff;padding: 5px;border-radius: 20px;cursor: pointer;transition: 0.3s ease;overflow: hidden;width: 30px;height: 30px;display: flex;gap: 20px;align-items: center;justify-content: center;flex-wrap: wrap;position: relative;z-index: 999;transform: scale(0.7);transition: all 0.3s ease-in-out;}div#cartPopupModal #closeCartPopupModal:hover {transform: scale(0.8);}#closeCartPopupModal {order: 3;}#cartLabel {order: 2;}.cartTruncate {order: 1;}div#closeCartPopupModal:before {border-style: solid;border-width: 0.2em 0.2em 0 0;content: "";border-radius: 1px;display: inline-block;height: 12px;position: relative;transform: rotate(45deg);vertical-align: top;width: 12px;top: 3px;left: -2px;filter: invert(27%) sepia(92%) saturate(3822%) hue-rotate(198deg) brightness(99%) contrast(101%);}div#cartPopupModalContent {padding: 10px;background-color: #f9f9f9;border-radius: 10px;margin-top: 10px;font-size: 14px;}div#cartPopupModal .cartButton.cartRemoveProduct {background-color: transparent;color: #888;font-size: 12px;padding: 0px;margin-top: 5px;width: 100%;max-width: 90px;border-radius: 4px;display: flex;flex-wrap: wrap;align-items: center;justify-content: flex-start;gap: 5px;text-transform: capitalize;}.cartButton.cartRemoveProduct:before {content: "";background-image: url("https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/icone-lixeira.svg");background-repeat: no-repeat;filter: invert(51%) sepia(0%) saturate(206%) hue-rotate(150deg) brightness(106%) contrast(93%);background-size: contain;height: 14px;width: 14px;display: inline-block;position: relative;}div#cartPopupModal .productPopupCartPrice {color: #1e1e1e;display: block;font-size: 16px;font-weight: 600;margin-top: 2px;}div#cartPopupModal .cartProductTitle a {text-decoration: none;color: #333;font-size: 14px; line-height:20px;}div#cartPopupModal .cartButton.cartUpdateProduct {border-radius: 50px;padding: 0px;height: 21px;width: 21px;display: flex;justify-content: center;box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;align-items: center;transform: scale(1);background-color: transparent;color: #1e1e1e;}div#cartPopupModal .cartButton.cartUpdateProduct:hover {transform: scale(1.05);}div#cartPopupModal .cartUpdateItemsRemove .cartUpdateProduct:before {content: "";background-image: url("https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/icone-subtracao.svg");background-repeat: no-repeat;filter: invert(1) brightness(0.6);background-size: contain;background-position: center;height: 7px;width: 7px;position: relative;}div#cartPopupModal .cartUpdateItemsAdd .cartUpdateProduct:before {content: "";background-image: url("https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/icone-soma.svg");background-repeat: no-repeat;filter: invert(1) brightness(0.6);background-size: contain;background-position: center;height: 7px;width: 7px;position: relative;}div#cartPopupModal .cartUpdateItemsRow {border: solid 1px #dedede;border-radius: 25px;max-width: 150px;margin-left: auto;padding: 5px 0px 4px 0;display: flex;gap: 0px;justify-content: center;transition: all 0.3s ease-in-out;cursor: pointer; align-items:center; background-color:#fefefe;}div#cartPopupModal .cartUpdateItemsRow:hover {border-color: var(--primary);}div#cartPopupModal .cartProductTitleErrorLabel {color: #f95548;display: inline-block;font-size: 13px;}div#cartPopupModal p#labelEmptyCart {margin: 0px;font-size: 14px;}div#cartPopupModal .sumPrice {margin-bottom: 10px;padding-bottom: 10px;border-bottom: 1px solid #dedede;}div#cartPopupModal .sumPrice small {transform: translateY(2px) translateX(-5px);}div#cartPopupModal #sumCartPricesLabel {font-size: 14px;color: #1e1e1e;position: relative;display: flex;justify-content: space-between;align-items: center;}div#cartPopupModal #sumCartPricesValue {font-size: 18px;font-weight: bold;color: #1e1e1e;}div#cartPopupModal #sumCartPricesLabel .sumCartLabel {width: 100%;}div#cartPopupModal .cartButton.cartTruncate {font-size: 13px;background-color: transparent;color: var(--primary);display: flex;gap: 5px;align-items: center;padding: 5px 0px;}div#cartPopupModal .cartButton.cartTruncate:before {content: "";background-image: url("https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/icone-lixeira.svg");background-repeat: no-repeat;filter: invert(36%) sepia(83%) saturate(5457%) hue-rotate(198deg) brightness(97%) contrast(101%);background-size: contain;height: 14px;width: 14px;display: inline-block;position: relative;}div#cartPopupModal .actionButtonsOnPopupCart {text-align: unset;}div#cartPopupModal .actionButtonsOnPopupCart .col-6:nth-child(2) {text-align: right;}div#cartPopupModal .cartButton#cartFinishShopButton {text-align: center;width: 100%;}div#cartPopupModal .productPopupCartImg {object-fit: contain;width: 100%;min-height: 64px;max-height: 165px;border-radius: 10px;}div#cartPopupModal .productPopupCartDetails p {margin: 0px;font-size: 12px; line-height:14px; font-style: italic;}@keyframes fadeInItem {100% {transform: translatex(0px);opacity: 1;}}@media (min-width: 1920px) {div#cartPopupModal:before {max-width: 34.1vw;}}@media (min-width: 1300px) and (max-width: 1920px) {div#cartPopupModal:before {max-width: 33.7vw;}}@media (min-width: 768px) and (max-width: 992px) {div#cartPopupView.cartPopupIn {right: -50vw;}div#cartPopupModal {max-width: 50vw;}div#cartPopupModal:before {max-width: 48vw;}}@media (max-width: 768px) {div#cartPopupView.cartPopupIn {right: 0vw;}div#cartPopupModal {max-width: 100vw;}div#cartPopupModal:before {max-width: 100vw;}}#shippingEstimativeContent {margin-top:30px;}#shippingCartEstimativesInput {width: 50%;font-size: 15px;display: inline-block;border: 1px solid #dedede;border-radius: 5px;padding: 4px;}#shippingCartEstimativesInputButton {background-color: #055ed0;color: #fff;padding: 5px 5px;box-shadow: 0 2px 2px #dedede;border-radius: 5px;font-size: 14px;cursor: pointer;transition: 0.3s ease;text-align: center;width: 45%;display: inline-block;max-width: 100px;}#shippingCartEstimativesGeoLocation {cursor:pointer;font-size: 12px;color: #055ed0;display:block;}.shippingCartResultWireFrame {width: 100%;height: 10px;background-color: #dfdfdf;border-radius: 5px;margin-top: 10px;}.shippingCartResultHalfWireFrame {width:30%;height: 10px;background-color: #dfdfdf;border-radius: 5px;margin-top: 10px;}.shippingCartEstimativeResultContent {font-size: 13px;color: #666;margin-bottom: 10px;}#shippingCartEstimativesResult {margin-top:10px;}.shippingCartEstimativeResultPrice strong{display:inline-block;}</style>`;

Coletando os dados do carrinho - envio pelo Whatsapp

Para dar o próximo passo e enviar o pedido por Whatsapp, e-mail ou para algum serviço de pagamento é necessário coletar os dados do carrinho. 

O script do carrinho invoca uma função chamada cartFinishShopCallback quando a página recebe um clique em um elemento que contém a classe cartFinishShop.

veja abaixo um exemplo de código  abaixo completo para o carrinho funcionar e mostrar os produtos no console do navegador ao finalizar um pedido:

<script id="iCartScriptSource" src="https://www.interago.com.br/App/Extensions/6/tag/cart.js" loading="lazy"></script>

<script>

let cart = new Cart();cart.mainEvents();

function cartFinishShopCallback(e) {

console.log(e);

}

</script>

Veja um código de exemplo conforme o modelo para enviar os produtos pelo Whatsapp:

<script id="iCartScriptSource" src="https://www.interago.com.br/App/Extensions/6/tag/cart.js" loading="lazy"></script>

<script>

let cart = new Cart();cart.mainEvents();

function cartFinishShopCallback(e) {

 if(e.length > 0) { var message = `Novo pedido pelo site!%0a`; var total = 0; var value = 0.00;

 e.reverse().forEach(i => {

 console.log(e);

 total = total + i.qtd;  value = value + (parseFloat(i.price).toFixed(2)*i.qtd);

 let price = i.price; price == \'0.00\' ? price = \'grátis\' : price = \' por R$\'+price.replace(\'.\', \',\')+\' cada\';

 message += `• `+i.qtd+`x `+encodeURIComponent(i.name)+` `+price+` cada %0a`;  });

 message += `%0a Total de unidades: `+total+`%0a Valor Total R$`+value.toFixed(2).replace(".", ",");  var whatsappLink = `https://wa.me/5517992080166?text=`+message;

 var link=document.createElement("a"); link.id = \'finishShopLinkElement\';  link.href= whatsappLink; link.setAttribute("target", "_blank");

 link.click();

 } else { //empty cart }

}

</script>

Enviar os itens do carrinho por e-mail

É necessário seguir a formatação conforme o código abaixo para que o scripts visits.php formate corretamente e envie por e-mail como uma tabela.

Veja o exemplo na Physicus

Script no globalScripts

<script>

 const cartButtonIdata = document.querySelector('#formSendButtonModal').getAttribute('idata');

 function getProducts() { const products = JSON.parse(localStorage.getItem('products')) || []; const ul = document.createElement('ul');

 var cartIdata = cartButtonIdata; var itemQtd = 1; products.forEach(product => { const li = document.createElement('li'); const input = document.createElement('input'); input.type = 'text'; productCartId = product.id.replace(/\s+/g, '-').toLowerCase(); input.id = productCartId; input.name = 'cartitem '+itemQtd; input.value = '|||'+product.name.trim()+'|||'+product.qtd+'|||'+product.img+'|||'+product.id; /* input.checked = true; */

 cartIdata += `, ${productCartId}`;

 const label = document.createElement('label'); label.setAttribute('for', productCartId);

 const p = document.createElement('p'); p.textContent = product.name.trim();

 const img = document.createElement('img'); img.src = product.img; img.alt = `Imagem de ${product.name.trim()}`;

 label.appendChild(p); label.appendChild(img); li.appendChild(input); li.appendChild(label); ul.appendChild(li);

 itemQtd++;

 });

 document.querySelector('.formContainer .productCartItems').innerHTML = ''; document.querySelector('.formContainer .productCartItems').appendChild(ul);

 console.log(cartIdata);

 document.querySelector('#formSendButtonModal').setAttribute('idata', cartIdata); } // Get the modal /* var modal = document.getElementById("myModal");  if(modal) { */

 function openModal() {

 getProducts();

 var modal = document.getElementById("myModal");

 modal.style.display = "flex"; var span = document.getElementsByClassName("customModalClose")[0];  // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; }  // When the user clicks anywhere outside of the modal, close it /* window.onclick = function(event) { */ window.addEventListener('click', function(event) { if (event.target == modal) { modal.style.display = "none"; } }); } </script>