Preguntas frecuentes

¿Estás teniendo problemas con tu integración de Shopify? Estas Preguntas Frecuentes cubren los problemas más comunes y sus soluciones, desde la conversión de moneda hasta la ubicación de los archivos de temas.

Tamaños de imagen #

Las URLs de imagen de 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 por el tamaño de imagen predeterminado que configuraste):

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

Esto es útil cuando un diseño utiliza varios formatos de imagen (por ejemplo, tarjetas de producto y banners grandes) y deseas evitar sincronizar múltiples atributos de imagen.

Conversión de moneda #

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

Por defecto, Clerk.js para Shopify viene con un formatter que funciona siempre y cuando tu aplicación de terceros utilice 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 de plantilla 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ño #

1. Crea un componente Texto donde quieras que se muestre el precio.
2. Añade el siguiente código Liquid para mostrar el precio basado en el currency converter 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 para 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 moneda en tu diseño.

Solución API personalizada #

Aviso legal: Esta es una solución muy personalizada para obtener conversiones de precios si no hay datos del API de Shopify. Utilízala solo si usas una configuración específica y personalizada para conversiones de precios basadas en cambios 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 desde el API de Clerk.io.

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

• Una colección que contenga todos los productos.
• Un diseño alternativo para mostrar información de colección como JSON.
• Una Clase JavaScript que recolecta los datos disponibles en la colección.
• Un fragmento de JavaScript que consume 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 diseño alternativo #

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

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

En 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 como tipo de archivo.

Escribe json en el campo más abajo, 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 los campos que necesites al producto en esta plantilla.

Agregar clase 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 colocaste en theme.liquid.

Debería verse algo así:

<script>
  // Clerk.js Código de Inyección
  // Clerk Config con Key y Formatters
  // Clase de este proyecto
  clerk_shopify_api.init()
  // Finalmente init() de la clase para asegurar que se ejecute al cargar la página.
</script>

Esta clase invalidará los datos según timestamps y monedas, sin que tengas que 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 moneda también invalida los datos.

Agregar función de plantilla #

Incluye template.js en la plantilla de diseño que uses.

La función obtiene los datos cuando están disponibles y los coloca en elementos hijos específicos dentro de cada tarjeta 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, debes agregarlos en collection.json.liquid y luego editar template.html y template.js para consumir también esos campos. No deberías necesitar editar la Clase descrita en el paso 3.

Encontrar archivos de tema #

Shopify cuenta con más de 100 temas diferentes para personalizar tu tienda.

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

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

Shopify te proporciona 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 ubicarlo.

Por ejemplo, si buscas el archivo que contiene el código de la página de búsqueda, probablemente 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 ‘Inspeccionar’.

Luego puedes inspeccionar el HTML de 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 más ayuda con esto, también puedes contactar a nuestro equipo de soporte.

Recomendaciones en el cajón del 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 en varios temas de Shopify. Está diseñada específicamente para temas donde el carrito es parte del DOM en cada página, pero permanece oculto hasta que el usuario lo abre.

Mostrar Clerk.io Recommendations en el cajón del carrito de 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 (generalmente se llama cart-drawer.liquid o similar).
3. Inserta un fragmento de Recommendations de Clerk.io desde Recommendations > Elements.
4. Cambia el nombre de la clase de clerk para controlar el renderizado. Por ejemplo, llamándola 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 fragmento anterior, incluye un script para renderizar Clerk.io Recommendations cuando el usuario abre el carrito. Un enfoque es usar un MutationObserver. El siguiente script incluye todos estos elementos, dándote un ejemplo de cómo abordarlo:

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

    // Todas las clases del cajón del carrito cuando está abierto
    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 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 que se ejecuta 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 de observer relacionada con la función callback
    const clerk_observer = new MutationObserver(callback);

    // Inicia la observación del nodo objetivo para detectar mutaciones configuradas
    clerk_observer.observe(targetNode, config);
</script>

Guarda el archivo actualizado del cajón del carrito y prueba que Recommendations de Clerk aparezcan al agregar un producto al carrito.

Autenticación HTTP #

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

Esto bloqueará el importador de Clerk.io 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 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 puede impedir que el Importador acceda, generando 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 sucede si tu tienda o entorno de desarrollo requiere autenticación HTTP para acceder.

Se soluciona insertando el Nombre de usuario y Contraseña en la URL de importación:

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

Error de permisos #

Este error normalmente ocurre si no has dado Acceso de lectura a Store content like articles, blogs, comments, pages and redirects en tu Private App.

Para solucionarlo:

1. Inicia sesión en Shopify y ve a Apps > Manage Private Apps > Clerk.io (o el nombre que le hayas dado 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 hasta la parte superior de la página y haz clic en Guardar.

Manejo de require.js #

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

En algunas configuraciones, Require.js impide la carga de Clerk.js, lo que provoca que no se muestren sliders ni resultados de búsqueda.

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

Uncaught ReferenceError: Clerk is not defined

Hay dos formas 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.io.

Agrega require(['clerk'], function() {}); al final del tracking script.

Ignorar Require.js #

Si la solución anterior no funciona, es posible ignorar Require.js.

Agrega window.__clerk_ignore_requirejs = true; al principio del tracking script.

Luego de usar uno de estos enfoques, Require.js será compatible con Clerk.io.

Actualiza a Clerk.js 2 #

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

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

Sin embargo, dado que las dos versiones funcionan de manera ligeramente diferente, debes seguir estos pasos para actualizar exitosamente.

Las dos diferencias principales en Clerk.js 2 son:

• Los Diseños en my.clerk.io utilizan el lenguaje de plantillas Liquid, pero también pueden ser creados fácilmente usando 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, debes crear nuevos.

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

• Usa el Editor de Diseño intuitivo 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 (te recomendamos añadir “V2” para que sea obvio que usas Clerk.js 2).
3. Elige el tipo de Diseño.
4. Haz clic en Publicar Diseño cuando termines y pasa a Paso 2.
5. En el Editor de Diseño, haz clic en cualquiera de los elementos existentes como nombre, imagen, botón, etc. para editarlo, o añade nuevos elementos para agregar más información sobre los productos.
6. Haz clic en Publicar. Esto hará que temporalmente no se muestren en tu tienda hasta que termines el Paso 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 ya puedes cambiar a Clerk.js 2.

Reemplazar script #

1. Encuentra el archivo de plantilla que se usa para mostrar todas las páginas de la tienda, donde se encuentra el script original de Clerk.js cerca del pie de página.

2. Elimina el script antiguo del archivo:

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

4. Copia este código y pégalo justo antes de la etiqueta </head> en la plantilla:

5. Guarda tu plantilla.

¡Felicidades! ¡Ahora ejecutas el nuevo y mejorado setup 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 Eventos de Cliente #

Cuando te ayudamos a configurar o solucionar problemas de seguimiento de pedidos mediante los píxeles de Shopify, podemos solicitar acceso a la sección de eventos de cliente en tu panel de administración de Shopify.

Sigue estos pasos para autorizar 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 del staff que desees actualizar).
3. Desplázate hasta Store settings y activa:

• Ver eventos de cliente
• Gestionar y añadir píxeles personalizados

4. Haz clic en Save.

Estos permisos permiten a nuestro equipo ver la sección de eventos de cliente y gestionar el pixel de Clerk.io para que podamos verificar que el seguimiento de pedidos funciona correctamente.