Efecto añadir al carrito en versiones anteriores de Prestashop

En esta ocasión, vamos hablar de una función que viene nativa en Prestashop 1.6 y posteriores, pero no en versiones anteriores 🙂

Sé que todavía quedan personas que usan Prestashop 1.5, y que alguna lee el blog.

Vamos hablar de un aporte desarrollado por el usuario Yopixel de la Comunidad de Prestashop que en su momento tuvo gran éxito 🙂

Cuando en Prestashop 1.6 y versiones posteriores añadimos un producto al carrito se nos abre una ventana mostrando información del producto, el número de productos añadidos en el carrito, etc.. 🙂 ¿no?

Añadir al carrito en Prestashop 1.6

Esta opción, en versiones anteriores de Prestashop no venía integrada 🙂

Pero gracias a un módulo se puede solventar o al menos intentarlo.

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

Ventana modal del carrito en Prestashop

¿Ofrece el módulo alguna opción de configuración adicional en el panel de administración?

No, no ofrece ninguna opción de configuración en el panel

Cuando vayamos añadir un producto al carrito, se nos abrirá una ventana indicando los datos del producto, el número de productos que tenemos añadido al carrito, etc… tal como hace Prestashop en versiones posteriores.

Añadir al carrito en Prestashop 1.5 como en Prestashop 1.6

Sigue leyendo

Ordenar productos por popularidad en Prestashop

No todo es Prestashop 1.7/Prestashop 1.6, en este ejemplo, vamos a reseñar un aporte que en principio fue construido para la versión 1.5 de Prestashop (seguro que alguno de vosotros usa todavía esa versión)

Cuando hablamos de popularidad, hablamos de productos más vendidos 🙂

El aporte ha sido desarrollado por el usuario ps20am de la Comunidad de Prestashop

Permite añadir en los listados de productos en el selector de “Ordenar por” para ver ordenados los productos por “Populares (Más vendidos)”

Nueva opción de ordenación en Prestashop

No es un módulo, lo tenemos que copiar a “mano”.

No descargamos el fichero “zip” del aporte, y vemos que dentro tenemos una carpeta llamado “overide” y otra carpeta llamado “themes

Estructura del aporte

Esos dos directorios los copiamos en el directorio raíz de la tienda 🙂 (Si nos pregunta si queremos sustituir el fichero “product-sort.tpl” le decimos que  ‘SI’.)

Por último, en la pestaña Parámetros Avanzados -> Rendimiento limpiamos la cache

Veremos, que ahora ya tenemos la nueva opción añadida en el selector de “ordenar por:”

Nueva opción de ordenar añadida en Prestashop 

Nueva opción de ordenar añadida en Prestashop

¿Qué incluye realmente el aporte? Sigue leyendo

¿Merece la pena trabajar con la plantilla por defecto en Prestashop?

Me han preguntado muchas veces, si merece o no la pena trabajar con la plantilla por defecto en Prestashop.

Antiguamente (hablo de hace bastantes años), no disponíamos de muchas plantillas para Prestashop, y al final muchos usuarios terminaban usando la plantilla por defecto, y en muchos casos hacían una maquetación bajo la plantilla por defecto, que quedaba bastante elegante.

¿Pero ahora que tenemos trillones de plantillas para comprar? ¿Merece la pena usar la plantilla por defecto en Prestashop?

Cierto es que cuando compras una plantilla a una empresa o desarrollador, te suele prometer un tiempo en el que te da soporte de actualizaciones, pero dependes realmente de la “bondad” del desarrollador/empresa, en cambio, cuando usas la plantilla por defecto de Prestashop te aseguras de que siempre esté al  tanto de las correcciones de los errores que tenga la misma plantilla, ya que cuando Prestashop saca una nueva actualización, en muchas ocasiones también corrige algún fallo de la misma plantilla.

A que contar también, que en algunas ocasiones (ha ocurrido en el pasado), cuando usabas una plantilla comprada y Prestashop sacaba una nueva variante (es decir ni siquiera un salto grande de versión, sino una variante de la misma versión de Prestashop que usabas) y “tachan”, saltaba algún fallo escondido en la plantilla que tenías, que no te dabas cuenta del fallo, hasta que un cliente que iba a comprar en tu tienda o la estaba visitando te hacia un feedback.

Evidentemente, todo esto ha mejorado con el tiempo, pero sigo insistiendo que usar la plantilla por defecto de Prestashop, no es tan maligno como puede parecer, a pesar de la cantidad de plantillas que tenemos disponibles hoy en día.

Y ya por simple curiosidad, veamos cómo era la plantilla por defecto de Prestashop, a lo largo de su pequeña historia.

Plantilla por defecto en Prestashop 0.9

Plantilla por defecto en Prestashop 0.9

Plantilla por defecto en Prestashop 1.4

Plantilla por defecto en Prestashop 1.0/1.1/1.2/1.3 / 1.4

Plantilla por defecto en Prestashop 1.5

Plantilla por defecto en Prestashop 1.6

Plantilla por defecto en Prestashop 1.7

Asistente en la configuración de los transportistas en Prestashop 1.5

A partir de la versión 1.5.5.0 se introduce un asistente que nos ayudara a configurar los transportes y gastos de envío.

(Atención, es solo un repaso muy rápido al nuevo asistente)

Como primer paso, vamos a la pestaña Transporte -> Transportistas y pulsamos en añadir nuevo:

anadirnu

Ahora nos aparecerá la siguiente pantalla:  (Pulsar en la imagen para verla de forma completa)

pant

Sigue leyendo

Guía – Cambiar el fondo de los encabezados de los módulos de forma general en Prestashop 1.5

Esta guía, está probada bajo Prestashop 1.5.4.1 .

En esta guía, explicaremos como cambiar de forma general el fondo de los encabezados de los módulos y lógicamente el color del título de dichos encabezados.

encabezados_modulos

 

Trabajamos sobre la plantilla por defecto de Prestashop. (Recordamos bajo Prestashop 1.5.4.1)

Vamos al fichero:

/themes/default/css/global.css

Buscamos la siguiente línea:

.block .title_block, .block h4 {
  padding:6px 11px;
  font-size:12px;
  color:#fff;
  text-shadow:0 1px 0 #000;
  text-transform:uppercase;
  background:#383838;
  text-align:left;
  font-weight: bold;
}

Cambiando el valor de la propiedad “background“, cambiaremos el fondo de los encabezados de los módulos en Prestashop.

Cambiando el valor de la propiedad “color“, cambiaremos el color del títulos de los encabezados de los módulos en Prestashop.

Cambiando el valor de la propiedad “text-shadow“, cambiaremos el valor de la sombra de los títulos de los encabezados de los módulos en Prestashop.

Con “font-size“, establecemos el tamaño de los títulos de los encabezados de los módulos.

Con “text-transform:uppercase“, convertimos los títulos de los módulos para que estén en mayúscula.

Con “text-align:left“, alineamos los títulos de los módulos hacia la izquierda.

Con “font-weight:bold“, indicamos que los títulos estén en negrita.

Guía – Desplazar la descripción de la categoría debajo del título de la categoría en Prestashop 1.5

Por defecto, la descripción de la categoría en Prestashop 1.5, se muestra justo debajo de la imagen de la categoría, tal como mostramos en la siguiente imagen.

deschatetoria

En esta guía, explicaremos como mostrar esa descripción justo debajo del título de la categoría y no como lo muestra actualmente que es debajo de la imagen de la categoría.

descripconreal

En este ejemplo, estamos trabajando bajo la plantilla por defecto de Prestashop 1.5, y estamos trabajando justo con la versión 1.5.4.1 de Prestashop.

Vamos al fichero:

/themes/default/category.tpl

Buscamos el siguiente código:

{if $category->description}
<div class="cat_desc">
{if strlen($category->description) > 120}
<p id="category_description_short">{$category->description|truncate:120}</p>
<p id="category_description_full" style="display:none">{$category->description}</p>
<a href="#" onclick="$('#category_description_short').hide(); $('#category_description_full').show(); $(this).hide(); return false;" class="lnk_more">{l s='More'}</a>
{else}
<p>{$category->description}</p>
{/if}
</div>
{/if}

Y lo vamos a colocar justo después de esta línea de código:

<h1>
{strip}
{$category->name|escape:'htmlall':'UTF-8'}
{if isset($categoryNameComplement)}
{$categoryNameComplement|escape:'htmlall':'UTF-8'}
{/if}
{/strip}
</h1>

Guía – Mostrar el nombre de las monedas en el bloque de monedas en Prestashop 1.5

En esta guía, explicaremos como mostrar en el bloque de monedas el nombre completa de la moneda y no el signo en Prestashop 1.5.

nombre_moneda

 

Debemos editar el fichero:

/themes/tu-plantilla/modules/blockcurrencies/blockcurrencies.tpl

Si no tuviéramos el módulo sobreescrito dentro de la misma plantilla que estemos usando, lo ideal sería copiar el fichero:

/modules/blockcurrencies/blockcurrencies.tpl

En el directorio:

/themes/tu-plantilla/modules/blockcurrencies/

(En caso de que no tengamos la estructura “/modules/blockcurrencies/”, la creamos.)

Esto evitara que si en un futuro cercano o lejano, actualizamos Prestashop o el módulo en cuestión que nos perdamos los cambios que vamos a realizar ahora en el fichero *.tpl.

Ahora vamos a editar el fichero, que íbamos a editar en principio:

/themes/tu-plantilla/modules/blockcurrencies/blockcurrencies.tpl

Abrimos el fichero, y buscamos la siguiente línea:

{$blockcurrencies_sign}

Y lo dejamos así:

{$blockcurrencies_fnombre}

Con esto cambiamos una variable en la que estamos imprimiendo el signo de la moneda que tenemos actualmente seleccionada por una variable nueva en la que luego vamos a asignar el nombre de la moneda que tenemos actualmente seleccionada.

En el mismo fichero, buscamos la siguiente línea:

{$f_currency.sign}

Y la dejamos así:

{$f_currency.name}

Con esto hemos cambiado el signo por el nombre de la moneda en el selector de monedas.

Ahora vamos al fichero:

/modules/blockcurrencies/blockcurrencies.php

Donde vamos a declarar la variable “blockcurrencies_fnombre” que hemos definido antes en el fichero:

/themes/tu-plantilla/modules/blockcurrencies/blockcurrencies.tpl

Para ello en el fichero:

/modules/blockcurrencies/blockcurrencies.php

Buscamos la siguiente línea de código:

$this->smarty->assign('blockcurrencies_sign', $this->context->currency->sign);

Y justo debajo añadimos esto:

$this->smarty->assign('blockcurrencies_fnombre', $this->context->currency->name);

De esta manera, hemos asignado a la variable “blockcurrencies_fnombre”, el nombre de la moneda que tenemos seleccionada en este momento.

Si nos damos cuenta, ahora veremos el bloque de monedas de la siguiente manera:

elemoneda

Aunque, realmente si pulsamos para ver el listado de monedas disponibles, no queda “muy elegante”, tal como mostramos en la siguiente imagen:

elmoneda01

¿Cómo podemos solucionar esto y dejarlo como mostramos en la siguiente imagen?

elegirmoneda

Lo primero es cambiar la palabra “Moneda” por “Seleccionar Moneda”, para eso tenemos que ir a la pestaña Localización -> Traducciones -> Traducciones de los módulos -> Bandera española -> Bloque blockcurrencies.

monedac

Cambiamos la palabra “Moneda” por “Seleccionar Moneda”

selemoneda

Una vez cambiado la palabra y guardados los cambios, pasaremos al siguiente el cambio.

El siguiente cambio, es ajustar el css del módulo para que termine cuadrando, para ello vamos a ir al fichero:

modules/blockcurrencies/blockcurrencies.css

Donde vamos a buscar el siguiente código:

#setCurrency .currencies_ul_hover{
	display:block;
	z-index: 5000;
	position:absolute;
	right:3px;
	padding:5px 10px;
	height:auto;
	text-align: center;
    width: auto;
	background:#000000;
}

Y la dejamos así:

#setCurrency .currencies_ul_hover {
display: block;
z-index: 5000;
position: absolute;
right: -5px;
padding: 5px 10px;
height: auto;
text-align: left;
width: 94%;
background: #000000;
}

Cambiamos el ancho automático (width:auto) a un ancho de un 94% (width: 94%).

Alineamos el texto a izquierda con el “text-align:left”.

Y movemos el bloque unos 5 píxeles negativao sobre la derecha. (Vamos que lo movemos un poquito a la izquierda el desplegable de los idiomas)

Esta guía, está probada en Prestashop 1.5.4.1.

Guía – Ocultar botones del slider en Prestashop 1.5

En esta guía, explicaremos como ocultar los botones del slider que lleva Prestashop 1.5, llamado:

Imagen de control deslizante para su página web

bslider

Tenemos que editar el fichero:

modules/homeslider/bx_styles.css

Y buscar la siguiente línea:

.bx-pager a {
display: inline-block;
zoom: 1;
margin-right: 5px;
padding: 4px 0 0 1px;
height: 16px;
width: 18px;
font-weight: bold;
font-size: 11px;
color: #000;
text-decoration: none;
background: url(gray_pager.png) no-repeat 0 -20px;
}

Donde cambiaremos esta línea:

display: inline-block;

Por esta

display:none;

Dejándolo así:

.bx-pager a {
display: none;
zoom: 1;
margin-right: 5px;
padding: 4px 0 0 1px;
height: 16px;
width: 18px;
font-weight: bold;
font-size: 11px;
color: #000;
text-decoration: none;
background: url(gray_pager.png) no-repeat 0 -20px;
}

Al cambiar el display de “inline-block” a “none” lo que hacemos con el “none” es ocultar en este caso los botones (enlaces) de paginación del slider en Prestashop 1.5

Esta guía, está probada en Prestashop 1.5.4.1.

Guía – Añadir un nuevo enlace en el pie de página en el tema móvil de Prestashop 1.5

En esta guía, vamos a explicar cómo añadir un nuevo enlace en el pie de página del tema móvil de la plantilla por defecto en Prestashop 1.5

nelace2

Primero, debemos ir al directorio:

/themes/default/mobile/

Y dentro del directorio, buscar el fichero llamado:

footer.tpl

Por ejemplo buscamos la siguiente línea:

<div id="link_bar_footer" class="ui-grid-a">
<div class="ui-block-a">
<a href="{$link->getPageLink('index', true)}" data-ajax="false">{$PS_SHOP_NAME}</a>
</div>
{if $conditions}
<div class="ui-block-b">
<a href="{$link->getCMSLink($id_cgv)}" data-ajax="false">{l s='Terms of service'}</a>
</div>
{/if}
</div>

Debajo de dicha línea, vamos añadir lo siguiente:

<div class="ui-grid-a">
<div id="nuevo_enlace001">
<a href="{$link->getCMSLink(id_del_cms)}" data-ajax="false">{l s='Transportes'}</a>
</div>
</div>

En este caso particular, hemos añadido un enlace, que nos llevara a una página de contenidos, que hemos creado en la pestaña Preferencias -> CMS, en referencia al transporte.

Cuando digo id_del_cms, es el id del cms (lo podéis ver en la misma pestaña Preferencias -> CMS) en referencia a la página de contenidos que tenéis creado o que habéis creado para mostrar la información sobre el transporte.

Por último, nos vamos al fichero:

/themes/default/mobile/css/global.css

Y añadimos esto:

Establecemos un ancho del 100 por 100 (“width: 100%”) e indicamos que centre el texto sobre el div que hemos creado y asignado el id “nuevo_enlace001” con el “text-align:center”, y con el “padding-bottom”, metemos un relleno inferior de 5 píxeles.

#nuevo_enlace001 {
width:100%;
text-align:center;
padding-bottom:5px;
}

El enlace, que está dentro del div con id “nuevo_enlace001”, le asignamos el color que nosotros queramos.

#nuevo_enlace001 a {
color:#fff;
}

Guía – Añadir iconos de las redes sociales en el menú horizontal superior en Prestashop 1.5

En esta guía, explicaremos como añadir distintos iconos de redes sociales en el menú horizontal en Prestashop 1.5

redsocial

El primero paso es ir al fichero:

/themes/tu-plantilla/modules/blocktopmenu/blocktopmenu.tpl

En caso de que no tengáis el fichero en dicha ruta, seria editando directamente el que tenéis en:

/modules/blocktopmenu/blocktopmenu.tpl

Pero mi recomendación es que si no tenéis el fichero sobreescrito en el directorio de vuestra plantilla, es que hagáis una copia del fichero:

/modules/blocktopmenu/blocktopmenu.tpl

en el directorio:

/themes/tu-plantilla/modules/blocktopmenu/

(Lógicamente creando la estructura del directorio “/modules/blocktopmenu/” (sin miedo) dentro del directorio de la plantilla)

De esta manera si en algún momento actualizamos prestashop, o el mismo módulo, no perderemos los cambios que hayamos realizado en el fichero:

blocktopmenu.tpl

Ahora vamos a explicar, como incluir varios iconos de las redes sociales que nosotros queramos en el mismo menú horizontal superior, para eso editamos el fichero, del cual hemos hablado, es decir:

blocktopmenu.tpl

Buscamos la siguiente línea:

{if $MENU_SEARCH}
<li class="sf-search noBack" style="float:right">
<form id="searchbox" action="{$link->getPageLink('search')}" method="get">
<p>
<input type="hidden" name="controller" value="search" />
<input type="hidden" value="position" name="orderby"/>
<input type="hidden" value="desc" name="orderway"/>
<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" />
</p>
</form>
</li>
{/if}

Y justo antes o después, añadimos por ejemplo esto:

<li id="redes_sociales"><a href="enlace_a_perfil_facebook"><img alt="" src="{$img_dir}facebook_top.png" /></a>
<a href="enlace_a_perfil_twitter"><img alt="" src="{$img_dir}twitter_top.png" /></a>
<a href="enlace_a_perfil_pinterest"><img alt="" src="{$img_dir}pinterest_top.png" /></a>
</li>

Donde las imágenes:

facebook_top_png
pinterest_top.png
twitter_top_png

Las debemos subir al directorio:

/themes/tu-plantilla/img/

Ahora, nos tocar ajustar un poquito el css, para eso por ejemplo vamos al fichero:

/themes/tu-plantilla/css/global.css

Y añadimos lo siguiente:

#redes_sociales {
width: 107px;
border-right: none;
float: right;
}

En esta parte del css, establecemos un ancho máximo (width:107px) al bloque de redes sociales. (Vuestro ancho, no tiene por qué ser igual)

He quitado el borde de la derecha (border-right: none) del bloque de redes sociales en el menú horizontal.

Y le he dicho que el bloque de redes sociales, se situé en la derecha del menú horizontal. (float: right)

También, tenemos que añadir lo siguiente:

#redes_sociales a {
padding: 0px;
}

Aquí, hemos borrado el posible relleno que tuvieran los enlaces, ya que por defecto en el menú horizontal todos tienen un relleno, y en este caso no lo necesitamos por eso lo hemos puesto a 0 pixel.

Y por último añadimos esto:

#redes_sociales a img {
float: left;
margin-left: 1px;
margin-top: 1px;
}

En esta última parte indicamos, que las imágenes “floten” para que estén una al lado de otra, hemos metido un margen superior de 1 pixel (esto es porque yo he querido) y además hemos metido un margen de 1 pixel entre las imágenes.

Recordamos que al ser el menú horizontal superior, no solo debemos forzar compilación, en la pestaña Parámetros Avanzados -> Rendimiento, sino que también debemos limpiar la cache de smarty, esto lo podemos hacer vaciando el directorio:

/cache/smarty/cache/ (menos el fichero "index.php")

O usando por ejemplo este módulo: Descargar Módulo

Esta guía, ha sido probada bajo Prestashop 1.5.4.1