Como podemos ajudar?

É possível realizar esse compartilhamento através de redes sociais, por e-mail e pelo WhatsApp.

Através de uma URL simples e amigável, seus clientes podem compartilhar o carrinho com seus amigos e familiares.

Na loja versão Desktop, é possível compartilhar pelo WhatsApp, Facebook, Twitter e por e-mail.

Na loja versão Mobile, o compartilhamento é feito através dos aplicativos que estão instalados no celular.

Seguem os passos para implantar este recurso na sua loja:

1º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM > pasta JS. Localize o arquivo store-lib.js e clique no ícone do lápis verde ao seu lado para editar.

Dentro da função var Cart$=(function(), altere a estrutura abaixo:

DE:

var sTopo="<div class='CartDesign-header'>";
      sTopo+="<div class='CartDesign-header-title'>";
        sTopo+="<a style='color:#fff;' href='"+ FCLib$.uk("url-add-product") +"'>"+ rk("side-cart-shopping-cart-title") +"";
        if(iItensCesta>0)sTopo+="  [ <span>"+ iItensCesta +" "+ ((iItensCesta>1)?""+ rk("side-cart-shopping-items") +"":""+ rk("side-cart-shopping-item") +"") +"</span> ]";
        sTopo+="</a>";
      sTopo+="</div>";
      sTopo+="<div class='CartDesign-header-close'>";
        sTopo+="<img src='"+ FC$.PathImg +"icon-bot-close-cart.svg?cccfc=1' alt='close cart' onclick='Cart$.fnCloseCartDesign();' style='cursor:pointer;'>";   
      sTopo+="</div>";
    sTopo+="</div>";

PARA:

var sTopo="<div class='CartDesign-header'>";
if(iItensCesta>0)sTopo+="<a onclick='Cart$.fnWebShareAPICart()' style='margin-left:15px;cursor:pointer;' title='Compartilhe esse carrinho de produtos'><svg width=24 height=24 viewBox='0 0 24 24'><path d='M0 0h24v24h-24z' fill='none'/><path d='M18 16.08c-.76 0-1.44.3-1.96.77l-7.13-4.15c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7l-7.05 4.11c-.54-.5-1.25-.81-2.04-.81-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z' fill='#fff'/></svg></a>";
sTopo+="<div class='CartDesign-header-title'>";
sTopo+="<a style='color:#fff;' href='"+ FCLib$.uk("url-add-product") +"'>CARRINHO";
if(iItensCesta>0)sTopo+="  [ <span>"+ iItensCesta +" "+ ((iItensCesta>1)?"itens":""+ "item" +"") +"</span> ]";
sTopo+="</a>";
sTopo+="</div>";
sTopo+="<div class='CartDesign-header-close'>";
sTopo+="<img src='"+ FC$.PathImg +"icon-bot-close-cart.svg?cccfc="+ "1" +"' alt='close cart' onclick='Cart$.fnCloseCartDesign();' style='cursor:pointer;'>";  
sTopo+="</div>";
sTopo+="</div>";    
sTopo+="<div id='CartDesign-header-tooltip'></div>";

2º Passo

No mesmo arquivo e acima da função fnUpdateCartTop, inclua o código abaixo:

/* Share Tooltip */
function fnShowTooltip(uurlCart){
  var oCartDesignTooltip=document.getElementById("CartDesign-header-tooltip"),
      sEncodedURL=encodeURIComponent(uurlCart),
      aIcons=["icon-share-cart-whatsapp.svg","icon-share-cart-twitter.svg","icon-share-cart-facebook.svg","icon-share-cart-email.svg"],
      aService=["WhatsApp","Twitter","Facebook","e-mail"],
      aURL=["https://wa.me/?text="+ encodeURIComponent( "Olha esse carrinho" +": ") + sEncodedURL,
            "https://twitter.com/share?text="+ encodeURIComponent("Olha esse carrinho") +"&url="+ sEncodedURL,
            "https://www.facebook.com/share.php?u="+ sEncodedURL,
            "mailto:?subject="+ encodeURIComponent("Olha esse carrinho") +"&body="+ sEncodedURL];
  for(var i=0;i<aIcons.length;i++)oCartDesignTooltip.innerHTML+="<a title='"+ "Compartilhe esse carrinho usando" +" "+ aService[i] +"' href="+ aURL[i] +" target=_blank><img src='"+ FC$.PathImg + aIcons[i] +"' height=25 width=25></a>";
  oCartDesignTooltip.style.display="block";
  /* Close Tooltip */
  document.addEventListener("click",function(event){
    var clickTooltip=oCartDesignTooltip.contains(event.target);
    if(!clickTooltip){
      oCartDesignTooltip.style.display="none";
      oCartDesignTooltip.innerHTML="";
    }
  });
}

function fnWebShareAPICart(){
  FCLib$.fnAjaxExecFC(FCLib$.uk("url-cart-list"),"format=1&n=500&uurl=1&order=1",false,fnGetURLShare);
}

function fnGetURLShare(oHTTP){
  var sHTTP=oHTTP.responseText;
  if(sHTTP!=""){
    var oJSON=null;
    try{oJSON=JSON.parse(sHTTP);}
    catch(e){console.log("invalid JSON from /cartlist");}
    if(oJSON){
      if(oJSON.msg!=undefined){if(oJSON.msg!=""){console.log(oJSON.msg)}}
      else{
        var uurlCart=oJSON.uurlCart;
        if(uurlCart!=='undefined'){fnWebShareAPI(uurlCart)}
      }          
    }
  }
  else{console.log("blank response from /cartlist");}
}

function fnWebShareAPI(uurlCart){
  if(navigator.share && window.matchMedia("(max-width: 1023px)").matches){
    navigator.share({
      title:"Indicação de carrinho",
      text:"Olha esse carrinho: ",
      url:uurlCart,
    })
    .then(()=>console.log("Successful share"));
  }
  else fnShowTooltip(uurlCart);
}

3º Passo

No bloco de return, altere a estrutura abaixo:

DE:

return{
  fnShowCartCheckout:fnShowCartCheckout,
  fnRemoveProd:fnRemoveProd,
  fnGetShippingValueCart:fnGetShippingValueCart,
  fnCloseCartDesign:fnCloseCartDesign,
  fnChangeQtdProd:fnChangeQtdProd,
  fnChangeFrete:fnChangeFrete,
  clickEnterCEP:clickEnterCEP,
  fnGoCupom:fnGoCupom

PARA:

return{
  fnShowCartCheckout:fnShowCartCheckout,
  fnRemoveProd:fnRemoveProd,
  fnGetShippingValueCart:fnGetShippingValueCart,
  fnCloseCartDesign:fnCloseCartDesign,
  fnChangeQtdProd:fnChangeQtdProd,
  fnChangeFrete:fnChangeFrete,
  clickEnterCEP:clickEnterCEP,
  fnGoCupom:fnGoCupom,
  fnWebShareAPICart:fnWebShareAPICart

Após as alterações, clique no botão Salvar.

4º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM. Localize o arquivo lojasite.css e clique no ícone do lápis verde ao seu lado para editar.

No final do arquivo, inclua os estilos abaixo:

/* Tooltip Cart */
#CartDesign-header-tooltip{background:#d9e8f8;position:absolute;top:45px;padding:5px 10px;margin: 0 0 0 10px;border-radius:2px;display:none;}
#CartDesign-header-tooltip a{padding:0 10px;}
#CartDesign-header-tooltip::before{content:".";width:0px;height:0px;display:flex;justify-content:center;align-items:center;position:relative;left:0px;top:-9px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #d9e8f8;color:#d9e8f8;}

Após as alterações, clique no botão Salvar.

5º Passo

Clique aqui para baixar as imagens utilizadas pelo recurso. Envie este arquivo para a pasta IMAGES da loja, através do gerenciador de arquivos.

Para testar, acesse a loja, insira produtos no carrinho lateral e clique o ícone de compartilhamento.