FAQ

Conversión de Moneda #

El objeto de Conversión de Moneda integrado de Shopify facilita la lectura del símbolo de la moneda y la tasa de cambio desde la tienda en línea.

Necesitas usar un formateador en tus Diseños para convertir precios. Esto toma un ejemplo de nuestro lenguaje de plantillas estándar aquí. Sin embargo, al usar conversiones de moneda y símbolos, Clerk.js detecta estas configuraciones como idioma, moneda y código de país. Los siguientes ejemplos te darán una mejor visión general de cómo funcionan los diferentes componentes.

Editor de Diseño #

1. Crea un componente de Texto donde quieras que se muestre el precio.

2. Agrega el siguiente código Liquid para mostrar el precio basado en el convertidor de moneda dentro del componente de texto:

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

Diseños de Código #

1. En my.clerk.io ve a Buscar/Recomendaciones -> Diseños y haz clic en Editar Diseño para tu diseño.

2. Reemplaza el formateador de money o money_eu existente para precios, con 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:

Encontrando archivos de tema comunes #

Shopify alberga más de 100 temas diferentes para estilizar y personalizar tu tienda en línea. Cada tema funciona de la misma manera, que personalizas los archivos del tema para obtener un resultado determinado en tu tienda, sin embargo, los nombres de los archivos del tema cambian de tema a tema.

Shopify te da un campo de búsqueda para encontrar fácilmente y rápidamente el archivo del tema que estás buscando. Si no conoces el nombre del archivo que estás buscando, puedes usar el campo de búsqueda para ayudar a localizarlo. Por ejemplo, si estás buscando el archivo que tiene 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 si has encontrado el archivo correcto, puedes comparar el HTML en el archivo del tema con el HTML en 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 en la página y verificar si la clase/ID de los elementos son los mismos en el archivo que en la página.

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

Recomendaciones del 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 manera 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 Recomendaciones de Clerk en el cajón del carrito en Shopify es una excelente manera de mostrar productos adicionales a los compradores antes de que comiencen el proceso de pago.

1. Edita el código de tu tema de Shopify en Tienda en Línea > Temas > Editar código.
2. Encuentra el archivo donde está la plantilla del cajón del carrito (generalmente llamado cart-drawer.liquid o similar).
3. Inserta un fragmento de Recomendaciones de Clerk desde Recomendaciones > Contenido. 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 line_item in cart.items %}{% if forloop.index0 > 0 %}, {% endif %}{{ line_item.product.id }}{% endfor %}]"></span>

4. Junto con el fragmento anterior, incluye un script para renderizar las Recomendaciones de Clerk 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. Por ejemplo:

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

    // Agrega todos los nombres de clase del cajón del carrito, cuando está abierto
    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 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 de observador vinculada a la función de 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 del cajón del carrito debería verse así:

Sincronización con HTTP Auth #

A menudo se utiliza la autenticación HTTP en sitios de prueba para evitar visitantes no invitados.

Esto bloqueará el importador de Clerk también y mostrará un error de 401 No Autorizado en el registro de sincronización.

Puedes verificar fácilmente el importador insertando la información de autenticación en la URL de importación como a continuación, en Sincronización de Datos en my.clerk.io:

https://USER:PASS@www.ewksRus.com

Errores de sincronización comunes #

Al importar datos con la integración de Shopify, el servidor de la tienda en línea 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 Importador obtenga acceso, causando un error en Sincronización de Datos.

A continuación se muestra una lista de los errores más comunes y cómo solucionarlos.

Error 401 del Servidor: No Autorizado #

Este error ocurre si tu tienda en línea/entorno de desarrollo requiere autenticación HTTP para acceder a él.

Esto se soluciona simplemente 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 de Shopify: Esta acción requiere la aprobación del comerciante para el alcance read_content. #

Este error generalmente ocurre si no has dado Acceso de Lectura a Contenido de la tienda como artículos, blogs, comentarios, páginas y redirecciones en tu Aplicación Privada.

Para solucionarlo:

1. Inicia sesión en Shopify y ve a Aplicaciones -> Administrar Aplicaciones Privadas -> Clerk.io (o el nombre que le diste a la Aplicación).

2. Desplázate hasta Permisos de API de Admin, y haz clic en Revisar permisos de API de Admin deshabilitados.

3. Busca Contenido de la tienda como artículos, blogs, comentarios, páginas y redirecciones y elige Acceso de lectura:

4. Luego desplázate hasta la parte superior de la página y haz clic en Guardar.