PrestaShop Design & Navegação

Módulo Carrossel de Produtos PrestaShop 8/9: Sliders Ilimitados

Carrosséis de produtos ilimitados, em qualquer hook, com os cartões de produto do seu tema.

Crie um carrossel em dois minutos: escolha a fonte (mais vendidos, novidades, promoções, categoria ou seleção manual ordenada à mão), a posição entre seis hooks padrão ou o seu próprio hook personalizado registado no momento, o número de produtos por linha em desktop, tablet e telemóvel, e depois o estilo: 5 skins, setas, paginação, cor de destaque e largura total. Os cartões de produto são os do seu tema, renderizados pelos apresentadores nativos do PrestaShop: nada para adaptar, nada que destoe.

At a glance
  • Carrosséis ilimitados geridos a partir de um separador dedicado do back-office: criação, duplicação, ativação, ordenação e títulos e subtítulos multilingues.
  • 6 fontes de produtos: mais vendidos, novidades, promoções, categoria (árvore de seleção), categoria da página inicial e seleção manual com pesquisa automática e ordem por arrastar e largar.
  • Apresentação em 6 hooks padrão ou em qualquer hook personalizado criado no momento, mais a sintaxe widget para escolher um carrossel específico num template.
  • Colunas independentes para desktop, tablet e telemóvel (1 a 8), deslocação por produto ou por linha completa, autoplay, ciclo infinito fluido e swipe tátil.
  • Cartões de produto 100 % nativos do tema (ProductAssembler + ProductPresenter + miniatura do tema): preços, etiquetas, vista rápida e adicionar ao carrinho intactos.
PrestaShop 8 e 9 Carrosséis ilimitados Hooks personalizados JS vanilla sem jQuery Multiloja
  • Reembolso em 30 dias
  • 12 meses de atualizações
  • Suporte em 24h
www.datafirefly.com/pt/
Carrossel de produtos PrestaShop com cartões de produto nativos do tema
v1.0.0 · atualizado 2026-08-26
A versão longa

Tudo o que quer saber antes de instalar.

Uma análise detalhada de como o Módulo Carrossel de Produtos PrestaShop 8/9: Sliders Ilimitados funciona, porque o construímos assim e o raciocínio por trás das funcionalidades acima.

§ 01

Cartões de produto que finalmente respeitam o seu tema

A maioria dos módulos de carrossel traz o seu próprio HTML de cartão de produto. Resultado: preços que ignoram as suas regras de apresentação, etiquetas de promoção em falta, um botão de vista rápida que não funciona e um estilo que destoa. O Product Carousel Pro renderiza cada produto através do template de miniatura do seu tema ativo, alimentado por ProductAssembler e ProductPresenter, os mecanismos internos do PrestaShop. O que vê numa página de categoria é exatamente o que obtém no carrossel: os mesmos preços, as mesmas etiquetas, a mesma vista rápida e o mesmo adicionar ao carrinho. Se mudar de tema amanhã, o carrossel acompanha sem uma linha de código.

§ 02

Seis fontes de produtos, incluindo a seleção à mão

Cada carrossel escolhe a sua fonte: mais vendidos, novidades, promoções em curso, produtos de uma categoria escolhida na árvore, categoria da página inicial ou seleção manual. Neste último modo, uma pesquisa automática encontra os seus produtos por nome ou referência, e um simples arrastar e largar fixa a sua ordem: o front-office respeita essa ordem à letra. Pode limitar o número de produtos carregados por carrossel, e os produtos inativos ou invisíveis são filtrados automaticamente.

§ 03

Qualquer posição, incluindo os seus próprios hooks

Seis hooks padrão cobrem as posições clássicas: página inicial, topo e base do conteúdo, antes do rodapé, base da ficha de produto e carrinho. Mas a verdadeira vantagem é o hook personalizado: escreva um nome no formulário, o módulo regista-o no momento e coloca {hook h='displayOMeuCarrossel'} onde quiser nos seus templates. Vários carrosséis podem partilhar o mesmo hook, ordenados por posição. E a sintaxe widget {widget name='dfproductcarousel' carousel=3} aponta para um carrossel específico, prática num CMS ou num template feito à medida.

§ 04

Um motor de deslocação cuidado, sem jQuery

O motor está escrito em JavaScript vanilla: colunas recalculadas por patamar responsivo (os valores de desktop, tablet e telemóvel que escolheu), deslocação produto a produto ou linha a linha, ciclo infinito sem solavancos graças à clonagem transparente das extremidades, autoplay com pausa ao passar o rato e com o separador oculto, swipe tátil e com rato protegido contra cliques acidentais, navegação por teclado, suporte RTL e respeito por prefers-reduced-motion. Um bloco CSS por instância aplica as colunas responsivas antes mesmo do carregamento do script: nenhuma deslocação do layout na primeira renderização.

§ 05

Cinco skins e ajustes finos, sem tocar no tema

O skin clássico deixa os seus cartões de produto rigorosamente intactos. O Minimal achata-os, o Cartão eleva-os com sombra e cantos arredondados, o Contorno enquadra-os com uma linha fina e a Secção escura assenta o carrossel sobre um fundo escuro de belo efeito na página inicial. Junte o alinhamento do título, o subtítulo, a cor de destaque (herdada do seu tema se não escolher nenhuma), o espaçamento entre produtos, três estilos de setas, dois estilos de paginação e o modo de largura total: cada carrossel ganha a sua personalidade e o seu tema nunca é alterado.