Boa tarde amigos, tudo bem?
Alguém poderia me ajudar por favor com um CSS para ativar a Bandeira Personalizada de Desconto também na página do Produto?
Desde já agradeço.
Valeuuu
2 curtidas
Esqueci de colocar que vejo essa questão como algo bem relevante, visto que a Bandeira/Tag dentro do produto impacta ainda mais com a questão do desconto! Fora os clientes que venham de anúncios ou tráfego orgânico diretamente para a página do produto, ficam sem esse apontamento da porcentagem% do desconto evidente.
Valeu!
<style>
.selo-black-friday {
max-width: 70px;
right: 0;
left: auto;
}
.bandeiras-produto-2 {
position: absolute;
right: 5px;
left: auto;
top: 0px;
}
</style>
<script>
$(function(){
$('.conteiner-imagem > div').prepend('<div class="bandeiras-produto-2 selo-black-friday"><img src="https://cdn.awsli.com.br/950/950939/arquivos/etiquetabf_2.png"></div>')
});
</script>
inserido uma img bandeira
ou a bandeira:
<script>
$(function(){
$('.conteiner-imagem > div').prepend('<div class="bandeiras-produto"><span class="fundo-principal bandeira-promocao">20% </span></div>')
});
</script>
<style>
.bandeiras-produto .bandeira-promocao::before {
content: " Black Friday🔥 ";
font-size: 12px;
}
.bandeiras-produto .bandeira-promocao{
width: 120px;
height: 30px
}
.bandeiras-produto .bandeira-frete-gratis, .bandeiras-produto .bandeira-promocao {
flex-direction: initial;
border-radius: 5px;
}
.cores-personalizadas .bandeiras-produto .bandeira-promocao {
background: black;
color: white;
}
</style>
2 curtidas
Fala Leonardo, beleza?
Obrigado, acabei utilizando a Tag de Black Friday, ficou bacana!
Não sou muito bom com códigos, me viro, mas as vezes não consigo resolver sozinho!
Me viro melhor com design, se um dia precisar de algo, da um toque! Valeuu!
@Leonardo_Vicentini_F Essas alternativas de bandeiras sao possiveis de colocar em produtos especificos por exemplo em vez de ficar em todos os produtos da loja? Algo onde eu coloque o ID do anuncio ou outro metodo que reflita em um anuncio especifico?
pode ser por id do produto ou id da categoria
1 curtida
Como eu posso adaptar nesse CSS ou por script uma determinada bandeira so para um produto em especifico?
.bandeiras-produto .bandeira-promocao::before { content: " Black Friday🔥 "; font-size: 12px; } .bandeiras-produto .bandeira-promocao{ width: 120px; height: 30px } .bandeiras-produto .bandeira-frete-gratis, .bandeiras-produto .bandeira-promocao { flex-direction: initial; border-radius: 5px; } .cores-personalizadas .bandeiras-produto .bandeira-promocao { background: black; color: white; }Vou deixar um exemplo aqui de um produto meu pois ainda nao sei enviar a loja por aqui
@Leonardo_Vicentini_F tudo bem
Como eu posso adaptar nesse CSS ou por script uma determinada bandeira so para um produto em especifico por favor
vai ser via script, terá que validar na pagina do produto se é igual id ou sku do produto em questão
1 curtida
Voce tem algum esboço do script para eu realizaro teste e ver se funciona por favor
@Leonardo_Vicentini_F Vou testar Leonardo e volto aqui para informar. Obrigado
@Leonardo_Vicentini_F como eu poderia fazer isso, porém para mostrar uma bandeira de frete grátis? no meu ecommerce quando é marcado como frete grátis, ele ja mostra na vitrine um selo do frete grátis, mas queria que esse mesmo selo fosse exibido na página do produto, numa solução semelhante a que você apresentou. Fora a personalização da bandeira para indicar frete gratis, seria necessario adicionar alguma função que só exibe isso aos produtos marcados como “Frete Grátis”
Poderia me ajudar?
Voce pode usar o mesmo codigo como prepend para ficar em cima da foto do produto desejado ou append para ficar abaixo da foto da pagina do produto. Ai voce pode inclusive personalizar a frase para cada produto. O problema é se voce quer colocar em todos eles. Ai eu nao sei como fazer
Voce usa o SKU do produto para direcionar a imagem que voce vai criar no seu editor e subir na aba de arquivos…
$(function(){
if ($(‘span[itemprop=“sku”]’).text() == “SKU DO PRODUTO”){$(‘.conteiner-imagem > div’).prepend(‘
<img src="LINK DA IMAGEM QUE VOCE SUBIU NOS ARQUIVOS>
’)}});
2 curtidas
oi, Leonardo, obrigado pelas dicas, sou novo aqui. Voce poderia sugerir como seria essa condicional para mostrar um rotulo no caso de item usado? algo como itemprop=itemCondition ai onde vc coloca sku no seu codigo, e qual seria a condicao de usado para ser posta no local onde no seu exemplo está RGB3W? Testei algumas possibilidades mas não cheguei la, coisa do tipo ($(‘span[itemprop=“itemCondition"]’).text() == “UsedCondition - Schema.org Enumeration Member”) … Desde ja, agradeco!
Mande o link de um produto que vc tem cadastrado como usado.
opa, obrigado!
$(function(){
if ($('meta[content="http://schema.org/UsedCondition"]').length > 0){$('.conteiner-imagem > div').prepend('<div class="bandeiras-produto-2 selo-black-friday"><img src="https://cdn.awsli.com.br/950/950939/arquivos/etiquetabf_2.png"></div>')}
});
ai so fazer acertos no CSS
2 curtidas
