FAQ

¿Tienes problemas con tu integración de Shopify? Este FAQ cubre los problemas más comunes y sus soluciones, desde la conversión de divisas hasta la ubicación de los archivos de tema.

Conversión de divisas #

La Conversión de Divisas integrada de Shopify facilita la lectura del símbolo de la moneda y la tasa de cambio directamente desde la tienda online.

Por defecto, Clerk.js para Shopify viene con un formatter que funciona siempre que tu aplicación de terceros use el objeto de moneda incorporado de Shopify.

Solución estándar #

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

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

Al utilizar conversiones de divisas 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ño #

1. Crea un componente de Texto en el lugar donde quieras mostrar el precio.

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

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

Modo de código #

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

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

3. Haz clic en Actualizar diseño.

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

Solución API personalizada #

Aviso: Esta es una solución muy personalizada para obtener conversiones de precio si no hay datos del API de Shopify. Úsala solo si tienes una configuración específica y personalizada para conversiones de precio basadas en el cambio de geo-IP.

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

Esta sección cubre cómo obtener datos contextuales en tiempo real para mostrar dentro del contenido devuelto por la API de Clerk.

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

• Una colección que contiene todos los productos.

• Un diseño alternativo para renderizar la información de la colección como JSON.

• Una clase de JavaScript que recopila los datos disponibles en la colección.

• Un fragmento de JavaScript que consume los datos de 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 de la colección debe ser algo como price > -1000000.

Crear diseño alternativo #

Crea un diseño alternativo para mostrar tus datos utilizando la colección.

Para hacerlo, primero edita el código del tema que deseas usar.

Bajo la sección de plantillas en el lado izquierdo, presiona Add new Template.

En la ventana emergente, selecciona collection para el tipo de recurso.

Selecciona liquid para el tipo de archivo.

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

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

Puedes agregar campos adicionales al producto en esta plantilla según lo requieras.

Agregar clase JS #

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

Debería verse algo así:

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

Esta clase invalidará los datos basándose en marcas de tiempo y monedas, sin que necesites modificar el código.

El tiempo antes de la invalidez es de 12 horas desde la última construcción de datos.

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

Agregar función de plantilla #

Incluye el archivo 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 ficha de producto.

El ejemplo incluye los campos list_price y price.

A tener en cuenta: Si necesitas usar campos que sean diferentes de price y list_price, deberías agregarlos en collection.json.liquid y luego editar template.html y template.js para que también utilicen esos campos. No deberías necesitar editar la Clase descrita en el paso 3.

Múltiples monedas #

Nota: Esto está en desuso. El script de seguimiento pixel lo reemplaza. Sigue los pasos 4 y 5 de la Guía de inicio para Shopify.

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

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

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

Por eso es importante traducir a una sola moneda; después de todo, ¡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 muestren tus datos de ventas en una moneda común, esto puede ajustarse dentro del código de seguimiento de ventas que agregaste a tu tienda cuando instalaste Clerk originalmente.

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—este se encuentra justo debajo del código de seguimiento de ventas.

Tus pedidos ahora deberían pasar a los paneles de Clerk en una sola moneda.

Encontrar archivos de temas #

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

Cada tema funciona de la misma manera: personalizas los archivos de tema para obtener un resultado específico en tu tienda.

Sin embargo, los nombres de los archivos de tema varían de un tema a otro.

Shopify te proporciona un campo de búsqueda para encontrar rápida y fácilmente el archivo de tema que estás buscando.

Si no sabes el nombre del archivo que buscas, puedes utilizar 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, es probable que tenga ‘search’ en el nombre del archivo.

Si no estás seguro de haber encontrado el archivo correcto, puedes comparar el HTML en el archivo de tema con el HTML de la página correspondiente para verificar 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 en la página y comprobar si la clase/ID de los elementos es la misma en el archivo que en la página.

Si necesitas ayuda adicional con esto, también puedes ponerte en contacto con nuestro equipo de soporte.

Recomendaciones en el cajón del carrito #

Recomendamos encarecidamente que la instalación la realice un desarrollador de Shopify.

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

Mostrar Recommendations de Clerk en el cajón del 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 del carrito (normalmente llamado cart-drawer.liquid o similar).

3. Inserta un fragmento de Recommendations de Clerk desde Recommendations > Elements.

4. Cambia el nombre de la clase de clerk para controlar el renderizado. Por ejemplo, llamándolo 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 con el snippet anterior, incluye un script para renderizar Recommendations de Clerk cuando el usuario abra el carrito. Una forma es usar MutationObserver. El siguiente script incluye todos estos elementos, dándote un ejemplo de cómo abordarlo:

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

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

    // Opciones para el observador (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 devolución de llamada 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;
                    }
                }

            }
        }
    };

    // Crear una instancia del observador vinculada a la función de devolución de llamada
    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 del carrito debería verse así:

Autenticación HTTP #

La autenticación HTTP se utiliza frecuentemente 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 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 de esta manera:

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 los 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 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.

Se soluciona insertando el nombre de usuario y 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 concedido acceso de lectura 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 le diste a la App).

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

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

4. Desplázate a la parte superior de la página y haz clic en Guardar.

Manejo de require.js #

Esta guía solo aplica al utilizar Clerk.js 1.

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, aparecerá el siguiente error en tu consola:

Uncaught ReferenceError: Clerk is not defined

Hay dos maneras de manejar Require.js. Ambas requieren que realices cambios en el tracking-script, que normalmente se inserta en index.liquid.

Incluir en Require.js #

La mejor opción 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 utilizar uno de estos métodos, Require.js será compatible con Clerk.

Actualizar a Clerk.js 2 #

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

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

Sin embargo, debido a que las dos versiones funcionan de manera ligeramente diferente, debes seguir estos pasos para actualizar correctamente.

Las dos principales diferencias en Clerk.js 2 son:

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

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

Crear diseños #

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

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

• Usar el intuitivo Editor de Diseño para crear nuevos Diseños, como se describe en los siguientes puntos.

• Convertir 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, da un Nombre a tu Diseño (recomendamos agregar “V2” para dejar claro que usas Clerk.js 2).

3. Escoge el tipo de Diseño.

4. Haz clic en Publicar diseño cuando termines y ve al Paso 2 en la guía.

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

6. Haz clic en Publicar. Esto hará que temporalmente no se muestren en tu tienda online hasta que completes el Paso 2. Elige el nuevo Diseño para todos los Elementos que deban ser actualizados.

7. Ve a Recommendations/Search > Elements y cambia tu Elemento de Clerk para que utilice tu nuevo Diseño.

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

Reemplazar el script #

1. Localiza el archivo de plantilla que se usa 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 ahora 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 funcionando con la configuración Clerk.js 2 mucho mejorada!

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

Otorgar acceso de Clerk a Eventos de Cliente #

Cuando te ayudamos a configurar o solucionar problemas de seguimiento de pedidos mediante píxeles de Shopify, es posible que te pidamos acceso al área de eventos de cliente en tu administrador 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 personal llamado Clerk.io (o el usuario de personal que quieras actualizar).
3. Desplázate hasta Ajustes de la tienda y habilita:
   • Ver eventos de clientes
   • Gestionar y añadir píxeles personalizados
4. Haz clic en Guardar.

Estos permisos permiten que nuestro equipo vea la sección de eventos de clientes y gestione el pixel de Clerk para poder verificar que el seguimiento de pedidos funciona correctamente.