Guia passo a passo para adicionar bloco HTML personalizado no PrestaShop

Adicionar bloco HTML personalizado no PrestaShop | Guia passo a passo da Knowband

 

Por que devemos adicionar um bloco HTML personalizado em nossa Loja PrestaShop?

Adicionar um bloco HTML personalizado no site PrestaShop pode melhorar sua funcionalidade ou estilo geral, permitindo que os proprietários da loja incluam textos personalizados, imagens, links ou outros elementos HTML no site e esses blocos podem ser adicionados para exibir diferentes conteúdos em diferentes controladores ou páginas.

O processo de adição de um bloco HTML personalizado na loja PrestaShop é semelhante para todas as versões.

Para adicionar um bloco personalizado, usaremos um Módulo Personalizado na loja PrestaShop.

Por que um módulo personalizado?

Por que um módulo personalizado - Knowband

Flexibilidade e maior integração dentro de uma loja online são duas grandes vantagens de criar um bloco HTML personalizado usando um módulo PrestaShop específico e esta estratégia funciona especialmente bem quando os proprietários de lojas têm critérios específicos que os módulos pré-existentes não atendem, ou ao adicionar novas funcionalidades sem modificar os arquivos principais da plataforma é desejado.

Ao optar por criar um módulo personalizado, os proprietários de lojas PrestaShop podem adaptar com precisão a aparência de seu ambiente de comércio eletrônico para corresponder aos seus objetivos de marketing e estratégias de interação com o cliente, e essa personalização permite uma maior personalização da experiência do usuário, o que pode aumentar a satisfação e a fidelidade do cliente e além disso, oferece aos proprietários de empresas a flexibilidade para se adaptarem rapidamente às mudanças nas tendências do mercado e manterem uma vantagem competitiva, incluindo recursos exclusivos que aumentam a satisfação do cliente e a eficiência operacional.

Abaixo está um guia passo a passo sobre como criar e usar um bloco HTML personalizado na loja PrestaShop: –

Etapa 1: crie arquivos básicos e diretório de módulos

  1. Adicione um novo diretório: Navegue até o diretório de módulos de instalação do PrestaShop e crie uma nova pasta chamada ‘meublocohtml’.
  2. Arquivo Principal PHP: Por favor crie um arquivo chamado ‘meuhtmlblock.php‘dentro deste diretório. Este arquivo conterá a classe principal do seu módulo.

Etapa 2: codifique seu módulo

Abra ‘myhtmlblock.php’ e adicione o seguinte código PHP para definir seu módulo:

Captura de tela do código PHP

 

Certifique-se também de que em cada pasta do Módulo HTML, exista um arquivo chamado ‘index.php’ com o código abaixo:

Captura de tela do bloco HTML personalizado no PrestaShop

 

Etapa 3: adicionar um arquivo de modelo

Crie uma estrutura de pastas dentro do diretório do módulo como esta: views/templates/hook e dentro do diretório hook, crie um arquivo chamado ‘displayHome.tpl’:

Captura de tela do bloco HTML personalizado no PrestaShop

 

Observe que, no início do arquivo Template, foi adicionado um comentário sobre o caminho do arquivo e seu nome para mostrar o mesmo no conteúdo HTML da sua loja.

Etapa 4: se desejar, inclua uma página de configuração

Se o proprietário da loja quiser tornar o conteúdo HTML configurável a partir do painel de administração, ele precisará implementar um formulário de configuração no método ‘getContent()’ da sua classe de módulo e, como resultado, o administrador ou proprietário da loja poderá altere o texto HTML sem alterar o código.

Etapa 5: Instalando o Módulo

  • Entre no painel de administração do PrestaShop.
  • Em Módulos, escolha Gerenciador de Módulos.
  • Clique em ‘Carregar um Módulo’ e selecione o arquivo zip do seu módulo, ou encontre o seu módulo na lista de módulos se já estiver no servidor.
  • Selecione ‘Instalar’.

Instalando o Módulo

 

Etapa 6: coloque o módulo em outros ganchos (opcional)

O bloco HTML personalizado no Prestashop precisará ser exibido em vários lugares do site do PrestaShop, portanto, precisaremos alterar o método ‘install()’ do módulo para registrar vários ganchos. Cada gancho tem um local designado no site onde o conteúdo pode ser mostrado.

Ganchos típicos incluem o seguinte:

  • displayFooter
  • displayLeftColumn
  • displayRightColumn
  • displayProductAdditionalInfo
  • displayTop

Etapa 7: teste seu módulo

Após a instalação, vá para a página inicial do seu site para ver seu novo bloco HTML personalizado em ação.

bloco HTML personalizado

 

Se você adicionou um formulário de configuração, tente alterar o conteúdo do bloco HTML através do back office do PrestaShop para ver se ele é atualizado corretamente.

Essa abordagem oferece controle total sobre o que seu módulo faz e onde ele aparece no site PrestaShop, tornando-o uma maneira poderosa de personalizar a funcionalidade e o design da sua loja.

Caso você tenha dúvidas/sugestões, você pode entrar em contato com nosso portal de suporte técnico em nosso endereço de e-mail support@knowband.com.

Dê uma olhada em nosso módulo mais vendido Supercheckout de uma página para Prestashop e Plug-in Opencart para Android e iOS Mobile App Builder aqui e você pode aprimorar o visual do produto em sua loja usando o Complemento para Designer / Customizador de Produto Prestashop.

Além disso, você pode assistir nossos vídeos mais recentes aqui:

 

 

Adrienne

We are professionals in the eCommerce industry, specializing in plugin development. With years of experience, We provide the best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify. We also offer custom module development and customization services for websites and modules. Our team remains at the forefront of industry trends, delivering cutting-edge solutions to enhance eCommerce website functionality. With a customer-centric approach, our company is trusted partner for eCommerce plugin solutions.

Leave a Reply

Your email address will not be published. Required fields are marked *