Como inserir um pop-up da LGPD na sua Loja Integrada | Social UP

Como inserir um pop-up da LGPD na sua Loja Integrada

A partir do ano de 2021, está sendo exigido para websites e lojas virtuais informações a respeito das Leis Gerais de Proteção de Dados (Vulgo LGPD). Para isso nós trouxemos para você uma forma interessante de adequar seu site e acreditamos que você vai gostar, pois é fácil e você ainda consegue dar uma personalizada legal.

Como vocês sabem tem vídeo para isso explicando passo a passo e vou deixar ele aqui. Não tem segredo. Aos apressados, basta copiar e colar. (e cuidar pra não fazer bobagem - risos)





Aqui estão os códigos do vídeo. É importante você observar bem o que é CSS, pois existe um campo específico para isso na sua loja, bem como o Javascript, pois existe um campo exclusivo para ele também. Já aconteceu de inverterem os campos e me perguntarem o que aconteceu, na mesma hora eu já percebo a falta de atenção.


/* 
    Isso é um exemplo de COMENTÁRIO.
    Preste atenção nos comentários, pois é onde você poderá/deverá alterar 
*/
  
  .box-cookies {
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: auto;
    display: flex;
    -webkit-border-radius: .3rem;
    -moz-border-radius: .3rem;
    border-radius: .3rem;
    padding: .5rem .8rem;
    background-color: #fff; /* Altere a cor de fundo do balão de LGPD */
    -webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.15);
    z-index: 1000;
    max-width: 50%;
    margin: 0 auto;
  }
  
  .box-cookies button {
    background: #000; /* Altere a cor de fundo do botão */
    color: #fff; /* Altere a cor do texto do botão */
    padding: 1rem;
    border: none;
    margin-left: 10px;
    border-radius: 7px;
    font-weight: bold;
  }
  
  .box-cookies > p > a {
    color: #000 !important; /* Altere a cor do link do texto */
  }
  
  .box-cookies p {
    font-size: 14px;
    color: #212121; /* Altere a cor do texto */
    line-height: 22px;
    margin-bottom: 0;
    align-self: center;
  }

  @media (max-width: 768px) {
    .box-cookies {
      display: block;
      width: 100%;
      max-width: 100%;
      left:0;
      bottom: 0;
      right:0;
    }
  
    .box-cookies p {
      font-size: 16px;
      line-height: 24px;
    }
  
    .box-cookies button {
      margin-top: 10px;
      width: 100% !important;
      margin-left:0;
    }
  }

Aqui está o Javascript. Nesse, são apenas 3 comentários. Se não sabe o que está fazendo não invente moda, sério! Se ficar com dúvidas, comenta aqui embaixo, manda um WhatsApp pra mim, mas se não estiver seguro em mexer em códigos, não vá sozinho.



var cookie_name = ''; // adicione aqui um nome para o cookie
var nome_empresa = ''; // adicione o nome da sua empresa aqui
var url_site = ''; // adicione a url do seu site com https aqui

$(document).ready(function() {
	checkCookie();
});

function getCookie(cname) {
	var name = cname + "=";
	var decodedCookie = decodeURIComponent(document.cookie);
	var ca = decodedCookie.split(';');
	for(var i = 0; i < ca.length; i++) {
		 var c = ca[i];
		 while (c.charAt(0) == ' ') {
		 c = c.substring(1);
		 }
		 if (c.indexOf(name) == 0) {
		 return c.substring(name.length, c.length);
		 }
	}
	return "";
}

function setCookie(cname,cvalue,exdays) {
	var d = new Date();
	d.setTime(d.getTime() + (exdays*24*60*60*1000));
	var expires = "expires=" + d.toGMTString();
	document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
	$('.box-cookies').remove();
}

function checkCookie() {
	var user = getCookie(cookie_name);
	if (!user) {
	   $('body').append('

' + nome_empresa + 'utiliza cookies e outras tecnologias semelhantes para melhorar a sua experiência, de acordo com a nossa Política de Privacidade e nossos Termos de uso e, ao continuar navegando, você concorda com estas condições.

'); } }

É importante salientar também que a Loja Integrada já implementou nas suas configurações (de forma bem básica, mas similar a essa). Tá, Eduardo, mas qual é a diferença? Em relação a código nenhuma. Em relação a personalização é bom utilizar essa, pois aí você não fica sobrescrevendo código para personalizar o que a Loja Integrada implementou.

É importante comentar também que a Tray desde janeiro de 2021 está com um aviso em todos os botões de checkout, ou seja, você não precisaria implementar esse código lá. Mas dá uma certa transparência de quem o usa.

Se você ficou até o fim, sabe que no vídeo eu falo de um site que cria a política de privacidade e termos de uso automaticamente, né!? Está aqui o link para você https://politicaprivacidade.com/ se você prestou atenção no vídeo já está esperto.

Gostou desse vídeo? quer mais conteúdos assim, siga-nos no canal, deixe seu like e acompanhe, pois nós só ficamos off um tempo, mas estamos só começando. Conte com a gente.

Postado originalmente em 26/05/2021

Atualizado em 24/09/2021

Deixe um comentário

O que você achou dessa postagem? Ficou com alguma dúvida, tem algo a acrescentar? Ficaremos muito felizes com o seu comentário. Apenas o seu nome e o comentário ficarão públicos, seu e-mail não será publicado.