/

19 mayo, 2023

Como crear una landing page en Prestashop sin modulos

Migrar a prestashop 1.8

Crear una landing page personalizada en PrestaShop sin el uso de módulos adicionales puede ser un poco más desafiante que con su uso, debido a que PrestaShop no tiene una funcionalidad directa para este propósito en su interfaz de usuario.

Sin embargo, es posible realizarlo modificando directamente los archivos de tema y de plantilla de tu tienda PrestaShop.

Crear landing page en prestashop 1.8

A continuación se detallan los pasos para hacerlo.

Este procedimiento requiere algo de conocimiento de HTML, CSS y PHP.

Paso 1: Crear una nueva página de CMS

  1. Inicia sesión en tu panel de administración de PrestaShop.
  2. Ve a «Preferencias» > «CMS».
  3. Haz clic en «Agregar nueva página CMS».
  4. Completa los campos necesarios (título, contenido, etc.). No te preocupes por la apariencia en este punto. Esta página simplemente se utilizará para darle a PrestaShop un «slug» URL para tu página de aterrizaje.

Paso 2: Crear un nuevo controlador

  1. En tu editor de texto, crea un nuevo archivo PHP llamado NewProductController.php (puedes reemplazar «NewProduct» con lo que quieras).
  2. Coloca este archivo en la carpeta controllers/front de tu instalación PrestaShop.
  3. En este archivo, coloca el siguiente código:
<?php
class NewProductControllerCore extends FrontController
{
  public $php_self = 'newproduct';

  public function initContent()
  {
    parent::initContent();

    $this->setTemplate(_PS_THEME_DIR_.'newproduct.tpl');
  }
}

Paso 3: Crear un nuevo archivo de plantilla

  1. En tu editor de texto, crea un nuevo archivo .tpl llamado newproduct.tpl (debe coincidir con el nombre que colocaste en $this->setTemplate(_PS_THEME_DIR_.'newproduct.tpl'); en el controlador).
  2. Coloca este archivo en la carpeta de tu tema, por ejemplo themes/mytheme/.
  3. Este archivo será el lienzo en blanco para tu página de aterrizaje. Aquí puedes crear la página exactamente como la quieres, en HTML/CSS. No olvides incluir {include file='checkout/cart.tpl'} en el lugar que deseas que se muestre el formulario de compra.

Paso 4: Asegúrate de que PrestaShop reconozca tu nuevo controlador

  1. Ve a tu base de datos PrestaShop.
  2. Busca la tabla llamada ps_meta.
  3. Haz clic en «Insertar» para agregar una nueva fila. El campo «page» debe ser el nombre de tu controlador (sin el «Controller» al final, en este caso «newproduct»). Deja todos los demás campos como están.
  4. Ve a la tabla llamada ps_meta_lang.
  5. Haz clic en «Insertar» para agregar una nueva fila. El campo «id_meta» debe ser el ID de la fila que acabas de insertar en ps_meta. El campo «url_rewrite» debe ser el «slug» URL de tu página de CMS.
  6. Limpia la caché de tu tienda PrestaShop.

Después de esto, debes poder acceder a tu nueva página de aterrizaje en la URL que especificaste en el paso 4.5.

Por favor, ten en cuenta que estos pasos son para una configuración estándar de PrestaShop.

Dependiendo de cómo esté configurada tu tienda, los pasos pueden variar ligeramente.

Crear landing page en prestashop 1.7

Los pasos que mencioné anteriormente son compatibles con PrestaShop 1.7, sin embargo, hay una pequeña diferencia en la estructura del controlador y la plantilla. Aquí te dejo los pasos ajustados para PrestaShop 1.7:

Paso 1: Crear una nueva página de CMS

Esto es lo mismo que en la respuesta anterior.

Paso 2: Crear un nuevo controlador

  1. En tu editor de texto, crea un nuevo archivo PHP llamado NewProductController.php (puedes reemplazar «NewProduct» con lo que quieras).
  2. Coloca este archivo en la carpeta controllers/front de tu instalación PrestaShop.
  3. En este archivo, coloca el siguiente código:
phpCopy code<?php
class NewProductControllerCore extends FrontController
{
  public $php_self = 'newproduct';

  public function initContent()
  {
    parent::initContent();

    $this->setTemplate('catalog/newproduct');
  }
}

Paso 3: Crear un nuevo archivo de plantilla

  1. En tu editor de texto, crea un nuevo archivo .tpl llamado newproduct.tpl (debe coincidir con el nombre que colocaste en $this->setTemplate('catalog/newproduct'); en el controlador).
  2. Coloca este archivo en la carpeta themes/mytheme/templates/catalog/ de tu tema.
  3. Este archivo será el lienzo en blanco para tu página de aterrizaje. Aquí puedes crear la página exactamente como la quieres, en HTML/CSS. No olvides incluir {include file='checkout/cart.tpl'} en el lugar que deseas que se muestre el formulario de compra.

Paso 4: Asegúrate de que PrestaShop reconozca tu nuevo controlador

  1. Ve a tu base de datos PrestaShop.
  2. Busca la tabla llamada ps_meta.
  3. Haz clic en «Insertar» para agregar una nueva fila. El campo «page» debe ser el nombre de tu controlador (sin el «Controller» al final, en este caso «newproduct»). Deja todos los demás campos como están.
  4. Ve a la tabla llamada ps_meta_lang.
  5. Haz clic en «Insertar» para agregar una nueva fila. El campo «id_meta» debe ser el ID de la fila que acabas de insertar en ps_meta. El campo «url_rewrite» debe ser el «slug» URL de tu página de CMS.
  6. Limpia la caché de tu tienda PrestaShop.

Ahora deberías poder acceder a tu nueva página de aterrizaje en la URL que especificaste en el paso 4.5.

Por favor, ten en cuenta que estos pasos son para una configuración estándar de PrestaShop.

Dependiendo de cómo esté configurada tu tienda, los pasos pueden variar ligeramente.

Crear landing page en prestashop sin tocar la base de datos manualmente

Para hacer esto sin tocar la base de datos, necesitaremos sobrescribir un controlador existente en lugar de crear uno nuevo.

Aquí te explicaré cómo sobrescribir el controlador de productos, pero puedes sobrescribir cualquier controlador que te parezca adecuado.

Paso 1: Crear un producto

  1. Entra en tu panel de administración de PrestaShop.
  2. Ve a «Catálogo» > «Productos».
  3. Haz clic en «Nuevo Producto».
  4. Llena la información del producto como lo harías normalmente.

Paso 2: Crear una plantilla personalizada

  1. En tu editor de texto, crea un nuevo archivo .tpl llamado product-new.tpl.
  2. Coloca este archivo en la carpeta themes/mytheme/templates/catalog de tu tema.
  3. Este archivo será el lienzo en blanco para tu página de aterrizaje. Aquí puedes crear la página exactamente como la quieres, en HTML/CSS.

Paso 3: Sobrescribir el controlador de producto

  1. En tu editor de texto, crea un nuevo archivo PHP llamado ProductController.php.
  2. Coloca este archivo en la carpeta override/controllers/front de tu instalación PrestaShop.
  3. En este archivo, coloca el siguiente código:
<?php
class ProductController extends ProductControllerCore
{
  public function initContent()
  {
    if ($this->display == 'full_page' && $this->getIdProduct() == YOUR_PRODUCT_ID) {
      $this->setTemplate('catalog/product-new');
      return;
    }

    parent::initContent();
  }
}

Donde YOUR_PRODUCT_ID es el ID del producto que acabas de crear.

Paso 4: Limpiar la caché de clases

PrestaShop almacena una copia de todas las clases en la caché para mejorar el rendimiento.

Cuando sobrescribes una clase, necesitas eliminar esta caché para que PrestaShop vea los cambios.

  1. Ve a tu directorio de instalación de PrestaShop.
  2. Entra en la carpeta var/cache.
  3. Elimina la carpeta prod.

Después de esto, cuando vayas a la página del producto que creaste, en lugar de ver la página de producto normal, verás la página de aterrizaje que creaste.

Por favor, ten en cuenta que estos pasos son para una configuración estándar de PrestaShop.

Dependiendo de cómo esté configurada tu tienda, los pasos pueden variar ligeramente.

Comparte este artículo y sé parte de la corriente de creatividad, innovación y diseño en las redes sociales.

Si te ha inspirado lo que has leído, compártelo con tu mundo.

LinkedIn
Facebook
WhatsApp
Skype
Telegram
Email
Twitter