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 formateadores hasta errores de sincronización.

Uso de formateadores #

Clerk.js te permite escribir funciones personalizadas de JavaScript que añaden nueva funcionalidad a tus Diseños.

Los formateadores se pueden agregar de dos maneras:

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

Para PrestaShop, este archivo contiene el tracking-script:

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

Ejemplo de formateador #

Abajo puedes ver un ejemplo. Por favor, 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 -->

Múltiples formateadores #

Puedes escribir cualquier número de Formateadores, separados por comas:

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;
  }
}

Usar en diseños #

Después de crear tus Formateadores, puedes usarlos en tus Diseños utilizando esta sintaxis:

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

Esto te permite crear cualquier funcionalidad en tus Diseños que necesites.

Autenticación HTTP #

La autenticación HTTP es utilizada a menudo en sitios de pruebas 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 funciones actualizadas de Clerk.

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

Sin embargo, en algunos casos, la configuración del servidor puede bloquear la importación para acceder 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 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 para que no pueda acceder.

En la mayoría de los casos, solo necesitas permitir la dirección IP del importador para darle acceso.

La última dirección IP puede encontrarse aquí.

También verifica que tu public key, private key y import URL sean correctas para la tienda que tienes en my.clerk.io.

En algunos casos, este error también se mostrará si usas diferentes dominios de idiomas, como http://webshop.com/it.

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

¿Qué pasa si ya he permitido la IP pero el mismo error sigue ocurriendo?

Hay algunas ocasiones en las que has permitido la IP del importador y el error persiste.

En estos casos, te recomendamos revisar estas áreas:

La parte de autenticación del cuerpo puede eliminarse de la solicitud desde el servidor de la tienda.
Límite de velocidad del servidor en relación a Cloudflare.
Verifica si la URL del importador incluye https.

404 Not Found #

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

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 que has instalado el módulo correctamente.

En segundo lugar, asegúrate de vaciar la caché de tu tienda antes de intentar una nueva importación.

429 Too Many Requests #

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

Puedes solucionar esto configurando un límite de solicitudes mayor en tu servidor o ajustando el Page Size a un valor mayor en my.clerk.io > Data > Configuration, haciendo que el importador realice menos solicitudes, pero más grandes:

Si utilizas el proveedor de hosting Byte.nl, el importador normalmente devuelve este error debido a su limitador de velocidad. En este caso, contacta a Byte.nl y pídeles que permitan el 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 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 inválido, o una función llamada incorrectamente en la tienda online.

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

Intenta desactivar la aplicación y ejecutar una nueva sincronización. Si luego funciona, mantén la App desactivada y copia manualmente el Pixel de Facebook en el archivo principal de tu tema.

También puedes intentar activar el Debug Mode en PrestaShop, que imprimirá el mensaje de error exacto cuando recibas un error 500.

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

503 Service Unavailable #

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

Intenta de nuevo un poco más tarde.

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

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

520 Unknown Error #

Por lo general, este error lo devuelve Cloudflare y, a menudo, ocurre por un cuello de botella en PrestaShop que causa problemas con valores altos de Page Size.

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

Respuesta inválida #

Este error a menudo ocurre al usar el módulo Facebook Pixel, que inserta un pixel en la parte superior de todos los archivos en PrestaShop.

Esto a menudo causará que Data Sync falle, porque el pixel interfiere con los datos que Clerk espera recibir de PrestaShop.

Solucionar este problema es bastante fácil: solo necesitas hacer un pequeño ajuste a 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, debes 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 debe verse así:

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

Desactivando CCC #

CCC (Concatenar, Combinar y Cachear) es una funcionalidad incorporada de PrestaShop que permite reducir la cantidad de solicitudes de tu plantilla y luego almacenarlas en caché.

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

P.D.: Puedes conseguir el mismo nivel de compresión de datos —y así, mejor rendimiento de carga de página— usando un CDN o un módulo dedicado de PrestaShop que realice 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 biblioteca de JavaScript.

Facilita la instalación de Clerk en cualquier tienda online.

Sin embargo, como las dos versiones funcionan de manera ligeramente diferente, debes seguir estos pasos para actualizar con éxito.

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

Crear diseños #

Dado que Clerk.js 2 tiene un enfoque diferente para los Diseños, necesitas crear nuevos.

Puedes crear tus Diseños de Clerk.js 2 de dos maneras:

Usa el intuitivo Design Editor para crear nuevos Diseños, como se describe en los siguientes puntos.
Convierte tus diseños antiguos. Sigue esta guía para ver cómo hacerlo.

Opción del Design Editor #

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

En la siguiente pantalla, dale a tu Diseño un Nombre (recomendamos añadir “V2” para que sea obvio que estás usando Clerk.js 2).
Elige el tipo de Diseño.
Cuando hayas terminado, 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 Diseño para añadir más información sobre los productos.
Haz clic en Save Design cuando termines y pasa a Step 2 en la guía.

Ve a Recommendations/Search > Elements y cambia tu Clerk Element para que use tu nuevo Diseño.
Haz clic en Update Element. Esto hará que temporalmente no aparezcan en tu tienda online hasta que termines con el Step 2. Elige el nuevo Diseño para todos los Elementos que deban actualizarse.

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

Actualizar el módulo #

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

Comienza descargando la versión más reciente desde este enlace:

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

Luego entra 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 el módulo ha sido actualizado.

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

La documentación completa para Clerk.js 2 puede encontrarse aquí:

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

Manejo de require.js #

Esta guía solo aplica cuando uses hasta la v.4.4.1 de la extensión PrestaShop Clerk.

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

Cuando esto sucede, en tu consola aparecerá el siguiente error:

Uncaught ReferenceError: Clerk is not defined

Hay dos maneras de manejar Require.js. Ambas requieren que realices 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() {}); en la parte inferior del script de seguimiento:

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 script de seguimiento:

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.