Imagens em baixa resolução - Categorias

Layout
1

Olá pessoal, tudo bem?

Estou migrando para a loja integrada, e percebi que em meu site as imagens tanto na página inicial quanto na página de categoria estão com uma resolução baixa! Porém na página de produto, ele está com uma qualidade normal.

Eu fiz algumas modificações em CSS para que o produto apareça maior nessas seções, porém a imagem não é redimensionada.

Alguém saberia me dizer como posso arrumar isso?

Muito obrigado!

2

Isso é da otimização de imagens que eles fazem. As vezes, na maioria das vezes, fica um resultado ruim. O jeito é ir tratando por Javascript em cada lugar.

Pode usar esse tópico como base para o seu caso.

3

Valeu Breno! Acabei alterando aqui usando o seguinte código:

( window ).on( "load", function() { (‘img’).each(function(){
var this = (this)
$this.attr(‘src’,$this.attr(‘src’).replace(‘300x300’,‘700x700’))
})
});

O único problema é que ele só funciona para a primeira imagem. Tive que desabilitar a segunda imagem ao passar o mouse, já que o código só roda uma vez.

Pensamos em atrelar esse código a uma função de mouse hover, ao passar a imagem sobre o produto, mas não conseguimos fazer isso.

Alguma sugestão?

Abraço,
Victor

1 curtida
4

Sim. Ideal é atrelar o load ao elemento que você quer mudar e não ao window. Como a loja tem muita alteração feita por Javascript, muita coisa roda depois do window.load ou winown.ready estar completo. Olha os “scripts de rodapé” dessa loja. Acho que podem te dar uma luz.

Tem outras abordagens também. Uma outra solução é você fazer uma função que muda a url, como já fez, e uma outra função para checar se ainda tem elemento com o tamanho que você não quer na página ou se o elemento já está visível na página. Ali no 0007 tem um exemplo disso. Quando a página está pronta ele chama a função, eu setei um tempo para ele repetir a função até o elemento estar visível. Nesse script tem uns 4 casos de uso para isso, algum deve servir para você.

image
image1478×1988 284 KB

2 curtidas
5

Muito obrigado novamente Breno!

Tentei usar o seguinte código na adição de javascript da loja integrada:

JQuery(document).ready(checkContainer);

function checkContainer() {
if(
(".imagem-produto.has-zoom .imagem-zoom").is(":visible") ) { (".imagem-produto.has-zoom .imagem-zoom").each(
function () {
currentSrc = this.currentSrc;

          if (currentSrc.index0f("300x300") >= 0) {
              const newUrl = this.currentSrc.replace("300x300","700x700");
              $(this).attr("src", newUrl);
          }
      }  
);

} else {
setTimeout(checkContainer,50);
}
}

Mas não funcionou… alguma luz? xD

6

Não. Só vendo o erro pra imaginar algo.

1 curtida