Añadir ficheros CSS y JavaScript en Prestashop

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.

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

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?

https://www.prestashop.com/forums/topic/386184-free-medialoader-module-load-your-js-and-css-files-easily/

Por cierto, ¿Recordáis que también podíamos usar contentbox para cargar nuestros ficheros JS y CSS en la sección “Load Files on HTML Header ?

Sigue leyendo

contentBox vs HTMLBox en Prestashop

Dos módulos con un mismo destino en Prestashop

Dos módulos con un mismo destino 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:

Integrar Google traductor en Prestashop 1.7
Insertar código Qweb
Insertar Información del tiempo

¿Qué opciones nos ofrece el módulo htmlbox?

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, etc..
  • 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 Prestashop

displayLeftColumn en Prestashop

displayRightColumn en Prestashop

displayTopColumn 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 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

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

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>”)

    Encapsular contenido en ContentBox

Sigue leyendo