Colocar FLAG ou "TAG" de Black Friday nos pordutos

Layout
1

Gostaria de deixar uma TAG de Black Friday no canto superior da imagem do produto alguém sabe como colocar?

Fiz uma montagem
Seria colocar essa TAG

HOME_GIFTS__55_-removebg-preview

Ficaria assim

image

@Leonardo_Vicentini_F @brenonovelli @Jose_Claudio_Alvarez ?

1 curtida
2

gostei dessa ideia!

Pode copiar? ( :laughing: :laughing: :laughing: :laughing:)

1 curtida
3

Eu consegui fazer um código simples que pode servir como base para essa solução. Primeiro você insere esse CSS na sua loja:

.selo-black-friday {
    max-width: 100px;
    right: 0;
    left: auto;
}

Depois você adiciona esse JavaScript no rodapé de todas as páginas:

$(document).ready(function() {
	/*Adiciona selo na Home*/
	var produto = $('#listagemProdutos > ul > li > div > ul > li > div');
	produto.append(`
		<div class="bandeiras-produto selo-black-friday">
			<img src="https://us1.discourse-cdn.com/flex020/uploads/lojaintegrada/original/3X/6/8/68f297a0999901e3b699daf37749b46fb9814351.png" />
		</div>
	`);
	/*Adiciona selo na página do produto*/
	var produto2 = $('#corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div > div > div.listagem.aproveite-tambem.borda-alpha > ul > li > ul > li > div');
	produto2.append(`
		<div class="bandeiras-produto selo-black-friday">
			<img src="https://us1.discourse-cdn.com/flex020/uploads/lojaintegrada/original/3X/6/8/68f297a0999901e3b699daf37749b46fb9814351.png" />
		</div>
	`);
});

Não testei em todas as páginas, então não sei dizer se serve para a loja toda, mas já serve de base para algumas personalizações.

6 curtidas
4

Ficou assim!

image

1 curtida
5

Ótimo, execelente!
Muito obrigado! :clap:t4: :clap:t4: :clap:t4:

2 curtidas
6

Claro parceiro kkkkkkk

1 curtida
7

Muito legal, eu fazia uma action no Photoshop e alterava o ícone mesmo, acrescentando o destaque, para mim rolava pois tenho poucos produtos mas se forem muitos este código é excelente!

1 curtida
8

Olá, coloquei o código, porém ele funcionou apenas para as páginas de categorias e na página do produto apenas no compre também / produtos relacionados;
Não consegui colocar na Home e na Imagem do produto em sua respectiva página … Se puderem me ajudar por favor … Obrigado !

@Leonardo_Vicentini_F @Jose_Claudio_Alvarez

9

No seu caso vamos precisar alterar alguns trechos por causa do seu tema. Para fazer o selo aparecer na sua home você precisa trocar a linha do var produto por:

var produto = $('#listagemProdutos > div > div > ul > div.owl-stage-outer > div > div > div');

E na página do produto troca a linha do var produto2 por isso:

var produto2 = $('#corpo > div.conteiner > div.secao-principal.row-fluid.sem-coluna > div.span12.produto > div:nth-child(1) > div:nth-child(1) > div.conteiner-imagem > div');

Na verdade você vai precisar adicionar uma linha nova de código no JavaScript:

    /*Adiciona selo nas outras categorias da Home*/
	var produto3 = $('#listagemProdutos > ul > div.owl-stage-outer > div > div > div');
	produto3.append(`
		<div class="bandeiras-produto selo-black-friday">
			<img src="https://us1.discourse-cdn.com/flex020/uploads/lojaintegrada/original/3X/6/8/68f297a0999901e3b699daf37749b46fb9814351.png" />
		</div>
	`);

Então ele deve ficar assim na sua loja:

$(document).ready(function() {
	/*Adiciona selo na Home*/
	var produto = $('#listagemProdutos > div > div > ul > div.owl-stage-outer > div > div > div');
	produto.append(`
		<div class="bandeiras-produto selo-black-friday">
			<img src="https://us1.discourse-cdn.com/flex020/uploads/lojaintegrada/original/3X/6/8/68f297a0999901e3b699daf37749b46fb9814351.png" />
		</div>
	`);
	/*Adiciona selo na página do produto*/
	var produto2 = $('#corpo > div.conteiner > div.secao-principal.row-fluid.sem-coluna > div.span12.produto > div:nth-child(1) > div:nth-child(1) > div.conteiner-imagem > div');	produto2.append(`
		<div class="bandeiras-produto selo-black-friday">
			<img src="https://us1.discourse-cdn.com/flex020/uploads/lojaintegrada/original/3X/6/8/68f297a0999901e3b699daf37749b46fb9814351.png" />
		</div>
	`);
    /*Adiciona selo nas outras categorias da Home*/
	var produto3 = $('#listagemProdutos > ul > div.owl-stage-outer > div > div > div');
	produto3.append(`
		<div class="bandeiras-produto selo-black-friday">
			<img src="https://us1.discourse-cdn.com/flex020/uploads/lojaintegrada/original/3X/6/8/68f297a0999901e3b699daf37749b46fb9814351.png" />
		</div>
	`);
});
3 curtidas
10

Obrigado @Jose_Claudio_Alvarez pela ajuda. Porém quando coloquei esse código, não sei o porque somente apareceu a TAG na na foto na página do produto, as outras não funcionaram;
Então voltei o que estava e peguei essa parte da foto do produto e acrescentei;
Ficou Assim:

$(document).ready(function() {
	/*Adiciona selo na Home*/
	var produto = $('#listagemProdutos > ul > li > ul > li > div');
	produto.append(`
		<div class="bandeiras-produto selo-black-friday">
			<img src="https://cdn.awsli.com.br/1709/1709002/arquivos/show-de-premios.png" />
		</div>
	`);
	/*Adiciona selo na página do produto*/
	var produto2 = $('#corpo > div.conteiner > div.secao-principal.row-fluid.sem-coluna > div.span12.produto > div:nth-child(1) > div:nth-child(1) > div.conteiner-imagem > div');	
	produto2.append(`
		<div class="bandeiras-produto selo-black-friday">
			<img src="https://cdn.awsli.com.br/1709/1709002/arquivos/show-de-premios.png" />
		</div>
	`);
	/*Adiciona selo na página do produto*/
	var produto3 = $('#corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div > div > div.listagem.aproveite-tambem.borda-alpha > ul > li > ul > li > div');
	produto3.append(`
		<div class="bandeiras-produto selo-black-friday">
			<img src="https://cdn.awsli.com.br/1709/1709002/arquivos/show-de-premios.png" />
		</div>
	`);
});

Desse jeito esta funcionando as páginas de categorias, página do produto e no compre também / produtos relacionados;
Agora só esta faltando a Home, que não estou conseguindo de jeito nenhum … :unamused:

2 curtidas
11

Boa tarde! Agradeço pelo compartilhamento destas informações, esta comunidade esta auxiliando muito na edição de meu site. Porém fiquei com uma pequena dúvida.

Adicionei este código da tag e ocorreu tudo bem. Gostaria de saber se consigo excluir algumas categorias para que esta flag não apareça. Utilizei o último código postado do @edvan.zaramelli e do @Jose_Claudio_Alvarez

Agradeço a todos novamente!

12

Essa flag de black friday é muito legal! Uma pena que no meu tema funcionou apenas na página de produto, em nenhuma outra funcionou, nem nos produtos relacionados

Se alguém conseguir ajudar, seria incrível pra adicionar nesta black friday :slight_smile:

1 curtida
13

Olá @Paloma_Rezende.

Já lhe chamei pelo e-mail do suporte.

Fico no seu aguardo

1 curtida
14

Olá, Luciano!
Vamos de pedintes… Como você ajustou tamanho e inseriu imagem? Poderia me ajudar? A Tag está imensa aqui!!! rsrs

image

Ainda aguardando a liberação do FB. Inacreditável :frowning:
Obrigada!

16

O o css se não está faltando fechar com } sua linha anterior

.selo-black-friday {
max-width: 100px;
right: 0;
left: auto;
}

17

COLOQUEI OS DOIS CODIGOS E DEU CERTO. NÃO REVISEI PARA EXCLUIR AS LINHAS REPETIDAS
$(document).ready(function() {
/Adiciona selo na Home/
var produto = $(’#listagemProdutos > div > div > ul > div.owl-stage-outer > div > div > div’);
produto.append( <div class="bandeiras-produto selo-black-friday"> <img src="https://us1.discourse-cdn.com/flex020/uploads/lojaintegrada/original/3X/6/8/68f297a0999901e3b699daf37749b46fb9814351.png" /> </div> );
/Adiciona selo na página do produto/
var produto2 = $(’#corpo > div.conteiner > div.secao-principal.row-fluid.sem-coluna > div.span12.produto > div:nth-child(1) > div:nth-child(1) > div.conteiner-imagem > div’); produto2.append( <div class="bandeiras-produto selo-black-friday"> <img src="https://us1.discourse-cdn.com/flex020/uploads/lojaintegrada/original/3X/6/8/68f297a0999901e3b699daf37749b46fb9814351.png" /> </div> );
/Adiciona selo nas outras categorias da Home/
var produto3 = $(’#listagemProdutos > ul > div.owl-stage-outer > div > div > div’);
produto3.append( <div class="bandeiras-produto selo-black-friday"> <img src="https://us1.discourse-cdn.com/flex020/uploads/lojaintegrada/original/3X/6/8/68f297a0999901e3b699daf37749b46fb9814351.png" /> </div> );
});

$(document).ready(function() {
/Adiciona selo na Home/
var produto = $(’#listagemProdutos > ul > li > ul > li > div’);
produto.append( <div class="bandeiras-produto selo-black-friday"> <img src="https://us1.discourse-cdn.com/flex020/uploads/lojaintegrada/original/3X/6/8/68f297a0999901e3b699daf37749b46fb9814351.png" /> </div> );
/Adiciona selo na página do produto/
var produto2 = $(’#corpo > div.conteiner > div.secao-principal.row-fluid.sem-coluna > div.span12.produto > div:nth-child(1) > div:nth-child(1) > div.conteiner-imagem > div’);
produto2.append( <div class="bandeiras-produto selo-black-friday"> <img src="https://us1.discourse-cdn.com/flex020/uploads/lojaintegrada/original/3X/6/8/68f297a0999901e3b699daf37749b46fb9814351.png" /> </div> );
/Adiciona selo na página do produto/
var produto3 = $(’#corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div > div > div.listagem.aproveite-tambem.borda-alpha > ul > li > ul > li > div’);
produto3.append( <div class="bandeiras-produto selo-black-friday"> <img src="https://us1.discourse-cdn.com/flex020/uploads/lojaintegrada/original/3X/6/8/68f297a0999901e3b699daf37749b46fb9814351.png" /> </div> );
});

18
19

Boa tarde! O meu está dando erro.
Será que você consegue visualizar o motivo ?
Muito obrigada!

banner
banner1366×768 199 KB