Guía paso a paso para agregar un bloque HTML personalizado en PrestaShop

Agregar bloque HTML personalizado en PrestaShop | Guía paso a paso de Knowband

 

¿Por qué deberíamos añadir un bloque HTML personalizado en nuestra Tienda PrestaShop?

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ágenes, 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áginas.

El proceso de agregar un bloque HTML personalizado en la tienda PrestaShop es similar para todas las versiones.

Para agregar un bloque personalizado, usaremos un Módulo personalizado en la tienda PrestaShop.

¿Por qué un módulo personalizado?

Por qué un módulo personalizado - Knowband

La flexibilidad y una integración más estrecha dentro de una tienda en línea son dos ventajas principales de crear un bloque HTML personalizado utilizando un módulo PrestaShop específico y esta estrategia funciona especialmente bien cuando los propietarios de las tiendas tienen criterios específicos que los módulos preexistentes no cumplen, o cuando agregan nuevas funciones. sin modificar los archivos principales de la plataforma.

Al elegir crear un módulo personalizado, los propietarios de tiendas PrestaShop pueden adaptar con precisión la apariencia de su entorno de comercio electrónico para que coincida con sus objetivos de marketing y estrategias de interacción con el cliente, y esta personalización permite una mayor personalización de la experiencia del usuario, lo que puede aumentar la satisfacción y lealtad del cliente. Además, brinda a los propietarios de empresas la flexibilidad de adaptarse rápidamente a las tendencias cambiantes del mercado y mantener una ventaja competitiva al incluir características únicas que aumentan la satisfacción del cliente y la eficiencia operativa.

A continuación se muestra una guía paso a paso sobre cómo crear y utilizar un bloque HTML personalizado en la tienda PrestaShop: –

Paso 1: crear archivos básicos y directorio de módulos

  1. Agregar un directorio nuevo: Navegue hasta el directorio de módulos de instalación de PrestaShop y cree una nueva carpeta llamada ‘mibloquehtml’.
  2. Archivo principal PHP: Por favor cree un archivo llamado ‘mibloquehtml.php‘ dentro de este directorio. Este archivo contendrá la clase principal de su módulo.

Paso 2: Codifique su módulo

Abra ‘myhtmlblock.php’ y agregue el siguiente código PHP para definir su módulo:

Captura de pantalla del código PHP

 

También asegúrese de que en todas y cada una de las carpetas del módulo HTML, haya un archivo llamado ‘index.php’ que tenga el siguiente código:

Captura de pantalla del bloque HTML personalizado en PrestaShop

 

Paso 3: agregue un archivo de plantilla

Cree una estructura de carpetas dentro del directorio del módulo como esta: views/templates/hook y dentro del directorio de enlaces, cree un archivo llamado ‘displayHome.tpl’:

Captura de pantalla del bloque HTML personalizado en PrestaShop

 

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.

Paso 4: si lo desea, incluya una página de configuración

Si el propietario de la tienda desea que el contenido HTML sea configurable desde el panel de administración, deberá implementar un formulario de configuración en el método ‘getContent()’ de su clase de módulo y, como resultado, el administrador o propietario de la tienda podrá cambiar el texto HTML sin cambiar el código.

Paso 5: Instalación del módulo

  • Ingrese al panel de administración de PrestaShop.
  • En Módulos, elija Administrador de módulos.
  • Haga clic en ‘Cargar un módulo’ y seleccione el archivo zip de su módulo, o busque su módulo en la lista de módulos si ya está en el servidor.
  • Seleccione ‘Instalar’.

Instalación del módulo

 

Paso 6: coloque el módulo en otros ganchos (opcional)

El bloque HTML personalizado en Prestashop deberá mostrarse en varios lugares del sitio web de PrestaShop, por lo que necesitaremos cambiar el método ‘install()’ del módulo para registrar múltiples enlaces. Cada gancho tiene un lugar designado en el sitio web donde se puede mostrar el contenido.

Los ganchos típicos incluyen los siguientes:

  • mostrar pie de página
  • mostrarColumnaIzquierda
  • mostrarColumnaDerecha
  • mostrarProductAdditionalInfo
  • mostrararriba

Paso 7: Pruebe su módulo

Después de la instalación, vaya a la página de inicio de su sitio para ver su nuevo bloque HTML personalizado en acción.

bloque HTML personalizado

 

Si agregó un formulario de configuración, intente cambiar el contenido del bloque HTML a través del back office de PrestaShop para ver si se actualiza correctamente.

Este enfoque le brinda control total sobre lo que hace su módulo y dónde aparece dentro de su sitio PrestaShop, lo que lo convierte en una forma poderosa de personalizar la funcionalidad y el diseño de su tienda.

En caso de que tenga consultas/sugerencias, puede comunicarse con nuestro portal de soporte técnico en nuestra dirección de correo electrónico support@knowband.com.

Eche un vistazo a nuestro módulo más vendido Supercheckout de una página para Prestashop y Complemento de creación de aplicaciones móviles para Android e iOS de Opencart aquí y podrá mejorar las imágenes del producto en su tienda utilizando el Complemento Prestashop Product Designer / Customizer.

Además, puedes ver nuestros últimos vídeos aquí:

 

 

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 *