PayPal 
Przelew Kowal_ProductGalleryHover é um módulo que adiciona às listas de produtos (vista de categoria) em Magento 2 uma funcionalidade moderna de galeria hover, ou seja, a pré-visualização de fotografias adicionais do produto diretamente ao nível da categoria. O utilizador pode ver as fotografias seguintes ao passar o cursor ou ao deslizar com o dedo (em dispositivos móveis), sem ter de aceder à página do produto.
WhatsApp
+48608012047
view.xml) para minimizar a transferência de dados.O módulo foi concebido com foco no máximo desempenho. Não modifica o layout do Magento nem a estrutura DOM – funciona como um script JS leve que:
mouseenter / touchstart nos elementos dos produtos.Além disso, o módulo utiliza IntersectionObserver, um mecanismo nativo de lazy loading que carrega automaticamente as galerias dos produtos visíveis no viewport. Assim, o utilizador vê imediatamente galerias prontas, enquanto a página mantém o seu desempenho.
O módulo foi otimizado para não afetar negativamente o crawl budget, o LCP, o CLS nem o TBT. Todas as imagens dinâmicas são carregadas após o carregamento do conteúdo principal da página (inicialização em before.body.end), tornando o módulo totalmente seguro em termos de SEO e desempenho.
As lojas e-commerce modernas devem oferecer acesso rápido e intuitivo às informações do produto. O módulo Kowal_ProductGalleryHover proporciona exatamente isso — uma pré-visualização interativa sem atrasos, sem risco de perda de desempenho, totalmente compatível com Magento 2 e com as boas práticas de SEO.
A SMMASH é uma loja de vestuário desportivo em que o produto é vendido não só pelo corte e pelo tamanho, mas também pela energia do padrão, pela cor, pela estampagem e pela adequação a uma atividade específica. A marca comunica através de coleções visuais fortes e de uma ampla segmentação desportiva: MMA, OCR, Crossfit, corrida, BJJ, Muay Thai, judo, boxe e kickboxing.
A loja opera no setor do vestuário, mas o seu catálogo exige uma apresentação mais dinâmica do que uma loja de moda clássica. Os produtos diferem frequentemente em detalhes gráficos, construção, finalidade de treino e forma de utilização. Para o utilizador, uma pré-visualização rápida de uma segunda imagem, cor ou variante visual pode ser mais importante do que o próprio nome do produto.
A SMMASH combina a venda de vestuário técnico com uma forte identidade visual da marca. A oferta inclui produtos para homem, mulher e criança, bem como vestuário de clube e projetos personalizados. No site são visíveis categorias lifestyle e desportivas, incluindo Combat, OCR, Treino e Corrida, o que mostra que o cliente navega frequentemente pelos produtos de acordo com o estilo de atividade, e não apenas pelo tipo de peça.
Um elemento importante da loja é também a apresentação de projetos e visualizações. No caso do vestuário desportivo, a decisão de compra está fortemente ligada ao aspeto do produto: cores intensas, padrões, contrastes e a disposição da estampagem devem ser visíveis logo ao nível da listagem.
O maior desafio neste tipo de catálogo é conciliar duas necessidades:
No vestuário desportivo, uma única imagem estática na listagem muitas vezes não é suficiente. O cliente quer ver rapidamente como o produto aparece noutra perspetiva, como a estampagem fica disposta, se a cor é suficientemente expressiva e se o produto se adequa a um estilo de treino específico.
Ao mesmo tempo, uma loja com um catálogo extenso não pode carregar demasiadas imagens de imediato, pois isso sobrecarregaria a página, prejudicaria a experiência em mobile e poderia afetar negativamente os Core Web Vitals.
Para este tipo de loja, funciona particularmente bem um mecanismo de galeria de produto ativado ao passar o cursor ou ao tocar no produto. A listagem permanece leve no primeiro render, mas o utilizador pode pré-visualizar rapidamente a imagem seguinte sem sair da categoria.
Principais pressupostos:
No caso da SMMASH, este mecanismo permite mostrar mais valor do produto logo na listagem: estampagem, cores, detalhe, perspetiva alternativa ou forma de apresentação do produto no corpo.
O utilizador pode comparar produtos mais rapidamente sem abrir várias fichas de produto. Isto é especialmente importante quando o catálogo contém muitos tipos de vestuário semelhantes, mas cada produto tem um projeto gráfico diferente.
Benefícios:
A SMMASH vende produtos com uma forte componente visual. No caso de rashguards, t-shirts, leggings, calções ou equipamentos desportivos, o cliente reage frequentemente ao aspeto antes de analisar os detalhes técnicos. Por isso, a listagem deve funcionar não apenas como catálogo, mas também como um lookbook rápido.
O mecanismo hover/swipe ajuda a mostrar:
A SMMASH é um exemplo de loja de vestuário em que a apresentação visual faz parte do produto. A cor, a estampagem e a energia do design têm impacto direto na decisão de compra. A galeria ativada na listagem permite mostrar estes elementos mais rapidamente, sem sobrecarregar o primeiro carregamento da página.
Slumbersac é uma loja de sacos de dormir para crianças, em que o produto pertence ao setor do vestuário, mas a decisão de compra é mais técnica do que na moda clássica. O pai ou a mãe escolhe não só o padrão e o tamanho, mas também a construção do saco de dormir, a espessura TOG, a estação, o material e detalhes práticos relacionados com a segurança e o conforto da criança.
A oferta inclui, entre outros, sacos de dormir com pernas, sacos de dormir clássicos, variantes sazonais 0.5 TOG, 1.0 TOG, 2.5 TOG e 3.5 TOG, bem como soluções como mangas amovíveis e pernas dobráveis com ABS.
Na Slumbersac, o produto tem de ser explicado visualmente. O pai ou a mãe quer perceber rapidamente em que difere um determinado modelo: se tem pernas, se as mangas são amovíveis, que intervalo de temperaturas suporta, se é adequado para o verão, o inverno ou todo o ano.
No site são visíveis mensagens de produto e de confiança, incluindo mangas amovíveis, pernas dobráveis com ABS, avaliação Google de 4,8, envio rápido e comunicação do saco de dormir mais escolhido. Isto mostra que a loja combina uma apresentação emocional dos padrões com uma argumentação muito prática.
Numa loja de sacos de dormir para crianças, a lista de produtos tem de tratar vários tipos de informação em simultâneo:
Uma única imagem na listagem pode mostrar o estampado, mas nem sempre explica a construção. Para o pai ou a mãe, é importante distinguir rapidamente um saco de dormir clássico de um saco de dormir com pernas ou de uma variante com mangas amovíveis.
O segundo desafio é o mobile. As compras de produtos para crianças são muitas vezes feitas no telemóvel, por isso a interação tem de funcionar de forma natural: o scroll da página não pode ser bloqueado e a passagem para a fotografia seguinte deve ser simples.
Para a Slumbersac, é valioso alargar a listagem de produtos com uma pré-visualização rápida da fotografia seguinte do produto. Ao passar o cursor ou deslizar no mobile, o utilizador pode ver uma imagem adicional que mostra a construção do saco de dormir ou um detalhe prático.
Pressupostos principais:
Numa loja deste tipo, é particularmente útil um atributo de imagem dedicado, por exemplo on_hover. Graças a ele, a equipa da loja pode decidir autonomamente que fotografia explica melhor o produto na listagem.
Exemplos de utilização:
Isto é importante porque a segunda fotografia automática da galeria nem sempre tem de ser a melhor imagem de venda. No caso de produtos técnico-vestuário, é melhor dar ao merchandiser controlo sobre o que o cliente vê como primeira interação.
O pai ou a mãe pode avaliar mais rapidamente se o produto corresponde a uma necessidade concreta: um saco de dormir mais quente para o inverno, um modelo leve para todo o ano, um saco de dormir com pernas para uma criança que anda, ou um modelo com mangas amovíveis.
Benefícios:
A Slumbersac vende produtos que são simultaneamente vestuário, acessório de sono e produto funcional para a criança. A estética do padrão é importante, mas o pai ou a mãe presta igualmente muita atenção às soluções práticas.
A galeria hover/swipe ajuda a mostrar:
on_hover para indicar a melhor fotografia funcional,A Slumbersac é um exemplo de uma loja de vestuário em que a fotografia do produto tem de explicar a função, não apenas a aparência. Uma segunda imagem bem escolhida na listagem pode mostrar o detalhe que decide a compra: pernas, mangas, material ou formato do saco de dormir. O mecanismo hover/swipe e a imagem dedicada on_hover dão à loja maior controlo sobre a rapidez com que o cliente compreende o produto.
