Tudo o que quer saber antes de instalar.
Uma análise detalhada de como o Módulo Carrossel de Marcas PrestaShop 8/9: Logótipos em Movimento, Grelha e Mural de Logótipos funciona, porque o construímos assim e o raciocínio por trás das funcionalidades acima.
8 formas de mostrar as suas marcas
O carrossel faz deslizar 1 a 3 linhas de logótipos com setas, pontos e deslocamento automático opcional. O deslocamento contínuo faz avançar os logótipos sem pausa em 1 a 4 linhas, com marcas diferentes em cada linha e uma linha em cada duas no sentido oposto, o efeito que se vê nas secções “confiam em nós”. O deslocamento vertical move colunas de logótipos para cima e para baixo. A grelha, o mural de logótipos com linhas finas, o mural rotativo, as etiquetas e o diretório A-Z cobrem os restantes usos, desde uma coluna lateral até uma página com todas as suas marcas.
As marcas certas, pela ordem certa
Um bloco pode mostrar todas as marcas ativas, uma seleção que ordena por arrastar, as marcas com produtos numa categoria e nas suas subcategorias, ou as da categoria consultada: na página Calçado aparecem apenas marcas de calçado. Um mínimo de produtos, 1 por defeito, deixa de fora as marcas cuja página ficaria vazia. A ordenação pode ser por nome, número de produtos, vendas no período escolhido, novidade ou ao acaso. A ordem aleatória é calculada no navegador, pelo que uma cache de página completa continua a funcionar.
Logótipos limpos, mesmo sobre fundo colorido
O PrestaShop guarda os logótipos das marcas em JPG com fundo branco, o que deixa retângulos brancos sobre um cartão cinzento ou uma secção escura. O separador Logótipos das marcas permite carregar para cada marca uma versão transparente em PNG, WebP ou SVG, usada em todos os blocos. Os SVG com scripts, eventos ou ligações externas são recusados e a pasta de carregamento está protegida. Em cartões claros, a opção Remover os fundos brancos faz desaparecer o branco dos JPG sem carregar nada. Cada marca pode ainda apontar para uma página à sua escolha em vez da sua página PrestaShop.
Em qualquer ponto da loja
Cada bloco escolhe o seu hook entre 14 posições habituais ou um hook display escrito à mão, registado automaticamente. Pode ser limitado a certos tipos de página e a certos dispositivos. Para um local preciso, a etiqueta widget mostra um bloco específico em qualquer template, o hook displayDfBrandCarousel é chamado a partir do tema e o shortcode [dfbrandcarousel id="3"] insere um bloco numa página CMS. Os esquemas usam container queries: numa coluna lateral, um bloco passa à versão compacta sem qualquer ajuste adicional.
Um editor com pré-visualização em direto
O back-office lista os seus blocos, que pode ativar, duplicar e reordenar por arrastar. O editor agrupa as definições em 5 separadores (Conteúdo, Esquema, Estilo, Animação, Apresentação) e mostra ao lado uma pré-visualização atualizada a cada alteração, em largura de computador, tablet ou telemóvel. Os modos são apresentados como cartões ilustrados. Um indicador assinala as alterações não guardadas e Ctrl+S guarda sem sair do editor. O separador Integração fornece os códigos widget, hook e shortcode de cada bloco, prontos a copiar.
Leve e acessível
O módulo não usa jQuery, nem Swiper, nem qualquer biblioteca carregada de uma CDN. O carrossel baseia-se no deslocamento nativo do navegador e o deslocamento contínuo na API Web Animations. O CSS e o JS só são carregados nas páginas onde um bloco pode aparecer. As animações param quando o bloco sai do ecrã, um botão de pausa cumpre o critério WCAG 2.2.2 e os visitantes que desativaram as animações veem logótipos parados que podem deslocar à mão. As cópias usadas para o ciclo do deslocamento ficam ocultas aos leitores de ecrã e fora da navegação por teclado.
Ainda não existem avaliações.