martes, 24 de septiembre de 2013

Solucionar pantalla blanca en Prestashop



A veces Prestashop se vuelve un poco loco y peta mostrando un pantallazo blanco, otras veces lo hace con toda la razón del mundo, sobre todo si hemos estado metiéndole mano a funciones, plantillas u otros maltratos que le hacemos al código de vez en cuando.

Si es porque hemos estado trasteando seguramente localizaremos rápidamente el problema, pero si surge por amor al arte es cuando nos puede desesperar un poco, sobre todo cuando lo hace a las 00:45 de la noche.

Voy a poner un par de consejos básicos que seguramente ya habréis visto en mil páginas y luego una que fue mi solución y no encontré por ningún lado.

Los pantallazos en blanco los podemos separar en diferentes casos.

Pantalla blanca en el Frontend con acceso al Backoffice: El problema estará en algún módulo instalado, en algún archivo de la raíz o tema o una mala compilación de smarty.

Pantalla blanca en el Backoffice con acceso al Frontend: Esto suele ser debido a errores de código en la carpeta del backoffice.

Pantalla blanca en Frontend y Backoffice: Errores de base de datos, de clases, de cache, de htaccess, o diferentes errores que los afecten por separado.

Creo que con esto seremos capaces de acotar el problema y solucionarlo más rápidamente.
Si nos encontramos en algún caso de estos y en la pantalla blanca no aparece ningún mensaje activaremos el modo debug manualmente.

Activar el Modo Debug de Prestashop

Lo más fácil es conectar a la FTP y descargar los archivos indicados, que editaremos en local y los subiremos de nuevo al dominio.

Para versiones inferiores a la 1.5.3 realizaremos los Pasos 1 y 2 y para versiones igual o superiores a la 1.5.3 haremos únicamente el Paso 2.

Paso 1
Buscamos el archivo www.mitienda.com/config/config.inc.php
Encontramos el siguiente código @ini_set('display_errors', 'off');
Y lo activamos, quedará así @ini_set('display_errors', 'on');

Paso 2
Ahora abrimos el archivo www.mitienda.com/config/defines.inc.php
Buscamos esto define('_PS_MODE_DEV_', false);
Y lo activamos de la siguiente forma define('_PS_MODE_DEV_', true);

Analizando errores.

Ahora si intentamos abrir la tienda nos mostrará los errores y seremos capaces de ver en qué línea está fallando. Los errores los veremos de uno en uno, así que cuando solucionemos uno y actualicemos la página no te alarmes si van apareciendo uno detrás de otro, claro está que dependerá del caso de cada uno y tendremos que realizar unas acciones u otras, aunque lo mejor será sustituir dichos archivos por una copia de seguridad, o si se trata de un módulo desinstalarlo, o eliminarlo.

Existe un caso en el que el debug no mostrará ningún error y la pantalla seguirá blanca tanto en el Backoffice como en el Frontend, esto suele ocurrir por una mala compilación de la cache o como en mi caso seguramente será por culpa del archivo class_index.php que encontraremos en la carpeta www.mitienda.com/cache/
 
Este archivo se genera automáticamente y a veces se trunca por la buenas, dejando la tienda inoperativa, si nos fijamos en la fecha del archivo veremos que será justo el momento en el que dejo de funcionar la tienda. Lo eliminamos y al actualizar la página todo funcionará correctamente.

miércoles, 11 de septiembre de 2013

Rich Snippets en Prestashop - Producto



Finalmente he podido reescribir este post corrigiendo algunos fallos y optimizando el código de etiquetado.

Hoy toca terminar la integración de los Rich Snippets en prestashop, como decíamos en el primer post para etiquetar el breadcrumb, la única página que necesitamos integrar los Rich Snippets es la ficha de producto.

¿Qué datos son los que tenemos que etiquetar?

Si buscas por internet que etiquetar te encontrarás muchos ejemplos y de Google puedes encontrar el Asistente de marcado de datos estructurados que te ayudará y te aconsejará que etiquetar dependiendo del tipo de página que quieras, un artículo, un producto, un restaurante, etc.. Parece muy guay pero aconsejo por ahora no hacerle ni caso porque este asistente está en continuo cambio y no contempla los mismos datos que recomienda la Ayuda para webmasters, (el manual de instrucciones para hacer que Google valore tu web y la muestre en las primeras posiciones). Así que después de pelearme con el etiquetado bastantes veces he encontrado una fórmula bien sencilla que evitará errores en el etiquetado y nos dará mejores resultados.

Del producto etiquetaremos lo siguientes valores: El código EAN, el nombre, la imagen de producto, la descripción, la marca, el logo de marca, el precio de venta y la moneda.
De las opiniones etiquetaremos: La valoración media, la cantidad de valoraciones, el valor más alto y el valor más bajo de una opinión, esto lo hablaremos en otro post.

Archivos a tratar.

Para integrar las etiquetas vamos a necesitar únicamente el archivo product.tpl

NOTA: Como referencia tomamos el product.tpl de la plantilla por defecto de Prestashop

Modificaciones de product.tpl

Empezamos con las modificaciones que serán bien sencillas.



En la línea 160 encontraremos el siguiente código <div id="primary_block" class="clearfix" >


Y lo modificaremos dejándolo de la siguiente forma
<div id="primary_block" class="clearfix" itemtype="http://schema.org/Product" itemscope="">

El itemtype de producto sirve para indicar que todo el contenido de ese “div” forma parte de un producto, así que todo lo que marquemos fuera de este div no estará vinculado al producto.


El primer elemento a etiquetar que nos encontramos es la imagen (Linea 186 y 191), aquí hay un condicional que controla si hay una imagen subida del producto o por el contrario ese producto no tiene imagen propia y cargará la típica imagen con el interrogante.


Modificaremos las dos líneas <img… Etiquetaremos las dos de la siguiente forma.
<img itemprop="image" src="{$link->getImageLink($product->lin…


El siguiente elemento que aparece es el nombre, lo contraremos en la línea 234 con un <h1> 


Modificaremos la línea de la siguiente forma <h1 itemprop="name">

Aprovecharemos la línea vacía de abajo para marcar el código EAN añadiendo este código <meta itemprop="gtin13" content="{$product->ean13}" />

La etiqueta <meta> es código invisible que leerá google y no se mostrará en la ficha.


Ahora le toca el turno a la descripción del producto que encontraremos unas pocas líneas más abajo en la 239.


Localizamos el código <div id="short_description_content"… y le añadimos el marcado de la siguiente forma <div itemprop="description" id="short_description_content"…


Ahora nos toca etiquetar los precios y para ello buscaremos la línea 381 donde encontraremos el siguiente código <div class="content_prices clearfix">


Añadiremos a la línea el marcado de precios creando de esta forma un subgrupo dentro del producto. El código se verá así <div class="content_prices clearfix" itemtype="http://schema.org/Offer" itemscope="" itemprop="offers">


Añadiremos en la línea 388 el siguiente código para etiquetar el tipo de moneda <meta itemprop="priceCurrency" content="{$currency->iso_code}" />


Ahora tocará etiquetar el precio de venta en cuestión y lo encontraremos en la línea 392 <span id="our_price_display">{convertPrice price=$productPrice}</span>
Editamos y lo dejamos de la siguiente forma <span itemprop="price" id="our_price_display">{convertPrice price=$productPrice}</span>

Saliendo fuera del contenedor de “offers” nos quedaría crear el marcado de la marca, teniendo en cuenta que en el product.tpl original no aparece nada lo ideal sería crear un código que mostrara este contenido, Google acepta algunos contenido ocultos, como moneda, EAN y otros que no son relevantes a un usuario, pero creo que la marca si es interesante de ser mostrada al menos en alguna de las dos formas posibles, texto o imagen y el otro valor lo etiquetamos con <meta …/>

Donde creamos conveniente dentro del contenedor de producto, añadiríamos estas líneas.
En este caso creamos un contenedor que será otro subgrupo de producto y mostrará la imagen del logo quedando algo más visual y el nombre de la marca lo generamos con una meta.

<div  itemprop="brand" itemscope="" itemtype="http://schema.org/Organization" id="css-marca">
<img itemprop="image" alt="{$product_manufacturer->name}" src="{$img_manu_dir}{$product_manufacturer->id_manufacturer}-manufacturer_default.jpg" />
<meta itemprop="name" content="{$product_manufacturer->name}" />
</div>

Ya hemos terminado con el archivo products.tpl y podéis descargarlo aquí.

Realizaré otro post para el correcto etiquetado de las opiniones.

domingo, 8 de septiembre de 2013

Rich Snippets en Prestashop Breadcrumb

Hoy voy a explicar cómo mejorar el SEO On Page de nuestra tienda, y nos vamos a poner manos a la obra con la implementación manual de los Rich Snippets en nuestro Prestashop.
Existen módulos que por una pasta te implementan algunas cosas, pero personalmente lo que he visto no me ha terminado de convencer, así que me he decidido a realizar una guía completa siguiendo las directrices de Google y con la ayuda del Asistente de marcado de datos estructurados, para tener una Rich Snippets perfectas con los comentarios incluidos.
No te llevará más de 30 minutos en integrarlo todo y tendrás tu tienda con los Rich Snippets en Full Equip. A que mola he!! ;)



Los Rich Snippets es una forma de etiquetar y resumir la información más relevante de una página, para que los motores de busqueda puedan catalogar y presentar mejor los resultados. Para más información puedes echarle un ojo a la documentación de Google sobre Rich Snippets.
Si te has leído la documentación verás que Google recomienda los microdatos, de entre los otros dos posibles, Esto es porque los microdatos son el estándar para HTML 5, un punto importante a tener en cuenta a la hora de programar nuestra tienda ya que es el futuro.
El contenido más importante para etiquetar un Ecomerce son los productos, y por la arquitectura de prestashop vamos a implementar los Rich Snippets en 2 fases, El Breadcrumb y la página de producto.
NOTA: Como siempre toda la programación se hace en local, y si funciona correctamente lo subimos a la web de producción.

El Breadcrumb

El Breadcrumb (o migas de pan) es la ruta de navegación que se muestra en cada página y nos indica en que categoría estamos respecto a la home.



Para implementar los Rich Snippets del Breadcrumb, tendremos que modificar una clase de prestashop. Todas las modificaciones de Core se han de realizar siempre a través de un Override. Aún no he explicado nada de los Overrides, pero seguir estos pasos a pies juntillas y todo irá perfecto.



Lo primero es ir a la carpeta "mitienda.com/classes" y abrimos con el Notepad++ el archivo Tools.php

Ahora pulsamos "Ctr+F" para abrir el buscador, le damos la siguiente línea de código "public static function getPath" y pulsamos en Buscar siguiente.



Bien ya hemos localizado la función que genera el Breadcrumb. Como ya hemos explicado no vamos a modificar el código que vemos aquí, lo que tenemos que hacer es copiar la función en otro archivo, pero antes de copiar tenemos que preparlo.
Dentro de Notepad++ pulsaremos "Archivo > Nuevo" y aparecerá una nueva pestaña y escribiremos lo siguiente.

-------------------------------------------
<?php

class Tools extends ToolsCore
{

}
------------------------------------------



Nos quedará algo así.
Bien ahora sí que podemos copiar toda la función y pegarla dentro de  los corchetes de nuestro nuevo documento.



Aconsejo copiar también los comentarios de la función ya que suele tener información útil, y aprovechamos para añadir en la cabecera de los comentarios lo siguiente:

* WWW.MITIENDA.COM
* INSERCIÓN DE RICH SNIPPETS EN LOS BREADCRUMB
* FECHA

Esto no sirve para mejorar la organización y tener una marca para conocer todos los archivos que hemos modificado y que es lo que se ha hecho, esencial para futuras actualizaciones o migraciones de versión.

Los cambios.

Sobre la Línea 59-60

Paso 1
Ahora buscaremos el siguiente código

<a href="'.Tools::safeOutput

y lo cambiaremos por el siguiente

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="'.Tools::safeOutput

Paso 2
Al final de esta línea nos encontraremos el siguiente código

'UTF-8').'">' : '').

y lo sustituiremos por

'UTF-8').'"><span itemprop="title">' : '').

Paso 3
Dos líneas más abajo encontraremos el siguiente código:

(($n < $n_categories || $link_on_the_item) ? '</a>' : '').

y lo sustituiremos por

(($n < $n_categories || $link_on_the_item) ? '</span></a></span>' : '').

Ahora tenemos los Rich Snippets en el apartado de las categorías, ya solo nos falta en el apartado de los CMS.

Repetiremos el Paso 1 dos veces más, donde encontraremos el código sobre las líneas 76 y 79.
En la primera cambiaremos el siguiente final de línea.

'UTF-8').'</a><span class="navigation-pipe">'.$pipe.'</span>'.$path;

por

'UTF-8').'</span></a></span><span class="navigation-pipe">'.$pipe.'</span>'.$path;

Y en la última encontraremos este final de línea

'UTF-8').($link_on_the_item ? '</a>' : '');

y lo cambiaremos por.

'UTF-8').($link_on_the_item ? '</span></a></span>' : '');

Bien, ya tenemos el código bien implementado, ahora solo queda hacer un Guardar Como en la carpeta mitienda.com/override/classes/Tools.php (Respetar la mayúsculas de Tools)



Listos!! ya tenemos unos flamantes Breadcrumbs con Rich Snippets. Ahora solo falta entrar en una ficha de producto, y ver que se genera el código.



NOTA: Si no funciona acordaros de borrar el archivo class_index.php, está ubicado en la carpeta "mitienda.com/cache/" y que yo sepa este archivo está a partir de la versión 1.5.X de prestashop.
Una vez visto que funciona todo correctamente lo podemos subir a nuestra web.
Podéis comprobar con la Herramienta de pruebas de datos estructurados de Google que está todo correcto.

En el siguiente Post explicaremos como colocar los Rich Snippets en la ficha de producto.

jueves, 5 de septiembre de 2013

Pasa tu tienda Prestashop a tu ordenador

Muchas veces nos gustaría tener nuestra tienda en nuestro ordenador para poder hacer pruebas, cambiar el diseño o trastear en el código para lo que se nos ocurra.

Pasar la tienda a nuestro ordenador es bastante sencillo si seguimos los siguientes pasos.

Antes que nada es necesario tener todas las herramientas para poder ejecutar prestashop en local.

Una vez lo tengas todo instalado y configurado nos ponemos manos a la obra.

Lo primero que haremos será exportar y descargar la base de datos en un archivo, hay mil formas para hacerlo, pero la forma más rápida es entrar en el phpmyadmin de tu hosting y exportar el archivo en formato SQL.

Si tu archivo ocupa más de 50 megas, para agilizar la exportación e importación de la base de datos yo suelo cargarme las estadísticas de visitas, ya que facilmente doblan el contenido de la base de datos y puede dar bastantes problemas y esperas monumentales a la hora de importar la base de datos en local.

Si queréis o nesitáis las estadísticas la recomendación es hacer la exportación en dos pasos, una de toda la base de datos excepto las tablas que aparacen abajo y otra exportación con las 4 tablas que comentamos a continuación.

Para vaciar las tablas lo podemos hacer desde HeidiSQL (Shift + Del), Navicat (Vaciar tabla) o desde el phpyadmin a través de la siguiente consulta.

truncate 'PS_guest';
truncate 'PS_connections';
truncate 'PS_connections_page';

truncate 'PS_connections_source';

Con esto ya tendremos estas tablas vacías y la base de datos seguramente pesará la mitad de la mitad.

Una vez tengas el SQL en tu disco duro, pasamos a preparar el terreno para descargar toda la tienda en el ordenador.

Ahora tenemos que ir a la carpeta htdocs de Xampp que por defecto está en la siguiente ruta "C:\xampp\htdocs" y crearemos una carpeta para la tienda, por ejemplo, "mitienda" o el nombre que queramos.

Una vez tengamos la nueva carpeta abrimos FileZilla y nos conectamos a nuestra FTP con la configuración que nos dé nuestro proveedor de hosting.

Dependiendo de como sea el usuario y el hosting podemos encontrarnos una carpeta llamada "www" ahí tenemos toda la tienda y demás aplicaciones que podamos tener por ejemplo un blog, si por casualidad entras directamente en la carpeta de prestashop te encontrarás con las siguientes carpetas, (cache, classes, config, controlers, etc...) si es así estás en el lugar correcto, tan solo selecciona todos los archivos y carpetas y arrástralo a tu carpeta "mitienda"

Mientras se está descargando todo en la carpeta "mitienda" ejecutaremos Xampp y activaremos los servicios de Apache y Mysql. Si tienes algún problema para ejecutar los servicios seguramente es que tiene algún que otro programa que ya utiliza los puertos necesarios, como Skype o IIS. Si es así, buscar por google que hay mucha ayuda.

Ir a phpmyadmin

Ahora iremos a phpmyadmin, para volcar la base de datos en nuestro disco duro, tan sencillo como pulsar el botón Admin del módulo de MySQL.

Crear Base de Datos


En Phpmyadmin crearemos una nueva base de datos, para evitar más configuraciones aconsejo llamarla con el mismo nombre que la base de datos que tenemos en el hosting de prestashop. Le damos al botón Crear y cuando termine aparecerá el nombre de la base de datos en el frame de la izquierda, hacemos click en el nombre para acceder.

Importar la base de datos de Prestashop


Con la base de datos vacía, pulsamos a Importar. Aparecerá una nueva pantalla en la que simplemente hemos de seleccionar el SQL que hemos descargado en la exportación de la base de datos original y pulsamos a Continuar, esperamos unos minutillos y ya tenemos la base de datos en nuestro ordenador, si por casualidad tienes las estadísticas en otro archivo, vuelves a importar y seleccionas el archivo de las estadísticas y listo. Cuando termine todo podemos cerrar la ventana.

El siguiente paso es ir a la carpeta "mitienda\config" y abrír el archivo "settings.inc.php"


Para hacer que prestashop conecte con la base de datos local, hay que cambiar 2 valores.

1 _DB_USER_: Hay que colocar el usuario administrador de MySQL de Xampp, por defecto es "root".

2_DB_PASSWD_: La contraseña de root de MySQL de Xampp.

Ahora ya podemos entrar en el backoffice de prestashop. Tan sencillo como abrir el navegador y teclear "http://localhost/mitienda/backoffice/"

Nota: tener en cuenta que el directorio del backoffice puede ser diferente en cada tienda, fíjate el nombre de carpeta de tu acceso al panel de control.



Accedemos como si lo hiciéramos desde la web.

Entraremos en el panel de toda la vida y veremos el siguiente mensaje en la parte de arriba


Hacemos clic para modificar el nombre de la tienda, y nos llevará directamente a la siguiente pantalla, 


Cambiaremos donde pone "miweb.com" por "localhost" y en base URI hemos de añadir el directorio de /mitienda/


Ahora podemos acceder a la tienda.



Veremos que las imágenes no se cargan, no hay que asustarse, porque lo solucionamos en un momento.



Tan solo hay que eliminar el archivo .htaccess de la carpeta "miweb" y volver al backoffice.




Una vez dentro nos vamos a "Preferencias > SEO y URL"


No hace falta realizar ningún cambio, y simplemente pulsamos a Guardar. Esto generará un nuevo ".htaccess" y cargará las imágenes.

Una vez llegado a este punto podemos decir que ya tenemos la tienda instalada en nuestro ordenador.