Moderador de la comunidad oficial de Prestashop desde el año 2010 (usuario: nadie).
Desarrollador. Especialista en soporte técnico. Generador y traductor de documentación técnica.
En esta ocasión, vamos hablar de un aporte desarrollado por el usuario Tuni-Soft de la Comunidad de Prestashop, que nos permite cargar nuestros propios ficheros *.css y *.js para luego cargarlos tanto en la tienda como en el mismo panel de administración.
El módulo, no ofrece ninguna configuración adicional y funciona de la siguiente forma:
En el directorio del módulo:
“/modules/medialoader/”
No debemos fijar en las siguientes 4 carpetas:
Carpeta para cargar nuestros CSS Y JS en Prestashop mediante un módulo
css -> Aquí metemos los ficheros CSS que luego cargaran en la tienda
js -> Aquí metemos los ficheros JS que luego cargaran en la tienda
bo_css -> Aquí metemos los ficheros CSS que cargaran en el panel de administración de tu tienda
bo_js -> Aquí metemos los ficheros JS que cargaran en el panel de administración de tu tienda
A nivel de código el módulo simplemente se instala en dos “hooks” en el displayHeader (hook donde cargan JS y CSS en el front-office) y en el displayBackOfficeHeader (hook donde cargan los JS y CSS en el back-office (panel)) y luego dentro de la función de los hooks, lo que hace es buscar dentro de los directorios que hemos comentado anteriormente y hacer uso de la función addCSS (para añadir los CSS) y de la función addJSS (para añadir los JS). (Si tenéis interés revisar el fichero medialoader.php)
¿Dónde puedo descargar este aporte para poder cargar mis ficheros JS y CSS en Prestashop?
Ambos módulos llevo utilizando prácticamente desde que fueron publicados, si bien es cierto que ambos permiten añadir texto/imágenes en distintas posiciones de la tienda en Prestashop, existen diferencias y bastantes importantes.
La comparación, la vamos a realizar bajo la versión 1.6 de Prestashop, por ser la versión más estable por el momento(aunque dispongamos desde hace meses de la versión 1.7 de Prestashop para descargar).
Módulo HTMlBox
Vamos a empezar hablando del htmlbox del que hemos realizado varias reseñas (desde inicios del 2013) en este mismo blog:
Tenemos una lista muy limitada de posiciones donde podemos ubicar el módulo (Opción: Where you want to display content box)
Nos permite colocar el módulo en una de las siguientes posiciones:
Header (displayHeader) -> Donde suelen cargar los ficheros CSS/JS
Top (displayTop) -> Donde está el menú horizontal..
topcolumn (displayTopColumn) -> Donde se encuentra el Slider
displaynav (displayNav) -> Parte superior de la tienda, donde tenemos el teléfono, el bloque de idioma entre otros bloques.
leftcolumn (displayLeftColumn) -> Columna izquierda de la tienda
rightcolumn (displayRightColumn) -> Columna derecha de la izquierda
footer (displayFooter) -> Pie de página
home (displayHome) -> En la página principal es la parte donde suele estar el bloque de imágenes de la página principal (Configurador de temas) junto al Bloque de Facebook, etc..
displayNav y displayTop
displayFooter en PrestashopdisplayLeftColumn en PrestashopdisplayRightColumn en PrestashopdisplayTopColumn en Prestashop
Sigamos analizando el módulo htmlbox con calma:
Segundo bloque de configuración del htmlbox en Prestashop
Only on SSL page -> Activar/Mostrar el módulo solo si tenemos activado SSL
Only on homepage -> Mostrar el módulo solo en la página principal (Por ejemplo, si colocamos el módulo en el displayNav (siendo un hook que se ve en todas las secciones), el módulo nos permite que solo se vea el contenido en la página principal y no en el resto de secciones. Realmente esto también lo podemos hacer nosotros manualmente desde módulos > posiciones con las excepciones.
Only for logged customers -> Activar el módulo solo para usuarios que están identificados.
Only for unlogged customers -> Activar el módulo solo para usuarios que no se han identificado.
Las dos últimas opciones referente a restringir la visualización del módulo por tipo de clientes, si no me falla la memoria también las podemos hacer de forma nativa desde la pestaña Clientes -> Grupos
Pasemos a la tercera fase del análisis:
Habilitar / Deshabilitar editor gráfico htmlbox
Tenemos una opción llamada “Rich text editor” para poder habilitar o deshabilitar el editor gráfico y poder escribir en texto plano.
Editor en texto plano en el htmlbox en Prestashop
Es cierto que existe una versión de pago del mismo módulo, con muchas más funciones, ¿Pero que creo que le falta a la versión gratuita?
Posibilidad de poder colocar el módulo en más posiciones
Poder gestionar distintos contenidos en distintos hooks (posiciones)
Gestionar mismo contenido en distintos hooks (posiciones)
Tener la posibilidad de configurar textos por idioma
Soporte para multitienda
Analizando módulo ContentBox para Prestashop
Empezamos con el análisis del módulo ContentBox
Configuración de los contenidos del módulo
Opciones generales ContentBox
Module’s Content -> Escribimos el contenido (imágenes, enlaces, etc..) que queremos mostrar en la tienda.
Module’s Files -> En esta opción, podemos subir archivos (cualquier tipo de fichero, imágenes, pdf, etc..) y obtener su enlace para usarlo en el editor (opción >>) o borrarlo directamente (opción “x”)
Gestión de adjuntos en el contentbox en Prestashop
Opciones avanzadas del módulo
Opciones para desarrolladores en la configuración del modulo contentBox
Use only the main language settings (Utilizar ajustes del módulo solo para el idioma principal) -> Si activamos esta opción, veremos que en la parte superior de la configuración del módulo, tendremos la opción de elegir “Idioma” para ajustar el módulo por idioma activado en la tienda. Si la desactivamos tomara los ajustes del idioma por defecto para todos los idiomas.
Configuración del módulo ContentBox por Idiomas
Use Text Editor -> Activar / Desactivar editor gráfico (misma opción que teníamos en el htmlbox).
Load Files on HTML Header ->Si hemos subido un fichero JS o CSS en la opción “
Fichero subido en la propia configuración del módulo contentBox
Cargar JS y CSS en el header con el módulo contentBox
Use a Content Wrapper -> Nos permite encapsular el contenido que vayamos a añadir en unas etiquetas sugeridas (div, article, footer, etc..), es decir si nosotros escribimos el editor del módulo “hola mundo”, y señalamos aquí “div”, el módulo colocara el contenido entre “<div></div>”
Disponemos desde hace una eternidad un aporte del usuario Dh42 de la Comunidad de Prestashop que permite añadir nuestros propios estilos desde la misma configuración del módulo, sin necesidad por ejemplo de editar el fichero global.css o el *.css que vayamos a modificar.
La instalación del módulo, sin complicación, como siempre desde la pestaña Módulos -> Módulos.
En este caso, hemos testeado el módulo sobre las ultimas variantes de la versión 1.6 de Prestashop.
¿Qué opciones de configuración nos ofrece el módulo?
Añadir estilos en Prestashop
Simplemente, disponemos de una caja de texto, donde podemos añadir nuestros propias reglas.
En este manual sobre Prestashop, comentamos la forma de cambiar el fondo y el color del porcentaje del descuento en el bloque de promociones especiales en Prestashop.
Bloque Promociones especiales en Prestashop
Para cambiar el fondo y el color del porcentaje de descuento del bloque de promociones especiales en Prestashop, seguiremos los siguientes pasos:
1) Nos dirigimos al fichero:
modules/blockspecials/blockspecials.css
Y dentro del fichero, buscamos el siguiente código CSS:
En este manual sobre Prestashop, explicaremos la posibilidad de cambiar el color del precio original en el bloque de promociones especiales en Prestashop.
