Prestashop

Gestores de contenidos, Prestashop, Trucos

Cómo cambiar el orden de los medios de pago en Prestashop

/

Un cliente nos ha pedido, esta semana, que quería que los medios de pago aparecieran en un orden diferente en el momento de realizar la compra. La verdad es que no nos lo habían pedido nunca y nos ha dejado un poco sorprendidos. No parecía fácil de solucionar. Al final otro desarrollador nos ha dado la solución y os la dejamos aquí por si os es útil. Cómo cambiar el orden de los medios de pago en Prestashop. Vamos a dar los pasos siguiendo el orden de Prestashop 1.7. En otras versiones puede variar el nombre de los menús o la colocación. Hay que ir a Diseño > Posiciones y ahí marcar la casilla “Mostrar los hooks invisibles“. Prestashop por defecto esconde del usuario ciertos hooks. Una vez marcada esta casilla podemos ir al apartado “paymentOptions” y ahí cambiar el orden de los métodos de pago que aparecen.  

Diseño Web, Gestores de contenidos, Prestashop

Prestashop Module Generator: utilidad para crear módulos básicos sobre los que trabajar

/

Prestashop es un gestor de contenidos para tiendas online que se basa mucho en la comunidad. Ellos generan un núcleo funciona básico y luego, si quieres más cosas, tienes que o comprar módulos, o crearlos tu. La compra de módulos es una buena idea porque mantiene a los desarrolladores activos, ellos mejoran el sistema mientras ganan dinero en el proceso. Y los clientes obtienen su funcionalidades extra. Si no quieres gastarte dinero, puedes desarrollar tu los módulos (que luego puedes vender etc). Cuando quieres construir un módulo, puedes empezar desde cero con la documentación de Desarrollador de Prestashop. Pero hoy os hablamos de una funcionalidad que os ahorra tiempo. Cómo crear un módulo de Prestashop desde cero con el Prestashop Module Generator. Prestashop Module Generator es una funcionalidad de la página https://validator.prestashop.com de Prestashop para crear módulos básicos. Este generador funciona a base de asistente paso a paso con el que puedes crear un módulo de cualquier tipo compatible para la versión que quieras de Prestashop. En el siguiente vídeo os lo explicamos, pero es muy sencillo. Recordad que es importante seleccionar el tipo de módulo que queremos, para que agregue lo que necesita, así como los Hooks que necesitemos (aunque estos se pueden registrar y usar más adelante). Y recordad también que esto es sólo una plantilla sobre la que trabajar…el módulo no hace nada. Sólo es la base. La funcionalidad se la das tu. Esta página: https://validator.prestashop.com , también sirve para luego validar tu módulo final y asegurarte que cumple con los “PrestaShop’s coding standards“, lo que facilita su compatibilidad y su posterior venta (si ves que es útil para otros).  

Diseño Web, Gestores de contenidos, Prestashop

Cómo limitar el tiempo que dura un carrito en Prestashop

/

Prestashop, por lo menos en la versión 1.7 , trae una cosa interesante, y es que reserva los productos cuando los guardas en el carrito. Esto hace que puedas realizar tu pedido con calma, sin peligro que otro cliente te quite productos que dispongan de poco stock. Pero también tiene un problema: por defecto el carrito “recuerda” tu carrito 480 horas (¡¡20 días!! ). Esto puede ser interesante si tienes productos con mucho stock para mantener clientes que tengan dudas o mañana quieran retomar su pedido. Pero en tiendas con poco stock quiere decir que la tienda pueda tener stock retenido 20 días por clientes indecisos (o competencia con mala leche). Hoy os enseñamos a reducir ese tiempo. Cómo limitar el tiempo que dura un carrito en Prestashop. La configuración que decide cuanto tiempo está se guarda el carrito son las “cookies del front-office“. Al guardar algo en el carrito, el sistema guarda una cookie en el ordenador del cliente. Dicho fichero tiene un tiempo de duración que está limitado por esta configuración. Lo ideal, en el caso que hemos expuesto (tiendas con poco stock) es limitar este tiempo. Para ello (en 1.7, PS tiende a variar los menús) vamos a ir a Parámetros Avanzados >Administración (en 1.6 estaba en Administración>Preferencias>General). Ahí en Configuración tenéis el parámetro Tiempo de vida de las cookies front-office. Y como veréis está en 480 horas. En el caso que nos ocupa puede ser interesante ponerlo a algo como 3 horas. Así los clientes tienen tiempo suficiente para rellenar su carrito, pero eliminas a los indecisos.    

Gestores de contenidos, Prestashop, Trucos

Cómo reindexar productos en Prestashop para encontrarlos en las búsquedas

/

En ocasiones, las búsquedas de Prestashop no dan los resultados deseados. No aparecen ciertos artículos. Especialmente cuando hacemos importaciones masivas. Aquí tenemos que diferenciar entre el buscador interno y el externo. Si el interno no funciona hay que reindexar, y de ello hablamos hoy.  Si, por el contrario, el interno si encuentra el producto pero el externo no, o no como queremos, entonces lo mejor es buscar reemplazar ese buscador, con algún módulo, por uno mejor. O puedes tener problemas en tu Prestashop. Evidentemente si el buscador interno no encuentra productos, el externo tampoco. Cómo reindexar productos en Prestashop. La manera de llegar a esta opción varía entre versiones y subversiones. A Prestashop les gustar mover las cosas de menús. Pero sabiendo la ruta de uno puedes encontrarlo en otro. En la versión que usamos hoy, 1.7.3, está en Parámetros de la tienda > Buscar > Indexación . Como veréis en la imagen adjunta hay diferencia de productos indexados. Podemos “Añadir los productos que faltan al índice“, o “Reconstruir el índice completo“. Esta segunda opción puede tardar más o incluso no funcionar (dependiendo de la configuración del servidor). Recordad que sólo indexa los productos activos. Aquí veis cómo queda después de reindexar.  

Diseño Web, Gestores de contenidos, Prestashop, Trucos

Prestashop: que el menú del backoffice pueda hacer scroll.

/

Con Prestashop 1.7 han venido muchas ventajas. Pero también alguna cosa extraña que ha habido que arreglar. Entre ellas esta del menú del backoffice. Si añades muchos módulos que agreguen apartados en en menú de la sección de administración, verás que no se puede llegar a la parte inferior porque no hace “scroll”. Dicen que lo van a solucionar, pero llevan diciéndolo desde las primeras versiones, así que os dejamos una arreglo mientras lo hacen. Cómo hacer que el menú del backoffice en Prestashop pueda hacer scroll. Lo primero es hacer que se pueda hacer scroll. Para ello edita el fichero tucarpetadeadmin/theme/default/css/admin-theme.css o mejor, para mantener ese intacto tucarpetadeadmin/theme/default/css/override.css Y añade las líneas: #nav-sidebar { overflow-y: auto; } ::-webkit-scrollbar {display:none;} Con esto se puede hacer scroll y sin ver la barra. PERO (un gran pero) desaparecen los submenús del menú principal. También tenemos solución para eso. Ahora tienes que editar el fichero tucarpetadeadmin/theme/default/js/admin-theme.js   y poner lo siguiente al final: $(function () { $(document).on(‘hover’, ‘#nav-sidebar li.has_submenu’, function () { var submenu = $(this).find(‘.submenu’).eq(0); var marginTop = $(this).position().top + parseInt($(‘header#header > nav’).height()); if ((marginTop + parseInt(submenu.height())) > parseInt($(window).height())) marginTop -= (marginTop + parseInt(submenu.height()) – parseInt($(window).height())) + 10; if ($(‘body’).hasClass(‘page-sidebar-closed’)) marginTop += 34; setTimeout(function () { submenu.attr(‘style’, ‘position: fixed !important; top: ‘ + marginTop + ‘px !important’); }, 50); }); }); Con esto ya tendrás los menús funcinando (fuente de esta función). Parece mentira que no solucionen estas cosas “tan sencillas”.

Legalidad, Prestashop, Soporte, Trucos

RGPD: Casilla de Aceptación de Condiciones de Uso en formularios de Prestashop 1.6

/

Volvemos a la serie de adaptación de las páginas web a la RGPD (y en este caso también a la antigua LOPD) para diferentes plataformas. En este caso para Prestashop 1.6 (ya hablamos del caso 1.7 hace unos días). No importa que tengáis el módulo de RGPD (recomendable) ya que este no modifica los formularios de contacto. Estos son propios de cada plantilla. Cómo crear la casilla de Aceptación de Condiciones de Uso para Prestashop 1.6 Obviamente es parecido al 1.7, pero tiene algunos cambios.  Para el 1.6 nos hemos basado en este gran artículo. Lo primero es que tenemos que editar el mismo fichero: themes/tutema//contactform.tpl 1) Lo primero es darle un nombre al formulario. Añadid un campo name y un id con lo que queráis al formulario. Por facilidad ponemos el mismo. < form action=”{$request_uri|escape:’html’:’UTF-8′}” id=”contactform1″ name=”contactform1″ method=”post” class=”contact-form-box” enctype=”multipart/form-data”> 2)  Lo siguiente es poner la casilla de aceptación y la frase con el enlace a la política de privacidad. Ponedlo donde queráis, pero lo lógico es antes del botón enviar. En este código podemos de nuevo ir al backend y traducirlo. Lo hemos puesto en inglés en el código pero se puede poner en español y traducirlo luego al inglés. <p class=”checkbox” id=”casilla_acepta”> <input id=”acepto_condiciones” type=”checkbox” value=”1″ {if isset($smarty.post.acepto_condiciones) AND $smarty.post.acepto_condiciones == 1}checked=”checked”{/if} name=”acepto_condiciones”>  <label for=”acepto_condiciones”>{l s=’I haved read and accept the’}</label>             <a href=”{$link->getCMSLink(13, ‘politica-de-privacidad’)}” target=”_blank”                class=”iframe”>{l s=’Política de privacidad’}</a>         </p> 3) Después hay que activar la función que hace la comprobación o suelta un mensaje. Al final del fichero poned: {literal} <script type=”text/javascript”> $(‘document’).ready(function () { $(‘#contactform1’).submit(function () { if ($(“#acepto_condiciones”).is(“:checked”)) { $(‘#submitMessage’).hide() return true; } else { alert(“Para poder contactarnos, debe aceptar la Política de Privacidad marcando la casilla”); $(‘#submitMessage’).show() return false; } }); }); </script> {/literal} Con esto ya debería estar. Si habéis seguido el resto, es fácil de implementar.

Prestashop, SEO, Trucos

Etiquetas hreflang y canonical en Prestashop para mejorar el SEO de páginas con varios idiomas

/

Prestashop es un gran CMS para tiendas pero, como todo, tiene fallos. Hoy hablamos de uno de estos, que es el SEO de las páginas con varios idiomas, páginas multilenguaje. En páginas multilenguaje recomendamos dos cosas: Abrir en Google Search un sitio por cada idioma con un sitemap independiente por cada idioma.  También uno para el sitio “base”. Otro día hablamos de esto pero permite gestionar el SEO de cada sitio, e indicar a Google el sitemap para cada idioma. Además ponemos zonas geográficas preferidas para cada sitio y así indicamos a Google el destino geográfico de cada sitio.  Poner las etiquetas hreflang y canonical para evitar que Google penalice por contenido duplicado y te penalice en SEO. Hoy hablamos de esto. NOTA: el primero dice a los buscadores que si alguien está en un país (localización geográfica) vaya a un sitio en concreto. El segundo les dices dónde buscar el contenido para cada idioma y que no tomen ese contenido como duplicado. Las páginas multilenguaje suelen contener contenido duplicado para cada idioma. Más aún en tiendas. Primero porque estamos vendiendo las mismas cosas, pero también porque se nos escape al tener muchos productos. Si, hay que generar contenido diferente para cada idioma y traducir todo, pero muchas veces o no es posible o no es realista. Y Google puede penalizarnos por ello. Para intentar evitarlo usamos las etiquetas hreflang y canonical. Qué son las etiquetas hreflang y canonical. Hreflang le indica a los buscadores la url preferida para un idioma. Es del tipo. <link rel=”alternate” hreflang=”códigodelidioma” href=”urldelidioma”> Canonical le indica a los buscadores la url preferida de una página. Para que sepan cual es la url “base”. Por ejemplo puede tener: <link rel=”canonical” href=”https://dominio.es/”> <link rel=”alternate” hreflang=”es” href=”https://dominio.es/es/”> <link rel=”alternate” hreflang=”en” href=”https://dominio.es/en/”> Esta estructura le está diciendo a los buscadores que hay una página principal, y luego dónde está el contenido de cada idioma, evitando así que lo tome como contenido duplicado. ¿Cual es el problema en Prestashop? El problema en Prestashop es que te deja configurar fácilmente los idiomas, pero no añade estas etiquetas. Por lo tanto los buscadores pueden penalizarnos. Así que conviene añadir estas etiquetas. ¿Dónde se añaden? Hay que meter un código en el header de nuestra plantilla, entre las etiquetas <head> y </head> . Para eso hay que editar el fichero header.tpl de la plantilla que estemos usando (haced copia de seguridad antes). ¿Qué código hay que añadir? Nota: Estos códigos valen para la 1.6.X. A partir de la 1.7.X parece que han puesto bien los códigos de hrfelang, no así el canónical. En la red hay varios códigos pero todos son para páginas sin multitienda y sólo con http (sin certificado). Nosotros hemos implementado este (probado y funcionando sin problemas en 1.6.x) pero también podéis probar este o este. PERO lo estamos modificando para https porque todas las webs ahora deberían tener certificado. Así que en breve publicaremos el código modificado. Por lo que sabemos es cambiar el último término de getPageLink donde True =Secure URL & False = Regular URL. pero ya os informaremos en los próximos días (ponemos el código por si queréis adelantaros). ¿Cómo probarlo? Con las herramientas que dejamos el otro día para comprobar hreflang y puedes verlo en Google Search en la sección de idiomas.    

Gestores de contenidos, Prestashop, Trucos

Cómo reconstruir el índice de Prestashop si las búsquedas no muestran resultados.

/

Hoy os queremos enseñar cómo reconstruir el índice de Prestashop. ¿Cuando puedes necesitar esto? Si el buscador de Prestashop no está mostrando los resultados adecuados. Si usas un importador de stock automático, ya sea mediante el importador del backend de Prestashop o mediante otro método, verás que tu stock no está indexado. El buscador no funciona. Esto tiene una solución sencilla, sólo tenéis que reconstruir el índice, es decir forzar a Prestashop a que vuelva a mirar qué productos tiene y los añada al módulo de búsqueda. ¿Cómo hacerlo? Entra en el backend de Prestashop En Prestashop 1.6.X ve a Preferencias > Buscar. En Prestashop 1.7.X ve a Configuración > Parámetros de tienda (Configure > Shop Parameters) Ahí escoger la opción Buscar. Ahí en Indexando podéis ver diferentes datos: – Si está activo el indexado o no. – Cuantos artículos están indexados. – Dos enlaces, uno para indexar los productos que faltan y otro para reconstruir el índice completo. – Una url para poner en un cron job para que esto se realice automáticamente cada cierto tiempo. Con esto ya tendrías reparado el índice y Prestashop debería mostrar tus búsquedas.

Diseño Web, Gestores de contenidos, Prestashop

Prestashop: plugin de pestañas novedades, más vendidos,rebajas y destacados en la portada.

/

Todavía hay pocos módulos compatibles con la versión 1.7 de Prestashop, porque es otra versión que ha cambiado la cómo se hacen ciertas cosas y no todo es compatible con las anteriores. Hoy os dejamos uno gratuito para Prestashop 1.7 que te permite poner unas pestañas en la portada: la pestaña novedades, la pestaña más vendidos, la de rebajas (descuentos) y la pestaña destacados. Algo que necesitamos en casi todas las tiendas (al menos alguna de esas pestañas). Si, el propio Prestashop viene con esos módulos, pero muchas veces o no funcionan bien o no aparecen como queremos. Los módulos, son de MyPresta, los puedes descargarlos de: Novedades. Más vendidos. Destacados. Rebajas. Eso si, para que funcionen los módulos no basta con instalarlos, hay que hacer unos pasos de configuración que puedes comprobar en la siguiente guía (inglés). Si la quieres en español lo tienes en este artículo.    

Diseño Web, Gestores de contenidos, Prestashop, Trucos

Cómo crear un tema hijo en Prestashop

/

Hace un tiempo hablamos sobre cómo crear temas hijo en WordPress, hoy os lo dejamos para Prestashop. Los temas hijo se crean para poder hacer modificaciones sobre el tema principal, sin correr el riesgo que una actualización del mismo borre todas las modificaciones. El tema hijo hereda todas las opciones y funcionalidades del padre, incluso las que aparecen cuando actualizamos este, pero siempre prevalecen las modificaciones realizadas en el hijo.  Es decir, podemos actualizar sin miedo a Por ejemplo es muy habitual crear temas hijo para modificar el css. El tema hijo será igual que el tema padre, pero con las modificaciones del CSS realizadas. Además, estas modificaciones son las que se cargarán, no funciona como los plugins de modificación de CSS que insertan nuevas reglas (lo que al final carga la web al tener un CSS con reglas doble). Prestashop, a partir de la versión 1.7, permite crear estos temas de manera sencilla y aquí os explicamos cómo. Pongo como ejemplo crear un tema hijo del classic que viene con prestashop. Pero puedes elegir otro tema. Ve a la carpeta /themes y crea una carpeta con el nombre del tema hijo. Por ejemplo /classichijo. Entonces deberías tener en /themes la carpeta /classic y la carpeta /classichijo. En esta carpeta /classichijo tienes que tener los siguientes ficheros o carpetas: – preview.png     (es lo que aparecerá en el apartado temas del backend como previsualización de tu tema). – config                 (directorio) –/config/theme.yml   (fichero de configuración dentro de la carpeta anterior). Lo mejor es que los copias del tema padre. Ahora edita el ficher theme.yml del tema hijo. En la cabecera tienes que poner al menos (pon las líneas que no aparezcan, y cambia los nombres de los temas para tu caso) parent: classic name: classichijo display_name: Mi Tema Hijo version: 1.0.0 assets: use_parent_assets: true Esto le dice el nombre de tu tema (puedes poner lo que quieras en name, display name y versión). Ve al backend y elige el tema hijo como el activo. A partir cualquier fichero que quieres modificar lo puedes poner en el hijo. Por ejemplo si quieres cambiar el css puedes copiar la carpeta /assets/css y editar el fichero theme.css en el hijo. Una gran mejora en Prestashop 1.7 que nos hará la vida más sencilla a todos. Más información aquí.

Scroll al inicio