Como eu adiciono um desses em minha loja?
Olá amigo, você pode colocar um banner tarja com as informações que achar necessárias, para isso é só ir em Visual>Banner>criar banner tarja. Só tem que ter a arte pronta.
1 curtida
3 curtidas
Olá @andreculau, valeu pelo toque, posso ter interpretado mal nosso amigo @Valmir1. Se for o banner tarja é tranquilo até demais, já se for a tarja acima de tudo, lá no topo é só usar este JS no rodapé…
$(document).ready(function() {
$('body').prepend('<div style="margin: auto 0; background-color: #7cfc09; padding: 10px 0"> <p style="color: #000; text-align: center; margin: 0;">FRETE GRÁTIS ACIMA DE R$300,00</p> </div>');
3 curtidas
@Valmir1 as cores são do seu exemplo mas pode trocar a vontade, no MOBILE você vai usar este código podendo diminuir ou aumentar a fonte também, ok. É um código CSS
@media(max-width:767px){
.atalhos-mobile.visible-phone.fundo-secundario.borda-principal:before {
content: 'FRETE GRÁTIS';
display: block;
background: #7cfc09;
height: 30px;
line-height: 30px;
text-align: center;
color: #000;
font-size: 22px;
}
}
2 curtidas
testei mais não foi o código está correto?
tente assim faltou fechar o código com })
$(document).ready(function() {
$('body').prepend('<div style="margin: auto 0;background-color: #7cfc09;z-index: 9999999;padding: 10px 0;position: relative;width: 100%;"> <p style="color: #000; text-align: center; margin: 0;">FRETE GRÁTIS ACIMA DE R$300,00</p> </div>');
})
1 curtida
tem com deixar fixo no topo?
tente assim
$(document).ready(function() {
$('body #cabecalho').prepend('<div style="margin: auto 0;background-color: #7cfc09;z-index: 9999999;padding: 10px 0;position: relative;width: 100%;"> <p style="color: #000; text-align: center; margin: 0;">FRETE GRÁTIS ACIMA DE R$300,00</p> </div>');
})
2 curtidas
Olá @reidasublimacaoinsum, desculpe não ter respondido antes. Não tenho vindo mais na comunidade, estou migrando minha loja e tive uns contratempos, vou ter que ficar na Li por mais um tempinho. Vi que o Leonardo te ajudou, então fico feliz, se tiver mais alguma dúvida chama aí, valeu!
Só uma observação, se quiser pode trocar a cor #7cfc09 por uma de sua preferência.
1 curtida
Olá prezados, consegui adicionar a traja no site ficou perfeito.
Então me veio uma dúvida, é possível colocar movimento? por exemplo para ficar deslizando pro lado automaticamente, para mostrar mais que 1 mensagem ou ficar repetindo a mesma… ?
sim é possível fazer via CSS, tente assim:
.barraAvisoTopo {
overflow: hidden;
white-space: nowrap;
}
.barraAvisoTopo span {
right: 0;
animation: moveText 15s linear infinite; /*aqui vc definite o tempo de passagem na tela*/
width: 100%;
}
@keyframes moveText {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
2 curtidas
Conseguiu colocar em movimento a tarja?
Silmara, eu tenho até um código pronto que instalei para um cliente, posso te mandar e a implementação fica por você.
Da pra fazer em slide como também passando (animação direta).
OBS: É necessário ter a lib do slick slider para funcionar.
<!-- MFLG - Tarja Top -->
<style>
.tarja-top-slider {
background-color: #ffffff;
padding: 5px 5px;
border-bottom: 1px solid #ccc;
text-align: center;
font-family: Libre Franklin;
top: 0;
width: 100%;
z-index: 1 !important;
}
.tarja-slide {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 10px;
white-space: nowrap;
transition: all 0.3s ease-in-out;
opacity: 1;
transform: translateX(0);
}
.tarja-svg {
display: unset;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.3s ease-in-out;
}
.tarja-svg svg {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
transition: transform 0.3s ease-in-out;
}
.tarja-slide:hover .tarja-svg svg {
transform: scale(1.1);
}
.tarja-titulo {
font-weight: bold;
display: inline;
}
.tarja-texto {
color: #000000;
display: inline;
}
/* Responsivo para telas pequenas */
@media (max-width: 1024px) {
.tarja-slide {
flex-direction: column;
white-space: normal;
gap: 5px;
}
.tarja-svg {
margin-bottom: 5px;
}
.tarja-titulo, .tarja-texto {
font-size: 13px;
}
.tarja-top-slider {
line-height: 0.6;
padding: 1px 0px !important;
}
}
@media (min-width: 1024px) {
.tarja-titulo, .tarja-texto {
font-size: 16px;
}
.tarja-svg svg {
width: 16px;
height: 16px;
}
.tarja-top-slider {
padding: 7px 15px;
}
}
</style>
<script>
$(document).ready(function () {
$('.info-destaque').remove();
const mflgTarjaTop = [
{
titulo: "Aviso importante",
texto: "Estamos em manutenção até as 18h",
svg: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="red">
<circle cx="10" cy="10" r="10" />
</svg>`
},
{
titulo: "Promoção",
texto: "Frete grátis acima de R$100",
svg: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="green">
<rect x="0" y="0" width="20" height="20" />
</svg>`
}
];
const $tarja = $('<div class="tarja-top-slider"></div>');
mflgTarjaTop.forEach(item => {
const $slide = $(`
<div class="tarja-slide">
<span class="tarja-svg">${item.svg}</span>
<strong class="tarja-titulo">${item.titulo}</strong>
<span class="tarja-texto">${item.texto}</span>
</div>
`);
$tarja.append($slide);
});
if (window.location.pathname !== '/checkout') {
$('.conteiner-principal').before($tarja);
}
console.log('Initializing slick');
$tarja.slick({
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
dots: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
pauseOnHover: false
});
$tarja.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
const $next = $(slick.$slides[nextSlide]);
$next.css({
opacity: 0,
transform: 'translateX(30px)',
transition: 'none'
});
});
$tarja.on('afterChange', function (event, slick, currentSlide) {
const $current = $(slick.$slides[currentSlide]);
$current.css({
transition: 'opacity 0.5s ease, transform 0.5s ease',
opacity: 1,
transform: 'translateX(0)'
});
});
});
</script>