Crear página personalizada con Prestashop 1.6

Crear página personalizada prestashopEn esta primera entrada de la serie de tutoriales de Prestashop, os quiero explicar a crear una página personalizada en Prestashop 1.6, funciona también en versiones anteriores.

Ya que hay veces que surge la necesidad de crear una página nueva en prestashop y que por defecto no existe en prestashop, por ejemplo yo necesitaba crear una página personalizada en prestashop cuando un cliente me pedia mostrar el recorrido de su empresa y mostrando los productos que vendía en esa época. Por lo tanto opté por crear una página personalizada.

Así que sin mas emprezamos a crear nuestra página personaliza en prestashop

Crear página personalizada prestashop

Entramos a la raíz de Prestashop y creamos un archivo con el nombre que queramos, en nuestro caso paginaejemplo.php

 

Dentro de este archivo copiamos esto

<?
    require(dirname(__FILE__).'/config/config.inc.php');
    Tools::displayFileAsDeprecated();
    Tools::redirect('index.php?controller=paginaejemplo', __PS_BASE_URI__, null, 'HTTP/1.1 301 Moved Permanently');
?>

En el trozo de código, esta creando un controlador llamado paginaejemplo.

Vamos a crearlo:

El  archivo controlador lo tenemos que guardar en la carpeta  controllers>front.

En esta carpeta, creamos un archivo, en nuestro caso con el nombre paginaejemploController.php.

Dentro de este archivo copiamos esto

class paginaejemploControllerCore extends FrontController{

      public $php_self = 'paginaejemplo';
      public function setMedia(){
         parent::setMedia();
         $this->addCSS(_THEME_CSS_DIR_.'paginaejemplo.css');
      }

      public function init(){
         parent::init();
      }
      public function initContent(){
          parent::initContent();
          $this->setTemplate(_PS_THEME_DIR_.'paginaejemplo.tpl');
      }
}

En este archivo estamos declarando una clase con el nombre paginaejemploControllerCore que extiende de FrontController.

public $php_self = 'paginaejemplo';

Aquí especificamos nuestro archivo php anterior que hemos creado en la raíz de prestashop.

$this->addCSS(_THEME_CSS_DIR_.'paginaejemplo.css');

Estas linea nos dice que este controlador recoja el archivo .css que se encuentra en la carpeta de nuestro tema por defecto.

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

Por ultimo esta linea nos dice que nuestro controlador busque nuestro archivo .tpl en el tema por defecto.

Las funciones que no he comentado como el function init() y el function initContent() lo explicare en otra entrada, pero para que os hagáis una idea, la primera es para inicializar las clases que queramos y la segunda para inicializar el contenido hacer peticiones a las clases y también poder enviarle a nuestro .tpl, las variables smarty que necesitemos.

Modificación del .tpl, .css de nuestra página personalida en Prestashop

Nos dirigimos ahora a themes>default-bootstrap 

Creamos nuestro archivo paginaejemplo.tpl

<h1 class="titularPaginaPer">
Estoy en una página personalizada
</h1>

Ahora mismo tenemos nuestra página personalizada creada, podemos darle estilo ya que hemos declarado un css para esta página, por lo tanto nos dirijimos a themes>default-bootstrap>css

Aquí añadimos un archivo paginaejemplo.css

.titularPaginaPer{Background:red;}

Ya tendríamos nuestra página personalizada, pero puede ocurrir que aun no funcione, si esto nos sucediera vamos a cache y eliminamos el archivo class_index.php, este archivo lo regenera automáticamente prestashop con todas las páginas actualizadas. Ahora ya tendría que funcionar.

Pero si queréis añadirle una url amigable a nuestra nueva página, vamos al panel de administración y nos dirigimos a seo y urls, nos sale una lista con todas las páginas que tiene nuestro prestashop. Pulsamos en añadir nuevo, se abre una nueva ventana, como la de abajo.

Crear página personalizada prestashop

En páginas buscaremos nuestra páginaejemplo y le pondremos el titulo que queramos y la meta descripción, tags y url amigable.
Ahora ya tendríamos nuestra página personalizada, recordar activar las rutas amigables, es en seo y urls, en el apartado Configuración de los enlaces y marcamos urls amigables si.

Espero que os haya gustado este tutorial de como crear página personalizada en prestashop, os dejo el ejemplo  de como crear una página en prestashop para que os lo descargueís. Descargar

Saludos y compartir por vuestras redes sociales, el tutorial crear página personalizada en prestashop.

Summary
Review Date
Author Rating
51star1star1star1star1star

Comentarios:

    1. David Gutiérrez Autor

      Hola Sergio,

      te envió un ejemplo para que lo compruebes, ya que a mi me ha funcionado crear la página personalizada prestashop , correctamente puede ser que sea porque wordpress genera las comillas simples ” de otra manera y luego al copiarlo, he editado los post y ahora no causa ningún problema las comillas simples y he subido un archivo .rar para que quede mas claro el tutorial.
      Saludos y gracias

      Responder
  1. ale

    Muy buen aporte

    estoy trabajando con prestashop 1.6 y necesito una pagina nueva, hice exactamene lo que indicas pero al entrar a la pagina me aparece en blanco no me muestra nada, podrias ayudarme.

    saludos

    Responder
  2. Ivan

    He probado lo que has dicho y no me ha funcionado, he repetido los mismos pasos bajandome el ejemplo que has puesto y tampoco me va, no me aparece en la lista de Seo + URLs.

    Borré el class index y tambien cache pero nada.

    Responder
    1. David Gutiérrez Autor

      He probado otra vez y a mi me funciona, has seguido todos los pasos? por comentarios anteriores a la gente le ha funcionado.
      Exactamente no se que te puede ocurrir pero entiendo que a lo mejor te has dejado algún paso, ya que si dices que has borrado el class index y cache.

      Lo siento por no poder ayudarte más, dime cualquier cosa y te digo.

      Responder
  3. Yeltdiss

    Posible hacer este cambio en prestashop para hacer una integración de mi web inmobiliaria de mi novia

    nstanciación de Componentes BW
    A continuación se indica cómo instanciar componentes del Buscador Web fuera de su entorno de escritorio y mantener la comunicación con este.
    Componentes del Buscador Web
    BuscadorCompacto: Componente que instancia una versión reducida de los controles para filtrar la búsqueda de inmuebles.
    Destacados: Componente que muestra las ofertas destacadas individualmente del listado de inmuebles.
    Buscador: Componente que instancia la versión completa de los controles para filtrar la búsqueda de inmuebles. También incluye el listado de resultados y detalles de los inmuebles.
    Implementación en la web
    Alojar en root de la web, el fichero inmofactory_helper.html1 (suministrado por Inmofactory).
    En cada página donde se desee la ubicación de un componente Buscador Web, deberá incluirse el siguiente código en la sección de la misma:

    Código a insertar en la página para crear un Buscador (con los parámetros por defecto):
       
            parametros.componente = “Buscador”;
            parametros.idpublicacion = “NNNN”;
            new Ib2c(parametros);
       
    Código a insertar en la página para crear un BuscadorCompacto o unos Destacados (con los parámetros por defecto):
       
            parametros.urlbuscador = “http://RUTA_WEB_DEL_CLIENTE/PAGINA_DEL_BUSCADOR”;
            parametros.componente = “BuscadorCompacto”;
            parametros.idpublicacion = “NNNN”;
            new Ib2c(parametros);
       
    Los posibles parámetros que puede informar el cliente son:
    parametros.componente: Indica el componente a instanciar:  ”BuscadorCompacto”, “Destacados” o “Buscador“

    parametros.idpublicacion: ID de la publicación a mostrar en el buscador (suministrado por Inmofactory).

    parametros.dominiobase: (OPCIONAL) Es la ruta de la  web del cliente. Si no lo informa el cliente este valor se informará automáticamente. Se puede informar tanto con http como sin. Útil sobre todo para webs que no estén ubicadas en el root de un dominio.

    parametros.idioma: (OPCIONAL) Idioma a mostrar la web. Por defecto: Español
    Valores válidos:
    “es” = Español “de” = Alemán “fr” = Francés “ca” = Catalán
    “eu” = Euskera “en” = Inglés “pt” = Portugués

    parametros.modalidad: (OPCIONAL) Tipo de transacción a la que se limitará el buscador. Por defecto: Todos.
    Valores válidos:
    “1”=Venta “3”=Alquiler ”4”=Traspaso ”7”=Compartir “8”=Alquiler vacacional

    parametros.mostrarsoloadjudicados: (OPCIONAL) Indica si se debe limitar el buscador a sólo mostrar los inmuebles de adjudicados bancarios. Por defecto: “0”.
    Valores válidos: “1”=Sólo Adjudicados Bancarios, “0”=Todos

    parametros.mostrardestacados: (OPCIONAL) Indica si se deben mostrar los destacados entre la parrilla y los filtros en la pantalla del Buscador. Por defecto: “1”.
    Valores válidos “0”=No mostrar destacados, “1”=Si mostrar destacados.

    parametros.mostrargrid: (OPCIONAL) Indica si se debe mostrar el grid de resultados en la pantalla del Buscador la primera vez que accedemos a él. Por defecto: Si.
    Valores válidos “0” = no mostrar, cualquier otro valor muestra la parrilla desplegada

    parametros.urlbuscador: (OPCIONAL) Informa la ruta web donde el cliente ha instanciado el componente Buscador. Se usa exclusivamente en el componente “BuscadorCompacto” y “Destacados” para indicar a qué página debe ir la web para mostrar los resultados.

    Resumen del procedimiento
    1. Ubicar en root de su web, el fichero inmofactory_helper.html (suministrado por Inmofactory).
    2. En las páginas donde se instancien componentes BW incluir el siguiente código en la sección :

    3. Insertar el siguiente código en la página donde queremos instanciar él componente elegido de una publicación:
       
            parametros.componente = “Componente_Elegido”;
            parametros.idpublicacion = “9999”;
            new Ib2c(parametros);
       

    Ejemplo de código con todos los parámetros posibles

    En la web http://www.hostinggratis.com/carpeta
    Queremos crear un Buscador Compacto de la publicación “9999” en catalán, limitado a inmuebles en alquiler que sean adjudicados bancarios, que la página del buscador no muestre la lista de resultados la primera vez que se entra y que tampoco muestre inmuebles destacados.
    Además esta web está en un hosting gratuito donde no tenemos la web en el root del dominio ni podemos copiar en ese root el fichero inmofactory_helper.html suministrado.
       
            parametros.componente = “BuscadorCompacto”;
            parametros.idpublicacion = “9999”;
            parametros.idioma = “ca”;
            parametros.modalidad = “3”;
            parametros.mostrarsoloadjudicados = “1”;
            parametros.mostrardestacados = “0”;
            parametros.mostrargrid = “0”;
            parametros.urlbuscador = ” http://www.hostinggratis.com/carpeta/buscador“;
            parametros.dominiobase = “http://www.hostinggratis.com/carpeta”;
            new Ib2c(parametros);
       

    Responder
    1. David Gutiérrez Autor

      Hola Yeltdiss,

      Podrías explicarlo un poco más corto? primero de todo si vas a montar un negocio te recomiendo que pagues un hosting como mínimo, ya que los gratuitos para montar un negocio… dejan mucho que desear

      Saludos,

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada.