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 ?

Continúa leyendo Añadir ficheros CSS y JavaScript en Prestashop

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

Continúa leyendo contentBox vs HTMLBox en Prestashop

Editor CSS en Prestashop

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
Añadir estilos en Prestashop

Simplemente, disponemos de una caja de texto, donde podemos añadir nuestros propias reglas 🙂

Continúa leyendo Editor CSS en Prestashop

Guía – Cambiar el fondo verde de “disponibilidad” en la ficha del producto en Prestashop 1.5

En esta guía, explicaremos como cambiar el “fondo verde” de disponibilidad en la ficha del producto en Prestashop 1.5.

fdiaplo
Cambiar fondo “disponibilidad” en la ficha del producto en Prestashop 1.5

En principio sera suficiente con tocar el ficheroproduct.css” de la plantilla en Prestashop 1.5.

En el fichero en cuestión: (Como normalmente hacemos, recordamos que estamos trabajando bajo la plantilla por defecto de Prestashop 1.5) Continúa leyendo Guía – Cambiar el fondo verde de “disponibilidad” en la ficha del producto en Prestashop 1.5

Guía – Eliminar la descripción corta del producto en la ficha del producto en Prestashop 1.5

En esta guía, explicaremos como eliminar la descripción corta de la ficha del producto en Prestashop 1.5.

Recordamos que estamos trabajando bajo la plantilla por defecto de Prestashop 1.5, en este caso particular estamos trabajando con Prestashop 1.5.3.1.

fproducto
Eliminas descripción corta en la ficha del producto en Prestashop 1.5

Podemos por ejemplo “ocultarla” con el css.

Para ocultarlo con la descripción corta del producto en la ficha del producto en Prestashop 1.5 con css, podemos ir al fichero:

/themes/default/css/product.css

Buscar la siguiente linea:

#pb-left-column #short_description_block {
color:#666;
}

Y dejarlo así: Continúa leyendo Guía – Eliminar la descripción corta del producto en la ficha del producto en Prestashop 1.5

Guía – Ocultar la columna derecha en la página principal de Prestashop 1.5

En esta guía, explicaremos como ocultar la columna derecha de tu tienda principal en la página principal bajo Prestashop 1.5.

ocultarcolumnaDerecha
Ocultar la columna derecha en la página principal en Prestashop 1.5

El primero paso sera ocultar dicha columna “solo en la página principal” de tu tienda Prestashop, para ello editamos el fichero:

/themes/default/css/global.css (Estamos trabajando con la plantilla por defecto de Prestashop 1.5)

Dentro de dicho fichero añadimos la siguiente linea: Continúa leyendo Guía – Ocultar la columna derecha en la página principal de Prestashop 1.5

Cambiar el fondo y color del porcentaje de descuento en el bloque de promociones especiales en Prestashop 1.5

En esta guía, explicaremos como cambiar  el fondo y el color del porcentaje del descuento en el bloque de promociones especiales en Prestashop 1.5.

rebajaDescuento
Bloque Promociones especiales en Prestashop

Para cambiar el fondo y el color del porcentaje de descuento de tal bloque en Prestashop, seguiremos los siguientes pasos:

1) Iremos al fichero:

modules/blockspecials/blockspecials.css

Y dentro del fichero, buscaremos el siguiente código:

Continúa leyendo Cambiar el fondo y color del porcentaje de descuento en el bloque de promociones especiales en Prestashop 1.5

Guía – Cambiar el color del precio rebajado en el bloque de promociones especiales en Prestashop 1.5

En esta guía, vamos a explicar como cambiar el color del precio rebajado en el bloque de promociones especiales en Prestashop 1.5.

pre_rebajado
Color precio del bloque de promociones en Prestashop

 

Dividiremos las acciones en 2 pasos.

El primer paso, sera ir al fichero:

modules/blockspecials/blockspecials.css

Y en tal fichero, buscaremos el siguiente código:

#special_block_right .products span.price {
display:block;
padding:3px 0 0 0;
font-weight:bold;
font-size:14px;
color:#900
}

Continúa leyendo Guía – Cambiar el color del precio rebajado en el bloque de promociones especiales en Prestashop 1.5

Guía – Cambiar el color del precio original del bloque de promociones especiales en Prestashop 1.5

En esta guía, explicaremos como cambiar el color del precio original en el bloque de promociones especiales en Prestashop 1.5.

bloquecolorrebajado

Seguiremos lo siguientes pasos:

1) El primero paso, sera editar el fichero:

/modules/blockspecials/blockspecials.css

Buscar el siguiente código:

#special_block_right .products span.price-discount {
font-size:14px;
text-decoration:line-through
}

Continúa leyendo Guía – Cambiar el color del precio original del bloque de promociones especiales en Prestashop 1.5

Guía – Cambiar el color del nombre del producto en el bloque de promociones especiales en Prestashop 1.5

En esta guía, explicaremos como cambiar el color del nombre del producto en el bloque de promociones especiales en Prestashop 1.5.

bloque_promociones
Color nombre del producto en Prestashop del bloque de promociones

 

Debemos seguir los siguientes pasos.

1) Edita el fichero:

modules/blockspecials/blockspecials.css

Continúa leyendo Guía – Cambiar el color del nombre del producto en el bloque de promociones especiales en Prestashop 1.5