Integrar Prestashop y WordPress

Integrar Prestashop y WordPress

Prestashop, es uno de los sistemas para montar una tienda en internet que más está creciendo en los últimos tiempos. De origen francés, cuenta con soporte para casi todos los idiomas conocidos y una comunidad de usuarios de las más activas que he conocido. Ya ha superado la barrera de las 100.00 tiendas online y sigue creciendo. Además, gracias a las mejoras implementadas a partir de la versión 1.4 sus actualizaciones se hacen de forma más sencilla, lo que permite que un usuario sin demasiados conocimientos pueda encargarse tanto de la parte de gestión de la tienda, como del mantenimiento técnico de la misma. Además parte de su popularidad la debe también a que se trata de una solución de código abierto y completamente gratuita. No voy a hablar más sobre esto, porque en su web y en el todopoderoso google, podéis encontrar mucho más de lo que yo pueda contar aquí.

integrar prestashop wordpress

Una de las preguntas que más he visto por internet por parte de los usuarios de este sistema de venta online y que quedan menos despejadas es acerca de la integración de esta plataforma de venta online prestashop, con uno de los mejores (en mi opinión) gestores de contenidos (CMS) WordPress. La primera pregunta que se me vino a la cabeza cuando leí por primera vez esta cuestión es ¿por qué alguien quiere unir prestashop y wordpress?. Pues bien, pueden darse dos circunstancias:

  1. Que una persona tenga un blog (wordpress) y ahora quiera empezar a vender productos por internet, aprovechando que ya tiene un número de visitas relativamente importante.
  2. Que alguien tenga una tienda online con prestashop y ahora quiera tener además un blog corporativo para publicar información detallada de los artículos, escribir propuestas y reviews, y mantener una comunidad de clientes.
Uno de los pocos defectos que se achacan a prestashop es que no cuenta con un gestor de contenidos especialmente bueno, si bien existe la promesa por parte del equipo de desarrollo de mejorarlo en futuras versiones. Sin embargo, yo no creo que eso pueda ser considerado como un fallo o un defecto, simplemente prestashop no está pensado para ser un blog ni un gestor de contenidos.  Algo similar sucede con wordpress, es un fantástico gestor de contenidos y si bien existen plugins que permiten “convertir el blog en una tienda online” son bastante limitados en sus versiones gratuitas e incluso en las versiones de pago están bastante lejos de la potencia de prestashop. Por este motivo, una de las mejores opciones es unir ambos sistemas.
.

¿Cómo integrar prestashop y wordpress?

Es este artículo, voy a centrarme en la segunda de las opciones de las que he hablado antes (Que alguien tenga una tienda online con prestashop y ahora quiera tener además un blog corporativo) fundamentalmente, porque cada una se debe abordar de una forma diferente, debido a la propia estructura de carpetas en el servidor. En el primer caso wordpress está en el directorio raíz y prestashop en un subdirectorio y en el segundo, es prestashop el que está en el directorio raíz y wordpress en un subdirectorio (por ejemplo en la carpeta /blog).

Existen varias formas de hacer esto, e incluso se podrían mantener separados pero si conseguimos que el visitante pueda ver el blog sin salir de la tienda, es más probable que siga viendo productos y que compre. Por ese motivo, aquí voy a poner una forma de tener un blog y una tienda en prestashop con instalaciones separadas, pero de forma transparente para el navegante, es decir que el que esté navegando por la tienda online no va a percibir el cambio entre el blog y la tienda online. Más adelante, escribiré sobre cómo hacer una verdadera integración, pero esa es una tarea un poco más compleja y que requiere unos ciertos conocimientos.

Para el que esté dispuesto a gastarse algo de dinero en hacerlo de una forma todavía más sencilla, también existen módulos de pago en la PrestaStore (tienda de módulos y temas de prestashop), pero com ya he dicho, no son gratuitos y además le quitan parte de la gracia al asunto.

¿Qué necesitamos?

Una instalacion de prestashop en el directorio raíz (por ejemplo www.tudominio.com) y una instalacion de wordpress en un subdirectorio (por ejemplo www.tudominio.com/blog), un poco de paciencia y un editor (dreamweaver por ejemplo) aunque el propio block de notas de windows nos puede servir.

.

¿Qué es lo que vamos a hacer?

Realmente, lo que vamos a hacer es modificar los archivos header.php y footer.php del tema de wordpress que estamos utilizando (en este ejemplo voy a hacerlo con el theme por defecto de wordpress) para que el blog cargue el encabezado y el pie de página de la tienda en lugar de los de wordpress y de esta forma los menús que vea el usuario cuando pase de la tienda al blog, serán los de la tienda.

  • El primer paso, es hacer una copia de seguridad del blog para poder restaurarlo si algo falla. Podeis hacerlo entrando por ftp con cualquier programa gratuito (yo os recomiendo filezilla, es gratis y funciona estupendamente). El theme (plantilla gráfica) se encuentra en /blog/wp-content/themes (si wordpress en lugar de estar en la carpeta /blog está en /soporte, pues cambiais la ruta).
  • El segundo paso es descargarse por ftp el archivo header.php de prestashop ¡Ojo, no el de wordpress! que está en el directorio raíz de la tienda (la carpeta principal del hosting). Lo vamos a necesitar porque el contenido de este archivo es el que tenemos que colocar en el header.php y footer.php de wordpress.
  • Bien, ahora vamos a editar dos archivos del theme de wordpress ¿solo dos?, pues sí, con eso es suficiente. El primer archivo que vamos a editar es header.php y vamos a colocar en su interior en contenido del header.php de prestashop. Debería de quedar algo así:
<?php
/**
* @package WordPress
* @subpackage Default_Theme SI VUESTRO THEME ES OTRO, CAMBIAD EL NOMBRE
*/
?>
<?php
global $smarty;
include(dirname(__FILE__).'/../../../../config/config.inc.php');

/* CONTENIDO DE header.php DE LA TIENDA, ELIMINANDO HOOK_LEFT_COLUMN */
// P3P Policies (http://www.w3.org/TR/2002/REC-P3P-20020416/#compact_policies)
header('P3P: CP="IDC DSP COR CURa ADMa OUR IND PHY ONL COM STA"');

require_once(dirname(__FILE__).'/../../../../init.php');

/* CSS ESTO NOS SIRVE PARA QUE CARGE LA HOJA DE ESTILOS DE WORDPRESS*/

/* SI QUEREMOS APLICAR LOS ESTILOS DE LA TIENDA, NO PONEMOS ESTA LINEA*/
$css_files[_THEME_CSS_DIR_.'global.css'] = 'all';

/* AQUI PONEMOS LOS HOOKS DE PRESTASHOP QUE QUEREMOS INICIAR */
$smarty->assign(array(
   'THEME_IMG_DIR' => _THEME_IMG_DIR_,
   'HOOK_HEADER' => Module::hookExec('header'),
   'HOOK_TOP' => Module::hookExec('top'),
   'static_token' => Tools::getToken(false),
   'token' => Tools::getToken(),
   'priceDisplayPrecision' => _PS_PRICE_DISPLAY_PRECISION_,
   'FechaActualizacion' => $str_fecha,
   'content_only' => intval(Tools::getValue('content_only'))
));
/* SI QUISIÉSEMOS QUE TAMBIEN MOSTRASE LA COLUMNA IZQUIERDA, MANTENDRÍAMOS */
'HOOK_LEFT_COLUMN' => Module::hookExec('leftColumn'),

if(isset($css_files) AND !empty($css_files))
$smarty->assign('css_files', $css_files);
if(isset($js_files) AND !empty($js_files))
$smarty->assign('js_files', $js_files);

$smarty->display(_PS_THEME_DIR_.'header.tpl');
?>

Una vez hecho esto, editamos el footer.php de wordpress y añadimos parte del contenido de header.php de prestashop. OJO, del header no del footer. El archivo debería de quedar así

<?php
/**
* @package WordPress
* @subpackage Default_Theme SI VUESTRO THEME ES OTRO, CAMBIAD EL NOMBRE
*/
?>
<?php
global $smarty;
/* CONTENIDO DE header.php DE LA TIENDA, ELIMINANDO HOOK_LEFT_COLUMN */
if (isset($smarty))
{
   $smarty->assign(array(
      'HOOK_FOOTER' => Module::hookExec('footer'),
      'content_only' => intval(Tools::getValue('content_only'))));
   $smarty->display(_PS_THEME_DIR_.'footer.tpl');
}
?>
NOTA: en algunos themes, si queremos que se muestra la columna izquierda,
la tenemos que añadir aquí, no en el header.php

Ahora ya solo nos queda por hacer dos cosas. La primera es subir los archivos modificados (header.php y footer.php) al servidor y reemplazar los del theme de wordpress por los nuevos que hemos creado y como paso final, empezar a toquetear la hoja de estilos del theme de wordpress que estemos utilizando (generalmente global.css) para darle un aspecto lo más parecido a nuestra tienda.

Para hacerlo un poco más sencillo, en la sección de descargas podeis bajaros los archivos header.php y footer.php ya modificados para wordpress y si no, también os los podeis descargar AQUI. De todas formas si usais otro theme, os puede servir como modelo para realizar las modificaciones oportunas.

Mucha de la información se la debo a mis compañeros del foro www.todoprestashop.com, así que os recomiendo pasaros por allí porque siempre es de utilidad

integrar prestashop wordpress

    21 Responsesto “Integrar Prestashop y WordPress”

    1. dario dice:

      Esta bueno esto, pero con la version nueva de Prestashop, de la 1.4.0 en adelante, no funciona. Si alguien tiene alguna idea seria genial, muchas gracias

    2. Guille dice:

      Hola! me parecio genial el articulo al punto que para resolver la necesidad de administrar articulos en el proyecto que estoy montando implemente esta solucion, todo resulta muy bien solo que parece que perdi parte de los js y css que carga la cabecera en el resto del Presta, es decir el header.php modificado del WP no levanta todos los archivos y por lo tanto se rompen parte de las funcionalidades como ser el menu, di varias vueltas para tratar de solucionarlo sin suerte. Estoy usando PS 1.4.4.1 y WP 3.3, espero que puedas darme una mano con esto u orientarme en como resolverlo.
      Muchas gracias de todos modos!
      Saludos,
      Guille.-

    3. Guille dice:

      Hola, yo nuevamente, quería decir que logre agregar todos los css y js que se cargan en el del prestashop, con agregar en el header.php la siguiente linea:
      global $css_files, $js_files;
      con eso gran parte de los inconvenientes que tenia se resolvieron, sin embargo aun encuentro cosas por resolver como ser el y el que al parecer no levantan las variables en el header.tpl con este header.php.
      Encuentro la solución y lo comento o si alguien sabe como que lo diga.
      Gracias. Saludos!
      Guille.-

      • admin dice:

        Gracias por tu comentario y tu aportación. Obviamente puede haber casos en los que la solución no funcione por un theme personalizado o por querer integrar un theme de WP que carge las columnas en el footer (por ejemplo). Pero esta solución funciona para la mayoría de los casos estandar. Obviamente es una base para trabajar sobre ella y para una integración mas completa se debería contar con servicios profesionales, pero la que pongo aquí casi cualquier usuario la puede poner en práctica. Más adelante escribiré sobre una integración más completa compartiendo base de datos.
        Un saludo y muchas gracias por tu aportación, la incorporaré al post.

        • Guille dice:

          Ante todo feliz año!
          Me alegro que mi aporte sea de utilidad :)
          Respecto de la base de datos en mi caso integre ambos sistemas en la misma con la diferencia que el prefijo de las tablas es en un caso ps_ y en otro wp_ de modo de poder identificarlas, de todos modos me interesa conocer lo de una integración mas completa que comentas.
          Algo que encontré útil es el poder asignar al body de esta integración una clase de modo de poder mediante css aplicar estilos combinados entre las cabecera y pie de pagina del Prestashop y el contenido de WordPress, para esto aplique en los .php del wordpress el siguiente código javascript:
          $(document.body).addClass(‘custom-class’);
          siendo ‘custom-class’ el nombre de la clase que va quedar aplicada a la etiqueta body.
          Otro javascript muy interesante que encontré es este otro que resulta útil en el caso de tener la opción de urls amigables habilitada:
          jQuery(document).ready(function(){
          var urlPath = window.location.pathname.split( ‘/’ );
          document.body.className = urlPath[urlPath.length-1];
          });
          lo que hace este código javascript es separar de la url lo que quede contenido dentro de las / y utilizar la ultima palabra como clase del body, por ej si tenemos como url: http://www.mitienda.com/blog/noticias el código lo que hará es tomar la palabra ‘noticias’ y aplicarla como clase del body, de este modo tendríamos un método automático para aplicar distintos nombres de clase según la pagina en la que estemos. Cabe aclarar que ambos códigos juntos se pisan sin haber al menos logrado conseguir que se sumen como nombres de clases lo que seria interesante si alguien sabe como, que lo aporte :)
          Sigo avanzando con la integración PS+WP que tengo en curso y lo que vaya interesante para aportar comentare para compartirlo.
          Un gran 2012 para todos lleno de éxitos, alegrías y oportunidades!
          Saludos,
          Guille.-

    4. Angel dice:

      Hola.
      Antes que nada, gracias por la aportación. Es de gran ayuda. Lo he probadop en PS1.3 y wp3.3 y va perfecto. El único inconveniente que veo es que la columna de la derecha en WP la pone a continuación de los post en pS. Hay pisibilidad de ponerla en otra posición?
      Y el segundo inconveniente es que la columna a de la derecha en PS no sale.
      De resto, es perfecto.

      • admin dice:

        Hola Angel. Gracias por tus comentarios.
        Lo más probable es que tengas que ajustar el ancho de la columna central del theme de wordpress y reducirlo para que en el ancho total de la página quede espacio para las 2 columnas de PS + la columna central de WordPress. Es bastante sencillo, simplemente con mozilla y firebug juega con los valores hasta que se ajuste. Tendrás que hacerlo tanto en la home como en una de las entradas para modificar el archivo css que maneja los estilos en wordpress. Si quieres mandame la url de tu instalación de wordpress y le echo un ojo.
        ¡Saludos!

        • Angel dice:

          Gracias por tu respueusta.
          He intentado jugar con los estilos y aynque consigo variar el bloque central y desplazar en todo en el eje x, no sale la columna de la derecha del Prestashop. Podría ser el problema que la plantilla del wp solo tiene dos columnas?
          Por otro lado, como puedo aumentar el espacio entre entradas ?
          Gracias por tu tiempo.

          • admin dice:

            Hola Angel. Si posteas el enlace al bog/tienda puedo echarle un vistazo porque hacerlo a ojo sin ver el theme es un poco complicado. Para aumentar el espacio entre entradas, deberías buscar el elemento “content” y modificar los valores “padding-top”, “margin-top” o “line-height” pero como te digo, sin verlo no te puedo decir mucho más. Un saludo y gracias por tus comentarios.

    5. angel dice:

      Gracias por incluir estas instrucciones. Lo he probado en 1.3 y va de miedo. Lo único es que no aparece la columkna de la derecha de PS. Como podría visualizarla?
      También como podría cambiar la columna del menu de WP, para que no salga por debajo de los post?
      Gracias

    6. Juanma dice:

      Hola buenas tardes!

      Muchas gracias por tu post y explicación, es muy interesante.

      Yo estoy intentando utilizar el menú prestashop dentro del blog wordpress siguiendo tus instrucciones… y bueno, el principal problema que tengo es que no mantiene la funcionalidad de utilizar “the_post_thumbnail” que utilizo al principio de cada post, y que en el sidebar me desaparecen todas las categorías, entradas, comentarios… (vamos, que los widgets dejan de funcionar).

      No sé si hay alguna integración más por ahí… o si a alguien le ha pasado algo parecido.

      Muchas gracias de nuevo!
      Juanma

    7. Francisco dice:

      Hola, estoy intentando hacer lo mismo que explicas pero con prestashop 1.5 y wordpress 3.4, la verdad es que no tengo muy claro como meterle mano.

      ¿Alguna idea o documentación para poder guiarme?

      Un saludo.

    8. juan carlos dice:

      Mi duda no de cómo modificar los archivos. Me pregunto: ¿Qué es mejor PS y WP en el mismo directorio? ¿PS en un subdirectorio? ¿WP en un subdirectorio?. ¿PS o WP en un subdominio?. Todo esto desde la perspectiva SEO….Alguien me puede echar un cable?

    9. daniel dice:

      Hola, me parece muy interesante este post pero tengo una consultita. Tengo abierto el header.php del prestashop (el que indicas del directorio raíz de nuestra tienda) pero solo tengo 3 lineas de código que son estas:

      $controller = new FrontController();

      if (Tools::usingSecureMode())
      $useSSL = $controller->ssl = true;

      $controller->displayHeader();

      ¿De dónde tengo que sacar pues el código para insertarlo en el wordpress?

      ¡Muchas gracias!

    10. daniel dice:

      Perdón finalmente he insertado los archivos que has dejado y me funciona casi perfecto. Me deja el espacio en blanco para el hook de la derecha que no se como eliminarlo para que se expanda en todo lo ancho del content.
      Saludos.

    11. canido29 dice:

      ola gracias por la inf
      y para el primer caso:
      Que una persona tenga un blog (wordpress) y ahora quiera empezar a vender productos por internet, aprovechando que ya tiene un número de visitas relativamente importante.

      se puede integrar el carrito de la compra y el login del prestshop en la web de wordpress?alguien sabe?hacerlo?

    12. Jhonny dice:

      Estuve probando tu solución para la versión 1.5.4 de Prestashop y 3.5.1 de WordPress pero no funciona, es como si no encontrará la página

    13. Patricia dice:

      Estoy en las mismas que Jhonny, probado y, o bien algo hago mal, o no se pueden integrar estas versiones.
      Gracias, seguiremos el hilo a ver donde llegamos.

      • admin dice:

        Com ya ponía al inicio, no funciona en las versiones de PS 1.4 y 1.5. Estoy esperando a ver si dejan de sacar nuevas versiones tan rápido para hacer el nuevo tutorial

    14. Buen artículo. Yo estaba buscando la integración de usuarios tambien. No encuentro nada válido para mi caso que es en el que te centras arriba. Seguiré buscando.
      Saludos!

    Leave a Reply

    *