Kowal PageBuilder Slider Fix – slider responsivo sem compromissos

MAGENTO 2 · PAGEBUILDER · SLIDER · LUMA E HYVÄ

Kowal PageBuilder Slider Fix

Mantenha o slider nativo do PageBuilder e melhore as suas proporções, bem como a seleção de imagens para desktop/mobile. Utilize a versão standard para Luma ou o adaptador Hyvä incluído no pacote.

Proporções da imagem · Imagens desktop/mobile · Breakpoint configurável

COMO FUNCIONA NA PRÁTICA

O Magento PageBuilder oferece um slider nativo que, por definição, é uma excelente solução:

• não requer bibliotecas externas,

• está totalmente integrado com o editor de conteúdos,

• suporta imagens separadas para desktop e mobile,

• funciona corretamente com cache, Varnish e PageBuilder Preview.

É precisamente por isso que vale a pena utilizá-lo.

No entanto, na prática, muitas lojas Magento encontram os mesmos problemas, especialmente em layouts modernos e responsivos.

Na configuração standard do PageBuilder:

• a altura do slider é imposta rigidamente (min-height),

• as proporções da imagem não resultam das dimensões reais do gráfico,

• em mobile surgem margens vazias acima e abaixo do slider,

• o slider nem sempre reage corretamente à alteração de breakpoints,

• o CSS e o JS do PageBuilder impõem comportamentos difíceis de substituir sem interferir no core.

O resultado?

O slider muitas vezes fica bem apenas num ecrã –
e noutras resoluções perde as proporções ou a estética.

Kowal PageBuilder Slider Fix resolve estes problemas sem desativar o PageBuilder e sem interferir no core do Magento.

O módulo:

• remove a imposição rígida de altura (min-height) pelo PageBuilder,

• permite ao slider adaptar dinamicamente a altura à imagem,

• suporta apresentação em largura total (100% viewport width),

• gere corretamente imagens separadas para desktop e mobile,

• funciona apenas onde o slider existe efetivamente.

• utiliza text/x-magento-init – o mecanismo nativo do Magento,

• inicializa o comportamento através do seletor do slider,

• funciona por slider, e não globalmente,

• trabalha com o mecanismo data-background-images do PageBuilder,

• é compatível com PageBuilder Preview e com o editor CMS.

Isto significa:

✔ limitação da necessidade de bibliotecas adicionais; a compatibilidade requer verificação
✔ integração com cache a verificar na loja
✔ âmbito de trabalho limitado à gestão da apresentação dos sliders

Este módulo é ideal se:

• utiliza o PageBuilder Slider ou o Banner Slider,

• valoriza uma responsividade perfeita,

• quer manter as soluções nativas do Magento,

• não quer instalar sliders externos pesados,

• valoriza a estética em mobile, sem margens vazias.

Os sliders externos:

• frequentemente carregam grandes bibliotecas JS,

• não funcionam de forma ideal com o PageBuilder,

• podem ser problemáticos com cache / Varnish,

• dificultam a edição de conteúdos por pessoas não técnicas.

O nosso módulo corrige o que é necessário – e nada mais.

Kowal PageBuilder Slider Fix:

• mantém as vantagens do slider nativo do Magento,

• elimina as suas principais limitações,

• melhora a apresentação em desktop e mobile,

• é leve, rápido e seguro,

• destina-se a implementação após verificação do tema e da configuração.

Se utiliza o PageBuilder – este módulo deve ser o seu complemento natural.

Stores → Configuration → Kowal → PageBuilder Slider Fix disponibiliza Desktop Width / Height, Mobile Width / Height e Mobile Breakpoint. Os valores predefinidos são 1920 × 800, 768 × 976 e 768 px. O limite mobile também inclui um ecrã com exatamente 768 px de largura.

Em Luma, o script de altura utiliza as dimensões naturais da imagem de fundo; o adaptador Hyvä usa as proporções configuradas para a geometria do slide. A alteração da imagem reage a resize e orientationchange. A ausência de imagem mobile faz com que seja utilizada a versão desktop.

Para Hyvä, ative também Kowal_PageBuilderSliderFixHyva e, na store view correspondente, defina Hyva Compatibility → Enable Hyva Slider Fix como Yes. O seletor do adaptador está desativado por predefinição. Não o instale separadamente ao lado do pacote principal.

O adaptador suporta os campos de imagens WebP do Hyvä e a flag de lazy loading do fundo. O tema nativo é responsável pela navegação e reprodução do carrossel. O markup personalizado do slider deve manter os elementos e atributos obrigatórios do PageBuilder.

Em Luma, a inicialização utiliza text/x-magento-init e o seletor .pagebuilder-slider, sem biblioteca de carrossel adicional. O template de inicialização é adicionado no layout predefinido; o trabalho com imagens aplica-se aos elementos do slider presentes na página.

Verifique as proporções, o CSS do tema, os breakpoints, a pré-visualização do PageBuilder e o funcionamento com cache e Varnish na sua loja. Os efeitos dizem respeito à forma de apresentação dos banners; a ausência de conflitos e impacto zero no desempenho não são uma garantia universal.

Pacote kowal/module-pagebuildersliderfix, módulo Kowal_PageBuilderSliderFix. Depois de configurar o acesso ao repositório Kowal, instale o pacote, ative o módulo, atualize o Magento e limpe a cache. Em produção, inclua a compilação e a implementação de conteúdos estáticos de acordo com o processo da loja.

1. Prepara as imagens
Adiciona imagens desktop e mobile no PageBuilder.

2. Define as configurações
Configura as proporções e o limite da versão mobile.

3. O slider adapta a apresentação
O mecanismo altera a imagem e a geometria para o ecrã.

Para desktop, prepara uma imagem larga e, para mobile, uma variante vertical separada. Após a alteração da largura do ecrã, o módulo seleciona a imagem adequada.

Quando a versão mobile não existe, é utilizada a imagem desktop. O deslizamento e a reprodução dos slides continuam a ser responsabilidade do slider nativo.