Preguntas frecuentes
¿Tienes problemas con tu integración personalizada? Este FAQ cubre los problemas más comunes y sus soluciones, desde aplicaciones de una sola página hasta el seguimiento de ventas.
Aplicaciones de una sola página #
Estas también se llaman Progressive Web Apps (PWA) y generalmente cargan el sitio como una sola página, en lugar de cargar páginas individuales como es habitual.
Cuando se carga una página por primera vez, la biblioteca Clerk.js dispara automáticamente una función para renderizar todos los bloques Element en esa página.
Sin embargo, para aplicaciones de una sola página utilizando frameworks como vue.js o next.js, las páginas se renderizan con JavaScript en lugar de una carga de página estándar.
Haz coincidir la inicialización de Clerk.js y las actualizaciones de contexto con la forma en que tu app carga cada vista.
Incluir Clerk.js #
Clerk.js solo necesita cargarse una vez, cuando el sitio se carga inicialmente.
Después de esto, la biblioteca estará disponible durante toda la sesión.
Inclúyelo justo antes de </head> en tu HTML:
<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
(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: 'INSERT_PUBLIC_API_KEY'
});
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
Actualizar el contexto #
Si un bloque de recomendaciones permanece en la página mientras el visitante navega, actualiza el contexto de Clerk.js para que coincida con la vista actual. Los bloques ya inicializados cuyos IDs provienen de contexto se recargan automáticamente cuando su valor relevante cambia.
Por ejemplo, cuando el visitante abre la categoría 276, llama a:
Clerk('context', 'category', '276');
Sustituye 276 por el ID de categoría de tu aplicación. Establecer un valor sin cambios no recarga el bloque. Esto funciona sin un cambio en el DOM y con la observación del DOM desactivada.
Los bloques cuyos IDs provienen de elementos del DOM, y los popups, no se recargan por cambios de contexto.
Consulta Context Reloads para ver las claves soportadas, valores ausentes, eventos y cómo desactivar recargas automáticas.
Controlar el renderizado #
Por defecto, Clerk.js renderiza cualquier elemento que tenga la clase clerk, lo haya insertado en la carga inicial de la página o cuando el DOM cambia.
Puedes controlar el momento insertando el elemento cuando esté listo para renderizarse.
Alternativamente, puedes controlar el renderizado con la función Clerk("content", "SELECTOR").
Cada vez que se carga una página, realiza estos pasos, en orden:
- Añade el fragmento Clerk al HTML con un selector único que puedas identificar.
- Ejecuta
Clerk("content", "SELECTOR")para renderizarlo.
Para este enfoque manual, cuando el visitante salga de la página, destruye el snippet y vuelve a renderizarlo si el visitante regresa a la misma página.
Esto asegura que Clerk.js no vea el snippet como previamente renderizado, haciendo que no se visualice.
Un bloque derivado del contexto que permanezca en la página puede usar las recargas automáticas descritas arriba.
Ejemplo:
<span
id="clerk-custom-snippet"
data-template="@home-page-visitor-recommendations">
</span>
<script>
Clerk("content", "#clerk-custom-snippet")
</script>
Clerk.js también puede configurarse para inicializar automáticamente Elementos con tus selectores personalizados después de la primera vez que lo renderices.
Impacto en Pagespeed #
Añadir una herramienta externa como Clerk.js aumentará el tiempo de carga de tu sitio, pero es insignificante comparado con las conversiones adicionales que proporcionará.
La siguiente sección explica lo que Clerk.js añade al tiempo de carga.
Rendimiento #
La biblioteca Clerk.js pesa solo 37.5kb, por lo que carga muy rápido.
Además, carga los elementos de forma asíncrona, lo que significa que el resto de la página se carga mientras Clerk.js renderiza el contenido.
Un aumento en el tiempo de carga de una página usualmente proviene de cargar más imágenes que antes, ya que los resultados de búsqueda y recomendaciones de Clerk funcionan mejor cuando son visualmente atractivos.
Para minimizar el tiempo de carga adicional, recomendamos usar imágenes en formato webp que tengan una resolución acorde al tamaño que tienen en los elementos de Clerk.
Por ejemplo, si las imágenes en recomendaciones tienen una resolución de 400x400px en vista de escritorio, envía imágenes con una resolución máxima de 420x420px o similar.
Google Page Speed #
Si utilizas Google Page Speed Insights o una herramienta similar para analizar el rendimiento de tu sitio, podrías ver Clerk.js listado bajo Leverage browser caching.
El propósito de Clerk.js es hacer que insertar resultados de Clerk en cualquier sitio web sea súper sencillo.
Clerk.js contiene muchas funciones para manejar el seguimiento y componentes UI como Instant Search, sliders, popups y más.
Cuando añadimos nuevas funcionalidades de UI o mejoramos las existentes, estas se incluyen en Clerk.js y deben ser descargadas por el usuario final para poder utilizarlas.
Tener un tiempo de expiración de caché de 60 minutos significa que, cuando lanzamos nuevas funciones, estarán disponibles para todos en un máximo de 60 minutos.
Cuanto mayor sea el tiempo de caché, más tarda en estar disponible la última funcionalidad para todos.
Lo importante es que los usuarios finales solo tienen que descargar Clerk.js una vez cuando hay nuevas funciones disponibles.
La expiración de caché de 60 minutos simplemente significa que el navegador del usuario revisará con Clerk cada 60 minutos.
Si no ha habido cambios en Clerk.js, no se descargará nada.
Por tanto, el tiempo de expiración de caché de 60 minutos es un equilibrio entre minimizar peticiones web y ver nuevas funciones y mejoras.
La mayoría de las sesiones son más cortas de 60 minutos, así que la petición solo se hará una vez por sesión.
Este tipo de expiración de caché es normal y también es usado por servicios como Google Analytics, Facebook y Trustpilot.
Impacto en CLS #
El Cumulative Layout Shift (CLS) puede impactar negativamente al SEO y la experiencia del usuario cuando contenido inyectado dinámicamente desplaza elementos en una página.
En algunos casos, entre otros factores, Clerk puede contribuir al puntaje CLS.
Puedes leer más sobre CLS aquí.
Sigue esta guía solo si tu score de CLS es mayor que 0.2 y los elementos de Clerk aparecen por encima del doblez.
Para evitar que el contenido se desplace, es necesario reservar un espacio para las recomendaciones de Clerk antes de que Clerk.js los inyecte.
Para ello, debemos añadir una altura mínima basada en la altura esperada del contenido.
Ejemplo de código:
.clerk-slider-wrapper {
min-height: 300px; /* Ajusta según la altura esperada del contenido */
width: 100%;
}
Realizar llamadas API #
Puedes usar Clerk.js para hacer llamadas API usando la función incorporada Clerk("call").
Esta función toma 3 argumentos:
- Un endpoint API
- Un diccionario JSON de parámetros
- Una función callback para manejar la respuesta
Solicitudes #
A continuación un ejemplo de script que solicita los 10 productos más populares y registra la respuesta en la consola.
La respuesta contiene un objeto JavaScript con el estado de la llamada y el resultado.
Script #
function popularProducts(){
Clerk("call",
"recommendations/popular",
{
limit: 10,
labels:["Home Page / Bestsellers"]
},
function(response){
console.log(response);
},
function(response){
console.error(response);
}
);
}
Respuesta #
__clerk_cb_1(
{
"status":"ok",
"count":72,
"facets":null,
"result":[399,410,551,338,403,439,425,402,406,456]
}
);
Callbacks #
Cuando haces llamadas API, puedes usar funciones callback para manejar la respuesta como desees.
Las funciones toman response como argumento, que contiene todos los datos devueltos por la API.
A continuación un ejemplo que crea una lista de elementos HTML que enlazan a categorías que coinciden con la consulta “men”.
Clerk("call",
"search/categories",
{
'query': "men",
'limit': "10"
},
function(response) {
var cat = response.categories;
if (cat.length > 0) {
let heading = document.createElement('h3');
heading.textContent = 'Related Categories';
document.querySelector('#your-target').append(heading);
}
for (var index in cat) {
var clerkName = cat[index].name;
var clerkUrl = cat[index].url;
let link = document.createElement('a');
link.href = clerkUrl;
link.textContent = clerkName;
document.querySelector('#your-target').append(link);
}
}
)
Botones de añadir al carrito #
Estos botones funcionan de manera diferente en cada plataforma y su funcionalidad puede cambiar dependiendo de los plugins que utilices.
Como los diseños de Clerk consisten en HTML y CSS, normalmente puedes añadir esta funcionalidad si entiendes cómo funcionan en tu sitio.
Enfoque general #
Algunos botones de añadir al carrito requieren JavaScript para funcionar.
En estos casos, puedes añadir la funcionalidad al método cart existente de Clerk.
Consulta cómo hacerlo en nuestra documentación para desarrolladores aquí.
Inspecciona el botón de añadir al carrito para identificar el código asociado, por ejemplo, en una página de categoría.
El código normalmente será un <div> o un elemento button.
Copia el HTML completo del botón.
Copia y pega este código en tu Diseño.
Ahora necesitas identificar las variables en el código.
Lo más común es que debas encontrar dónde el código usa:
- ID del producto
- Cantidad del producto
Sustituye los valores del ID de producto por las variables Liquid para esos datos.
El ID siempre será {{ product.id }} y la cantidad de producto dependerá de cómo envíes los datos.
En este ejemplo podría ser {{ product.qty }}.
Pega tu código en el HTML de tu Diseño y pruébalo para asegurarte de que funciona.
Ejemplo #
El botón de añadir al carrito usa un <div> con la clase button-container.
La cantidad se encuentra dentro del enlace del carrito después de /cart?add= y el ID del producto se encuentra justo después de &id_product=.
El ID del producto también se referencia en data-id-product, y la cantidad en .data-minimal_quantity.
Estos valores deben ser sustituidos por etiquetas Liquid en el Diseño para que los ID y cantidades adecuados se usen en la salida HTML.
Con estos cambios, el botón final de añadir al carrito se verá así:
<div class="button-container">
<a
class="button ajax_add_to_cart_button btn btn-default"
style="position: relative;"
href="https://www.examplelinktocart.com/cart?add={{ product.qty }}&id_product={{ product.id }}&"
rel="nofollow"
title="Add to Cart"
data-id-product-attribute="0"
data-id-product="{{ product.id }}"
data-minimal_quantity="{{ product.qty }}">
<span style="color: orange !important">
<i class="icon-shopping-cart" aria-hidden="true"></i>
</span>
</a>
</div>
Errores de consola #
Clerk.js registra muchos errores en la consola, que puedes utilizar para depurar problemas.
Al hacer clic en el enlace de error tendrás más información sobre qué salió mal, que puedes usar para depurar el error tú mismo o enviarlo a nuestro equipo de soporte, que te ayudará.
A continuación encontrarás una lista de los errores más comunes.
Contenido desconocido #
Este error aparecerá si el snippet que insertaste hace referencia a un
Element que no existe, en el atributo data-template.
Para solucionarlo, asegúrate de que el nombre en el código insertado coincida con un bloque Element que hayas creado en my.clerk.io.
Puedes hacer clic en Edit Element para cualquier Element, para ver cuál debe ser la referencia.
Endpoint API no válido #
Este error ocurre si has usado la clase clerk en algún lugar de tu HTML.
Esta clase está reservada para su uso con nuestros snippets, ya que Clerk.js usa esta clase para identificar los elementos que debe renderizar.
Para solucionarlo, asegúrate de usar otro nombre de clase, como clerk-product.
Argumento de producto no válido #
Este error significa que el ID suministrado para un producto tiene un tipo o sintaxis incorrectos.
Por ejemplo, si tus IDs de producto son enteros, deben serlo también en el código insertado.
Recuerda también los corchetes alrededor del ID, para que sea una lista.
<span
class="clerk"
data-template="@product-page"
data-products="[123]">
</span>
Argumento de categoría no válido #
Este error significa que el ID suministrado para una categoría tiene un tipo o sintaxis incorrectos.
En la mayoría de los casos, ocurre si el placeholder en el código de la categoría no ha sido sustituido por un ID real:
<span
class="clerk"
data-template="@category-page"
data-category="INSERT_CATEGORY_ID">
</span>
El output del código debería contener el ID de la categoría:
<span
class="clerk"
data-template="@category-page"
data-category="257">
</span>
Si copiaste el snippet manualmente, asegúrate de seleccionar tu sistema de tienda en el menú desplegable Choose your platform antes de copiarlos.
Así cambiará para incluir la lógica de tu plataforma que selecciona el ID de categoría correcto.
Si tu plataforma no aparece en la lista, tendrás que añadir manualmente la lógica para seleccionar el ID de categoría correcto según la funcionalidad de tu webshop.
API key incorrecta #
Este error aparece si la public API key que proporcionaste no coincide con ninguna cuenta en Clerk.
Para solucionarlo, accede a my.clerk.io y ve a Developers > API Keys.
Aquí puedes encontrar la Public API Key que luego puedes añadir a tu script de Clerk.js directamente en el código o en los ajustes de tu integración, dependiendo de tu plataforma.
Bloqueo de Iubenda #
Si usas iubenda para el consentimiento de cookies con el bloqueo automático habilitado, los visitantes que rechazan cookies pueden hacer que iubenda bloquee los scripts o peticiones de Clerk.io.
Esto normalmente resulta en dos problemas:
- La solicitud
salenunca se envía, por lo que los pedidos no se rastrean o no se atribuyen en Clerk.io. - Los elementos de Clerk.io pueden no renderizarse, o Clerk.js puede mostrar un error en la consola sobre estar cargado varias veces (porque iubenda reescribe o aplaza los scripts).
Allowlist de dominios #
Para solucionarlo, añade Clerk.io a la allowlist de iubenda para que sus scripts y peticiones no sean bloqueados cuando un visitante rechaza cookies.
Como mínimo, añade estos dominios a la allowlist de iubenda:
cdn.clerk.io(Clerk.js)api.clerk.io(peticiones de rastreo y ventas)
Las etiquetas exactas pueden variar, pero este ajuste normalmente se encuentra en la configuración Cookie Solution de tu proyecto de iubenda para bloqueo automático.
Para la guía oficial de iubenda, consulta su artículo sobre qué hacer cuando el modo de bloqueo automático bloquea demasiado.
Verifica la solución #
Después de actualizar la configuración de iubenda:
- Carga la tienda, rechaza cookies y abre la consola del navegador.
- Confirma que Clerk.js está disponible —
typeof Clerkno debe devolver"undefined". - Ejecuta
Clerk("debug"), realiza un pedido de prueba y confirma que una peticiónsalese envía a Clerk.io y retornastatus: "ok".
Datos de ventas POS/ERP #
Para algunas tiendas, es relevante subir datos de ventas de otros sistemas además de la tienda online.
Por ejemplo, si quieres optimizar el algoritmo basándote en ventas de una tienda física, o una tienda B2B.
Clerk no diferencia entre pedidos de distintas fuentes—siempre y cuando puedas proporcionar un ID, una marca de tiempo y una lista de productos comprados, pueden ser subidos a Clerk.
El enfoque recomendado es usar la API CRUD ya que permite automatizar completamente la tarea.
Implementando estas llamadas API puedes enviar datos de pedidos directamente a tu Store en Clerk.
Simplemente crea una llamada POST al endpoint /orders de tu sistema ERP o tienda, ejecuta el trabajo a intervalos regulares, por ejemplo una vez al mes, y así podrás usar pedidos offline para potenciar tus recomendaciones online y resultados de búsqueda.
Alternativamente, puedes subir un archivo CSV manualmente, sin necesidad de codificar.
Puedes leer más sobre archivos CSV aquí.
Conversión de moneda #
Hay múltiples formas de trabajar con la conversión de moneda en Clerk.
A continuación se describe una forma sencilla de hacerlo funcionar.
Traducción de monedas #
Si los visitantes usan Google Translate en tu tienda, los valores de precios pueden traducirse de manera que rompan el formato o cambien la visualización de la moneda.
Para evitar esto, envuelve la salida del precio en elementos que no deban traducirse.
Etiquetado recomendado #
Usa tanto translate="no" como la clase notranslate en el elemento de precio:
<span class="clerk-price notranslate" translate="no">
{{ product.price | money }}
</span>
Si muestras el precio de lista y el de oferta, aplica el mismo patrón en cada valor de precio:
<span class="clerk-old-price notranslate" translate="no">
{{ product.list_price | money }}
</span>
<span class="clerk-new-price notranslate" translate="no">
{{ product.price | money }}
</span>
Aplica estas ubicaciones #
- En tu diseño de Clerk donde se rendericen los precios.
- En cualquier wrapper HTML personalizado que muestre valores de precio.
Esto mantiene el resto de la página traducible mientras preserva el formato correcto de precio y moneda.
Envía objetos de precio #
Clerk necesita conocer los precios de cada producto en las diferentes monedas.
La manera más sencilla es enviarlos como un objeto JSON codificado como string de precios formateados, usando el ISO de la moneda como clave, en tu Data Feed.
"products": [
{
"id": 1,
"name": "Cheese",
"description": "A nice piece of cheese.",
"price": 100,
"list_price": 50,
"categories": [25, 42],
"image": "http://example.com/images/products/1.jpg",
"url": "http://example.com/product/1",
"on_sale": true,
// String-encoded JSON examples
"prices_formatted": "{\"USD\":\"$100\", \"EUR\":\"€87.70\", \"GBP\":\"£68.68\"}",
"list_prices_formatted": "{\"USD\":\"$120\", \"EUR\":\"€97.70\", \"GBP\":\"£78.68\"}"
},
{
"id": 2,
"name": "A pound of nuts",
"description": "That's a lot of nuts!",
"price": 150,
"categories": [1],
"image": "http://example.com/images/products/2.jpg",
"url": "http://example.com/product/2",
"on_sale": false,
// String-encoded JSON example
"prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}",
"list_prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}"
}
]
Crear formateador #
En Clerk.js puedes definir funciones JavaScript que puedes usar en tus Diseños.
Aquí puedes definir una función que toma tu price-dict como argumento, y retorna el precio para una moneda específica, basado en la lógica frontend de tu elección.
Asegúrate de reemplazar currency con la moneda actualmente seleccionada en el frontend.
Clerk('config', {
key: 'Your_API_Key',
formatters: {
currency_selector: function (price_list) {
const currency = "EUR";
price_groups_obj = JSON.parse(price_list)
return price_groups_obj[currency];
}
}
});
Usar el formateador #
Tras definir el formateador, se puede usar en tu diseño con la siguiente sintaxis:
<div class="price">
<span class="price">
{{ product.prices_formatted | currency_selector }}
</span>
</div>
Precios específicos para cliente #
Clerk admite mostrar diferentes precios según el cliente que haya iniciado sesión, ya sea obteniendo precios individuales al momento de la renderización o prealmacenando precios de grupo en los datos de producto.
Esto se detalla en el artículo dedicado Customer Pricing.
Autenticación HTTP #
La autenticación HTTP se utiliza a menudo en sitios de pruebas para evitar visitantes no deseados.
Esto, en muchos casos, también bloqueará el importador de Clerk y normalmente mostrará un error 401 Unauthorized en el log 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í:
http://USER:PASS@www.ewoksRus.com/JSONFEED
Sin pedidos rastreados #
Para una guía completa sobre cómo funciona el seguimiento de ventas, cómo configurarlo y cómo depurarlo paso a paso, consulta el artículo Sales Tracking.
Sin impacto de Clerk #
Si las ventas están siendo rastreadas pero ninguna aparece como influenciada por Clerk en analytics, consulta la sección No Clerk Impact del artículo de Sales Tracking.
Ocultar sliders con pocos productos #
Si una categoría tiene muy pocos productos, un slider puede verse vacío o repetitivo.
Hay dos maneras de manejarlo:
Condicional en el Diseño Clerk #
Usa un condicional alrededor del marcado del slider para que solo se renderice si se devuelven suficientes productos.
{% if products.length >= 6 %}
<div class="clerk-slider">
{% for product in products %}
<!-- product card -->
{% endfor %}
</div>
{% endif %}
Esto es rápido de implementar, pero aún depende de la respuesta de Clerk para decidir si se debe mostrar el slider. Esto significa que aún te cuesta una llamada a la API, incluso cuando el slider no se muestra.
Condicional del lado del servidor #
Si tu plataforma ya conoce la cantidad de productos de la categoría, decide en tu plantilla si debes o no mostrar el código de embed de Clerk.
{% if category.product_count >= 6 %}
<span class="clerk" data-template="@category-page-slider"></span>
{% endif %}
Este es el enfoque preferido porque el slider solo se inicializa cuando hay suficientes productos y el comportamiento se mantiene completamente alineado con la lógica de conteo de tu propia tienda.
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, dado 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 usan Liquid, pero también se pueden crear fácilmente con el Editor de Diseños.
- El script debe insertarse justo antes de la etiqueta
</head>en la plantilla de tu tienda.
Crear diseños #
Dado que Clerk.js 2 tiene un enfoque diferente para los Diseños, necesitas crear nuevos.
Puedes crear tus Diseños Clerk.js 2 rehaciéndolos en el Editor de Diseño, o convirtiendo tus antiguos Diseños de código a Liquid, como se explica en la siguiente guía.
A continuación se describe cómo convertir tus antiguos Diseños de código a Liquid.
Opción Editor de Diseño #
Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
Selecciona un tipo de diseño distinto de Blank y asígnale un nombre. Recomendamos añadir “V2” para que sea obvio que estás usando diseños de Clerk.js 2.
En el Design Editor, haz clic en cualquiera de los elementos existentes como nombre, imagen, botón, etc., para editarlo, o añade nuevos elementos al Diseño.
Haz clic en Publish Design cuando termines y ve a Paso 2 en la guía.
Ve a Recommendations/Search > Elements y cambia tu Clerk Element para usar tu nuevo Diseño, luego haz clic en Update Element.
Esto hará que temporalmente no aparezcan en tu tienda, hasta que hayas insertado Clerk.js 2 como se describe más adelante en esta guía.
Conversión de diseños #
Como Clerk.js 2 utiliza el lenguaje de plantillas Liquid, necesitas convertir los Diseños a este lenguaje.
Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
Selecciona Blank > Code y asígnale un nombre. Recomendamos añadir “V2” para que sea obvio que estás utilizando diseños de Clerk.js 2.
Haz clic en Create Design.
Esto te dará un diseño en blanco con Product HTML y CSS que puedes usar.
Vuelve a la visión general de los diseños y haz clic en Edit Design para tu Diseño Clerk.js 1. Recomendamos hacerlo en una pestaña nueva para que puedas copiar el código fácilmente.
Copia el antiguo Diseño de Clerk.js 1 a tu nuevo Diseño Clerk.js 2.
Notarás que en el nuevo no hay Container Code.
Esto es porque Liquid utiliza for loops para renderizar todos los productos.
Copia tu antiguo Product HTML dentro del for-loop, tu antiguo Container Code alrededor de ello y copia el CSS también.
Convierte el Diseño a la sintaxis de Liquid. La principal diferencia es que los diseños antiguos usaban la sintaxis
{{ formatter attribute }}mientras que la sintaxis de v2 es{{ product.attribute | formatter }}.Revisa todos tus atributos y cámbialos al nuevo formato.
Si usas sentencias
{{#if}}o{{#is}}, también deben convertirse. Usa la sintaxis{% if product.attribute %}{% else %}{% endif %}.Elimina
id="{{ $id }}"y la clase:targetdel código de contenedor en la versión Clerk.js 2 ya que ya no son soportados.A continuación, un ejemplo de un diseño Clerk.js 1 y la versión completamente convertida:
Diseño Clerk.js 1 #
// Product HTML
<li class="clerk-product">
<a href="{{ url }}">
<img src="{{ image }}" />
<div class="clerk-product-name">{{ name }}</div>
<div class="clerk-price-wrapper">
{{#if list_price}}
<div class="clerk-old-price">
<s>Price {{ money_eu list_price }}</s>
</div>
<span class="clerk-new-price">Price {{ money_eu price }}</span>
{{else}}
<div class="clerk-product-price">Price {{ money_eu price }}</div>
{{/if}}
</div>
</a>
<div class="clerk-cta-button btn button">Buy Now</div>
</li>
// Container Code
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>
<!-- Este código crea el slider por su ID. -->
<script type="text/javascript">
Clerk.ui.slider("{{ id }}").init();
</script>
Diseño Clerk.js 2 #
<h2>{{ headline }}</h2>
<ul class="clerk-slider">
{% for product in products %}
<li class="clerk-product">
<a href="{{ product.url }}">
<img src="{{ product.image }}" />
<div class="clerk-product-name">{{ product.name }}</div>
<div class="clerk-price-wrapper">
{% if product.list_price %}
<span class="clerk-old-price"><s>Price {{ product.list_price | money_eu }}</s></span>
<span class="clerk-new-price">Price {{ product.price | money_eu }}</span>
{% else %}
<div class="clerk-product-price">Price {{ product.price | money_eu }}</div>
{% endif %}
</div>
<div class="clerk-cta-button btn button">Buy Now</div>
</a>
</li>
{% endfor %}
</ul>
Haz clic en Update Design para guardar los cambios.
Ve a Recommendations/Search > Elements y cambia tu bloque Element para usar tu nuevo Diseño.
Haz clic en Update Element. 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.
Sustituir el script #
Localiza el archivo plantilla que se usa para mostrar todas las páginas de la tienda y donde se encuentra el script original de Clerk.js cerca de la parte inferior.
Elimina el script antiguo de Clerk.js del archivo. Se verá más o menos así:
<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
window.clerkAsyncInit = function() {
Clerk.config({
key: 'public_api_key'
});
};
(function(){
var e = document.createElement('script'); e.type='text/javascript'; e.async = true;
e.src = document.location.protocol + '//api.clerk.io/static/clerk.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
})();
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
Ve a my.clerk.io > Developers > Clerk.js. Allí encontrarás el código de Clerk.js 2.
Copia este código, insértalo justo antes de la etiqueta
</head>en la plantilla, y guárdalo.
¡Felicidades! ¡Ahora estás funcionando con la versión mejorada de Clerk.js 2!
Puedes consultar la documentación completa de Clerk.js 2 aquí.
Gestión de require.js #
Esta sección solo aplica al usar Clerk.js 1.
En algunas configuraciones, Require.js impide que Clerk.js se cargue, lo cual significa que no aparecerán sliders ni resultados de búsqueda.
Cuando esto pasa, verás el siguiente error 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 has insertado al final de todas las páginas.
Incluir en Require.js #
El mejor método es intentar hacer que Require.js reconozca Clerk.
Inserta require(['clerk'], function() {}); al final del tracking-script.
Ignorar Require.js #
Si la solución anterior no funciona, es posible ignorar Require.js.
Inserta window.__clerk_ignore_requirejs = true; al inicio del tracking-script.
Tras usar uno de estos métodos, Require.js será ahora compatible con Clerk.
Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.