logotipo prestashop

Prestashop pone a disposición de los desarrolladores un formulario que genera los archivos necesarios para la creación de un módulo, incluyendo opciones como para compatibilidad de versiones, hooks a los que se anclará el módulo, uso de posible tabla propia en la base de datos…

La siguiente dirección nos permitirá generar los archivos necesarios para comenzar con la creación de cualquier módulo:

https://validator.prestashop.com/generator

A partir de las instrucciones de la documentación de Prestashop, hemos seguido un «tutorial» para crea un módulo muy básico, disponible ya en mi repositorio a través de esta dirección:

https://github.com/JorgeGolo/first-upload-module

Este es el enlace a la documentación oficial:

Voy a listar unas notas que me han parecido bastante esclarecedoras sobre la forma que tiene Prestashop de estructurar sus módulos, y de cómo seguir sus estándares. Algunas ya las conocía de otras versiones:

  • Todo módulo generado con el formulario que hemos comentado, llamado «Nombredelmodulo», tiene un archivo principal llamado nombredelmodulo.php, con una estructura de carpetas similar a todos los demás módulos
  • Si tiene una sección de «Configuración» en el BackOffice tiene una función llamada getContent() en el archivo nombredelmodulo.php
  • Tools::isSubmit() es un método específico de Prestashop que comprueba si un formulario ha sido ejecutado.
  • Tools::getValue() es otro método específico que lee el parámetro desde POST o GET. En el ejemplo, Tools::getValue(‘MYMODULE_CONFIG’), donde MYMODULE_CONFIG es el name que le hemos dado al input del formulario.
  • updateValue(‘MYMODULE_CONFIG’, $nombrevariable) actualizará el texto del campo del formulario.
  • El objeto Validate contiene muchos métodos de validación, uno de ellos es isGenericName(), que ayuda a validar una string con «formato Prestashop válido», es decir, sin caracteres especiales.
  • displayError() muestra un mensaje de error
  • Hay algunos otros métodos explicados en el ejemplo que son fáciles de seguir.

En el tutorial también se habla de HelperForm. En el contexto de programación web y sistemas de gestión de contenido como PrestaShop, HelperForm es una función o clase utilizada para simplificar la creación de formularios en el back office de PrestaShop. Estos formularios suelen ser parte de módulos o extensiones que se integran en el panel de administración de PrestaShop. Aquí tienes una lista de ventajas del uso de los estándares con HelperForm:

  1. Facilita el Desarrollo:
    • Un helperform podría proporcionar métodos y funciones listas para usar que simplifican la creación de elementos comunes de formularios, como campos de entrada, botones, selectores, etc.
    • La estandarización facilita el desarrollo, ya que los desarrolladores pueden utilizar la misma interfaz y estructura para crear formularios en diferentes partes del back office.
  2. Consistencia Visual:
    • Al utilizar una clase o función común para la creación de formularios, se promueve la consistencia visual en la interfaz de administración de PrestaShop.
    • Los elementos del formulario generados por el helperform seguirían un estilo y diseño coherentes, lo que mejora la experiencia del usuario y la apariencia general del back office.
  3. Reutilización de Código:
    • La función o clase «helperform» podría contener métodos que encapsulen la lógica comúnmente utilizada en la manipulación y validación de datos de formularios.
    • Esto permite a los desarrolladores reutilizar código, evitando la duplicación y reduciendo la probabilidad de errores.
  4. Adaptabilidad a Futuras Actualizaciones:
    • Al seguir una interfaz estandarizada proporcionada por el helperform, los módulos y extensiones desarrollados con esta clase pueden ser más adaptables a futuras actualizaciones de PrestaShop.
    • Cambios en la implementación interna de PrestaShop podrían ser manejados dentro de la clase helperform, minimizando el impacto en los módulos existentes.
  5. Documentación Clara:
    • Una función o clase dedicada simplifica la documentación para los desarrolladores. Pueden entender rápidamente cómo crear formularios y qué métodos están disponibles, facilitando la adopción y el mantenimiento.
  6. Aumento de la Productividad:
    • Al reducir la complejidad y la cantidad de código necesario para crear formularios, los desarrolladores pueden ser más productivos y centrarse en la lógica específica de sus módulos en lugar de la implementación de formularios.
  • Para generar un formulario, usamos un array multinivel y luego se lo pasamos como parámetro a la clase HelperForm
  • Se crea una instancia de la clase y se le pasan parámetros a sus métodos.
  • Luego se usa el método generateForm() pasándole como variable el array que hemos creado anteriormente.
  • Todo esto dentro de una función displayForm() que tendrá este return:        
return $helper->generateForm([$form]);
  • La función displayForm la pasamos a su vez al return de getContent(), junto con otras variables (si queremos):      
return $output . $this->displayForm();

Prestashop pone a disposición de los desarrolladores otros helpers como HelperList. En esta entrada se hace uso de HelperList:

https://www.prestashop.com/forums/topic/334228-solved-helperlist-not-generating-the-list/

logotipo prestashop

He estado optimizando imágenes y código para hacer que todo vaya más rápido y ocupe menos espacio. Pronto implementaré un blog en una tienda online que administro, pero me encuentro que la tienda está ocupando casi todo el espacio disponible. Después de borrar algunos archivos error.log de algunos módulos (sobre todo módulos de formas de pago), el espacio seguía siendo insuficiente.
Mirando entre las carpetas encontré algo inusual en la carpeta /img/tmp, que luego vi explicado en el siguiente foro:

http://www.prestashop.com/forums/topic/61807-solved-temporary-image-import-files-in-imgtmp/

En el enlace anterior nos proponen una modificación en el código PHP relativa a la importación de archivos CSV. En concreto me quedo con este fragmento de la conversación:

– Probablemente estos archivos son archivos temporales que son creados durante una importación, o redimensionamiento… ¿Pueden ser borrados? ¿Y por qué no se borraron después de importar?
–  Correcto, puedes borrar todos los archivos de la carpeta  /img/tmp excepto el index.php.

– Probably these are the temporary image files that are created during import/resizing/etc.
Can these be deleted? And why arent these deleted after import ?
– That’s correct. You can delete all files in /img/tmp except for index.php.(…)

Este post también puede ser útil: https://likonet.es/likonet/optimizar-base-de-datos-de-prestashop-2/

Y este para el espacio saturado por los correos electrónicos por defecto y sin destinatario, que he tenido que limpiar alguna que otra vez: http://www.cafetero100.info/2011/12/09/como-vaciar-el-email-por-defecto-en-cpanel-y-mantenerlo-limpio/

Este error lo podemos encontrar al traducir los campos de los módulos de nuestra tienda online Prestashop, realizando los siguientes pasos:

logo-prestashop

    • En el Back-Office, nos dirigimos a Localización > traducciones
    • En «Tipo de Traducción» escogemos dónde está el texto que queremos traducir. Si la traducción no es de un módulo, ni de una plantilla de email, ni del Back Office… dejaremos marcada la opción por defecto. La mayoría de las traducciones imprescindibles y de más prioridad se encuentran en esta opción, y en «traducciones de los módulos instalados»

traducciones prestashop

    • Elegimos la opción «traducciones de los módulos instalados».
    • Al elegir esta opción, es posible que nos encontremos con este error, donde xxxx será el número de campos en total que se pueden traducir:

¡Advertencia! La configuración de PHP limita el número máximo de campos para enviar en un formulario
1000 = max_input_vars.
Por favor, solicite a su proveedor de alojamiento que aumente este límite a xxxx al menos, o deberá editar el archivo de traducción.

error traducciones prestashop
error traducciones prestashop

  • Solución 1: Añadir las siguientes líneas al archivo .htaccess. No funciona con todos los proveedores:
    # inicio - cambio el valor de max_input_vars
    php_value post_max_size "32M"
    php_value max_input_vars 5000
    # final - - cambio el valor de max_input_vars
  • Solución 2: Subir un archivo php.ini a la carpeta del administrador de Prestashop con la siguiente línea:
    max_input_vars=8000
  • Solución 3: Contacta con el servicio técnico de tu proveedor, es posible que por seguridad deban ser ellos quienen realicen los ajustes.

En ocasiones, estableciendo los precios de los productos, nos encontramos con un problema de redondeo en el cálculo de sus precios. Vemos que este problema aparece en diversas instalaciones de muchos usuarios, con productos que tienen impuestos incluidos y además incrementos o reducción de precios en sus combinaciones.

 

prestareo

 

Los precios se desajustan en ocasiones exactamente 1 céntimo arriba o abajo. Por ejemplo, si el precio final, con impuestos y reducciones es 10,00 €, se muestra 10,01€ ó bien 9,99€.

Hemos encontrado un hilo en el foro oficial que habla del problema:

Editando el fichero product.js de la carpeta js del tema, buscando la línea

priceWithGroupReductionWithoutTax = ps_round(basePriceWithoutTax * (1 - group_reduction), 2);

Y cambiándola por:

priceWithGroupReductionWithoutTax = ps_round(basePriceWithoutTax * (1 - group_reduction), 6);

Otra forma de solucionarlo, quizá para un problema muy similar:

Verifica en Localización => Moneda, en la moneda que usas que formato tienes, vuelve a guardar los cambios.
Revisa también en Preferencias => Configuración => Tipo de redondeo, manten la opción de clásico el elige alguno según te convenga

Agrega un nuevo producto con precios similares al del ejemplo q te da error y verifica si te sucede lo mismo.

Y otra: en Github

Y más:
http://vicentbadia.com/prestashop-1-6-0-9-%C2%B7-error-al-redondear-los-precios-en-la-ficha-de-producto/
https://github.com/PrestaShop/PrestaShop/commit/75692e60d3ed91f7fa9fffaa89c668de5f81db81
http://noisesofhill.com/redondeo-prestashop/

La mayoría de las soluciones son para versiones de Prestashop anteriores a la 1.6.1.x.

Al parecer estos errores se han ido corrigiendo en versiones posteriores, con lo que nosotros lo hemos solucionado así: Recordamos que un usuario nos aconsejaba que revisáramos Preferencias => Configuración => Tipo de redondeo, donde hemos dejado los campos como se indica en la imagen de más abajo. Se ha solucionado inmediatamente, sin necesidad de cambiar nada del código fuente. Les invito a probar la solución, hemos comprobado que funciona en una versión de Prestashop 1.6.1.4.

configurar redondeo prestashop

Vamos a cambiar el color de una pequeña parte de la página de inicio de Prestashop, en la plantilla o tema por defecto. También haremos una modificación en un archivo de la plantilla cambiado su código HTML.



1 – Cambiar el color de los iconos

cambiar-color-prestashop-inicio

Para ello tendremos que modificar un archivo CSS de nuestra plantilla para añadir las siguientes líneas:


#cmsinfo_block em {
background-color:blue!important;
}

O bien buscar en el archivo (el inspector de código del navegador nos puede ayudar) la declaración # y modificar la línea relatica al color de fondo (cuidado con la sintaxis, no olvidéis los ; al final de las propiedades).


#cmsinfo_block em {
(...)
background-color:blue;
(...)
}

La ruta del archivo a modificar es la siguiente:
directorio-de-tu-tienda  /themes/css/global.css 

Recordamos y añadimos que…

En este caso, la información que vamos a editar no corresponde a ningún módulo, por lo que su CSS está en el archivo global.css del tema.

Recomendamos hacer copia de seguridad del archivo y trabajar sobre un tema hijo.

2 – Añadir el logotipo de Whatsapp – cambiar los iconos

cmsinfo-bo-configuracion2

[sociallocker]

Aunque el CSS de esta parte de la página de inicio está declarado en el archivo global.css, el código HTML se declara en un módulo llamado block cmsinfo,
que aparece así en el Back-Office:

block cmsinfo desde el bo

Pulsamos en configurar, luego tendremos que modificar el código fuente:

cmsinfo bo configuracion

codigofuente

Esta es la parte a modificar:

<ul>
<li><em id="icon-phone" class="icon-phone"></em>
(…)

<ul>
<li><em id="icon-whatsapp" class="icon-phone"></em>
(…)

Recordamos y añadimos que…

Si aún no dominas HTML y CSS, ya va siendo hora… Tenemos una categoría en nuestro sitio: https://likonet.es/category/diseno-web/css/

Si quieres saber más sobre esta forma de colocar iconos en una página web, te recomendamos la documentación de FontAwesome

¡Gracias por compartir!

[/sociallocker]

Relacionada: Modificar plantilla de Prestashop

¿Qué son las plantillas de email de Prestashop?

Prestashop permite enviar correos electrónicos automáticos cuando cambiamos el estado de un pedido. En Pedidos > Estados, si en un estado marcamos la opción «Enviar un mail al cliente», aparecerá un desplegable con las plantillas de email disponibles.

Edita el asunto del correo:

En la carpeta /mails/es/ se encuentra el archivo lang.php. Para editar fácilmente la traducción de los asuntos en Español, podemos cambiar la lista de frases que aparecen en este archivo por las que deseemos. Por ejemplo, si hay una línea que diga:

$_LANGMAIL[‘You are one of our best customers’] = ‘Gracias por ser uno de nuestros mejores clientes’;

Podemos cambiarla por:

$_LANGMAIL[‘You are one of our best customers’] = ‘¡Eres el mejor! ¡Te mereces un premio!’;

Si hay algún asunto que quieras editar en castellano y no aparece en la lista, puedes añadirlo si sabes su traducción en inglés

Añade tu propio diseño a la plantilla de correos electrónicos de tu tema:

Editando los dos archivos , .html y .txt de cualquier plantilla de email. Estas plantillas se definen, sobre todo, en el archivo HTML, en cuyo interior se establecen varias propiedades CSS que podemos personalizar a nuestro antojo.

Un breve ejemplo: vemos un fragmento del código del archivo payment.html

(…)<table class=»table table-mail» style=»width:100%;margin-top:10px;»><tr><td class=»space» style=»width:20px;padding:7px 0;»> </td>
<td align=»center» style=»padding:7px 0;»>
<table class=»table» bgcolor=»#ffffff» style=»width:100%;»><tr><td align=»center» class=»logo» style=»border-bottom:4px solid #333333;padding:7px 0;»>(…)

Podemos cambiar la parte que está en negrita para cambiar el color de fondo de la tabla.

Esta modificación genera unas metaetiquetas en la sección head de cada página de nuestra tienda online Prestashop.
Testado en la versión 1.4.

Hemos encontrado que se indexan páginas de otros idiomas en los buscadores, para evitar esto hacemos uso de las etiquetas hreflang, que ayudan a los buscadores a organizar nuestra información traducida y dirigida a determinadso idiomas/regiones. En nuestro ejemplo usamos una versión simplificada de estas etiquetas, ya que sólo nos interesa gerenar metaetiquetas para los visitantes según su idioma.

Así, para una página en 3 idiomas, tenemos tres URL para la misma página:

  • www.mipaginaweb.com/es/el-contenido
  • www.mipaginaweb.com/en/the-content
  • www.mipaginaweb.com/fr/le-content

Por lo que las etiquetas se podrían mostrar de la siguiente manera:

  • <link href=»http://www.mipaginaweb.com/en/» hreflang=»en» rel=»alternate»>
  • <link href=»http://www.mipaginaweb.com/fr/» hreflang=»fr» rel=»alternate»>
  • <link href=»http://www.mipaginaweb.com/es/» hreflang=»es» rel=»alternate»>

Mediante MySQL, hacemos una consulta a la base de datos para mostrar las URL alternativas de cada página de nuestro sitio. Incluimos esta consulta en la cabecera de nuestro sitio, dentro de la sección head. Concretamente, en Prestashop debemos modificar el archivo header.tpl.

Añadir código PHP con MySQL a nuestro header.tpl es la forma más sencilla de implementar este cambio. Para una modificación más avanzada se recomienda hacer uso del override (de cara a futuras actualizaciones), o incluso crear una función en las clases de Prestashop (/classes/Meta.php) para que al mostrar las metaetiquetas de las descripciones o las palabras clave se mustren también los hreflang.

Breve explicación para la instalación de una multitienda Prestashop. Esta guía es ampliable para casos concretos que requiera una configuración más completa. No trataremos lo relativo a compartir o no clientes, productos y otros datos, daremos por hecho que no está instalado ningún certificado SSL.

Descarga de guía para subdominios – multitienda –  Prestashop


  • Instalar Prestashop normalmente.
  • Crear subdirectorio donde queremos la tienda nueva en la carpeta raíz, en nuestro ejemplo lo llamaremos «subdirectorio».
  • Ir a B.O. > Preferencias > Configuración y habilitar la opción Multitienda (no cambiamos las opciones, no trataremos el tema con demasiada profundidad).
  • En Parámetros Avanzados > ya nos aparece la opción Multitienda.
  • Aquí podemos gestionar grupos y tiendas. Para crear una tienda nueva, creamos un grupo de tiendas (o seleccionamos el que ya está por defecto) y hacemos clic en Añadir Tienda.
  • La configuración debe quedar así:
    • Dominio: tu dominio principal
    • SSL: igual (de momento no explicaremos nada sobre el SSL),
    • URL física: directorio donde tenemos Prestashop, usualmente raíz o «/»,
    • URL virtual: nombre del directorio creado para la tienda, en nuestro ejemplo «subdirectorio»
    • URL final: debe quedar así: tudominio.loquesea/tutiendaprincipal/subdirectorio



Una buena guía: http://www.aquihaydominios.com/blog/como-activar-y-configurar-la-multitienda-en-prestashop/

Algo más de información: http://www.creamosweb.es/blog/activar-multitienda-prestashop/ – aquí dejamos un comentario

(Visto en: Foro Oficial Prestashop)

En mi anterior entrada sobre modificar una pantilla de Prestashop (1.4) expliqué lo más básico para poder conocer y editar los archivos necesarios para que nuestra tienda online adquiera el aspecto que queramos.

Me detendré en las diferencias desde aquella entrada: de Prestashop 1.4.3 a 1.6.0.6 – también abordaremos el trabajo con más conocimientos de programación y documentándonos más en foros y en el dashboard.

Primeras impresiones de la nueva versión

 

logo-prestashop
logo-prestashop

La instalación sigue siendo sencilla y rápida. El .rar descargado de la página oficial sigue siendo bastante liviano. Sin problemas para instalar en local.

 

Herramienta de personalización: Esto es una cosa que siempre faltaba en todas las versiones. Puede ser m

uy útil para probar distintas combinaciones de color en la plantilla antes de decidirse por una. La herramienta está un poco limitada por los pocos colores que ofrece y lo limitado de las fuentes, aunque muy bien escogidas.

ambios en la plantilla del Back-Office: No hay más que ver la plantilla para intuir algunas mejoras en la organización y el diseño, con un menú lateral (que siempre he preferido al horizontal) con efecto hover desplegable para los submenús. Un apunte sobre las estadísticas: el enlace a la cuenta de Google Analytics.

Mejora del acceso rápido: Lo de «añadir esta página» es simplemente muy útil.

Multitienda:  Esta versión de Prestashop admite multitienda, algo que hemos de tener en cuenta en el caso en que necesitemos importar tablas bases de datos de otras versiones a la nueva versión. Algunas tablas incorporan un campo id_shop o una tabla más con el sufijo _shop para mejor gestión entre tiendas. Por ejemplo, podemos mencionar las tablas relativas a las características de productos, o features.

Y muchas otras cosas que no nos da tiempo a comentar… relativas a la nueva distribución de archivos y carpetas, a rendimiento o al SEO.

En esta ocasión trataremos de no realizar todos los cambios directamente en el archivo gobal.css, sino que haremos los cambios usando la carpeta override y/o módulos extra para cargar el nuevo estilo. Pero antes tenemos que tener una copia a salvo del tema original. Así que vamos a crear un tema personalizado de Prestashop 1.6 a partir del tema default-bootstrap que viene instalado por defecto.

Crear el tema nuevo

Desde
el B.O. > Preferencias > Temas, elegimos la opción Añadir Tema de
la parte superior. Esto nos permite crear un tema a partir de otro
existente (haciendo scroll hacia abajo lo podremos ver), que es
realmente lo que nos interesa.

Borrar la caché

Parámetros avanzados > Rendimiento.
A veces es aconsejable reiniciar un módulo que no funcione bien
después de un cambio de tema o de una intalación de un tema nuevo – por
ejemplo, a mi menú horizontal le fallaba el CSS después de instalar un
neuvo tema personalizado, y se solucionó así.

Usar Override

(Contenido original: http://prestadb.com/prestashop-override-controllers-tutorial/)

Módulo Configurador de Temas

Este
módulo viene instalado por defecto y nos ayuda a modificar las imágenes
del tema. El tema incorpora unas imágenes fijas que quedan bastante
bien en el diseño por defecto, pero que es muy probable que queramos
cambiar o quitar. Desde el módulo Configurador de Temas podemos incluso asignar una imagen a cada idioma instalado. También tendremos una sencilla manera de agregar o quitar el banner superior, amén de otras opciones que merece la pena revisar.

Algunos tweaks y fixes

Es decir, pequeños retoques rápidos a la plantilla para modificar detalles del aspecto de la tienda. Algunos de ests retoques no están orientados al diseño de producción final, sino sólo a una vista previa provisional mientras se decide el aspecto final del tema.

Quitar pestañas «populares» y «nuevos» del módulo homefeatured

http://www.prestashop.com/forums/topic/342514-como-eliminar-barra-nuevos-populares/

– Cambiar la línea del CSS:

#home-page-tabs {
padding: 10px 0;
margin: 0 0 0 -18px;
display: none;
}

Cambiar número de productos por fila en homefeatured

Resumen de los pasos a seguir para lograr cambiar el número de productos por fila de la página de inicio. Puede servir como pequeña guía para lograr el msimo efecto en otras páginas de productos – como categorías o productos más vistos.

1 – Crear un estilo css como el que sigue:

.col-md-23 {
width: 20%;
}

Un 20% nos permitirá mostrar 5 productos por fila. Lo insertamos entre .col-md-2 y .col-md-3
Para mostrar 4 productos por fila en categorías, no necesitamos más CSS del que ya está especificado en la plantilla.

2- Editar product-list.tpl

{if $page_name !=’index’ && $page_name !=’product’}
{assign var=’nbItemsPerLine’ value=4}
{assign var=’nbItemsPerLineTablet’ value=2}
{assign var=’nbItemsPerLineMobile’ value=3}
{else}
{assign var=’nbItemsPerLine’ value=5}
{assign var=’nbItemsPerLineTablet’ value=3}
{assign var=’nbItemsPerLineMobile’ value=2}
{/if}

3- Cambio del tamaño de las imágenes

En Preferencias > Imágenes cambiamos el tamaño de las imágenes home_default de 250 x 250 a 200 x 250. Regeneramos las miniaturas correspondientes en la misma sección.

4- Uso de la clase css que hemos creado (en product-list.tpl)

Original:

<li class=»ajax_block_product{if $page_name == ‘index’ || $page_name == ‘product’} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-4{/if}

Modificado:

<li class=»ajax_block_product{if $page_name == ‘index’ || $page_name == ‘product’} col-xs-10 col-sm-4 col-md-23{else} col-xs-12 col-sm-4 col-md-3{/if}

5- Notas relativas al sistema grid:

Prestashop 1.6 usa un sistema de rejills (grid) en la que el ancho máximo es de 12 columnas. Las clases para index.php son

col-xs-12 col-sm-4 col-md-3

Esto significa

col-sm-4 para tablets (= 3 columnas) => 3×4=12
col-md-3 para PC (= 4 columnas) => 4×3=12

Es necesario cambiar las clases para obtener un número de columnas distinto, o bien crear clases nuevas.

Fuente: https://www.prestashop.com/forums/topic/316622-how-to-add-more-columns-to-product-list-on-ps-16/

Para la integración de nuestra tienda online con la empresa de transportes Correos Express, hemos elaborado un módulo que genera un documento compatible con su software, una plataforma llamada AlerEti. Este documento debe cumplir las especificaciones que el transportista indica a la hora de hacer la integración, como el número de campos y la longitud y caracteres permitidos en los mismos.

correos express

Para ello hemos elaborado un módulo en Prestashop que permite generar este fichero (en formato CSV) relleno con los datos de los pedidos que le indiquemos.

Algunas normas sobre el fichero a generar:

  • El fichero debe ser un CSV separado por espacios, aunque se permite elegir el carácter separador (usaremos el delimitado por punto y coma).
  • Pueden fijarse campos que siempre tengan el mismo valor en la plataforma.
  • El nombre del fichero y la ruta no pueden contener espacios.
  • Otras especificaciones indicadas por la empresa de transportes, específicas de los servicios prestados a cada empresa.
  • Si la dirección del destinatario excede los caracteres que el campo requiere (40), hay un campo «observaciones» que se puede utilizar para completar la dirección.

Si estás interesado/a en el módulo y necesitas ayuda, deja un comentario o escríbenos un mail y solucionaremos tus dudas.