Botón Whatsapp en Prestashop 1.7

Con este módulo podrás añadir el botón de Whatsapp en la Prestashop para que las personas que visiten la tienda puedan preguntar directamente las dudas por este medio.

Si hablamos del código del botón del Whatsapp, decir que lo podemos insertar directamente con módulos como el contentbox / htmlbox, si recordamos en la comparativa que hicimos en su momento permitían insertar codigo html, javascript, css en Prestashop de forma sencilla.

Realmente el código que nos proporciona Whatsapp es el siguiente:

https://api.whatsapp.com/send?l=es&phone=NumerodeTelefono

Con un poco de ingenio, podemos construir un enlace con un botón y situarlo en la parte inferior de forma flotante en Prestashop con alguno de los dos módulos que he dicho.

Pero bueno, como ya disponemos de un módulo desarrollado por el usuario bera_ramazan de la comunidad de Prestashop, podemos usar dicho  módulo que viene preparado con opción a configurar el teléfono y mostrar en la tienda el botón de Whatsapp.

La subida e instalación del módulo, sin complicaciones, desde la pestaña módulos -> módulos. Revisar guía de instalación de módulos.

¿Qué opciones de configuración nos ofrece el módulo?

Whatsapp en Prestashop
Whatsapp en Prestashop

Simplemente, nos muestra un campo para introducir el teléfono asociado a Whatsapp.

Configuración módulo Whatsapp en Prestashop

¿Cómo se visualiza el módulo en nuestra tienda?

Botón Whatsapp en Prestashop

¿Dónde se puede descargar el módulo actualizado, preguntar dudas y obtener soporte?

  • https://www.prestashop.com/forums/topic/613462-free-module-whatsapp-chat-module/
  • http://www.fyazilim.com/en/prestashop-modules/17-whatsapp-live-chat.html

Descarga alternativa de una versión antigua del módulo, por si falla el enlace fuente.

Documento construido bajo Prestashop 1.6.1.13 / 1.7.1.1 y la versión “1.0.0” del módulo.

Actualización de la reseña:

Me informan que en una actualización del módulo se añade la posibilidad mostrar el botón de Whatsapp en la ficha del producto y opciones de configuración adicionales respecto a lo comentado, por lo tanto revisar la última versión del módulo en el foro de Prestashop.

En la nueva versión del módulo se incluye las siguientes opciones adicionales:

Opciones de configuración adicional
  • Select hook –> El botón

    Hooks botón general whatsapp
  • Mensaje

  • Mensaje -> Mensaje que se muestra al compartir el producto por 

Dejo un enlace alternativo de la versión “2.0” del módulo por si falla el enlace fuente -> Enlace alternativo.

Recordar que en el foro de Prestashop o en la web del desarrollador, podéis siempre descargar la última versión del módulo.

Añadir preguntas frecuentes en Prestashop 1.6 y 1.7

En el año 2012, estuvimos hablando de un módulo que nos permitía simular el funcionamiento típico de las preguntas frecuentes al estilo acordeón (el módulo era independiente de los contenidos creados en la pestaña Preferencias -> CMS).

En esta guía, vamos a realizar una pequeña integración en los contenidos que creamos en la pestaña Preferencias -> CMS, para mostrar preguntas y respuestas de forma que inicialmente solo aparezcan las preguntas y cuando hagamos click sobre la pregunta, aparezca la respuesta.

Implementar preguntas frecuentes en Prestashop
Desplegando preguntas frecuentes en Prestashop

Vamos hacer uso de este código: https://gist.github.com/neilgee/9284745#file-faq-html que hemos obtenido en el repositorio de github del usuario neilgee

Esta guía está realizada bajo Prestashop 1.6, pero también funciona en Prestashop 1.7

El código JavaScript:

$(document).ready(function() {

$('.faq_question').click(function() {

if ($(this).parent().is('.open')){
$(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},500);
$(this).closest('.faq').removeClass('open');

}else{
var newHeight =$(this).closest('.faq').find('.faq_answer').height() +'px';
$(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500);
$(this).closest('.faq').addClass('open');
}

});

});

Lo vamos a introducir en el fichero:

/themes/plantilla/js/cms.js

Código JavaScript CMS

El siguiente paso es introducir la estructura (código html) de las preguntas frecuentes en los contenidos que vayamos a crear en la pestaña Preferencias -> CMS

La estructura tiene la siguiente forma:

<div class="faq_container">
<div class="faq">
<div class="faq_question">Pregunta 1</div>
<div class="faq_answer_container">
<div class="faq_answer">Respuesta a la pregunta 1</div>
</div>
</div>
</div>

<div class="faq_container">
<div class="faq">
<div class="faq_question">Pregunta 2</div>
<div class="faq_answer_container">
<div class="faq_answer">Respuesta a la pregunta 2</div>
</div>
</div>
</div>

<div class="faq_container">
<div class="faq">
<div class="faq_question">Pregunta 3</div>
<div class="faq_answer_container">
<div class="faq_answer">Respuesta a la pregunta 3</div>
</div>
</div>
</div>

Desde el editor gráfico de contenidos que tenemos en la pestaña Preferencias -> CMS, pulsamos en Herramientas  -> Código Fuente (<>) y colocamos el código.

Insertar código HTML en el editor gráfico en Prestashop
Código HTML Prestashop

Por último, vamos agregar el estilo (css) de las preguntas frecuentes en el CSS de Prestashop, en nuestro caso vamos añadir el siguiente código:

/* CSS Preguntas Frecuentes */

.faq_question {
margin: 0px;
padding: 8px;
display: inline-block;
cursor: pointer;
font-weight: bold;
}

.faq_answer_container {
height: 0px;
overflow: hidden;
padding: 0px;
background:#fff
}

.faq.open .faq_question {
color: #fff;
}

.faq {
background: #e1e1e1;
border-bottom: 3px solid #fff;
}

.faq.open {
background: #635858;
border:none;
}

en el fichero:

/themes/plantilla/css/cms.css

El código javaScript entre otras cosas lo que hace es que cuando pinchamos sobre la pregunta, a la respuesta se le asigna una altura, ya que por defecto la altura (height) de la respuesta (.faq_answer_container) es 0px;

¿Funciona en Prestashop 1.7?

Este “tip” funciona en Prestashop 1.7, te nombro algunas diferencias.

Te recomiendo meter el “CSS“, en el fichero:

/themes/classic/assets/css/custom.css

El javascript, en el fichero:

/themes/classic/assets/js/custom.js

Y en referencia el código html que en Prestashop 1.6 lo insertamos en la pestaña Preferencias -> CMS, en Prestashop 1.7 tal como tenemos comentado en nuestra guía de ubicación de las pestañas en Prestashop 1.7, se encuentra en la pestaña Diseño -> Página.

Preferencias -> CMS en Prestashop 1.7

Continúa leyendo Añadir preguntas frecuentes en Prestashop 1.6 y 1.7

Cambiar colores en Prestashop 1.7

En su momento, estuvimos comentando como cambiar 2/3 fondos de la plantilla por defecto en Prestashop 1.7 añadiendo nuestros propios estilos en el fichero /themes/classic/assets/css/custom.css 

En esta ocasión, vamos hablar de un módulo desarrollado por el usuario shacker de la comunidad de Prestashop, que nos permite cambiar colores “generales” sin tener que escribir código CSS de forma manual.

La instalación del módulo, sin ningún problema desde la pestaña módulos -> módulos

Módulo para cambiar colores en Prestashop 1.7

En la configuración del módulo vemos las opciones que nos permite a la hora de cambiar los colores de la plantilla.

Para no dar un repaso a todas las opciones, vamos a chequear 3 opciones:

Configuración de módulo para cambiar colores básicos en Prestashop 1.7

En la imagen, hemos señalado un color para el encabezado, otro para los precios y otro para el pie de página.

A la hora de cambiar/elegir el color, nos proporciona una paleta con la que podemos seleccionar el color a configurar de forma intuitiva.

Paleta de colores

En este ejemplo, el resultado final ha quedado de la siguiente forma:

Color de fondo pie de página en Prestashop 1.7
Color precio de los productos en Prestashop 1.7
Color cabecera en Prestashop 1.7

¿Dónde puedo descargar este módulo para poder cambiar colores en Prestashop 1.7?

Continúa leyendo Cambiar colores en Prestashop 1.7

Información sobre las posiciones y módulos en Prestashop

En esta ocasión vamos hablar de un módulo desarrollado por el usuario coeos.pro de la comunidad de Prestashop que ha ido actualizándose a lo largo del tiempo para funcionar sobre las distintas versiones.

El módulo nos permite conocer información relativa a las posiciones de la tienda. También permite localizar información sobre los módulos instalados (localización del CSS, JS, etc..).

La instalación del módulo, como suele ser habitual la realizamos desde la pestaña módulos -> módulos

Accediendo a la configuración del módulo para ver información relativa a los módulos y posiciones en Prestashop

Inicialmente las opciones de configuración, que nos ofrece el módulo son las siguientes:

Configurando el módulo
  • Address IP -> Solo las IP de las conexiones que vayamos a colocar aquí, verán la información de este “debug”. Si lo queremos ver nosotros “solos”, colocamos nuestra IP publica (cualesmiip.com) de conexión a internet.
  • open block H-M -> Dependiendo la opción que seleccionemos aquí, por ejemplo, nos permite ver la información solo cuando pulsamos en los bloques, o verla directamente desplegada si seleccionamos “all the time”.

    Desplegando toda la información
  • CSS and JS -> Si activamos esta opción mostramos la información de las rutas de los CSS y JS de los módulos

Por ejemplo, si nos vamos a la ficha del producto en Prestashop (pongo un extracto de una imagen, vemos la siguiente información):

Viendo información en la ficha del Producto

En esta captura (recordamos que esta recortada), vemos el hook displayRightColumnProduct y el hook “displayProductButtons” y vemos los módulos que tenemos instalados y la ruta de los TPL, JS, PHP.

¿Dónde puedo descargar este módulo, ver los problemas y preguntar dudas?

https://www.prestashop.com/forums/topic/468925-what-is-this-module-what-is-this-hook-css-js-tpl/

Enlace alternativo de una versión antigua del módulo por si falla el enlace fuente.

Continúa leyendo Información sobre las posiciones y módulos en Prestashop

Cambiar transportista en el pedido en Prestashop

En esta ocasión, vamos hablar de un módulo desarrollado por el usuario Klemart3D de la comunidad de Prestashop.

El módulo, añade un “bloque nuevo” en la gestión de pedidos del panel de tu tienda, para poder cambiar el transportista que tenías asignado a un determinado pedido con un simple clic.

En principio, la instalación/subida del módulo sin problemas.

Instalación de un módulo que nos permitirá cambiar el transportista de un pedido en Prestashop de forma sencilla

El módulo, no ofrece ninguna opción de configuración adicional.

¿Dónde se muestra el bloque para cambiar el transportista de un pedido?

Simplemente, en la ficha del pedido (parte inferior) encima del resumen de los productos del pedido.

Bloque adicional en la ficha del pedido en Prestashop

Cómo podemos ver en la imagen, al desplegar el selector del bloque, nos salen los transportistas que hemos definido en nuestra tienda, y nos da la opción a cambiarlo.

Como buena noticia, puedo decir que, en el tema del foro, los comentarios últimos no son negativos sobre el funcionamiento del módulo.

Continúa leyendo Cambiar transportista en el pedido en Prestashop

Dimensiones del producto en combinaciones en Prestashop

Dimensiones en las combinaciones de los productos en Prestashop

Este documento se encuentra basado en Prestashop 1.6.

Hablamos de un aporte desarrollado por el usuario jeevanoss de la comunidad de Prestashop.

Si estamos trabajando con productos que tienen combinaciones, quizás nos entre la necesidad de establecer dimensiones especificas del producto por combinaciones.

Al editar un producto en Catálogo -> Producto, vemos que podemos hacerlo de forma general en la sección “Transporte” de la ficha de edición del producto.

Datos generales del transporte en un producto

El problema es que cuando gestionamos las combinaciones, no nos deja definir dimensiones del producto por combinaciones, a excepción del impacto en el peso del producto.

Únicamente impacto en el peso en combinaciones

La instalación/subida del módulo, sin problemas, desde la pestaña módulos -> módulos

Instalando módulo que nos permitirá establecer dimensiones del producto por combinaciones en Prestashop

El módulo, no permite ninguna configuración adicional, simplemente cuando vamos a editar un producto, vemos la posibilidad de establecer dimensiones por combinaciones del mismo.

Editando un producto desde el panel con posibilidad de añadir dimensiones en las combinaciones

Además, nos permite configurar el extra en los gastos de envío según combinaciones.

Creo que es un módulo que se le puede sacar bastante partido.

¿Dónde puedo descargar el módulo actualizado, ver los fallos y discutir sobre sus problemas?  

Continúa leyendo Dimensiones del producto en combinaciones en Prestashop

Buscar y reemplazar datos masivamente en Prestashop

En esta ocasión, vamos hacer una reseña de un módulo desarrollado por el usuario franksmule de la Comunidad de Prestashop.

El módulo nos permitirá sustituir distintos valores dentro de la base de datos de nuestra tienda de forma masiva.

La instalación/subida del módulo, sin grandes problemas desde la pestaña módulos -> módulos.

Instalando módulo que nos permitirá desde el panel de administración cambiar determinados datos de forma masiva

¿Qué opciones de configuración nos ofrece el módulo?

Configuración de un módulo que nos permitirá buscar y reemplazar datos en Prestashop 1.7
  • Replace with: -> Aquí el texto “nuevo” que sustituirá al texto que hemos puesto en la anterior casilla (Find This).
  • Campos disponibles en la configuración del módulo

    Product Name -> Nombre del producto.
    Product Description -> Descripción del producto.
    Product Description Short -> Descripción corta del producto.
    Category Name -> Nombre de la categoría.
    Category Descriptión -> Descripción de la categoría.

* Importante: El texto a buscar y reemplazar debe indicarse tal como está escrito. Es decir si se llama “Pepino”, no vale buscar “pepino”, tiene que ser “Pepino”.

Realmente con un poco de ingenio, podemos hacerlo nosotros hacerlo manualmente:

Update nombreTabla SET nombre_campo = Replace (nombre_campo, ‘Valor a buscar’, ‘valor nuevo’);

Pero el módulo lo hace por nosotros y nunca viene mal un poco de ayuda.

Continúa leyendo Buscar y reemplazar datos masivamente en Prestashop

Sección de noticias en Prestashop

Sección de noticias en Prestashop

En esta ocasión, vamos hablar de un módulo desarrollado por el usuario guigui23 de la comunidad de Prestashop.

El módulo permite generar una sección de noticias que es totalmente independiente de los contenidos propios que tengamos creados en la pestaña Preferencias -> CMS (Diseño -> Páginas en Prestashop 1.7).

Veamos que nos ofrece el módulo y luego decidamos si merece la pena.

Empezamos con la instalación/subida del módulo, que la hacemos desde la pestaña módulos -> módulos sin complicaciones.

Instalando módulo que nos permitirá una sección de noticias propia en Prestashop

Al instalarse el módulo nos crea una nueva pestaña en el panel de administración denominada “News

Accediendo a la gestión de noticias en Prestashop

En dicha sección, vamos a poder añadir y eliminar noticias.

Accedemos a la pestaña que hemos comentado y pulsamos en el botón “+”.

Agregando nueva noticia en Prestashop

Veremos un formulario, donde podremos añadir el título y la descripción de la noticia.

Definiendo título y contenido de la noticia en Prestashop
  • Title -> Título de la noticia.

    Titulo de la noticia
  • Contenu -> Contenido de la noticia.

    Contenido de la noticia en Prestashop
  • Observamos que el módulo permite escribir la noticia y el título en los idiomas que tengamos activados en la tienda:

    Título y noticia en distintos idiomas en Prestashop
    Título y noticia en distintos idiomas en Prestashop

Nosotros hemos creado dos noticias, que, si vamos al listado, veremos que nos permite modificarlas / eliminarlas (tanto individualmente como masivamente (opción Acciones agrupadas)

Listado de noticias en Prestashop

¿Cómo se ve el módulo?

El módulo se instala en la columna izquierda

Bloque Noticias en Prestashop
  • Si pulsamos sobre las noticias, nos llevara a ver la noticia
    ¿Accedemos a las noticias?

    Ver noticia individualmente
  • Si pulsamos sobre “All News” veremos el listado de noticias:
    Botón para ver el listado de noticias
    Botón para ver el listado de noticias

    Ver listado de noticias

Se me olvidaba….. en la propia configuración del módulo, dentro de la pestaña módulos -> módulos, nos ofrece una opción denominada:

Configuración propia del módulo en Prestashop
  • News number on columns -> Numero de noticias en las columnas (por lo que he probado si colocamos “5” y hemos creado “20” noticias, solo veremos 5 noticias en el bloque de la columna izquierda, pero en el listado seguiremos viendo las 20 a excepción de que en una próxima versión del módulo se les ocurra añadir alguna nueva funcionalidad.)

¿Dónde puedo descargar este módulo para añadir una sección de noticias a mi tienda?

Continúa leyendo Sección de noticias en Prestashop

Slider adicional para Prestashop

Tanto en la actualidad como en el pasado, dentro del universo Prestashop disponemos de módulos que permiten integrar un Slider/Galería de imagenes para dar y tirar, incluso el famoso “Sliders Everywhere“, que permite crearte slider/galerías de imágenes en casi todas las posiciones de la tienda, para que la tienda, parezca una discoteca.

En esta ocasión, al igual que hicimos en el pasado,  vamos hacer una reseña de otro módulo, pero esta vez la reseña será un poco más extensa.

El desarrollador del módulo, es el usuario BlobMarket de la Comunidad de Prestashop

¿Cómo se ve el Slider en la tienda?

La instalación/subida del módulo, como suele ser habitual, la realizamos desde la pestaña Módulos -> Módulos

Instalando módulo que nos permitirá añadir un slider adicional en tu tienda en Prestashop

Una vez instalado el módulo, para poder administrarlo, lo hacemos desde la pestaña Módulos -> Slider

Accediendo a la configuración del Slider adicional para tu tienda

Al entrar a la configuración del Slider, vemos una pantalla donde podemos administrar (añadir/modificar/eliminar) imágenes y textos del propio slider.

Dentro de la configuración del slider adicional

Por ejemplo, vamos añadir un nuevo elemento al Slider (pulsamos el botón “+”).

Agregando nuevo elemento en el Slider adicionalUna vez hemos pulsado el botón “+”, veremos la siguiente pantalla:

Insertando imagen en el slider
  • Image  -> Campo donde vamos a subir la imagen
  • Link -> Enlace que se abrirá cuando vayamos a pulsar la imagen 🙂
  • Open  in new Tab -> Si activamos la opción el enlace que asignemos se abrirá en una nueva ventana
  • Title -> Servirá tanto para el campo “alt” de la imagen, como para el título del elemento.

    Titulo Slider
  • Content -> Descripción que se mostrara luego junto con la imagen en la tienda.

    Descripción Slider
  • Button text -> Botón que se mostrara debajo de la descripción del slider (al pulsarlo nos lleva al enlace que hemos definido en la opción ‘Link’ que hemos mencionado)

    Pulsador en el Slider
  • Activado -> SI/NO (La misma opción creo que ya lo dice por si mismo, nos sirve para desactivar/activar el elemento del slider)

Básicamente, este sería el proceso de añadir una imagen al slider.

Si tenemos varios elementos en el Slider, cuando estemos en la configuración del módulo, independientemente de acceder a su ficha de modificación o eliminarlos.

Modificar/Eliminar imagen del Slider

Podemos activarla/desactivarla desde el mismo listado:

Activar o desactivar elemento del Slider

Eliminar / Desactivar (Activar) también lo podemos hacer de forma masiva:

Acciones masivas en el Slider

Podemos ordenar los elementos.

Ordenar elementos del Slider

Por cierto, el módulo al instalarlo, nos avisa diciendo que se instala en el pie de página el típico mensaje de “Desarrollado por XXX“, y que podemos quitarlo sin problemas desde la pestaña Módulos -> Posiciones en el bloque “DisplayFooter”.

Instrucciones adicionales del módulo

Aunque por lo que he visto en el módulo ahora (al menos en la versión que yo he probado no lo hace) y viendo el código (solo para avanzados), veo que lo instala simplemente en el displayHeader que es donde se suelen cargar los css/jss de los módulos y en el displayTopColumn que es donde veis el slider.

Hooks donde se instala el módulo

Un módulo “sencillo” que puede servirnos de utilidad.



¿Dónde podemos descargar este módulo que insertar un slider adicional? Continúa leyendo Slider adicional para Prestashop

Contenido distinto en 4 posiciones en Prestashop

Aunque con ContentBox y duplicando el módulo podemos llegar como mínimo a lo mismo,  hablaremos de otro módulo, que tampoco viene mal dar a conocer otros aportes gratuitos desarrollados por la comunidad.

El módulo se encuentra desarrollado por el usuario Soyons zen de la comunidad de Prestashop, y simplemente nos permite en la misma pantalla de configuración del módulo añadir contenidos distintos en 4 posiciones de la tienda.

La instalación/subida del módulo desde la pestaña módulos -> módulos.

Contenido distinto en distintas posiciones desde una misma configuración en Prestashop

¿Qué opciones de configuración nos ofrece el módulo?

Nos ofrece 4 bloques que pasamos a comentar:

  • En el bloque “Texte pour la page d’accueil” definimos el texto que quedara añadido en el hook “displayHome”, es decir,  situado en la página principal.

    Texto en la página principal
    Texto en la página principal
  • El siguiente bloque que nos encontramos se denomina “Texte pour la sidebar” y el contenido añadido quedara situado en las columnas derecha/izquierda (displayRightColumn/displayLeftColumn)

    Texto en Columna Derecha/Izquierda en Prestashop
  • El bloque “” añade el texto en el pie de página (displayFooter)

    Texto en el pie de página en Prestashop
  • El bloque “

    Texto en la ficha del producto en Prestashop

En esta reseña no tratamos de hacer ninguna comparación con respecto a otros módulos como contentbox/htmlbox.

¿Dónde podemos descargar el módulo para poder añadir texto/imágenes en 4 posiciones distintas de la tienda? Continúa leyendo Contenido distinto en 4 posiciones en Prestashop