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.

Print Friendly, PDF & Email

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

Print Friendly, PDF & Email

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.

Print Friendly, PDF & Email

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.

Print Friendly, PDF & Email

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;
}
Print Friendly, PDF & Email

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

Print Friendly, PDF & Email

Guía – Eliminar las columnas en la página principal en Prestashop 1.5

En esta guía, vamos a explicar cómo podemos dejar solo la columna central en la página principal en Prestashop, eliminando la columna derecha e izquierda, dejando solo la central.

homeweb

Esta guía, está realizada bajo la plantilla por defecto en Prestashop 1.5.4.1

El primer paso, será ir al fichero:

/themes/default/header.tpl

Donde buscamos el siguiente código:

<div class="column grid_2 alpha" id="left_column">{$HOOK_LEFT_COLUMN}</div>

Y lo dejamos así:

{if $page_name!='index'}
<div class="column grid_2 alpha" id="left_column">{$HOOK_LEFT_COLUMN}</div>
{/if}

De esta manera ocultaremos la columna izquierda, en la página principal en tu tienda Prestashop.

Ahora vamos a ocultar la columna derecha, para ello vamos a ir al fichero:

/themes/default/footer.tpl

Buscamos el siguiente código:

<div class="column grid_2 omega" id="right_column">{$HOOK_RIGHT_COLUMN}</div>

Y la dejamos así:

{if $page_name!='index'}
<div class="column grid_2 omega" id="right_column">{$HOOK_RIGHT_COLUMN}</div>
{/if}

De esta manera eliminamos la columna derecha en la página principal.

El siguiente paso, como hemos eliminado tanto la columna derecha, como la columna izquierda, ahora tenemos que ampliar la columna central en la página principal.

Para eso, vamos añadir el siguiente código:

#index #center_column {
width: 980px;
}

en el fichero:

/themes/default/css/global.css

Print Friendly, PDF & Email

Error al visualizar los productos en la busqueda por etiquetas en Prestashop 1.5.4

Cuando en Prestashop 1.5.4, accedemos para visualizar los productos por etiquetas no se visualizan correctamente los productos.

errorv

Si habilitamos el reporte de errores, editando el fichero:

/config/settings.inc.php

Cambiando esto:

define('_PS_MODE_DEV_', false);

Por esto:

define('_PS_MODE_DEV_', true);

Y volvemos acceder a la búsqueda de productos por etiquetas no salta el siguiente error:

Unknown column 'product_shop.id_image' in 'group statement'

¿Cómo lo podemos solucionar?

Vamos al fichero:

/classes/Search.php

Buscamos esta linea:

GROUP BY product_shop.id_image

Y la dejamos así:

GROUP BY product_shop.id_product

Una vez realizado el cambio, ya veremos las búsquedas por etiquetas de forma correcta.

tag

Este error en principio es particular de la versión 1.5.4 de Prestashop.

Print Friendly, PDF & Email

Guía – Módulos situados en la cabecera en Prestashop 1.5

En una instalación desde 0 bajo la versión 1.5 de Prestashop, la cabecera de Prestashop se compone de los siguientes elementos:

logoprestashopweb
Logo por defecto en Prestashop 1.5

¿Dónde podemos cambiar el logo de la tienda en Prestashop 1.5?

En la pestaña Preferencias -> Temas del panel de administración, podemos cambiar el logotipo por defecto que viene con Prestashop.

buscadortienda
Bloque de búsqueda rápida en Prestashop 1.5

Este módulo en Prestashop se llama:

Bloque de búsqueda rápida

Por defecto este módulo se sitúa también  en la cabecera, y sirve para poder realizar búsquedas sobre los productos en Prestashop 1.5.

Es importante que en la pestaña Preferencias -> Buscar en la parte donde dice:

Indexación tengamos indexados los productos, en caso de que no los tengamos indexados, simplemente pulsamos donde dice:

Añadir los productos que faltan al índice.

bloquepermanentes

Bloque de enlaces permanentes en Prestashop 1.5

Este módulo muestra 3 enlaces, uno para ir formulario de contacto, otro para ir al mapa del sitio y otro para agregar la tienda a favoritos en tu navegador.

bloquemonedas

Bloque de monedas y de idiomas en Prestashop 1.5

En esta imagen mostramos dos módulos, uno se llama:

Bloque de moneda

Este módulo muestra las monedas que tenemos activadas en la tienda, y en dicho módulo podemos elegir estas monedas, para ver la tienda en un tipo de moneda o en otro.

El otro módulo que se muestra en la imagen se llama es:

Bloque de idiomas

Este módulo, muestra los idiomas que tengas activados en tu tienda, y en dicho módulo podemos elegir estos idiomas, para ver la tienda en un idioma o en otro.

informacionpersonal

El módulo que mostramos ahora se compone del módulo llamado:

Bloque de información personal + Carrito

Realmente lo que vemos en la imagen en cuestión es el:

Bloque de información personal

Pero cuando añadimos un producto al carrito, el carrito que se muestra en el bloque de información personal se despliega y aparece el módulo del carrito en cuestión.

Adjunto Imagen.

vercarrito

Por último, vamos a pasar al siguiente módulo.

menuweb

Este módulo se llama:

Menú horizontal superior

En este módulo podemos mostrar los enlaces que nosotros queramos configurar.

Este módulo es configurable desde la pestaña Módulos -> Módulos del panel de administración de tu tienda Prestashop.

Un truco para ver como se llaman los módulos que se sitúan en la cabecera, es ir a la pestaña Módulos -> Posiciones y buscar el bloque que haga referencia al “Top Of Pages” (displayTop)

Adjunto Imagen

topofpages

Esta guía ha sido realizada bajo Prestashop 1.5.4

Print Friendly, PDF & Email