{"id":823877,"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:28:22","modified_gmt":"2024-05-16T05:28:22","slug":"gu%c3%ada-paso-a-paso-para-agregar-un-bloque-html-personalizado-en-prestashop","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/es\/prestashop-blog-es\/gu%c3%ada-paso-a-paso-para-agregar-un-bloque-html-personalizado-en-prestashop\/","title":{"rendered":"Gu\u00eda paso a paso para agregar un bloque HTML personalizado en PrestaShop"},"content":{"rendered":"

 <\/p>\n

\u00bfPor qu\u00e9 deber\u00edamos a\u00f1adir un bloque HTML personalizado en nuestra Tienda PrestaShop?<\/b><\/h2>\n

Agregar un bloque HTML personalizado en el sitio web de PrestaShop puede mejorar su funcionalidad o estilo general al permitir a los propietarios de la tienda incluir textos, im\u00e1genes, enlaces u otros elementos HTML personalizados en el sitio web y estos bloques se pueden agregar para mostrar contenido diferente en diferentes controladores o p\u00e1ginas.<\/span><\/p>\n

El proceso de agregar un bloque HTML personalizado en la tienda PrestaShop es similar para todas las versiones.<\/span><\/p>\n

Para agregar un bloque personalizado, usaremos un M\u00f3dulo personalizado en la tienda PrestaShop.<\/span><\/p>\n

\u00bfPor qu\u00e9 un m\u00f3dulo personalizado?<\/b><\/h2>\n

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

La flexibilidad y una integraci\u00f3n m\u00e1s estrecha dentro de una tienda en l\u00ednea son dos ventajas principales de crear un bloque HTML personalizado utilizando un m\u00f3dulo PrestaShop espec\u00edfico y esta estrategia funciona especialmente bien cuando los propietarios de las tiendas tienen criterios espec\u00edficos que los m\u00f3dulos preexistentes no cumplen, o cuando agregan nuevas funciones. sin modificar los archivos principales de la plataforma.<\/span><\/p>\n

Al elegir crear un m\u00f3dulo personalizado, los propietarios de tiendas PrestaShop pueden adaptar con precisi\u00f3n la apariencia de su entorno de comercio electr\u00f3nico para que coincida con sus objetivos de marketing y estrategias de interacci\u00f3n con el cliente, y esta personalizaci\u00f3n permite una mayor personalizaci\u00f3n de la experiencia del usuario, lo que puede aumentar la satisfacci\u00f3n y lealtad del cliente. Adem\u00e1s, brinda a los propietarios de empresas la flexibilidad de adaptarse r\u00e1pidamente a las tendencias cambiantes del mercado y mantener una ventaja competitiva al incluir caracter\u00edsticas \u00fanicas que aumentan la satisfacci\u00f3n del cliente y la eficiencia operativa.<\/span><\/p>\n

A continuaci\u00f3n se muestra una gu\u00eda paso a paso sobre c\u00f3mo crear y utilizar un bloque HTML personalizado en la tienda PrestaShop: \u2013<\/b><\/p>\n

Paso 1: crear archivos b\u00e1sicos y directorio de m\u00f3dulos<\/b><\/h3>\n
    \n
  1. Agregar un directorio nuevo:<\/b> Navegue hasta el directorio de m\u00f3dulos de instalaci\u00f3n de PrestaShop y cree una nueva carpeta llamada ‘<\/span>mibloquehtml’<\/b>.<\/span><\/li>\n
  2. Archivo principal PHP:<\/b> Por favor cree un archivo llamado ‘<\/span>mibloquehtml.php<\/b>‘ dentro de este directorio. Este archivo contendr\u00e1 la clase principal de su m\u00f3dulo.<\/span><\/li>\n<\/ol>\n

    Paso 2: Codifique su m\u00f3dulo<\/b><\/h3>\n

    Abra ‘myhtmlblock.php’ y agregue el siguiente c\u00f3digo PHP para definir su m\u00f3dulo:<\/span><\/p>\n

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

     <\/p>\n

    Tambi\u00e9n aseg\u00farese de que en todas y cada una de las carpetas del m\u00f3dulo HTML, haya un archivo llamado ‘index.php’ que tenga el siguiente c\u00f3digo:<\/span><\/p>\n

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

     <\/p>\n

    Paso 3: agregue un archivo de plantilla<\/b><\/h3>\n

    Cree una estructura de carpetas dentro del directorio del m\u00f3dulo como esta: views\/templates\/hook y dentro del directorio de enlaces, cree un archivo llamado ‘displayHome.tpl’:<\/span><\/p>\n

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

     <\/p>\n

    Tenga en cuenta que, al principio del archivo de plantilla, se ha agregado un comentario sobre la ruta del archivo y su nombre para mostrarlo en el contenido HTML de su tienda.<\/span><\/p>\n

    Paso 4: si lo desea, incluya una p\u00e1gina de configuraci\u00f3n<\/b><\/h3>\n

    Si el propietario de la tienda desea que el contenido HTML sea configurable desde el panel de administraci\u00f3n, deber\u00e1 implementar un formulario de configuraci\u00f3n en el m\u00e9todo ‘getContent()’ de su clase de m\u00f3dulo y, como resultado, el administrador o propietario de la tienda podr\u00e1 cambiar el texto HTML sin cambiar el c\u00f3digo.<\/span><\/p>\n

    Paso 5: Instalaci\u00f3n del m\u00f3dulo<\/b><\/h3>\n
      \n
    • Ingrese al panel de administraci\u00f3n de PrestaShop.<\/span><\/li>\n
    • En M\u00f3dulos, elija Administrador de m\u00f3dulos.<\/span><\/li>\n
    • Haga clic en ‘Cargar un m\u00f3dulo’ y seleccione el archivo zip de su m\u00f3dulo, o busque su m\u00f3dulo en la lista de m\u00f3dulos si ya est\u00e1 en el servidor.<\/span><\/li>\n
    • Seleccione ‘Instalar’.<\/span><\/li>\n<\/ul>\n

      \"Instalaci\u00f3n<\/a><\/p>\n

       <\/p>\n

      Paso 6: coloque el m\u00f3dulo en otros ganchos (opcional)<\/b><\/h3>\n

      El bloque HTML personalizado en Prestashop deber\u00e1 mostrarse en varios lugares del sitio web de PrestaShop, por lo que necesitaremos cambiar el m\u00e9todo ‘install()’ del m\u00f3dulo para registrar m\u00faltiples enlaces. Cada gancho tiene un lugar designado en el sitio web donde se puede mostrar el contenido.<\/span><\/p>\n

      Los ganchos t\u00edpicos incluyen los siguientes:<\/b><\/p>\n

        \n
      • mostrar pie de p\u00e1gina<\/span><\/li>\n
      • mostrarColumnaIzquierda<\/span><\/li>\n
      • mostrarColumnaDerecha<\/span><\/li>\n
      • mostrarProductAdditionalInfo<\/span><\/li>\n
      • mostrararriba<\/span><\/li>\n<\/ul>\n

        Paso 7: Pruebe su m\u00f3dulo<\/b><\/h3>\n

        Despu\u00e9s de la instalaci\u00f3n, vaya a la p\u00e1gina de inicio de su sitio para ver su nuevo bloque HTML personalizado en acci\u00f3n.<\/span><\/p>\n

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

         <\/p>\n

        Si agreg\u00f3 un formulario de configuraci\u00f3n, intente cambiar el contenido del bloque HTML a trav\u00e9s del back office de PrestaShop para ver si se actualiza correctamente.<\/span><\/p>\n

        Este enfoque le brinda control total sobre lo que hace su m\u00f3dulo y d\u00f3nde aparece dentro de su sitio PrestaShop, lo que lo convierte en una forma poderosa de personalizar la funcionalidad y el dise\u00f1o de su tienda.<\/span><\/p>\n

        En caso de que tenga consultas\/sugerencias, puede comunicarse con nuestro portal de soporte t\u00e9cnico en nuestra direcci\u00f3n de correo electr\u00f3nico support@knowband.com.<\/span><\/p>\n

        Eche un vistazo a nuestro m\u00f3dulo m\u00e1s vendido <\/span>Supercheckout de una p\u00e1gina para Prestashop<\/span><\/a> y <\/span>Complemento de creaci\u00f3n de aplicaciones m\u00f3viles para Android e iOS de Opencart<\/span><\/a> aqu\u00ed y podr\u00e1 mejorar las im\u00e1genes del producto en su tienda utilizando el <\/span>Complemento Prestashop Product Designer \/ Customizer<\/span><\/a>.<\/span><\/p>\n

        Adem\u00e1s, puedes ver nuestros \u00faltimos v\u00eddeos aqu\u00ed:<\/span><\/p>\n

         <\/p>\n