{"id":823882,"date":"2024-05-15T12:34:44","date_gmt":"2024-05-15T12:34:44","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=823864\/"},"modified":"2024-05-16T05:43:27","modified_gmt":"2024-05-16T05:43:27","slug":"guia-passo-a-passo-para-adicionar-bloco-html-personalizado-no-prestashop","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/pt-br\/prestashop-pt-br\/guia-passo-a-passo-para-adicionar-bloco-html-personalizado-no-prestashop\/","title":{"rendered":"Guia passo a passo para adicionar bloco HTML personalizado no PrestaShop"},"content":{"rendered":"

 <\/p>\n

Por que devemos adicionar um bloco HTML personalizado em nossa Loja PrestaShop?<\/b><\/h2>\n

Adicionar um bloco HTML personalizado no site PrestaShop pode melhorar sua funcionalidade ou estilo geral, permitindo que os propriet\u00e1rios da loja incluam textos personalizados, imagens, links ou outros elementos HTML no site e esses blocos podem ser adicionados para exibir diferentes conte\u00fados em diferentes controladores ou p\u00e1ginas.<\/span><\/p>\n

O processo de adi\u00e7\u00e3o de um bloco HTML personalizado na loja PrestaShop \u00e9 semelhante para todas as vers\u00f5es.<\/span><\/p>\n

Para adicionar um bloco personalizado, usaremos um M\u00f3dulo Personalizado na loja PrestaShop.<\/span><\/p>\n

Por que um m\u00f3dulo personalizado?<\/b><\/h2>\n

\"Por<\/a><\/p>\n

Flexibilidade e maior integra\u00e7\u00e3o dentro de uma loja online s\u00e3o duas grandes vantagens de criar um bloco HTML personalizado usando um m\u00f3dulo PrestaShop espec\u00edfico e esta estrat\u00e9gia funciona especialmente bem quando os propriet\u00e1rios de lojas t\u00eam crit\u00e9rios espec\u00edficos que os m\u00f3dulos pr\u00e9-existentes n\u00e3o atendem, ou ao adicionar novas funcionalidades sem modificar os arquivos principais da plataforma \u00e9 desejado.<\/span><\/p>\n

Ao optar por criar um m\u00f3dulo personalizado, os propriet\u00e1rios de lojas PrestaShop podem adaptar com precis\u00e3o a apar\u00eancia de seu ambiente de com\u00e9rcio eletr\u00f4nico para corresponder aos seus objetivos de marketing e estrat\u00e9gias de intera\u00e7\u00e3o com o cliente, e essa personaliza\u00e7\u00e3o permite uma maior personaliza\u00e7\u00e3o da experi\u00eancia do usu\u00e1rio, o que pode aumentar a satisfa\u00e7\u00e3o e a fidelidade do cliente e al\u00e9m disso, oferece aos propriet\u00e1rios de empresas a flexibilidade para se adaptarem rapidamente \u00e0s mudan\u00e7as nas tend\u00eancias do mercado e manterem uma vantagem competitiva, incluindo recursos exclusivos que aumentam a satisfa\u00e7\u00e3o do cliente e a efici\u00eancia operacional.<\/span><\/p>\n

Abaixo est\u00e1 um guia passo a passo sobre como criar e usar um bloco HTML personalizado na loja PrestaShop: \u2013<\/b><\/p>\n

Etapa 1: crie arquivos b\u00e1sicos e diret\u00f3rio de m\u00f3dulos<\/b><\/h3>\n
    \n
  1. Adicione um novo diret\u00f3rio:<\/b> Navegue at\u00e9 o diret\u00f3rio de m\u00f3dulos de instala\u00e7\u00e3o do PrestaShop e crie uma nova pasta chamada ‘<\/span>meublocohtml’<\/b>.<\/span><\/li>\n
  2. Arquivo Principal PHP:<\/b> Por favor crie um arquivo chamado ‘<\/span>meuhtmlblock.php<\/b>‘dentro deste diret\u00f3rio. Este arquivo conter\u00e1 a classe principal do seu m\u00f3dulo.<\/span><\/li>\n<\/ol>\n

    Etapa 2: codifique seu m\u00f3dulo<\/b><\/h3>\n

    Abra ‘myhtmlblock.php’ e adicione o seguinte c\u00f3digo PHP para definir seu m\u00f3dulo:<\/span><\/p>\n

    \"Captura<\/a><\/p>\n

     <\/p>\n

    Certifique-se tamb\u00e9m de que em cada pasta do M\u00f3dulo HTML, exista um arquivo chamado ‘index.php’ com o c\u00f3digo abaixo:<\/span><\/p>\n

    \"Captura<\/a><\/p>\n

     <\/p>\n

    Etapa 3: adicionar um arquivo de modelo<\/b><\/h3>\n

    Crie uma estrutura de pastas dentro do diret\u00f3rio do m\u00f3dulo como esta: views\/templates\/hook e dentro do diret\u00f3rio hook, crie um arquivo chamado ‘displayHome.tpl’:<\/span><\/p>\n

    \"Captura<\/a><\/p>\n

     <\/p>\n

    Observe que, no in\u00edcio do arquivo Template, foi adicionado um coment\u00e1rio sobre o caminho do arquivo e seu nome para mostrar o mesmo no conte\u00fado HTML da sua loja.<\/span><\/p>\n

    Etapa 4: se desejar, inclua uma p\u00e1gina de configura\u00e7\u00e3o<\/b><\/h3>\n

    Se o propriet\u00e1rio da loja quiser tornar o conte\u00fado HTML configur\u00e1vel a partir do painel de administra\u00e7\u00e3o, ele precisar\u00e1 implementar um formul\u00e1rio de configura\u00e7\u00e3o no m\u00e9todo ‘getContent()’ da sua classe de m\u00f3dulo e, como resultado, o administrador ou propriet\u00e1rio da loja poder\u00e1 altere o texto HTML sem alterar o c\u00f3digo.<\/span><\/p>\n

    Etapa 5: Instalando o M\u00f3dulo<\/b><\/h3>\n
      \n
    • Entre no painel de administra\u00e7\u00e3o do PrestaShop.<\/span><\/li>\n
    • Em M\u00f3dulos, escolha Gerenciador de M\u00f3dulos.<\/span><\/li>\n
    • Clique em ‘Carregar um M\u00f3dulo’ e selecione o arquivo zip do seu m\u00f3dulo, ou encontre o seu m\u00f3dulo na lista de m\u00f3dulos se j\u00e1 estiver no servidor.<\/span><\/li>\n
    • Selecione ‘Instalar’.<\/span><\/li>\n<\/ul>\n

      \"Instalando<\/a><\/p>\n

       <\/p>\n

      Etapa 6: coloque o m\u00f3dulo em outros ganchos (opcional)<\/b><\/h3>\n

      O bloco HTML personalizado no Prestashop precisar\u00e1 ser exibido em v\u00e1rios lugares do site do PrestaShop, portanto, precisaremos alterar o m\u00e9todo ‘install()’ do m\u00f3dulo para registrar v\u00e1rios ganchos. Cada gancho tem um local designado no site onde o conte\u00fado pode ser mostrado.<\/span><\/p>\n

      Ganchos t\u00edpicos incluem o seguinte:<\/b><\/p>\n

        \n
      • displayFooter<\/span><\/li>\n
      • displayLeftColumn<\/span><\/li>\n
      • displayRightColumn<\/span><\/li>\n
      • displayProductAdditionalInfo<\/span><\/li>\n
      • displayTop<\/span><\/li>\n<\/ul>\n

        Etapa 7: teste seu m\u00f3dulo<\/b><\/h3>\n

        Ap\u00f3s a instala\u00e7\u00e3o, v\u00e1 para a p\u00e1gina inicial do seu site para ver seu novo bloco HTML personalizado em a\u00e7\u00e3o.<\/span><\/p>\n

        \"bloco<\/a><\/p>\n

         <\/p>\n

        Se voc\u00ea adicionou um formul\u00e1rio de configura\u00e7\u00e3o, tente alterar o conte\u00fado do bloco HTML atrav\u00e9s do back office do PrestaShop para ver se ele \u00e9 atualizado corretamente.<\/span><\/p>\n

        Essa abordagem oferece controle total sobre o que seu m\u00f3dulo faz e onde ele aparece no site PrestaShop, tornando-o uma maneira poderosa de personalizar a funcionalidade e o design da sua loja.<\/span><\/p>\n

        Caso voc\u00ea tenha d\u00favidas\/sugest\u00f5es, voc\u00ea pode entrar em contato com nosso portal de suporte t\u00e9cnico em nosso endere\u00e7o de e-mail support@knowband.com.<\/span><\/p>\n

        D\u00ea uma olhada em nosso m\u00f3dulo mais vendido <\/span>Supercheckout de uma p\u00e1gina para Prestashop<\/span><\/a> e <\/span>Plug-in Opencart para Android e iOS Mobile App Builder<\/span><\/a> aqui e voc\u00ea pode aprimorar o visual do produto em sua loja usando o <\/span>Complemento para Designer \/ Customizador de Produto Prestashop<\/span><\/a>.<\/span><\/p>\n

        Al\u00e9m disso, voc\u00ea pode assistir nossos v\u00eddeos mais recentes aqui:<\/span><\/p>\n

         <\/p>\n