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 – Quitar el enlace de “Nuestras tiendas” del bloque de información en el lateral izquierdo en Prestashop 1.5

En un tutorial anterior explicábamos como quitar el enlace de “Nuestras tiendas” en el bloque de “Información” del pie de página: Guía – Eliminar enlace “Nuestras tiendas” del pie de página en Prestashop 1.5.

En este caso, explicaremos como eliminar el enlace de “Nuestras tiendas” del bloque de información del lateral izquierdo en Prestashop 1.5.

informacion_t

Para ello debemos ir a la pestaña “Módulos -> Módulos” del panel de tu tienda, y buscamos el módulo llamado:

Bloque CMS

Y pulsamos en “Configurar”.

Una vez dentro de la configuración del módulo, nos fijaremos donde dice:

Bloques de izquierda

bloqueizquierda01

Pulsamos en el icono del “Lápiz” para editar el bloque que tenemos creado en la parte referente a los bloques de izquierda.

Una vez, hemos pulsado en el icono del “Lápiz”, veremos el siguiente formulario:

mostratiendas

Donde nos fijaremos en la opción que dice:

Mostrar tiendas:

Y señalamos

X

De esta manera eliminaremos el enlace de “Nuestras tiendas” en dicho bloque.

notiendas

Ahora, ya no veremos el enlace de “Nuestras tiendas” en el bloque de “Información” en el lateral izquierdo de Prestashop 1.5.

tpiechas

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 – Establecer separador en las características en la ficha técnica en Prestashop 1.5

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

Por defecto en Prestashop 1.5.4.1, cuando vemos en la ficha del producto la ficha técnica, el valor de la característica no aparece separado con un guion, ni con ningún otro signo.

fichatecnica

Como vemos por ejemplo en la imagen, aparece “Alto”, después un espacio y después el valor de la característica.

Para colocar un “guion” de separador, debemos ir al fichero:

/themes/default/product.tpl

Buscamos la siguiente línea:

<li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>

Y la dejamos así:

<li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> -{$feature.value|escape:'htmlall':'UTF-8'}</li>

En este caso, hemos establecido un guion como separador, de esta manera la ficha técnica en Prestashop, se verá como mostramos en la siguiente imagen:

fechica

Igual que hemos puesto un guion de separador, podríamos haber puesto otro signo, como, por ejemplo:

<li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> | {$feature.value|escape:'htmlall':'UTF-8'}</li>

separado

Si por ejemplo quisiéramos que el separador tuviera un color “especial”, lo podríamos dejar así:

<li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> <span class="chfirvel">-</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>

Y luego añadir el color de la clase “chfirvel”, por ejemplo, en el fichero:

/themes/default/css/product.css

.chfirvel {
color: #d73532;
font-weight: bold;
font-size: 16px;
}

En este caso asignamos un color (una especie de rojo) al separador (color: #d73532), el tamaño de la fuente a 16px (font-size: 16px), y en negrita (font-weight: bold).

Por ejemplo, en este caso lo veremos así:

colorseparador

Guía – Eliminar enlace “Nuestras tiendas” del pie de página en Prestashop 1.5

En esta guía, explicaremos como eliminar el enlace de “Nuestras tiendas” en el bloque de información del pie de página en Prestashop 1.5

tiendaelimianr

Para eliminar el enlace de “Nuestras tiendas”, tenemos que ir a la pestaña Preferencias -> Contactos de la tienda y en la opción que dice:

Mostrar a pie de página

Señalar:

No

tconact

De esta manera en el bloque de información en el pie de página en Prestashop 1.5, ya no veremos el enlace referente a “Nuestras tiendas”.

piefinal

Está guía ha sido 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