Magento 2

Preguntas frecuentes

Soluciones a preguntas e inconvenientes comunes al usar Clerk con Magento 2

¿Tienes problemas con tu integración de Magento 2? Este FAQ cubre los problemas más comunes y sus soluciones, desde tamaños de imagen hasta errores de sincronización.

Tamaños de imagen #

Por defecto, la extensión utiliza los tamaños originales de imagen establecidos en Magento 2.

Estos pueden cambiarse si es necesario.

Comienza iniciando sesión en el backend de tu Magento 2 y ve a:

Stores > Configuration > Clerk > Configuration

Bajo Synchronization > Image type, puedes elegir exactamente en qué resolución enviar las imágenes:

Magento 2 image type configuration

Después, haz clic en Save Config.

Ahora solo necesitas iniciar una nueva sincronización en my.clerk.io y tus nuevos tamaños de imagen serán importados.

Uso de formatters #

Clerk.js te permite escribir funciones personalizadas de JavaScript que añaden nuevas funcionalidades a tus Designs.

Los formatters pueden añadirse de dos maneras:

  • A través de my.clerk.io > Developers > Formatters, donde cada Formatter puede crearse como entradas separadas.

  • Como una configuration para Clerk.js, en el tracking-script que se inserta en todas las páginas, donde se pueden añadir múltiples formatters a la vez.

Para Magento 2, este archivo contiene el tracking-script:

vendor->view->frontend->templates->tracking.phtml

Ejemplo de formatter #

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

    Clerk('config', {
      key: 'O7UITkJIXqXibeQF9ONobiGGKYYKtbvh',
      formatters: {
             log_price: function(price) {
             console.log(price);
    }
          }
      });

Múltiples 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 la funcionalidad que requieras en tus Designs.

Add to Cart con Form Key #

Magento 2 utiliza un form_key para la protección CSRF. Cuando creas botones Add to Cart en designs de Clerk, necesitas incluir este form_key para que la funcionalidad de carrito funcione.

El script Clerk.js para Magento 2 incluye una variable global formkey integrada que contiene automáticamente el valor del form_key de la página.

Uso en tu design #

En tu design de Clerk, incluye el form_key como un input oculto dentro de tu formulario Add to Cart usando {{ formkey }}:

<form action="{{ product.url }}checkout/cart/add/product/{{ product.id }}" method="post">
    <input name="form_key" type="hidden" value="{{ formkey }}">
    <input type="hidden" name="product" value="{{ product.id }}">
    <input type="hidden" name="qty" value="1">
    <button type="submit" class="clerk-add-to-cart">Add to Cart</button>
</form>

El global {{ formkey }} está preconfigurado en la extensión Magento 2, por lo que no se requiere configuración adicional.

Autenticación HTTP #

La autenticación HTTP suele utilizarse en sitios de staging 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í:

http://USER:PASS@magento2.clerk.io/
HTTP authentication in import URL

Errores comunes de sincronización #

Nota: Recomendamos siempre actualizar la extensión a la última versión para obtener todas las funcionalidades actualizadas de Clerk.

Cuando se importa datos con la extensión Magento 2 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 podría bloquear la importación y evitar el acceso a los datos, causando un error en Data Sync.

A continuación, 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 Username y Password como parte de la URL de importación:

http://username:password@magento2.clerk.io

403 Forbidden #

Este error ocurre a menudo por uno de estos motivos:

  • Tu servidor bloquea el acceso del importador. En la mayoría de los casos, solo necesitas whitelist la dirección IP del importador para darle acceso. La IP más reciente puede encontrarse aquí.

  • Puede que tengas mal configurada la public key, private key y/o import URL dentro de la tienda en my.clerk.io.

  • Estás utilizando Storeviews con URLs ocultas, como mywebshop.com?__store=b2b. A veces estas URLs pueden contener 3 guiones bajos como: mywebshop.com?___store=b2b.

Si es este el caso, simplemente incluye el parámetro __store en la URL en Data:

Store parameter in URL

¿Qué pasa si ya he hecho whitelist y el error sigue ocurriendo?

Hay algunas ocasiones en las que has hecho whitelist a la IP del importador, y el error sigue apareciendo.

En estos casos, recomendamos revisar lo siguiente:

  • La parte de autenticación del body puede haber sido eliminada de la solicitud por el servidor de la tienda.

  • Límite de velocidad (rate limit) para el servidor en relación con Cloudflare.

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, sucede porque la extensión:

  • No está instalada en absoluto

  • Un caché provoca que el enlace no se inicialice

Primero, asegúrate de que has instalado la extensión correctamente.

Segundo, asegúrate de vaciar el caché de tu tienda antes de intentar una nueva importación.

429 Too Many Requests #

Este error ocurre si tu servidor niega el acceso del importador por demasiadas solicitudes entrantes.

Puedes solucionarlo aumentando el request limit de tu servidor o estableciendo Page Size a un valor mayor en my.clerk.io > Data > Configuration, haciendo que el importador realice menos solicitudes más grandes:

Page size configuration

Si utilizas el proveedor de hosting hypernode.com/nl, el importador suele devolver este error debido a su limitador de tasa. En este caso, contacta con hypernode.com/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 fue capaz de 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, se debe a un producto con un atributo inválido, o una función que se llama incorrectamente en la tienda online.

503 Service Unavailable #

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

Intenta más tarde.

Si el problema persiste, puede significar que el servidor está sobrecargado de procesos y está cerca de su capacidad máxima.

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

Invalid response #

Este error suele ocurrir si tu tienda online está usando un sistema de redirección para enviar clientes a diferentes dominios.

Por ejemplo, al ir a “ https://mywebshop.com” puede redirigir a “ https://mywebshop.com/it".

Si es así, simplemente necesitas usar la URL completa al importar en my.clerk.io:

Full URL configuration

Importación de stock MSI #

Si tu tienda Magento 2 usa MSI (Multi-Source Inventory), puedes importar el stock total de todas las fuentes a Clerk añadiendo el siguiente código de atributo en los Additional Fields de la extensión.

  1. En tu admin de Magento, ve a Stores > Configuration > Clerk > Configuration.

  2. Bajo Synchronization > Additional Fields, añade: multi_source_stock.

  3. Haz clic en Save Config y luego ejecuta una nueva sincronización en my.clerk.io > Data.

Clerk importará multi_source_stock como la suma de cantidades en todas las fuentes MSI.

Esto es útil cuando la fuente de stock por defecto es 0 pero los productos aún tienen existencia en otras fuentes.

Actualización a Clerk.js 2 #

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

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

Sin embargo, como las dos versiones funcionan de forma ligeramente diferente, necesitas seguir estos pasos para actualizar correctamente.

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

Crear designs #

Como Clerk.js 2 tiene un enfoque diferente para los Designs, necesitarás crear nuevos.

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

Opción Design Editor #

  1. Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
New design in Clerk

  1. En la siguiente pantalla, ponle un Name a tu Design (recomendamos añadir “V2” para que sea obvio que usas Clerk.js 2).

  2. Elige Design Type.

Design type selection
  1. En el Design Editor, haz clic en cualquiera de los elementos existentes como el nombre, imagen, botón, etc., para editarlo, o añade nuevos elementos al Design para añadir más información sobre los productos.
Design Editor interface

  1. Haz clic en Publish cuando termines, y ve al Paso 2 de la guía.

  2. Ve a Recommendations/Search > Elements y cambia tu Clerk Element para que use tu nuevo Design.

  3. Haz clic en Update Element. Esto hará que temporalmente no aparezcan en tu tienda, hasta que termines el Paso 2. Elige el nuevo Design para todos los Elements que deban actualizarse.

Update content with new design

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

Actualizar la extensión #

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

La actualización de la extensión de Magento 2 se realiza por línea de comandos.

Hazlo siguiendo estos pasos:

  1. Inicia sesión en tu servidor a través de la línea de comandos.

  2. Navega hasta tu carpeta webroot (normalmente _/var/www/your_domain/public_html_).

  3. Habilita Root Access escribiendo su e introduce tu contraseña.

  4. Escribe los siguientes comandos en orden:

composer update clerk/magento2
php bin/magento setup:upgrade
php bin/magento setup:di:compile
  1. Espera a que la extensión termine.

Tu Magento 2 ya está actualizado a la última versión.

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

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

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

Manejo de require.js #

Esta guía solo aplica hasta la versión v.2.8.3 de la extensión Magento 2 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

La extensión de Magento 2 ya maneja Require.js, pero en algunos casos, es necesario que ignore Clerk.js.

Puedes hacer esto en el siguiente archivo:

vendor->clerk->magento2->templates->tracking.phtml

Simplemente inserta window.__clerk_ignore_requirejs = true; en la parte superior del script de tracking:

Ignore Require.js in tracking script

Después de usar este enfoque, Require.js será ahora 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.