Preguntas frecuentes

¿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 de imagen originales que están configurados en Magento 2.

Estos pueden cambiarse si es necesario.

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

Debajo de Synchronization > Image type, elige la resolución de imagen que deseas enviar a Clerk.

Después, haz clic en Save Config.

Ahora simplemente tienes que ejecutar una nueva Sync en my.clerk.io y tus nuevos tamaños de imagen serán importados.

Usando 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 maneras:

• A través de my.clerk.io > Developers > Formatters, donde cada Formatter puede ser creado 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 añadir varios formatters a la vez.

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

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

Ejemplo de formatter #

Se puede ver un ejemplo a continuación. Debes tener 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 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 necesites.

Añadir al carrito con Form Key #

Magento 2 utiliza form_key para la protección CSRF. Cuando crees botones de Añadir al carrito en los diseños de Clerk, debes incluir este form_key para que la funcionalidad del carrito funcione.

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

Uso en tu diseño #

En tu diseño de Clerk, incluye el form_key como un input oculto dentro del formulario de Añadir al carrito 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 de Magento 2, así que no se requiere ninguna configuración adicional.

Autenticación HTTP #

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

Esto bloqueará al 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/

Errores comunes de sincronización #

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

Al importar datos con la extensión de Magento 2 de Clerk, el servidor de tu tienda online 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 el acceso de la importación 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 o 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@magento2.clerk.io

403 Forbidden #

Este error suele ocurrir por alguna de estas razones:

• Tu servidor bloquea el acceso al importador. En la mayoría de los casos, simplemente tienes que incluir en la lista blanca la dirección IP del importador para darle acceso. La última dirección IP puede encontrarse aquí.

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

• Estás usando Storeviews con URLs ocultas, como mywebshop.com?__store=b2b. A veces, estas URLs pueden también contener 3 guiones bajos, así: mywebshop.com?___store=b2b.

Si tu storeview utiliza una URL oculta, incluye su parámetro __store en la URL de importación en Data > Configuration.

¿Qué pasa si ya he incluido en la lista blanca pero el error sigue ocurriendo?

Hay algunos casos en los que has incluido en la lista blanca la dirección IP del importador y el error persiste.

En estos casos, recomendamos revisar lo siguiente:

• La parte de autenticación del cuerpo puede ser eliminada de la solicitud por el servidor de la tienda.

• Límite de tasa para el servidor con respecto a Cloudflare.

404 Not Found #

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

En la mayoría de los casos ocurre porque la extensión:

• No está instalada

• Una caché causa que el enlace no se inicialice

Primero, asegúrate de haber instalado la extensión 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 ocurre si tu servidor deniega el acceso al importador por demasiadas solicitudes entrantes.

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

Si usas el proveedor de hosting hypernode.com/nl, el importador suele devolver este error por su limitador de tasa. En este caso, contacta a hypernode.com/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 pudo especificar cuál fue el error.

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

En la mayoría de los casos, se debe simplemente a un producto con un atributo no válido o una función llamada incorrectamente en la tienda.

503 Service Unavailable #

Este error suele ser temporal y se debe a que el servidor está demasiado ocupado para manejar la solicitud.

Inténtalo de nuevo un poco más tarde.

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

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

Invalid response #

Este error suele ocurrir si tu tienda utiliza un sistema de redirección para enviar a los clientes a diferentes dominios.

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

Si tu tienda redirige a un dominio o ruta específica para un idioma, utiliza esa URL de destino completa como URL de importación en my.clerk.io.

Importación de stock MSI #

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

1. En el administrador de Magento, ve a Stores > Configuration > Clerk > Configuration.

2. Debajo de 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 de todas las fuentes MSI.

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

Actualiza a Clerk.js 2 #

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

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

Sin embargo, dado que ambas versiones funcionan de manera ligeramente diferente, debes seguir estos pasos para actualizar 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 se pueden crear fácilmente usando el Design Editor.

Crear diseños #

Dado que Clerk.js 2 tiene un enfoque diferente para los Designs, debes crear nuevos.

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

• Usa el intuitivo Design Editor para crear nuevos Designs, como se describe en los siguientes puntos.

• Convierte tus Designs antiguos. Sigue esta guía para ver cómo hacerlo.

Opción Design Editor #

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

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

3. Elige el Design Type.

4. 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 acerca de los productos.

5. Haz clic en Publish cuando hayas terminado y ve a Step 2 en la guía.

6. Ve a Recommendations/Search > Elements y cambia tu Clerk Element para usar tu nuevo Design.

7. Haz clic en Update Element. Esto hará que temporalmente no se muestren en tu tienda hasta que termines con el Step 2. Elige el nuevo Design para todos los Elements que deban actualizarse.

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

Actualiza la extensión #

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

La actualización de la extensión de Magento 2 se hace vía línea de comandos.

Sigue estos pasos:

1. Inicia sesión en tu server mediante línea de comandos.

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

3. Habilita Root Access escribiendo su y luego ingresa tu contraseña.

4. Escribe los siguientes commands en orden:

composer update clerk/magento2
php bin/magento setup:upgrade
php bin/magento setup:di:compile

5. Espera a que la extensión termine.

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

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

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

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

Manejo de require.js #

Esta guía solo aplica cuando se usa hasta la v.2.8.3 de la extensión Clerk para Magento 2.

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 ocurre, el siguiente error se muestra 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 hacer que ignore Clerk.js.

Puedes hacer esto en el siguiente archivo:

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

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

Después de usar este método, Require.js ahora será compatible con Clerk.