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)
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
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
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
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”:
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.
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