✅ Scripts validados pelo time LI

Neste espaço compartilharemos scripts, tutoriais e dicas úteis para dar aquele up em suas lojas! Conteúdos criados por lojistas e pela Loja Integrada, todos validados pela equipe técnica da LI para garantir funcionalidade e performance! #boravender

8 curtidas

Inserir botão do Instagram e Facebook na loja (acima do botão nativo do whatsapp)

image

Local publicação: Rodapé
Página de publicação: Todas as páginas
Tipo: HTML

<!-- FACEBOOK -->
  <a href="https://www.facebook.com/lojaintegrada" style="position:fixed;width:72px;height:72px;bottom:190px;right:16px;background-color:#385898;color:#FFF;border-radius:50px;text-align:center;font-size:30px;box-shadow: 1px 1px 2px #888;
  z-index:1000;" target="_blank">
    <i style="margin-top:22px" class="fa fa-facebook"></i>
    <!-- FIM FACEBOOK -->
<!-- 2921a5be-9bf9-11ec-b909-0242ac120002 -->
    <!--INSTAGRAM-->
    <a href="https://www.instagram.com/lojaintegrada" style="position:fixed;width:72px;height:72px;bottom:290px;right:16px;background: #D6249F;background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%,#D6249F 60%,#285AEB 90%);;color:#FFF;border-radius:50px;text-align:center;font-size:30px;box-shadow: 1px 1px 2px #888;
  z-index:1000;" target="_blank">
      <i style="margin-top:22px" class="fa fa-instagram"></i>
      <!-- FIM INSTAGRAM -->

Substituir os links da Loja Integrada pelo Facebook e Instagram da sua loja.

8 curtidas

Remover barra superior da loja

Local publicação: Rodapé
Página de publicação: Todas as páginas
Tipo: CSS

/* REMOVER BARRA SUPERIOR */
/* 5c948784-9efd-11ec-b909-0242ac120002 */
.barra-inicial {
  display: none;
}
4 curtidas

Abrir recuperação de senha automaticamente quando o cliente errar a senha 2x

ezgif-1-b1250914a71

Local publicação: Rodapé
Página de publicação: Todas as páginas
Tipo: Javascript

$(window).ready(function(){
if($(".pagina-login .alert-danger.alert-geral:contains(senha)").length){
            $(".cadastro-logar .form-horizontal").attr("action", $(".cadastro-logar .form-horizontal").attr("action")+"?aviso=esqueceu-a-senha");
               /* 95e5b94a-9f0c-11ec-b909-0242ac120002 */
            if(window.location.href.indexOf("esqueceu-a-senha") != -1){
                $(".recuperar-senha").click();
            }
        }
    });

Créditos: Marcel (www.maretoa.com.br)

7 curtidas

Inserir cupom de desconto automático

ezgif-5-f635e574d51

Local publicação: Rodapé
Página de publicação: Página do carrinho
Tipo: Javascript

setTimeout(function(){ 
    $(function(){
                $.get( "https://"+window.location.host+"/carrinho/index", function(){
                    $.post( "https://"+window.location.host+"/carrinho/cupom/validar?cupom=primeiracompra", { cupom:"primeiracompra" }, function(){
                        /* c4b55f86-9f21-11ec-b909-0242ac120002 */
                        if ($('#cupom_desconto').attr('data-desconto-valor') === '0.0') {
                            window.location.href = "https://"+window.location.host+"/carrinho/index"
}
                    });
                });
    });
}, 1000);

Alterar o nome do cupom no script, em cupom=primeiracompra", { cupom:“primeiracompra” }

7 curtidas

Inserir botão voltar ao topo

2022-03-29_09h51_37

Local publicação: Rodapé
Página de publicação: Todas as páginas
Tipo: HTML

<style>
.back-to-top {
    color:black; /* alterar cor do botão */
    position: fixed;
    z-index: 999;
    bottom: 2rem; /* posição vertical: quanto maior, mais para cima */
    right: 1rem; /* posição horizontal: quanto maior, mais para esquerda */
    display:none;
}
.back-to-top:active, .back-to-top:focus, .back-to-top:hover {
    text-decoration: none;
    color:#afb3b0; /* alterar cor do botão quando o mouse estiver em cima ou mobile */    
}

.back-to-top i {
    font-size: 3em; /* alterar tamanho do botão */
}
</style>
<!-- 2f41fe4a-af21-11ec-b909-0242ac120002 -->
<script type="text/javascript">
$(document).ready(function(){
 $("body").append("<a href='#' class='back-to-top'><i class='fa fa-arrow-circle-up' aria-hidden='true'></i></a>"),
$(function toTop() {
     $(window).scroll(function() {
        $(this).scrollTop() > 400 ? $(".back-to-top").fadeIn() : $(".back-to-top").fadeOut()}), $(".back-to-top").click(function() {
        return $("html, body").animate({
            scrollTop: 0
        }, 900), !1})});        
    })
</script>
5 curtidas

Exibir Banners Full exclusivos para mobile.

No código abaixo, para cada banner em formato desktop, deve haver um banner equivalente em formato mobile, sem exceção, é necessário ter a mesma quantidade de banners desktop e mobile. Utilize quantos forem necessários copiando o código e modificando o número que aparece em parênteses (1, 2, 3, etc).

Se houver link de redirecionamento nas imagens, é preciso respeitar a mesma ordem dos banners no painel e no código abaixo para os links fazerem o redirecionamento para a página correta de acordo com o banner.

Suba o banner mobile no Gerenciador de Arquivos do painel (tutorial), e copie a URL gerada da imagem, substituindo no código abaixo o campo “url-da-imagem.png” pela URL que você copiou, para cada banner mobile que você quer exibir na loja.

É recomendado que todos os banners mobile possuam a mesma resolução e proporção, para não ocorrerem quebras no layout.

Local publicação: Rodapé
Página de publicação: Página Inicial - Home
Tipo: CSS

@media only screen and (max-width: 767px) {
/* b2076a3a-2067-46ba-90fa-18c11dc288d0 */

.secao-banners .flexslider .slides>li:nth-child(1) img{
     content:url("url-da-imagem1.png");
     }
.secao-banners .flexslider .slides>li:nth-child(2) img{
     content:url("url-da-imagem2.png");
     }
.secao-banners .flexslider .slides>li:nth-child(3) img{
     content:url("url-da-imagem3.png");
     }
}

Exemplo de uso com artes diferentes para banner desktop e mobile, utilizando o tema “Mix de Imagens”:

Captura de tela 2022-04-26 180657

4 curtidas

Exibir Banner Tarja em versão mobile.

Por padrão o banner tarja é escondido quando o site é visualizado no mobile, devido ao formato do banner, que por ser muito comprido fica pequeno na tela do celular, prejudicando a leitura.

Com o código abaixo, o banner tarja é ativado no mobile e você pode utilizar uma outra imagem adequada à tela do celular para exibir uma versão diferente do banner tarja quando o acesso ocorrer por smartphone.

Suba a imagem do banner tarja mobile no Gerenciador de Arquivos do painel (tutorial), e copie a URL gerada, substituindo no código abaixo o campo “url-do-banner-tarja.png” pela URL que você copiou.

Local publicação: Rodapé
Página de publicação: Página Inicial - Home
Tipo: CSS

@media only screen and (max-width: 767px) {
/* 577c1788-054d-4397-9724-7bde1ae058ba */
.row-fluid.banner.hidden-phone{
display: block!important;
     }
.span12.banner.tarja img{
content:url("url-do-banner-tarja.png");
     }
}

Nas imagens abaixo é possível conferir o resultado, utilizando duas imagens diferentes para o banner tarja, com as informações em uma linha para desktop e duas linhas para mobile, facilitando a leitura na tela do celular.

4 curtidas

Inserir mensagem de aviso na página do carrinho

Local publicação: Rodapé
Página de publicação: Página do carrinho
Tipo: HTML

<!-- Aviso no carrinho-->
<script>
    $(".caixa-sombreada").after("<div class='greve'><strong>••• GREVE DOS CAMINHONEIROS •••</strong><p>Devido à greve dos caminhoneiros, poderá ocorrer atraso no recebimento da entrega.</p></div>");
</script>
<!-- cabd5e34-cbf0-443b-9058-0e43f661bfe9-->
<style>
    .greve {
        font-family: Montserrat;
        background: #f2dede;
        border-color: #eed3d7;
        color: #b94a48;
        text-align: center;
        border-radius: 3px;
        margin-top: -5px;
        margin-bottom: 10px;
        padding: 15px 0;
    }
</style>

<!-- Fim aviso no carrinho-->
6 curtidas

Acessar o checkout sem login prévio.

ezgif-2-6224a20c24

Local publicação: Cabeçalho
Página de publicação: Página de checkout
Tipo: JavaScript

$(function(){
	exibirCadastro();

	$("#formularioCheckout > div > div:nth-child(1) > div > fieldset > legend > a").each(function(){
		$(this).html($(this).html().replace('identifique-se','Acessar conta'));
	});

	$("#formularioCheckout .control-group.required .controls input#id_email").focus();
	
	$("#formularioCheckout .control-group.required .controls input#id_email").focusout(function() {
		if (validateEmail(this.value)) {
			var url = "/conta/verificar_email?email=" + this.value;
			var self = $(this);
			$.ajax({
			  url: url,
			}).done(function(data) {
				data = JSON.parse(data);
				if (data.situacao === "ERRO"){
					//self.parent().parent(".required").addClass("erro error");
					//self.next(".help-block").html("Você já tem cadastro! <a onclick=\"javascript:{exibirLogin(); $('.identificacao, .checkout-alerta-seguro').slideDown();}\">Click Aqui</a>").slideDown();]
                    exibirLogin();
                    $('.identificacao, .checkout-alerta-seguro').slideDown();
                    $('#id_email_login').val($('#id_email').val());
				}
			});			
		}
	});
	
	setTimeout(function(){
	    $("#formularioCheckout .control-group.required .controls input#id_email").focus();
	}, 1000);
	//f5a81046397d9e7479b02976a743039c
 });

Créditos do Script: @Leonardo_Vicentini_F da Loja da Bruna.

10 curtidas