FAQ

¿Tienes problemas con tu integración de Shopify? Esta FAQ cubre los problemas más comunes y sus soluciones, desde la conversión de moneda hasta la localización de archivos de temas.

Conversión de moneda #

La Conversión de Moneda integrada de Shopify facilita la lectura del símbolo de moneda y el tipo de cambio desde la tienda online.

Por defecto, Clerk.js para Shopify incluye un formatter que funciona siempre que tu aplicación de terceros utilice el objeto de moneda integrado de Shopify.

Solución estándar #

Debes usar un formatter en tus Diseños para convertir los precios.

Este ejemplo utiliza nuestro lenguaje de plantillas estándar aquí.

Al usar conversiones de moneda y símbolos, Clerk.js detecta configuraciones como idioma, moneda y código de país.

Los siguientes ejemplos muestran cómo funcionan los diferentes componentes.

Editor de Diseños #

1. Crea un componente de Texto donde desees mostrar el precio.

2. Agrega el siguiente código Liquid para mostrar el precio según el conversor de moneda dentro del componente de texto:

{{ currency_symbol }}{{ item.price | currency_converter }}

Modo código #

1. En my.clerk.io, ve a Search/Recommendations > Designs y haz clic en Edit Design para tu diseño.

2. Reemplaza el formatter existente money o money_eu para precios por currency_converter.

3. Haz clic en Update Design.

4. Ahora podrás ver los precios convertidos y el símbolo de moneda en tu diseño:

Solución API personalizada #

Aviso: Esta es una solución muy personalizada para obtener conversiones de precios si no hay datos de la API de Shopify. Solo úsalo si estás empleando una configuración específica y personalizada para conversiones basada en cambios geo-IP.

Esta es la documentación para la solución en frontend en Github.

Esta sección cubre cómo obtener datos contextuales en tiempo real para mostrarlos dentro del contenido que devuelve la API de Clerk.

El patrón de diseño se compone de las siguientes partes:

• Una colección que contiene todos los productos.

• Una plantilla alterna para mostrar la información de la colección como JSON.

• Una Clase JavaScript que recoge los datos disponibles en la colección.

• Un Snippet de JavaScript que procesa los datos para los IDs de productos relevantes en un resultado dado y los coloca dentro de un div en la plantilla.

Crear colección #

Para asegurarte de tener una colección con todos los productos posibles, crea una colección con una condición que cumplan todos los productos.

La colección debe llamarse Clerk api, ya que esto hará que reciba la ruta /collection/clerk-api en el frontend.

La condición para la colección debe ser algo como price > -1000000.

Crear plantilla alterna #

Crea una plantilla alterna para mostrar tus datos usando la colección.

Para ello, primero edita el código del tema que deseas utilizar.

En la sección de plantillas a la izquierda, presiona Add new Template.

En la ventana emergente, selecciona collection como tipo de recurso.

Selecciona liquid como tipo de archivo.

Escribe json en el campo más inferior, para que el nombre de la plantilla creada sea collection.json.liquid.

El contenido de este archivo debe ser el archivo collection.json.liquid encontrado en la carpeta liquid de este proyecto.

Puedes añadir campos al producto en esta plantilla según requieras.

Añadir clase de JS #

Para obtener los datos de tu colección y prepararlos para su uso, coloca todo el contenido de index.js en la carpeta class de este proyecto, dentro de la etiqueta script que contiene Clerk.js que has colocado en theme.liquid.

Debe lucir algo así:

<script>
  // Clerk.js Injection Code
  // Clerk Config with Key and Formatters
  // Class from this project
  clerk_shopify_api.init()
  // Finalmente init() para la clase, asegurando que se ejecute al cargar la página.
</script>

Esta clase invalidará los datos según timestamps y monedas, sin necesidad de que cambies el código.

El tiempo antes de la invalidación es de 12 horas desde la última generación de datos.

Cualquier cambio en el contexto de moneda también invalida los datos.

Añadir función de plantilla #

Incluye el template.js en la plantilla de diseño utilizada.

La función obtiene los datos cuando están disponibles y los coloca en elementos hijos específicos dentro de cada producto.

El ejemplo incluye los campos list_price y price.

A tener en cuenta: Si necesitas usar campos diferentes a price y list_price, añádelos en collection.json.liquid y luego edita template.html y template.js para consumir también esos campos. No deberías tener que modificar la Clase descrita en el paso 3.

Múltiples monedas #

Nota: Esto está obsoleto. El script de seguimiento de píxel lo reemplaza. Sigue los pasos 4 y 5 de la Guía de introducción a Shopify.

Al usar varias monedas en tu tienda de Shopify, es importante que los pedidos se traduzcan a una sola moneda para asegurar que tu rendimiento de ingresos sea preciso en Clerk.

En los paneles de Clerk, tu rendimiento siempre se informará en una moneda.

Por ejemplo, si utilizas tanto GBP como DKK en tu tienda, tus paneles mostrarán el rendimiento todo en GBP o todo en DKK.

Por eso es importante traducir a una moneda: ¡no querrás que una compra de 600 GBP sea leída por Clerk como 600 DKK!

Para asegurarte de que tus paneles de Clerk muestran los datos de ventas en una moneda común, esto puede ajustarse en el código de Seguimiento de Ventas que agregaste a tu tienda al instalar Clerk.

Ve a Settings > Checkout > Additional Scripts en el backend de Shopify, y cambia el código de Seguimiento de Ventas de esto:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script>
  (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: 'yourPublicKey'
  });
  let clerk_order_id = parseInt("'{'+'{ checkout.order.id }'+'}'");
  document.addEventListener('DOMContentLoaded', (e)=> {
      clerk_order_id = window.Shopify.checkout.order_id
  });
  if ( isNaN( clerk_order_id ) ) {
      if(window.Shopify){
          clerk_order_id = window.Shopify.checkout.order_id
      }
  }
  let log_sale_retry = setInterval(() => {
      if( ! isNaN( clerk_order_id ) ){
          Clerk('call', 'log/sale/shopify', {
              sale: clerk_order_id
          });
          clearInterval(log_sale_retry);
      }
  }, 100);
  </script>
  <!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

A esto:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script>
    (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);
    let clerkLocale = Shopify.locale;
    let publicKey;
    switch (clerkLocale) {
        case 'en':
            publicKey = 'yourPublicKeyEN';
            break;
        case 'fr':
            publicKey = 'yourPublicKeyFR';
            break;
        case 'de':
            publicKey = 'yourPublicKeyDE';
            break;
        // Add more cases as needed
    }
    Clerk('config', {
        key: publicKey
    });
    let clerk_order_id = parseInt("'{'+'{ checkout.order.id }'+'}'");
    document.addEventListener('DOMContentLoaded', (e) => {
        clerk_order_id = window.Shopify.checkout.order_id
    });
    if (isNaN(clerk_order_id)) {
        if (window.Shopify) {
            clerk_order_id = window.Shopify.checkout.order_id
        }
    }
    let log_sale_retry = setInterval(() => {
        if (!isNaN(clerk_order_id)) {
            Clerk('call', 'log/sale/shopify', {
                sale: clerk_order_id
            });
            clearInterval(log_sale_retry);
        }
    }, 100);
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Asegúrate de mantener el Script de Seguimiento de Visitantes igual—esto se encuentra justo debajo del código de Seguimiento de Ventas.

Tus pedidos ahora deberían aparecer en los paneles de Clerk como una sola moneda.

Encontrar archivos de temas #

Shopify ofrece más de 100 temas diferentes para diseñar y personalizar tu tienda online.

Cada tema funciona de la misma manera: personalizas los archivos del tema para obtener el resultado deseado en tu tienda.

Sin embargo, los nombres de los archivos del tema cambian de un tema a otro.

Shopify te ofrece un campo de búsqueda para encontrar rápida y fácilmente el archivo de tema que buscas.

Si no sabes el nombre del archivo que buscas, puedes usar el campo de búsqueda para ayudarte a localizarlo.

Por ejemplo, si buscas el archivo que contiene el código para la página de búsqueda, probablemente tendrá ‘search’ en el nombre del archivo.

Si no tienes claro si has encontrado el archivo correcto, puedes comparar el HTML en el archivo del tema con el HTML de la página relevante para ver si coinciden.

Esto puede hacerse en Google Chrome haciendo clic derecho en cualquier sección de la página y seleccionando ‘Inspeccionar’.

Luego puedes inspeccionar el HTML de la página y comprobar si la clase/ID de los elementos coinciden en el archivo y en la página.

Si necesitas más ayuda con esto, también puedes contactar a nuestro equipo de soporte.

Recomendaciones en el cajón de carrito #

Se recomienda encarecidamente la instalación por un desarrollador de Shopify.

Esta guía describe una solución altamente personalizada que puede comportarse de forma diferente según los temas de Shopify. Está diseñada específicamente para temas donde el carrito forma parte del DOM en cada página, pero permanece oculto hasta que el usuario lo abre.

Mostrar Recomendaciones de Clerk en el cajón de carrito en Shopify es una excelente manera de mostrar productos adicionales a los compradores antes de que inicien el proceso de pago.

1. Edita el código de tu tema de Shopify en Online Store > Themes > Edit code.

2. Busca el archivo donde está la plantilla del cajón de carrito (normalmente llamado cart-drawer.liquid o similar).

3. Inserta un snippet de Recomendaciones de Clerk desde Recommendations > Content.

4. Cambia el nombre de la clase de clerk a controlar el renderizado. Por ejemplo, llamándola clerk_m:

<span class="clerk_m" data-template="@cart-others-also-bought" data-products="[{% for line_item in cart.items %}{% if forloop.index0 > 0 %}, {% endif %}{{ line_item.product.id }}{% endfor %}]"></span>

5. Junto al snippet anterior, incluye un script para renderizar las Recomendaciones de Clerk cuando el usuario abra el carrito. Una forma es usar un MutationObserver. El siguiente script incluye todos estos elementos y te da un ejemplo de cómo abordarlo:

<script>
    // Selecciona el nodo que será observado para mutaciones
    const targetNode = document.querySelector("cart-drawer.drawer");

    // Añade todos los nombres de clase del cajón de carrito cuando se abre
    const targetNodeClasses = "drawer animate active";

    // Opciones para el observer (qué mutaciones observar)
    const config = { attributes: true };

    let cartFetched = false;
    let previousitemsID = [];
    
    // Función para obtener los datos del carrito
    async function fetchCartData() {
        const response = await fetch("/cart.js");
        const data = await response.json();
        let itemsID = [];
        let cartItems = data.items;
        for (var i = 0; i < cartItems.length; i++) {
            itemsID.push(cartItems[i].product_id);
        }
        return itemsID;
    }

    // Función de callback para ejecutar cuando se observan mutaciones
    const callback = async (mutationList, observer) => {
        for (const mutation of mutationList) {
            if (mutation.type === "attributes") {
                if (targetNode.className == targetNodeClasses && !cartFetched) {
                    cartFetched = true;
                    try {
                        const itemsID = await fetchCartData();
                          if (JSON.stringify(previousitemsID) != JSON.stringify(itemsID)) {
                            await Clerk('content', '.clerk_m', 'param', { products: itemsID })
                            previousitemsID = itemsID
                          }
                    } catch (error) {
                        console.error(error);
                    } finally {
                        cartFetched = false;
                    }
                }

            }
        }
    };

    // Crea una instancia del observer vinculada a la función callback
    const clerk_observer = new MutationObserver(callback);

    // Comienza a observar el nodo objetivo para las mutaciones configuradas
    clerk_observer.observe(targetNode, config);
</script>

Tu archivo de cajón de carrito debería parecerse a esto:

Autenticación HTTP #

La autenticación HTTP se usa a menudo 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 solucionarlo introduciendo 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 #

Al importar datos con la integración de Shopify, 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 impedir que el Importador acceda, 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.

Se resuelve introduciendo el Nombre de usuario y la Contraseña como parte de la URL de importación:

http://username:password@awesomeshop.myshopify.com

Error de permisos #

Este error suele ocurrir si no has dado Read Access a Store content like articles, blogs, comments, pages and redirects en tu App Privada.

Para solucionarlo:

1. Inicia sesión en Shopify y ve a Apps > Manage Private Apps > Clerk.io (o el nombre que diste a la App).

2. Desplázate a Admin API Permissions y haz clic en Review disabled Admin API permissions.

3. Busca Store content like articles, blogs, comments, pages and redirects y selecciona Read access:

4. Desplázate hacia arriba y haz clic en Save.

Gestión de require.js #

Esta guía solo aplica cuando usas Clerk.js 1.

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

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

Uncaught ReferenceError: Clerk is not defined

Hay dos maneras de gestionar Require.js. Ambas requieren hacer cambios en el tracking-script, que normalmente está insertado en index.liquid.

Incluir en Require.js #

El mejor enfoque es lograr que Require.js reconozca Clerk.

Puedes hacerlo insertando require(['clerk'], function() {}); al final 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; al principio del script de seguimiento:

Después de usar uno de estos enfoques, Require.js será compatible con Clerk.

Actualiza a Clerk.js 2 #

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

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

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

Las dos principales diferencias en Clerk.js 2 son:

• Los Diseños en my.clerk.io usan el lenguaje de plantillas Liquid, pero también pueden crearse fácilmente usando el Editor de Diseño.

• El script debe insertarse justo antes de la etiqueta </head> en la plantilla de tu tienda online.

Crear diseños #

Ya que Clerk.js 2 tiene un enfoque diferente respecto a los Diseños, debes crear nuevos.

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

• Utiliza el intuitivo Editor de Diseño para crear nuevos Diseños, como se describe a continuación.

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

Opción Editor de Diseño #

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

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

3. Elige el Tipo de Diseño.

4. Haz clic en Publish Design cuando termines y pasa a Paso 2 de la guía.

5. En el Editor de Diseño, haz clic en cualquiera de los elementos existentes como el nombre, imagen, botón, etc. para editarlo, o añade nuevos elementos al Diseño para incluir más información sobre los productos.

6. Haz clic en Publish. Esto hará que, temporalmente, no se muestren en tu tienda online hasta que termines Paso 2. Elige el nuevo Diseño para todo el contenido que deba actualizarse.

7. Ve a Recommendations/Search > Content y cambia tu Contenido de Clerk para usar tu nuevo Diseño.

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

Reemplazar script #

1. Ubica el archivo de plantillas usado para mostrar todas las páginas de la tienda online, y donde se encuentra el script original de Clerk.js cerca del final.

2. Elimina el script antiguo del archivo:

3. Ve a my.clerk.io > Developers > Tracking Code. Esta página ya contiene tu código de seguimiento Clerk.js 2.

4. Copia este código e insértalo justo antes de la etiqueta </head> en la plantilla:

5. Guarda tu plantilla.

¡Felicidades! ¡Ahora estás usando la configuración mucho mejorada de Clerk.js 2!

Puedes ver la documentación completa de Clerk.js 2 aquí: https://docs.clerk.io/docs/clerkjs-quick-start

Concede acceso de Clerk a Customer Events #

Cuando te ayudamos a configurar o solucionar el seguimiento de pedidos usando los pixeles de Shopify, podemos solicitar acceso a la sección Customer events en tu panel de administración de Shopify.

Sigue estos pasos para conceder los permisos necesarios:

1. En Shopify, ve a Settings > Users and permissions.
2. Haz clic en el miembro del staff llamado Clerk.io (o el usuario de staff que desees actualizar).
3. Desplázate a Store settings y habilita:
   • View customer events
   • Manage and add custom pixels
4. Haz clic en Save.

Estos permisos permiten a nuestro equipo ver la sección Customer events y gestionar el pixel de Clerk para verificar que el seguimiento de pedidos funcione correctamente.