[OFICINA] - Pequenas alterações em sua loja

Laurel · Janeiro 3, 2023, 12:55pm

Eu tentei colocar essas ’ que o Leonardo falou, mas não modificou nada.

Paulo, gostaria que o layout do meu mobile tivesse a estrutura do seu.

Se você puder passar os código para:

Banner tarja;
Mini Banner;
O carrinho, logo, rastreio, menu, etc ficarem tudo alinhado;
Esse banner(acho que é isso) de 10% de desconto.

Agradeceria muiiiito!

Leonardo_Vicentini_F · Janeiro 3, 2023, 1:15pm

Esse código é tipo JavaScript, precisa ficar no rodape

Evidencia do erro

Laurel · Janeiro 3, 2023, 1:27pm

rsrsrsr Rindo de nervoso!
Só para quem manja mesmo.

Leonardo, essa loja aqui também tem o padrão básico da LI. Tentei falar com a pessoa, mas acho que a loja não está mas em funcionamento.

Esse é o URL da loja: https://www.enilahacessorios.com.br/

Ela fez algumas alterações nessa parte de cima: Achei legal!
E estou tentando deixar igual há algumas semanas, mas não consigo. Quando acho um código, acabo desfigurando outra coisa.

Você não tem esses códigos para a minha ficar parecida?

Me ajuda!!!

Leonardo_Vicentini_F · Janeiro 3, 2023, 1:39pm

Infelizmente, não, não tenho, e não me recordo de ter visto algo na comunidade que faça essa mudança estrutural.

Paulo21 · Janeiro 3, 2023, 1:40pm

Bom dia, uso esse para banner tarja no mobile.
Tem que alterar os link das imagens para os das suas.

Rodapé
Página home
Html


<style type="text/css">
.flexslider2 {
	display: none;
}

@media only screen and (max-width: 767px){
	.flexslider2 {
		display: block;
	}
}
.flexslider2 div ul.slides {
    text-align: center;
}
</style>

<script type="text/javascript">

$('.secao-banners .conteiner').append(`
<div class="row-fluid banner">
	<div class="flexslider2">
	  <ul class="slides">
		<li>
            <img src="https://cdn.awsli.com.br/2297/2297081/arquivos/4_20221228_124723_0003.png" alt="Texto alternativo para a imagem" >
        </li>
        <li>
            <img src="https://cdn.awsli.com.br/2297/2297081/arquivos/3_20221228_124723_0002.png" alt="Texto alternativo para a imagem" >
         </li>
         <li>
            <img src="https://cdn.awsli.com.br/2297/2297081/arquivos/1_20221228_124723_0000.png" alt="Texto alternativo para a imagem" >
         </li>
         <li>
            <img src="https://cdn.awsli.com.br/2297/2297081/arquivos/2_20221228_124723_0001.png" alt="Texto alternativo para a imagem" >
	   </li>
	  </ul>
	</div>
</div>
`);

$('.flexslider2').flexslider({
    animation: "slide"
});
</script>

Laurel · Janeiro 3, 2023, 1:45pm

Obrigado mesmo!

Depois vê a última postagem que fiz aqui para o Leonardo. Achei bem parecida com a sua, mas percebi que a sua tem uma pegada mais masculina, daí acho que teria que alterar esse icons para ficar parecida com a loja exemplo que postei. Porque o meu publica será feminino e estou tentando deixar algo mais delicado, sabe? Acho que o Leonardo poderá ajudar.

Leonardo_Vicentini_F · Janeiro 3, 2023, 1:47pm

Este site usa um tema, comprado por fora da loja da LI.
Não sei quem fez o tema, mas é a segunda loja que vejo usando esse tema.

Paulo21 · Janeiro 3, 2023, 1:49pm

Sim eu vi, realmente a minha e para o público alvo masculino

Paulo21 · Janeiro 3, 2023, 1:55pm

Eu uso esse código para remover as bordas da caixa dos mini banners e dar um espaço entre eles em:

Rodapé
Página home
CSS

.sem-banner .caixa-vazia {
    border-style: none;
    background-color: transparent;
}

@media (max-width: 767.98px) {
      .modulo .flexslider{
        margin-bottom: 16px;
}
}

Laurel · Janeiro 3, 2023, 1:59pm

Paulo, funcionou!

Um detalhe a menos.

@Paulo21 @Leonardo_Vicentini_F vocês acham que eu escrevi algo errado para ficar aparecendo essas setas? No seu @Paulo21 não aparecem.

E os mini banner teria como diminuir para ficar do tamanho do seu?

Paulo21 · Janeiro 3, 2023, 2:05pm

Para remover as setas:

Rodapé
Todas as páginas
CSS

.flex-direction-nav li a {
display: none;
}

Para os mini banners no formato da minha loja eu uso outro código a mais, ele e em touch vc arrasta para o lado para ver o 3 já mando o código.

Laurel · Janeiro 3, 2023, 2:06pm

Humm!

Achei que seria o plano básico, pois na maioria das vezes aparece algo embaixo relacionado ao desenvolvedor.

Leonardo, você tem algum código de sacolinha como esse? Gostaria de trocar o carrinho por esse:

Sacolinha

Paulo21 · Janeiro 3, 2023, 2:11pm

Mini banners

Rodapé
Página home
HTML

<style>
.row-fluid.banner.mini-banner  .modulo.span4 * {
    opacity:1!important;
}
@media (max-width: 767px){
    .row-fluid.banner.mini-banner .modulo.span4 {
        width: 50%;
        display: inline-block;
    }
    .row-fluid.banner.mini-banner {
        overflow: auto;
        white-space: nowrap;
    }
}
</style>
<script>
 $(function(){
	$(".row-fluid.banner.mini-banner .modulo.span4 .flexslider").replaceWith(function() { 
		return "<span>" + this.innerHTML + "</span>"; 
	});
});
</script>

Paulo21 · Janeiro 3, 2023, 2:13pm

Se vc alterar o valor de 50% para 32%

Ele fica assim

Dando crédito ao @Leonardo_Vicentini_F kkk esses códigos que passei ele postou aqui na comunidade.

Laurel · Janeiro 3, 2023, 2:16pm

Obrigado Paulo!

Vou jogar aqui e ver como fica.

Obrigado, obrigado e obrigado!

Paulo21 · Janeiro 3, 2023, 2:28pm

Estamos aí para se ajudar…
Os outros códigos que pediu posto de tarde tá bom.

Paulo21 · Janeiro 3, 2023, 5:45pm

Olá,
Segue os códigos do rastreio

Rodapé
Todas as páginas
CSS


.row-fluid .canais-contato.span9 {
    width: fit-content;
}

@media (min-width: 768px) and (max-width: 979px){
    .row-fluid .canais-contato.span9 {
        width: fit-content;
    }
}

@media (min-width: 1200px){
    .row-fluid .canais-contato.span9 {
        width: fit-content;
    }
}
    .li {}.rastreio-content {
    left: 140px;
    }

Rodapé
Todas as páginas
Html

<style>
li {}.rastreio-content {
    position: absolute;
    background: rgb(255 252 252);
    z-index: 999;
    padding: 10px;
    text-align: center;
    border-radius: 0px;
    border: 1px solid rgba(228, 228, 228, 0.59);
    display: none;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.07);
    margin-top: 5px;
}

.rastreio-btn {
    cursor: pointer;
    background: rgba(255, 255, 255, 0);
    width: 150px;
    height: 31px;
    width: auto !important;
}

.rastreio-content > p:hover {
    color: black;
}
.rastreio-topo {
    color: white;
    text-align: center;
    width: 140px;
    font-weight: bolder;
    height: 24px;
    font-size: 10.4px;
    text-transform: uppercase;
    margin-left: -2px;
    top: 5px;
    position: relative;
}
.rastreio-topo:hover {
    color: white;
    text-align: center;
    width: 140px;
    height: 24px;
    font-size: 10.4px;
    text-transform: uppercase;
    margin-left: -2px;
    top: 5px;
    text-decoration: underline;
    position: relative;
}
.rastreio-topo i,
.atd-inicial i {
    font-size: 16px;
    color: white;
    margin-right: 6px;
}
.rastreio-topo i:hover,
.atd-inicial i:hover {
    font-size: 16px;
    color: white;
    margin-right: 6px;
}
.rastreio-content p {
    font-size: 10.7px;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: black;
}
.rastreio-content h1 {
    font-size: 32px;
    color: black;
}
#OrderTracking, #OrderTrackingM {
    width: 160px;
    color: black;
    border: 0;
    box-shadow: none;
    background-color: rgba(245, 245, 245, 0);
    box-shadow: inset 0px 0px 0px 1px rgb(204, 204, 204) !important;
    border-radius: 0px;
}
.rastreio {
    background: green;
    margin-top: -10px;
    padding: 3px 5px 5px 5px;
    border-radius: 3px;
    font-size: 11px;
    border-radius: 0px;
    margin-left: 5px;
    color: white;
    font-weight: bolder;
}
.rastreio:hover {
    background: green;
    color: white!important;
}
</style>
<script>
$(function(){

	$('.barra-inicial .lista-redes').before(
      `<div class="rastreio-btn span1">
        <li class="rastreio-topo"><i class="fa fa-truck"></i>Rastreio Rápido</li>
         <div class="rastreio-content">
          <p>Digite o código de rastreio</p>
            <input type="text" name="OrderTracking" id="OrderTracking">
            <button type="submit" class="rastreio">ACESSAR</button>
         </div>
      </div>`
	);
    
	$('.icon-home').before(
	  `<a class="icon-truck"> </a>
		<div class="rastreio-content" style="display: none;">
		<p>Digite o código de rastreio</p>
		<input type="text" name="OrderTrackingM" id="OrderTrackingM">
		<button type="submit" class="rastreio">ACESSAR</button>
		</div>`
	);

    $(".rastreio").click(
		function() {
			var numerosro = document.getElementById('OrderTracking').value;
			window.open('https://melhorrastreio.com.br'+numerosro,'_blank');
		}
	);

    $('.rastreio-btn').hover( 
		function () {
			$('.rastreio-content').fadeIn(400).show();
		},
		function(){
			$('.rastreio-content').fadeOut(400).hide();
		}
	);
	
	var _rc_show;

	$('.icon-truck').click( 
	function () {
		if (_rc_show){
		   $('.rastreio-content').fadeOut(400).hide();
		   _rc_show = false;
		} else {
		   $('.rastreio-content').fadeIn(400).show();
		   _rc_show = true;
		}
	});
});
</script>

Código para alterar a logo

Cabeçalho
Todas as páginas
CSS

.logo a img {
    max-height: 80%;
}

@media only screen and (max-width: 767px){
    body.pagina-carrinho.carrinho-checkout div#cabecalho > .conteiner > .row-fluid:first-child .span3 {
        position: relative;
        z-index: 1000;
        top: 10px;
        width: 100px;
        left: 0;
        right: 0;
        margin: auto;
      }

    body:not(.pagina-carrinho.carrinho-checkout) div#cabecalho > .conteiner > .row-fluid:first-child .span3 {
        position: fixed;
        z-index: 1000;
        top: 14px;
        width: 60px;
        left: -webkit-calc(23% - 40px);
        left: -moz-calc(23% - 40px);
        left: calc(23% - 40px);
        margin: none;
    }

Cabeçalho
Todas as páginas
Javascript


jQuery(documento).ready(function (a){
    
        if (a(".menu.superior").length) {
            var content = jQuery(".menu.superior").html();
            jQuery('#barraTopo .conteiner .row-fluid').html('<div  class="menu superior">' + content + ' </div>');
        }
        
        if (a(".menu.superior").length) {
            var content = jQuery(".menu.superior").html();
            jQuery('#barraTopo .conteiner .row-fluid').html('<div class="menu superior">'+content+'</div>');
        }
        
});

Laurel · Janeiro 3, 2023, 6:26pm

Obrigado, Paulo.

Vou tentar aqui.

Laurel · Janeiro 3, 2023, 6:38pm

Paulo, ficou assim. Não sei porque.

Leonardo_Vicentini_F · Janeiro 3, 2023, 6:44pm

esse código está “errado”

jQuery(documento).ready(function (a){
    
        if (a(".menu.superior").length) {
            var content = jQuery(".menu.superior").html();
            jQuery('#barraTopo .conteiner .row-fluid').html('<div  class="menu superior">' + content + ' </div>');
        }
        
        if (a(".menu.superior").length) {
            var content = jQuery(".menu.superior").html();
            jQuery('#barraTopo .conteiner .row-fluid').html('<div class="menu superior">'+content+'</div>');
        }
        
});

deveria ser:

jQuery(document).ready(function (a){
    
        if (a(".menu.superior").length) {
            var content = jQuery(".menu.superior").html();
            jQuery('#barraTopo .conteiner .row-fluid').html('<div  class="menu superior">' + content + ' </div>');
        }
        
        if (a(".menu.superior").length) {
            var content = jQuery(".menu.superior").html();
            jQuery('#barraTopo .conteiner .row-fluid').html('<div class="menu superior">'+content+'</div>');
        }
        
});

Tópico		Respostas	Visualizações
Como alterar a altura ou tamanho do menu superior? Código CSS/HTML	142	34882	4 de Julho de 2022
Centralizar menu superior, adicionar Tarja via código e eliminar espaçamentos > Tema Google Código CSS/HTML	29	858	17 de Outubro de 2022
Full banner - toda a tela Layout	85	16714	26 de Agosto de 2021
AJUDA Layout ! Barra-inicial Layout	56	12685	21 de Setembro de 2020
Opinião sobre layout minha loja Layout	17	1363	28 de Setembro de 2020

[OFICINA] - Pequenas alterações em sua loja

Tópicos relacionados