Preguntas frecuentes

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

Tamaños de imagen #

Las URLs de imágenes en Shopify pueden incluir dimensiones fijas desde la sincronización, por ejemplo, _600x600.

Si tu diseño necesita un tamaño de salida diferente por ubicación, puedes eliminar el tamaño fijo sincronizado y solicitar un nuevo ancho en la URL.

Ejemplo (reemplaza 600x600 con tu tamaño de imagen predeterminado configurado):

{{ product.image
  | replace '_600x600.' '.'
  | replace '?v=' '?width=350&v=' }}

Esto es útil cuando un diseño utiliza múltiples formatos de imagen (por ejemplo, tarjetas de producto y ubicaciones de héroe grandes) y quieres evitar sincronizar múltiples atributos de imagen.

Conversión de moneda #

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

Por defecto, Clerk.js para Shopify incluye un formatter que funciona siempre y cuando tu app de terceros use el objeto de moneda incorporado de Shopify.

Solución estándar #

Debes 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 moneda y símbolos, Clerk.js detecta configuraciones como el idioma, la moneda y el 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 quieres mostrar el precio.
2. Añade el siguiente código Liquid para mostrar el precio basado en 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 los 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 desde la API de Shopify. Solo utiliza esto si tienes una configuración específica y personalizada para conversiones de precios basadas en cambios de geo-IP.

La documentación de la solución frontend se encuentra 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.io.

El patrón de diseño está compuesto de las siguientes partes:

• Una colección que contiene todos los productos.
• Un layout alternativo para mostrar información de la colección como JSON.
• Una Clase JavaScript que recolecta los datos disponibles en la colección.
• Un Snippet JavaScript que consume los datos para los IDs de productos relevantes en un resultado dado y los inserta en un div en la plantilla.

Crear colección #

Para asegurarte de que tienes una colección con todos los posibles productos, crea una colección con una condición que sea cumplida por 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 layout alternativo #

Crea un layout alternativo para mostrar tus datos usando la colección.

Para ello, primero edita el código del tema que desees usar.

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

En el popup, selecciona collection para el tipo de recurso.

Selecciona liquid para el tipo de archivo.

Escribe json en el campo 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 añadir campos al producto en esta plantilla según sea necesario.

Añadir clase JS #

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

Debe verse 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 para asegurarse de que se ejecute al cargar la página.
</script>

Esta clase invalidará los datos según marcas de tiempo y monedas, sin necesidad de cambiar el código.

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

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

Añadir 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 inserta en elementos hijos específicos dentro de cada tile de producto.

El ejemplo incluye los campos list_price y price.

Cosas a tener en cuenta: Si necesitas usar campos diferentes de price y list_price, deberías añadirlos en collection.json.liquid y luego editar template.html y template.js para consumir también esos campos. Nunca deberías tener que editar la Clase descrita en el paso 3.

Encontrar archivos de tema #

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 del tema para obtener un resultado específico 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 fácil y rápidamente 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 de 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 del archivo de tema con el HTML de la página relevante para ver si coinciden.

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

Luego puedes inspeccionar el HTML en la página y comprobar si la clase/ID de los elementos es la misma 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 cart drawer #

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

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

Mostrar recomendaciones de Clerk.io 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 checkout.

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 cart drawer (usualmente llamado cart-drawer.liquid o similar).
3. Inserta un snippet de Clerk.io Recommendations desde Recommendations > Elements.
4. Cambia el nombre de la clase de clerk a controlar el renderizado. Por ejemplo, llamándolo clerk_m:

<span
  class="clerk_m"
  data-template="@cart-others-also-bought"
  data-products="[{% for item in cart.items %}{{ item.product_id }}{% unless forloop.last %}, {% endunless %}{% endfor %}]"
></span>

1. Junto con el snippet anterior, incluye un script para renderizar Clerk.io Recommendations cuando el usuario abra el carrito. Una forma es usar un MutationObserver. El siguiente script incluye todos estos elementos, dándote un ejemplo de cómo abordarlo:

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

    // Añade todos los nombres de clase del cart drawer, 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 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 callback a 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 observador vinculada a la función callback
    const clerk_observer = new MutationObserver(callback);

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

Tu archivo del cart drawer debe verse así:

Autenticación HTTP #

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

Esto bloqueará el importador Clerk.io 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 #

Al importar datos con la integración de Shopify, el servidor de tu tienda es responsable de enviar los datos de productos, categorías y ventas a Clerk.io.

Sin embargo, en algunos casos, la configuración del servidor podría impedir que el Importer 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 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@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 aplicación 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:

1. Ve a la parte superior de la página y haz clic en Save.

Manejo de require.js #

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

En algunas configuraciones, Require.js impide que Clerk.js se cargue, lo que significa que no se muestran sliders ni resultados de búsqueda.

Cuando esto sucede, el siguiente error se mostrará en tu consola:

Uncaught ReferenceError: Clerk is not defined

Hay dos formas de manejar Require.js. Ambos enfoques requieren que hagas cambios en el tracking-script, que normalmente se inserta en index.liquid.

Incluir en Require.js #

El mejor enfoque es intentar que Require.js reconozca Clerk.io.

Puedes hacerlo insertando require(['clerk'], function() {}); al final del tracking script:

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 tracking script:

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

Actualización 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.io en cualquier tienda online.

Sin embargo, dado que las dos versiones funcionan de manera 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 utilizan el lenguaje de plantillas Liquid, pero también pueden crearse fácilmente usando el Editor de Diseños.
• El script debe insertarse justo antes de la etiqueta </head> en la plantilla de tu tienda online.

Crear diseños #

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

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

• Usa el intuitivo Editor de Diseños para crear nuevos Diseños, como se describe en los siguientes puntos.
• Convierte tus Diseños antiguos. Sigue esta guía para ver cómo hacerlo.

Opción Editor de Diseños #

1. Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
2. En la pantalla siguiente, ponle un Nombre a tu Diseño (recomendamos agregar “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 ve a Step 2 en la guía.
5. En el Editor de Diseños, 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 añadir más información sobre los productos.
6. Haz clic en Publish. Esto temporariamente hará que no se muestren en tu tienda online hasta que finalices el Step 2. Elige el nuevo Diseño para todos los Elementos que deban actualizarse.
7. Ve a Recommendations/Search > Elements y cambia tu Elemento de Clerk.io para usar tu nuevo Diseño.

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

Reemplazar 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:

1. Ve a my.clerk.io > Developers > Tracking Code. Esta página ahora tiene tu código de seguimiento de Clerk.js 2.
2. Copia este código e insértalo justo antes de la etiqueta </head> en la plantilla:

1. Guarda tu plantilla.

¡Felicidades! ¡Ahora estás ejecutando 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

Acceso a Customer Events #

Cuando te ayudamos a configurar o solucionar problemas de seguimiento de pedidos a través de los píxeles de Shopify, es posible que te pidamos acceso al área de Customer events en el 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 quieras actualizar).
3. Desplázate hasta 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 de Customer events y gestionar el pixel de Clerk.io para que podamos verificar que el seguimiento de pedidos funciona correctamente.