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

Print Friendly, PDF & Email

Programar copias de seguridad de la base de datos en Prestashop

Como bien sabemos muchos, podemos hacer copias de seguridad de la base de datos de forma manual, desde el panel de administración en la pestaña Parámetros Avanzados -> Copia BD

¿Pero como podemos programar estas copias de seguridad de la base de datos en Prestashop para que sean automáticas?

Disponemos de un aporte desarrollado por el usuario Captain FLAM de la Comunidad de Prestashop

El aporte, es un fichero denominado “cron_database_backup.php” con el siguiente contenido:

<?php
if (!defined('_PS_ADMIN_DIR_')) {
define('_PS_ADMIN_DIR_', getcwd());
}
include(_PS_ADMIN_DIR_.'/../config/config.inc.php');
include(_PS_ADMIN_DIR_.'/../classes/PrestaShopBackup.php');
if (isset($_GET['secure_key'])) {
$secureKey = md5(_COOKIE_KEY_.Configuration::get('PS_SHOP_NAME'));
 if (!empty($secureKey) && $secureKey === $_GET['secure_key']) {
$shop_ids = Shop::getCompleteListOfShopsID();
foreach ($shop_ids as $shop_id) {
Shop::setContext(Shop::CONTEXT_SHOP, (int)$shop_id);
$back = new PrestaShopBackup();
$back->add();
}
}
}

Si nos ponemos a analizar el código, aquí la clave es el siguiente código:

$back = new PrestaShopBackup();
$back->add();

Creamos un objeto de la clase PrestaShopBackup y ejecutamos la función “add” de dicha clase, de esta manera generamos una copia de seguridad.El fichero “cron_database_backup.php” lo guardamos en el directorio (carpeta) de administración de tu tienda, es decir si accedes al panel de tu tienda con la siguiente dirección:

http://victor-rodenas.com/administración/ 

Lo guardamos dentro de la carpeta /administración/

Por últimos nos falta añadir la siguiente URL al Cron:

http://victor-rodenas.com/administración/cron_database_backup.php?secure_key=CLAVE

En referencia a la CLAVE, por ejemplo, si nos vamos al panel de administración en la pestaña Localización -> Monedas, podemos obtenerla de otra URL que tengamos.

El siguiente paso, es pegar nuestra dirección:

http://victor-rodenas.com/administración/cron_database_backup.php?secure_key=CLAVE 

en la pestaña módulos -> módulos dentro de la configuración del módulo  “Gestor de tareas cron (cronjobs)

Accediendo a la configuración del módulo para automatizar tareas en Prestashop

Y en su configuración, añadimos la dirección que hemos comentado:

Añadiendo regla a CRON en Prestashop

¿Dónde puedo descargar el aporte, preguntar dudas y ver los posibles errores?

  • https://www.prestashop.com/forums/topic/613661-sauvegarde-automatique-de-la-base-de-donn%C3%A9es-avec-le-module-cron/
  • https://www.prestashop.com/forums/topic/613659-auto-database-backup-with-cron-module/

Documento realizado bajo Prestashop 1.6.1.14 y la versión “0.0” del aporte.

Print Friendly, PDF & Email

Asociar grupo en base al registro de clientes en Prestashop

En esta ocasión, vamos hablar de un módulo desarrollado por Hennes Hervé.

El módulo permite que cuando el usuario se registre en tu tienda, automáticamente se le asocie un grupo de cliente en base a las condiciones que hayamos establecido en la misma configuración del módulo.

Por ejemplo, podemos tener grupo de Mujeres y grupo de Hombres, entonces cuando el cliente se registra y señala por ejemplo que es un “Hombre”, automáticamente queda asignado al grupo de hombres.

Hemos hablado de una condicional, pero se puede hacer en base al resto de datos del registro del cliente, incluyendo los datos de la dirección como el mismo país, provincia, etc…

El review lo vamos a realizar bajo Prestashop 1.6

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

Instalando módulo que nos permitirá una asociación automática de los grupos a los usuarios que se registren en la tienda en base a unos determinados criterios
Instalando módulo que nos permitirá una asociación automática de los grupos a los usuarios que se registren en la tienda en base a unos determinados criterios

Para poder configurar el módulo, tenemos que ir a la nueva pestaña que el módulo nos ha creado dentro de la pestaña Clientes, llamada “Customers Auto groups”

Accediendo a la configuración del módulo desde la pestaña Clientes

Una vez accedemos a la configuración del módulo, podemos añadir nuestras reglas, modificar las que vayamos a crear o eliminarlas.

Creando una nueva regla en la configuración del módulo
Creando una nueva regla en la configuración del módulo

Si pulsamos en “+”, veremos las opciones que nos permite a la hora de crear la nueva regla.

Primer bloque de configuración
Primer bloque de configuración
  • name -> Nombre de la regla
  • description -> descripción de la regla
Segundo bloque de configuración
Segundo bloque de configuración
  • Condition Type -> La condición se aplica sobre los datos básicos del registro (customer) o sobre los datos de la dirección del cliente (address)

    Tipo de condición a la hora de asignar el grupo al Cliente
    Tipo de condición a la hora de asignar el grupo al Cliente
  • Condition Field -> Seleccionamos el campo de los datos básicos del registro o de la dirección (dependiendo lo que hayamos seleccionado en “Condition Type”) para hacer la condición de la asociación del grupo en base a este campo.
  • Condition Operator -> Disponemos de varios operadores, por ejemplo si el campo “id_gender (genero del cliente)” es igual al ID 1 que corresponde al genero Mujer (Sra.) usaremos “=”. (Disponemos de varios operadores según como vayamos a realizar la comparación)

    Operador de la condición
    Operador de la condición
  • Customer Group-> Elegimos a que grupo quedara asignado este cliente. (Los grupos que aparecen aquí son los que vienen en la pestaña Clientes -> Grupos)

    Grupo de Clientes
    Grupo de Clientes
Tercer bloque de configuración
Tercer bloque de configuración
  • Priority -> Prioridad de la regla sobre otras que tengamos creadas
  • Active -> Esta opción es para indicar si la regla está activa o no lo está.
  • Stop processing further rules -> Si activamos esta “opción”; significa que la actual regla sera la última que se vaya aplicar al cliente en el registro.
  • Delete all others groups -> Dejar al cliente solo en el “Grupo” que le hemos asignado en la condición. (Opción dependiente también de la opción  “Stop processing further rules”)

Decir, que por supuesto se pueden jugar con varias reglas a la hora de asignar clientes a grupos en el registro.

¿Dónde puedo ver información sobre las actualizaciones del módulo, descargar la última versión y ver si funciona en Prestashop 1.7?

  • https://github.com/nenes25/prestashop_customerautogroups
  • http://www.h-hennes.fr/blog/2015/11/10/prestashop-ajouter-automatiquement-les-clients-a-un-groupe-lors-de-linscription/

(El módulo tiene una versión “beta” que funciona en Prestashop 1.7, revisar los enlaces que os he pasado)

Documento realizado bajo Prestashop 1.6.1.14 y la versión “0.4.0” del módulo.

Print Friendly, PDF & Email

Localizar rutas y nombres de ficheros de módulos en Prestashop

¿Os acordáis del módulo que nos permitía conocer la información de los módulos, como por ejemplo la ruta de los ficheros?

En esta ocasión, vamos hablar y poner un ejemplo, de cómo hacerlo (más simplificado) a nivel de código. (El módulo que estuvimos comentando el otro día es más completo)

El usuario Nemo de la Comunidad de Prestashop, nos proporciona un pequeño truco en un videotutorial en el idioma de Shakespeare que hemos pasado de forma transcrita al idioma de Cervantes.

Vamos a tocar clases originales, pero recordar que lo recomendable es siempre hacer un Override.

Editamos el fichero:

/classes/module/Module.php

Dentro de la función “display” ->  public function display($file, $template, $cache_id = null, $compile_id = null)

Y encima de:

return $result;

Añadimos el siguiente código:

if ($result && _PS_MODE_DEV_ === true) {
$tpl_path = $this->getTemplatePath($template);
$result = '<!-- INICIO ' .$tpl_path. ' -->'. $result. '<!-- FINAL'. $tpl_path.' -->';
}
Debug ficheros TPL de los módulos en Prestashop

Con esta línea:

if ($result && _PS_MODE_DEV_ === true)

Solo mostraremos esta información, si hemos habilitado el debug en Prestashop y si hemos obtenido un resultado.Recordar que para hablitar el debug en Prestashop 1.6, es en: /config/defines.inc.php cambiando el valor “false” de define(‘_PS_MODE_DEV_’, false); por “true“.

En esta línea:
$tpl_path = $this->getTemplatePath($template);

Obtenemos la ruta del fichero “*.tpl”.

En esta línea:

$result = '<!-- INICIO ' .$tpl_path. ' -->'. $result. '<!-- FINAL'. $tpl_path.' -->';

Guardamos resultado en la variable $result que se va usando a lo largo de la misma función y que retorna la función.

Ahora veremos que en el código fuente de la tienda, podemos localizar fácilmente los ficheros “.tpl” de los módulos. (En esta ocasión estamos viéndolo desde Inspeccionar Elemento en Chrome (Botón derecho ratón -> Inspeccionar elemento)

Documento construido bajo Prestashop 1.6.1.14

En Prestashop 1.7, directamente (y sin necesidad de modificar código) si habilitamos el modo depurador (modo debug) desde la pestaña Parámetros Avanzados -> Rendimiento 

Habilitar modo depuración en Prestashop 1.7
Habilitar modo depuración en Prestashop 1.7

Desde el mismo código fuente nos salta la ruta de los “tpls” de los módulos…

Ficheros TPL de los módulos en Prestashop 1.7
Print Friendly, PDF & Email

Prestashop 1.6.1.14 disponible para descargar

Prestashop acaba de publicar hoy (5 de junio del 2017) la versión 1.6.1.14, donde se han corregido mas de 15 errores respecto a su versión anterior.

Errores corregidos en Prestashop 1.6.1.14: Log de cambios

  • Back Office:
    • Bug fix:
      • #4803: Pipes in product names in autocomplete
      • #7908: Fix taxes in credit slip
      • #7806: Fix the refresh button of the stats bloc in the products list
      • #7821: Add API_KEY field to display the map
      • #7622: Set correct value on load to display the right tab
      • #7722: Translation of return merchandise fields
      • #7764: Fix html interpreted as text in carrier’s wizard summary
      • #7755: Fix non well formed numeric value
      • #7765: Fix error in HelperOptions
  • Front Office:
    • Bug fix:
      • #5739: Fix popover with multiple wishlists
      • #7673: Shipping cost indication wrong
      • #7350: Fix 404 bug when query string contains a LF
      • #7758: Fix manufacturer pagination
      • #7798: Fix JS error “Uncaught ReferenceError”
  • Core:
    • Bug fix:
      • #7814: Increase carrier delay length
      • #7917: Send Http 500 error code when we can’t connect to the database instead of a 200 code
      • #7913: Send Http 500 error code when we can’t connect to the database instead of a 200 code
      • #6080: make OrderInvoice overridable
    • Localization
      • Bug fix:
        • #7819: Replace EN (US) by EN (UK) in UK localization pack

Descargar Prestashop 1.6.1.14

Otras versiones de Prestashop: https://www.prestashop.com/es/versiones-anteriores

Print Friendly, PDF & Email

Suscripciones cuando el producto cambia de precio en Prestashop

En esta ocasión, contamos con un módulo desarrollado por el usuario DataKick de la Comunidad de Prestashop.

Este módulo gratuito permite a los clientes una especie de suscripción a los productos para que cuando los precios varíen, puedan recibir una notificación de este dato y estar al tanto de si el precio del producto ha variado.

El módulo es válido tanto para productos básicos, como productos con combinaciones y por supuesto podemos personalizar el email que lleva el módulo a nuestro gusto.

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

Instalación módulo suscripción de la variación de los precios en Prestashop

¿Cómo funciona el módulo?

Vamos a la ficha de un producto cualquiera, y veremos ahora una opción nueva llamada: -> “Alert me when price drops” debajo del bloque de Añadir al carrito.

Botón suscripción al producto en Prestashop

Al pinchar en el botón, se nos abrirá un popup:

Configuración suscripción precio producto en Prestashop

Podemos elegir a partir de cuándo se activa la alerta, es decir cuando el precio baja de XX Euros, que nos envié una alerta.

Configurando alerta a partir de la baja de X precio en Prestashop

Si el producto tiene combinaciones, como es este ejemplo podemos crear alertas por el precio en base a las combinaciones.

Combinaciones Precio Productos alertas

Y finalmente, tenemos el botón para “crear las alertas”

Botón crear alerta para los precios en Prestashop

Si no estamos registrados y pulsamos en el botón de “Crear la alerta”, nos permite colocar un “email”.

Email alerta precio en Prestashop

Y si estamos registrados usara el email del cliente.

El cliente recibirá el siguiente email:

Email suscripción variación del precio

Por cierto, en la actual versión del módulo en la carpeta “mails” del módulo en “modules/pricealert/mails/” solo viene el directorio “en”, duplicar ese directorio, y al duplicado cambiarle el nombre a “es”.

Después ya en la pestaña Localización -> Traducciones -> Modificar Traducciones -> Traducciones de los Emails, ya podéis cambiarlo y “traducirlo realmente” al Español.

Por otro lado y para finalizar esta minireseña, las suscripciones se guardan en la tabla: ps_ph_pricealert de la base de datos.

¿Dónde puedo descargar este módulo, preguntas dudas y obtener soporte?

https://www.prestashop.com/forums/topic/612554-free-module-pricealert-follow-the-price/

Documento realizado bajo la versión 1.6.1.13 de Prestashop y la versión “1.0.1” del módulo.

Print Friendly, PDF & Email

Botón Whatsapp en Prestashop 1.7

Si hablamos del código del botón del Whatsapp, decir que lo podemos insertar directamente con módulos como el contentbox / htmlbox que si recordamos en la comparativa que hicimos en su momento permitían insertar codigo html, javascript, css, etc.. en Prestashop de forma sencilla.

Realmente el código que nos proporciona Whatsapp es el siguiente:

https://api.whatsapp.com/send?l=es&phone=NumerodeTelefono

Con un poco de ingenio, podemos hacer un enlace con un botón y situarlo en la parte inferior de forma flotante en Prestashop con alguno de los dos módulos que he dicho.

Pero bueno, como ya disponemos de un módulo desarrollado por el usuario bera_ramazan de la Comunidad de Prestashop, pues podemos usar ya el módulo que viene preparado con opción a configurar el teléfono en una casilla desde el panel y con el icono en la tienda.

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

¿Qué opciones de configuración nos ofrece el módulo?

Whatsapp en Prestashop
Whatsapp en Prestashop

Simplemente, nos muestra una casilla para introducir nuestro teléfono.

Configuración módulo Whatsapp en Prestashop

¿Cómo se ve el módulo en nuestra tienda?

Botón Whatsapp en Prestashop

¿Dónde se puede descargar el módulo actualizado, preguntar dudas y obtener soporte?

https://www.prestashop.com/forums/topic/613462-free-module-whatsapp-chat-module/

Documento realizado bajo Prestashop 1.6.1.13 / 1.7.1.1 y la versión “1.0.0” del módulo.

Print Friendly, PDF & Email

Añadir preguntas frecuentes en Prestashop 1.6 y 1.7

En el año 2012, estuvimos hablando de un módulo que nos permitía simular el funcionamiento típico de las preguntas frecuentes al estilo acordeón (El módulo era independiente de los contenidos creados en la pestaña Preferencias -> CMS).

En esta guía, vamos a realizar una pequeña integración en los contenidos que creamos en la pestaña Preferencias -> CMS, para mostrar preguntas y respuestas de forma que inicialmente solo aparezcan las preguntas y cuando hagamos click sobre la pregunta, aparezca la respuesta.

Implementar preguntas frecuentes en Prestashop
Desplegando preguntas frecuentes en Prestashop

Vamos hacer uso de este código: https://gist.github.com/neilgee/9284745#file-faq-html que hemos obtenido en el repositorio de github del usuario neilgee

Esta guía está realizada bajo Prestashop 1.6, pero también funciona en Prestashop 1.7

El código JavaScript:

$(document).ready(function() {
$('.faq_question').click(function() {
if ($(this).parent().is('.open')){
$(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},500);
$(this).closest('.faq').removeClass('open');
}else{
var newHeight =$(this).closest('.faq').find('.faq_answer').height() +'px';
$(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500);
$(this).closest('.faq').addClass('open');
}
});
});

Lo vamos a introducir en el fichero:

/themes/plantilla/js/cms.js

Código JavaScript CMS

El siguiente paso es introducir la estructura (código html) de las preguntas frecuentes en los contenidos que vayamos a crear en la pestaña Preferencias -> CMS

La estructura tiene la siguiente forma:

<div class="faq_container">
<div class="faq">
<div class="faq_question">Pregunta 1</div>
<div class="faq_answer_container">
<div class="faq_answer">Respuesta a la pregunta 1</div>
</div>
</div>
</div>
<div class="faq_container">
<div class="faq">
<div class="faq_question">Pregunta 2</div>
<div class="faq_answer_container">
<div class="faq_answer">Respuesta a la pregunta 2</div>
</div>
</div>
</div>
<div class="faq_container">
<div class="faq">
<div class="faq_question">Pregunta 3</div>
<div class="faq_answer_container">
<div class="faq_answer">Respuesta a la pregunta 3</div>
</div>
</div>
</div>

Desde el editor gráfico de contenidos que tenemos en la pestaña Preferencias -> CMS, pulsamos en Herramientas  -> Código Fuente (<>) y colocamos el código.

Insertar código HTML en el editor gráfico en Prestashop
Código HTML Prestashop

Por último, vamos agregar el estilo (css) de las preguntas frecuentes en el CSS de Prestashop, en nuestro caso vamos añadir el siguiente código:

/* CSS Preguntas Frecuentes */
.faq_question {
margin: 0px;
padding: 8px;
display: inline-block;
cursor: pointer;
font-weight: bold;
}
.faq_answer_container {
height: 0px;
overflow: hidden;
padding: 0px;
background:#fff
}
.faq.open .faq_question {
color: #fff;
}
.faq {
background: #e1e1e1;
border-bottom: 3px solid #fff;
}
.faq.open {
background: #635858;
border:none;
}

en el fichero:

/themes/plantilla/css/cms.css

El código javaScript entre otras cosas lo que hace es que cuando pinchamos sobre la pregunta, a la respuesta se le asigna una altura, ya que por defecto la altura (height) de la respuesta (.faq_answer_container) es 0px;

¿Funciona en Prestashop 1.7?

Este “tip” funciona en Prestashop 1.7, te nombro algunas diferencias.

Te recomiendo meter el “CSS“, en el fichero:

/themes/classic/assets/css/custom.css

El javascript, en el fichero:

/themes/classic/assets/js/custom.js

Y en referencia el código html que en Prestashop 1.6 lo insertamos en la pestaña Preferencias -> CMS, en Prestashop 1.7 tal como tenemos comentado en nuestra guía de ubicación de las pestañas en Prestashop 1.7, se encuentra en la pestaña Diseño -> Página  

Preferencias -> CMS en Prestashop 1.7

Continúa leyendo Añadir preguntas frecuentes en Prestashop 1.6 y 1.7

Print Friendly, PDF & Email

Ocultar ficha técnica en Prestashop 1.7

Depende cambiar la ubicación de la ficha técnica en la ficha del producto, en esta ocasión vamos simplemente a ocultarla de la ficha del producto, porque no queremos que se vea en la ficha del producto, pero si queremos que siga funcionando como ficha técnica a nivel del filtro de navegación por facetas, y a nivel del comparador de productos.

En este documento, vamos a realizar la mini guía bajo Prestashop 1.6 y Prestashop 1.7

Ocultar ficha técnica en Prestashop 1.6 en la ficha del producto.
Ocultar ficha del producto en la ficha del producto en Prestashop 1.7

Para Prestashop 1.6, usando la plantilla por defecto, editamos el fichero:

“/themes/default-bootstrap/product.tpl”

Buscamos el siguiente código:

{if isset($features) && $features}
<!-- Data sheet -->
<section class="page-product-box">
<h3 class="page-product-heading">{l s='Data sheet'}</h3>
<table class="table-data-sheet">
{foreach from=$features item=feature}
<tr class="{cycle values="odd,even"}">
{if isset($feature.value)}
<td>{$feature.name|escape:'html':'UTF-8'}</td>
<td>{$feature.value|escape:'html':'UTF-8'}</td>
{/if}
</tr>
{/foreach}
</table>
</section>
<!--end Data sheet -->
{/if}

Y comentamos el código en Smarty

{* {if isset($features) && $features}
<!-- Data sheet -->
<section class="page-product-box">
<h3 class="page-product-heading">{l s='Data sheet'}</h3>
<table class="table-data-sheet">
{foreach from=$features item=feature}
<tr class="{cycle values="odd,even"}">
{if isset($feature.value)}
<td>{$feature.name|escape:'html':'UTF-8'}</td>
<td>{$feature.value|escape:'html':'UTF-8'}</td>
{/if}
</tr>
{/foreach}
</table>
</section>
<!--end Data sheet -->
{/if}
*}
Código de la ficha técnica comentado en Prestashop 1.6

En Prestashop 1.7, editamos el fichero:

/themes/classic/templates/catalog/product.tpl

Y nos encontramos una llamada al fichero:

/themes/classic/templates/catalog/_partials/product-details.tpl

En esta parte del código del fichero  “/themes/classic/templates/catalog/product.tpl

{block name='product_details'}
{include file='catalog/_partials/product-details.tpl'}
{/block}

Este código, no lo vamos a tocar, vamos a ir al fichero:

/themes/classic/templates/catalog/_partials/product-details.tpl

Y buscamos este bloque:

{block name='product_features'}
{if $product.features}
<section class="product-features">
<h3 class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</h3>
<dl class="data-sheet">
{foreach from=$product.features item=feature}
<dt class="name">{$feature.name}</dt>
<dd class="value">{$feature.value}</dd>
{/foreach}
</dl>
</section>
{/if}
{/block}

Y aquí podemos comentarlo el código (Smarty)

{* {block name='product_features'}
{if $product.features}
<section class="product-features">
<h3 class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</h3>
<dl class="data-sheet">
{foreach from=$product.features item=feature}
<dt class="name">{$feature.name}</dt>
<dd class="value">{$feature.value}</dd>
{/foreach}
</dl>
</section>
{/if}
{/block} *}
Código de la ficha técnica oculto en Prestashop 1.7

Uno de los problemas que nos podemos encontrar, es que en otra parte del código de la plantilla estemos usando el {include file=’catalog/_partials/product-details.tpl’}, para asegurarnos de que realmente este cambio solo se esta aplicando a la ficha del producto y no a otra parte de la plantilla que este usando dicho include, depende comentar el código, podemos usar las variables globales y hacer un condicional que solo muestre el código si no estas en la ficha del producto.

Es decir, dejar el código así:

{if $page.page_name !='product'}
{block name='product_features'}
{if $product.features}
<section class="product-features">
<h3 class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</h3>
<dl class="data-sheet">
{foreach from=$product.features item=feature}
<dt class="name">{$feature.name}</dt>
<dd class="value">{$feature.value}</dd>
{/foreach}
</dl>
</section>
{/if}
{/block}
{/if}
Condicional -> Muestro el código solo si no estoy en la ficha del producto

———

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

Print Friendly, PDF & Email

Cambiar colores en Prestashop 1.7

En su momento, estuvimos hablando a modo de ejemplo de cambiar 2/3 fondos de la plantilla por defecto en Prestashop 1.7 añadiendo nuestros propios estilos en el fichero /themes/classic/assets/css/custom.css 

En esta ocasión, vamos hablar de un módulo desarrollado por el usuario shacker de la Comunidad de Prestashop, que nos permitirá cambiar colores “generales” sin tener que añadir nosotros nuestros propios estilos o modificar estilos existentes de forma manual.

La instalación del módulo, sin ningún problema desde la pestaña módulos -> módulos

Módulo para cambiar colores en Prestashop 1.7

En la configuración del módulo vemos las opciones que nos permite a la hora de cambiar los colores de la plantilla.

Para no dar un repaso a todas las opciones, vamos a chequear por ejemplo 3 opciones:

Configuración de módulo para cambiar colores básicos en Prestashop 1.7

En la imagen, hemos señalado un color para el encabezado, otro para los precios y otro para el pie de página

A la hora de cambiar/elegir el color nos proporciona una paleta con la que nos facilita la elección del color:

Paleta de colores

En nuestro caso, el resultado final ha quedado de la siguiente forma:

Color de fondo pie de página en Prestashop 1.7
Color precio de los productos en Prestashop 1.7
Color cabecera en Prestashop 1.7

¿Dónde puedo descargar este módulo para poder cambiar colores en Prestashop 1.7?

Continúa leyendo Cambiar colores en Prestashop 1.7

Print Friendly, PDF & Email