Cómo instalar el banner de cookies en PrestaShop

En PrestaShop 1.7 y 8 tienes dos formas de instalar el banner: editar la plantilla del tema o usar un módulo que inserte código al final de la página. Las dos funcionan. La plantilla es más directa. El módulo no se pierde si cambias o actualizas el tema. Antes de cualquiera de ellas, quita el módulo de cookies que tuviera la tienda.

Antes de empezar

• Ten a mano el token de la web: lo ves en el panel, en la ficha de la web.
• Haz una copia de seguridad de los archivos del tema.
• Si vas a editar la plantilla, mejor en un tema hijo. Un tema hijo usa todas las plantillas del padre salvo las que copies en él con la misma ruta.
• Apunta qué módulos añaden analítica o publicidad por su cuenta. El banner no bloquea lo que ellos pegan en la página.

Paso 1: desactiva otros módulos de cookies

1. En el back office, abre el menú Módulos y ve a la lista de módulos instalados.
2. En el campo de búsqueda, prueba con «cookie», «cookies» y «RGPD».
3. En cada módulo de avisos de cookies, elige Desactivar.

Desactivar conserva la configuración para reactivarlo más tarde. Desinstalar la borra. Empieza por desactivar.

Haz lo mismo con los módulos que insertan Google Analytics, el píxel de Meta o Google Tag Manager directamente. Esas etiquetas tienen que pasar por el banner. Para GTM, sigue la guía de Google Tag Manager.

Paso 2: comprueba jQuery

El cargador necesita jQuery con el atajo $. En el tema clásico, jQuery viene dentro de core.js, que PrestaShop carga al principio del bloque de scripts del final de la página. El fragmento espera al evento DOMContentLoaded, así que jQuery ya está listo.

Si usas otro tema, compruébalo:

1. Abre la tienda en el navegador y abre la consola de las herramientas de desarrollo.
2. Escribe typeof jQuery y pulsa Intro.
3. Si responde "function", no tienes que hacer nada. Si responde "undefined", lee el apartado sobre jQuery de la guía de HTML.

Paso 3, opción A: en la plantilla del tema

1. Abre templates/layouts/layout-both-columns.tpl en el tema activo o en su copia del tema hijo.
2. Busca el bloque hook_before_body_closing_tag, justo antes de </body>.
3. Pega el fragmento dentro de ese bloque, entre {literal} y {/literal}, y cambia TU_TOKEN por el token de la web.

{block name='hook_before_body_closing_tag'}
  {hook h='displayBeforeBodyClosingTag'}
  {literal}
  <script>
  document.addEventListener('DOMContentLoaded', function () {
    if (window.jQuery && typeof window.$ !== 'function') { window.$ = window.jQuery; }
    var s = document.createElement('script');
    s.async = true;
    s.id = 'cookies-token';
    s.src = 'https://cookies.sslcamaltec.com.es/cookies/cookie-loader.nojq.min.js?tokencookies=TU_TOKEN';
    document.body.appendChild(s);
  });
  </script>
  {/literal}
{/block}

Las plantillas usan Smarty, que interpreta las llaves. {literal} evita que toque el JavaScript.

En el tema clásico, los demás diseños de página, como layout-full-width.tpl, heredan de este archivo. Con un solo cambio, el banner llega a toda la tienda. En otros temas, revisa que ningún diseño tenga su propio cierre de </body>.

Paso 3, opción B: con un módulo de código

Si prefieres no tocar el tema, usa un módulo que permita insertar código HTML o JavaScript en el hook displayBeforeBodyClosingTag. Ese hook está al final de la página, justo antes del cierre del documento.

1. Instala el módulo y crea un bloque de código nuevo.
2. Elige el hook displayBeforeBodyClosingTag o, si el módulo no lo ofrece, la opción de «antes del cierre de body».
3. Pega el fragmento sin {literal}: eso solo hace falta dentro de las plantillas.
4. Asegúrate de que el módulo lo muestra en todas las páginas.

Paso 4: borra la caché

1. Ve a Parámetros avanzados > Rendimiento.
2. Pulsa el botón para borrar la caché, arriba a la derecha.
3. Si tienes activada la caché inteligente de JavaScript (dentro de CCC), vuelve a comprobar el banner después de borrarla.

Cómo comprobar que funciona

1. Abre la tienda en una ventana privada. El banner debe salir en la portada, en una categoría, en un producto, en el proceso de compra y en las páginas CMS legales.
2. Antes de elegir, revisa las cookies y las peticiones. No debe haber _ga ni peticiones a google-analytics.com, googletagmanager.com o facebook.com.
3. Pulsa «Rechazar» y recarga. Sigue sin haber nada de analítica ni de publicidad.
4. Tras la primera elección debe aparecer el icono para reabrir la configuración.
5. Si quieres un informe, pide la auditoría gratuita.

Problemas frecuentes

Si la tienda usa Consent Mode, sigue con configurar Consent Mode. El resto de guías están en la ayuda.

Preguntas frecuentes

¿El tema clásico de PrestaShop carga jQuery?

Sí. En el tema clásico, jQuery va dentro de core.js, que PrestaShop carga al final de la página. El fragmento espera a que la página esté lista, así que jQuery ya está disponible.

¿Por qué hay que usar {literal} en la plantilla?

Las plantillas de PrestaShop usan Smarty, que interpreta las llaves. {literal} evita que Smarty toque el JavaScript del fragmento.

¿Desactivo o desinstalo el módulo de cookies que tenía la tienda?

Desactívalo primero. Así se conserva su configuración por si necesitas volver atrás. Cuando compruebes que el banner funciona, puedes desinstalarlo.

Fuentes

1. Theme organization (PrestaShop Developer Documentation)
2. Asset management (PrestaShop Developer Documentation)
3. Parent/child theme (PrestaShop Developer Documentation)
4. displayBeforeBodyClosingTag (PrestaShop Developer Documentation)
5. Installed modules (PrestaShop 8 documentation)
6. Performance (PrestaShop 8 documentation)
7. Escaping Smarty parsing (Smarty Documentation)