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 de JavaScript que agregan nuevas funcionalidades a tus Designs.

Los formatters se pueden agregar de dos maneras:

A través de my.clerk.io > Developers > Formatters, donde cada Formatter se puede crear como entradas separadas.
Como configuración para Clerk.js, en el tracking-script que se inserta en todas las páginas, donde se pueden añadir varios formatters a la vez.

Para PrestaShop, este archivo contiene el tracking-script:

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

Ejemplo de formatter #

Un ejemplo se puede ver a continuación. Ten en cuenta que esto es Clerk V2 (la última versión):

<!-- 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 -->

Múltiples formatters #

Puedes escribir cualquier número 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 diseños #

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 en tus Designs que requieras.

Autenticación HTTP #

La autenticación HTTP a menudo se utiliza en sitios de staging 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 siempre actualizar el módulo a la última versión para obtener todas las funcionalidades actualizadas de Clerk.

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

Sin embargo, en algunos casos, la configuración del servidor puede bloquear la importación y evitar el acceso a los datos, 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 online o entorno de desarrollo requiere autenticación HTTP para acceder.

Esto se soluciona insertando el Nombre de usuario y la 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 el acceso del importador.

En la mayoría de los casos, simplemente debes whitelist la dirección IP del importador para darle acceso.

La última dirección IP se puede encontrar aquí.

También revisa 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 mostrará si usas diferentes dominios de idioma, como http://webshop.com/it.

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

¿Qué pasa si ya hice whitelist pero el mismo error sigue ocurriendo?

Hay algunos casos en los que has hecho whitelist a la IP del importador y el error persiste.

En estos casos, te recomendamos revisar lo siguiente:

El servidor de la tienda puede estar eliminando la parte de autenticación del cuerpo de la solicitud.
Límite de tasa para el servidor en relación con Cloudflare.
Revisa 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, ocurre porque el módulo está:

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

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

Segundo, asegúrate de vaciar la caché de tu tienda online 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 estableciendo un límite de solicitudes más alto para tu servidor o estableciendo el Page Size a un valor más alto en my.clerk.io > Data > Configuration, haciendo que el importador haga menos solicitudes más grandes:

Si utilizas el proveedor de host Byte.nl, el importador suele devolver este error debido a su limitador de tasa. En este caso, contacta a Byte.nl y pídeles que hagan whitelist al User-Agent del importador “clerk”.

500 Internal Server Error #

Este error significa que tu servidor encontró un error interno y no pudo especificar cuál fue el error.

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 inválido, o una función llamada incorrectamente en la tienda.

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

Intenta desactivar la app y ejecuta una nueva sincronización. Si entonces funciona, mantén la App desactivada y copia manualmente el Facebook Pixel a tu archivo principal del tema.

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

SIEMPRE activa el Debug Mode desde FTP, para evitar el posible bloqueo del acceso al Panel de Administración de PrestaShop. Consulta cómo hacerlo con FTP.

503 Service Unavailable #

Este error es usualmente temporal y es causado por el servidor estando demasiado ocupado para manejar la solicitud.

Intenta nuevamente más tarde.

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

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

520 Unknown Error #

Normalmente este error es devuelto por Cloudflare y a menudo ocurre debido a un cuello de botella en PrestaShop que causa problemas con valores altos de Page Size.

Para solucionarlo, configura tu Page Size en 50 e inicia una nueva sincronización:

Invalid response #

Este error a menudo es causado al usar el Módulo Facebook Pixel, que inserta un píxel en la parte superior de todos los archivos en PrestaShop.

Esto frecuentemente causa que la Data Sync falle, porque el píxel interfiere con los datos que Clerk debe recibir de PrestaShop.

Arreglar este problema es bastante sencillo: simplemente necesitas hacer un pequeño ajuste en pspixel.php, que es el archivo que genera el pixel.

Normalmente se encuentra en uno de los siguientes 4 caminos:

/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 sincronización de datos:

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

Al final, el archivo debería 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 Cachear) es una funcionalidad incorporada en PrestaShop que permite reducir el número de solicitudes de tu plantilla y luego cachearlas.

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

Si experimentas errores de Data Sync, por favor abre el backend de PrestaShop y visita:

Advanced Parameters > Performance

Luego ve a la sección llamada:

CCC (Combine, Compress and Cache)

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

P.D.: Puedes lograr el mismo nivel de compresión de datos—y por lo tanto de rendimiento de carga de página—usando un CDN o un módulo de PrestaShop dedicado que aplique la misma compresión y combinación de librerías.

Actualizar a Clerk.js 2 #

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

Hace que la instalación de Clerk en cualquier tienda online sea más fácil.

Sin embargo, dado que las dos versiones funcionan de manera ligeramente diferente, necesitas seguir estos pasos para actualizarlo con éxito.

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

Crear designs #

Ya que Clerk.js 2 tiene un enfoque diferente para los Designs, necesitas crear nuevos.

Puedes crear tus Designs de Clerk.js 2 de dos maneras:

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

Opción de Design Editor #

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

En la siguiente pantalla, ponle a tu Design un Nombre (recomendamos agregar “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 nombre, imagen, botón, etc., para editarlo, o arrastra y suelta nuevos elementos al Design para agregar más información sobre los productos.
Haz clic en Save Design cuando hayas terminado, y ve al Paso 2 de la guía.

Ve a Recommendations/Search > Elements y cambia tu Clerk Element para usar tu nuevo Design.
Haz clic en Update Element. Esto causará temporalmente que no se muestren en tu tienda online hasta que termines el Paso 2. Elige el nuevo Design para todos los Elements que deban ser actualizados.

Ahora ya estás listo para cambiar a Clerk.js 2.

Actualizar módulo #

ADVERTENCIA: Recuerda respaldar 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 mostrará ahora un mensaje de éxito, confirmando que tu módulo ha sido actualizado.

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

La documentación completa para Clerk.js 2 se encuentra aquí:

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

Manejo de require.js #

Esta guía solo aplica cuando se usa 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 ocurre, el siguiente error se mostrará en tu consola:

Uncaught ReferenceError: Clerk is not defined

Hay dos maneras de manejar Require.js. Ambos enfoques requieren que hagas cambios en el tracking-script de 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; en la parte superior del tracking script:

Después de usar uno de estos enfoques, Require.js ahora 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.