Prestashop

Preguntas frecuentes

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 en JavaScript que añaden nueva funcionalidad a tus Designs.

Los formateadores se pueden añadir de dos maneras:

A través de my.clerk.io > Developers > Formatters, donde cada Formatter puede crearse 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 #

Un ejemplo se puede ver a continuación. Por favor, ten en cuenta que esto es Clerk V2 (ú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 formateadores #

Puedes escribir cualquier número de Formatters, 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;
  }
}

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

Autenticación HTTP #

La autenticación HTTP se utiliza 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 log 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 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 productos, categorías y ventas a Clerk.

Sin embargo, en algunos casos, la configuración del servidor puede bloquear la importación al impedir 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 el entorno de desarrollo requiere autenticación HTTP para acceder.

Esto se soluciona insertando el Username y Password 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, solo necesitas incluir en la lista blanca la dirección IP del importador para darle acceso.

La dirección IP más reciente puede encontrarse aquí.

Revisa también que tu clave pública, clave privada y URL de importación sean correctas para la tienda que estás operando en my.clerk.io.

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

En este caso, introduce el dominio completo, específico del idioma que deseas sincronizar, en la URL de importación.

¿Qué pasa si ya está incluida en la lista blanca pero el error sigue ocurriendo?

Existen algunos casos en los que has incluido en la lista blanca la IP del importador y el error persiste.

En estos casos, te recomendamos revisar estas áreas:

Es posible que la parte de autenticación del cuerpo sea eliminada de la solicitud por el servidor de la tienda.
Limitación de la tasa de peticiones en el servidor respecto a Cloudflare.
Comprueba si la URL del importador contiene https.

404 Not Found #

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

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

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

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

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

429 Too Many Requests #

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

Puedes solucionarlo aumentando el límite de peticiones de tu servidor o configurando un Page Size mayor en my.clerk.io > Data > Configuration. Un tamaño de página mayor hace que el importador envíe menos solicitudes, pero más grandes.

Si utilizas el proveedor de hosting Byte.nl, el importador suele devolver este error debido a su limitador de tasa. En este caso, ponte en contacto con Byte.nl y pídeles que incluyan en la lista blanca el User-Agent del importador “clerk”.

500 Internal Server Error #

Este error significa que tu servidor ha encontrado un error interno y no ha podido especificar cuál es el problema.

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

En la mayoría de los casos, se debe simplemente a un producto con un atributo inválido, o a una función que se llama incorrectamente en la tienda online.

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

Prueba a desactivar la app y realiza una nueva sincronización. Si entonces funciona, mantén la app desactivada y copia manualmente el Facebook Pixel en el archivo principal del tema.

También puedes probar a activar el Debug Mode en PrestaShop, lo que imprimirá el mensaje de error exacto cuando tengas un error 500.

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

503 Service Unavailable #

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

Inténtalo de nuevo más tarde.

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

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

520 Unknown Error #

Este error suele ser devuelto desde Cloudflare, y a menudo ocurre debido a un cuello de botella en PrestaShop que causa problemas con Page Sizes altos.

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

Respuesta inválida #

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

Esto suele hacer que falle la sincronización de datos, porque el pixel interfiere con los datos que Clerk debe recibir de PrestaShop.

Solucionar este problema es bastante fácil—simplemente 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, 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;
}

Guarda el archivo pspixel.php modificado después de añadir la condición anterior.

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

Desactivando CCC #

CCC (Concatenate, Combine and Cache) es una funcionalidad incorporada en PrestaShop que te permite reducir la cantidad de peticiones de tu plantilla y luego cachearlas.

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

Si experimentas errores en 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 el rendimiento de carga de la página—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 online sea más fácil.

Sin embargo, como ambas versiones funcionan ligeramente distinto, necesitas 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 #

Como Clerk.js 2 tiene un enfoque diferente para los Designs, necesitas crear unos 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 antiguos Designs. 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 Nombre al Design (recomendamos añadir “V2” para que sea obvio 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 añadir más información sobre los productos.
Haz clic en Save Design cuando termines, y pasa 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 hará que temporalmente no aparezcan en tu tienda online hasta que termines con el Paso 2. Elige el nuevo Design para todos los Elements que deban actualizarse.

¡Ya estás listo para cambiar a Clerk.js 2!

Actualizar 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

Después, inicia sesión en tu admin de PrestaShop 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 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 sobre Clerk.js 2 se puede encontrar aquí:

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

Manejo de require.js #

Esta guía solo aplica hasta v.4.4.1 de la extensión de 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, el siguiente error aparece en tu consola:

Uncaught ReferenceError: Clerk is not defined

Existen dos maneras de manejar Require.js. Ambos métodos 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.

Inserta require(['clerk'], function() {}); al final del tracking script.

Ignorar Require.js #

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

Inserta window.__clerk_ignore_requirejs = true; al inicio del tracking script.

Después de usar uno de estos métodos, 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.