Prestashop

FAQ

Soluciones a preguntas y problemas comunes al usar Clerk con PrestaShop

¿Tienes problemas con tu integración de PrestaShop? Este FAQ cubre los problemas más comunes y sus soluciones, desde formatters hasta errores de sincronización.

Uso de formatters #

Clerk.js te permite escribir funciones personalizadas en JavaScript que añaden nueva funcionalidad a tus Designs.

Los formatters se pueden agregar de dos formas:

A través de my.clerk.io > Developers > Formatters, donde cada Formatter puede crearse como una entrada separada.
Como una configuration para Clerk.js, en el tracking-script que se inserta en todas las páginas, donde se pueden agregar varios formatters al mismo tiempo.

Para PrestaShop, este archivo contiene el tracking-script:

modules->clerk->views->templates->hook->clerk_js.tpl

Ejemplo de formatter #

Un ejemplo se muestra a continuación. Ten en cuenta que esto es Clerk V2 (versión más reciente):

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
        key: '{$clerk_public_key}',
        collect_email: {$clerk_datasync_collect_emails},
        language: '{$language}',
        formatters: {
             log_price: function(price) {
             console.log(price);
          }
      },
    });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Varios formatters #

Puedes escribir cualquier cantidad de Formatters, separados por coma:

formatters: {
  log_price: function(price) {
    console.log(price);
  },
  calculate_discount: function(price, special_price) {
    return price - special_price;
  },
  substring: function(text) {
    var short_string = text.substring(0, 20);
    return short_string;
  }
}

Uso en Designs #

Después de crear tus Formatters, puedes usarlos en tus Designs usando esta sintaxis:

{% raw %}{{ price | log_price }} {{ price | calculate_discount | special_price }}{% endraw %}

Esto te permite crear cualquier funcionalidad que requieras en tus Designs.

Autenticación HTTP #

La autenticación HTTP se utiliza a menudo en sitios de prueba para evitar visitantes no deseados.

Esto bloqueará el importador de Clerk y mostrará un error 401 Unauthorized en el registro de sincronización.

Puedes solucionar esto insertando la información de autenticación en la URL de importación.

En my.clerk.io > Data > Configuration, actualiza tu URL de importación así:

https://USER:PASS@www.ewoksRus.com

Errores comunes de sincronización #

Nota: Recomendamos actualizar siempre el módulo a la última versión para obtener todas las funciones actualizadas de Clerk.

Al importar datos con el módulo PrestaShop de Clerk, el servidor de tu tienda es responsable de enviar datos de productos, categorías y ventas a Clerk.

Sin embargo, en algunos casos, la configuración del servidor puede bloquear la importación, causando un error en Data Sync.

A continuación se muestra una lista de los errores más comunes y cómo solucionarlos.

401 Unauthorized #

Este error ocurre si tu tienda o entorno de desarrollo requiere autenticación HTTP para acceder.

Se soluciona insertando el Usuario y Contraseña como parte de la URL de importación:

http://username:password@prestashop.clerk.io/clerk/api/store/1

403 Forbidden #

Este error ocurre si tu servidor bloquea al importador al intentar acceder.

En la mayoría de los casos, simplemente necesitas poner en lista blanca la dirección IP del importador para darle acceso.

La IP más reciente se encuentra aquí.

Revisa también que tu public key, private key y import URL sean correctos para la tienda en la que estás operando dentro de my.clerk.io.

En algunos casos, este error también se muestra si usas diferentes dominios por idioma, como http://webshop.com/it.

En este caso, asegúrate de incluir el dominio completo que deseas sincronizar:

¿Qué hago si ya puse en lista blanca pero el error sigue ocurriendo?

Hay algunos casos en los que ya pusiste en lista blanca la IP del importador y el error aún persiste.

En estos casos, te recomendamos investigar estas áreas:

Es posible que la parte de autenticación del cuerpo sea eliminada por el servidor de la tienda.
Límite de velocidad del servidor respecto a Cloudflare.
Verifica si la URL del importador incluye https.

404 Not Found #

Este error ocurre si el importador no pudo acceder al enlace que envía los datos desde la tienda.

En la mayoría de los casos, sucede porque el módulo está:

No instalado en absoluto
Una caché causa que el enlace no se inicialice

Primero, asegúrate de haber instalado el módulo correctamente.

Segundo, vacía la caché de tu tienda antes de intentar una nueva importación.

429 Too Many Requests #

Este error ocurre si tu servidor niega el acceso al importador debido a demasiadas solicitudes entrantes.

Puedes solucionarlo configurando un límite de solicitudes más alto para tu servidor o configurando un Page Size más alto en my.clerk.io > Data > Configuration, haciendo que el importador realice menos solicitudes, pero más grandes:

Si usas el proveedor de hosting Byte.nl, el importador generalmente devuelve este error debido a su limitador de velocidad. En este caso, contacta a Byte.nl y solicita que pongan en lista blanca el User-Agent del importador “clerk”.

500 Internal Server Error #

Este error significa que tu servidor encontró un error interno y no pudo especificar qué error ocurrió.

En estos casos, revisa tu Server Log para identificar qué proceso falló y por qué.

En la mayoría de los casos, es simplemente por un producto con un atributo incorrecto, o una función mal llamada en la tienda.

Si tienes instalada la Facebook Pixel App, se sabe que esto provoca un error 500.

Intenta desactivar la app y realiza una nueva sincronización. Si ahora funciona, deja la App desactivada y copia manualmente el Facebook Pixel a tu archivo principal de tema.

También puedes intentar activar el Debug Mode en PrestaShop, lo que mostrará el mensaje de error exacto cuando ocurra el error 500.

SIEMPRE activa el Debug Mode desde FTP, para evitar quedar bloqueado fuera del Admin Panel de PrestaShop. Consulta cómo hacerlo con FTP.

503 Service Unavailable #

Este error suele ser temporal y ocurre porque el servidor está demasiado ocupado para manejar la solicitud.

Intenta de nuevo un poco más tarde.

Si el problema continúa, podría significar que el servidor está saturado de procesos y cerca de su capacidad máxima.

Revisa la carga del servidor para identificar si es el caso.

520 Unknown Error #

Generalmente este error es devuelto desde Cloudflare, y suele ocurrir debido a un cuello de botella en PrestaShop que causa problemas con valores altos de Page Size.

Para solucionarlo, establece tu Page Size en 50 y ejecuta una nueva sincronización:

Invalid response #

Este error suele estar causado por el uso del módulo Facebook Pixel, que inserta un pixel en la parte superior de todos los archivos en PrestaShop.

Esto a menudo causa que falle la Data Sync, porque el pixel interfiere con los datos que Clerk debe recibir de PrestaShop.

Solucionar este problema es muy sencillo; solo necesitas hacer un pequeño ajuste en pspixel.php, que es el archivo que genera el pixel.

A menudo se encuentra en una de las siguientes 4 rutas:

/modules/pspixel/pspixel.php
/modules/alcapixel/alcapixel.php
/modules/facebookpixel/facebookpixel.php
/modules/canonicalseo/canonicalseo.php

En el archivo, alrededor de la línea 196, necesitas insertar la siguiente línea de código dentro de la public function hookHeader($params):

if (strpos($_SERVER['REQUEST_URI'], '/module/clerk/') !== false) {
    return;
}

Para soportar la nueva data-sync:

if (Tools::getValue('module') == 'clerk') {
    return;
}

Al final, el archivo debe verse así:

Esto eliminará el pixel específicamente de los enlaces que Clerk utiliza para importar datos de PrestaShop.

Desactivando CCC #

CCC (Concatenar, Combinar y Caché) es una funcionalidad incorporada de PrestaShop que permite reducir el número de solicitudes de tu plantilla y luego almacenarlas en caché.

A veces, esta funcionalidad puede interferir con nuestro Data Sync y bloquearlo.

Si estás experimentando errores de Data Sync, abre el panel de administración de PrestaShop y visita:

Advanced Parameters > Performance

Luego dirígete a la sección llamada:

CCC (Combine, Compress and Cache)

Desactiva todas sus subfunciones, luego guarda, vacía la caché de PrestaShop y ¡listo!

P.D.: Puedes lograr el mismo nivel de compresión de datos—y así mejorar el desempeño de carga—usando un CDN o un módulo dedicado de PrestaShop que aplique la misma compresión y combinación de librerías.

Actualiza a Clerk.js 2 #

Clerk.js 2 es una versión más rápida y flexible de nuestra biblioteca JavaScript.

Hace que instalar Clerk en cualquier tienda sea más fácil.

Sin embargo, dado que las dos versiones funcionan de forma ligeramente diferente, debes seguir estos pasos para actualizar correctamente.

Las dos diferencias principales en Clerk.js 2 son que los Designs en my.clerk.io usan el lenguaje de plantillas Liquid, pero también pueden crearse fácilmente usando el Design Editor.

Crear Designs #

Dado que Clerk.js 2 tiene una aproximación distinta a los Designs, debes crear nuevos.

Puedes crear tus Designs para Clerk.js 2 de dos modos:

Usar el Design Editor intuitivo para crear nuevos Designs, como se describe en los siguientes puntos.
Convertir tus Designs antiguos. Sigue esta guía para ver cómo hacerlo.

Opción Design Editor #

Ve a my.clerk.io > Recommendations/Search > Designs > New Design.

En la siguiente pantalla, ponle un Name a tu Design (recomendamos añadir “V2” para que sea evidente que estás usando Clerk.js 2).
Elige el tipo de Design.
Cuando termines, haz clic en Create Design.

En el Design Editor, haz clic en cualquiera de los elementos existentes como el nombre, imagen, botón, etc., para editarlos, o arrastra y suelta nuevos elementos al Design para añadir más información sobre los productos.
Haz clic en Save Design al terminar y pasa al Paso 2 de la guía.

Ve a Recommendations/Search > Content y cambia tu Clerk Content para usar tu nuevo Design.
Haz clic en Update Content. Esto hará que temporalmente no se muestren en tu tienda hasta que termines el Paso 2. Elige el nuevo Design para todo el Content que quieras actualizar.

¡Listo! Ahora puedes cambiar a Clerk.js 2.

Actualizar el módulo #

ADVERTENCIA: Recuerda hacer copias de seguridad de cualquier archivo modificado, ya que serán sobrescritos.

Comienza descargando la última versión desde este enlace:

https://github.com/clerkio/clerk-prestashop/releases/latest

Luego inicia sesión en tu PrestaShop admin y ve a Modules And Services > Modules And Services.

En esta página, haz lo siguiente:

Haz clic en Add New Module.
Haz clic en Choose a file y sube el archivo clerk.zip que acabas de descargar.
Haz clic en Upload this module.

PrestaShop ahora mostrará un mensaje de éxito, confirmando que tu módulo se ha actualizado.

¡Ahora tienes la última versión de Clerk para PrestaShop instalada y Clerk.js 2 funcionando en tu tienda!

La documentación completa de Clerk.js 2 la encuentras aquí:

https://docs.clerk.io/docs/clerkjs-quick-start

Trabajando con require.js #

Esta guía solo aplica al usar hasta la v.4.4.1 de la extensión Clerk para PrestaShop.

En algunas configuraciones, Require.js impide que Clerk.js cargue, lo que significa que no se mostrarán sliders ni resultados de búsqueda.

Cuando esto sucede, se mostrará el siguiente error en la consola:

Uncaught ReferenceError: Clerk is not defined

Existen dos formas de manejar Require.js. Ambos enfoques requieren que realices cambios en el tracking-script en este archivo:

modules->clerk->views->hook->visitor_tracking.tpl

Incluir en Require.js #

El mejor enfoque es intentar que Require.js reconozca Clerk.

Puedes hacerlo insertando require(['clerk'], function() {}); al final del tracking script:

Ignorar Require.js #

Si la solución anterior no funciona, es posible ignorar Require.js.

Puedes hacerlo insertando window.__clerk_ignore_requirejs = true; al inicio del tracking script:

Después de usar uno de estos enfoques, Require.js será compatible con Clerk.

Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.