Preguntas frecuentes
¿Tienes problemas con tu integración personalizada? Esta 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 Aplicaciones Web Progresivas (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 librería 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 que usan frameworks como vue.js o next.js, las páginas se renderizan con JavaScript en lugar de una carga de página estándar.
Debido a esto, necesitas controlar la renderización con Clerk.js para que coincida con cómo cargas las páginas en la app.
Incluir Clerk.js #
Clerk.js solo necesita cargarse una vez, cuando el sitio se carga inicialmente.
Después de esto, la librería estará disponible durante toda la sesión.
Inclúyelo justo antes del </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 -->
Controlar la renderización #
Por defecto, Clerk.js renderiza cualquier elemento que tenga la clase clerk, sin importar si se inserta durante la carga inicial de la página o cuando el DOM muta.
Puedes controlar el momento insertando el elemento cuando esté listo para ser renderizado.
Alternativamente, puedes controlar la renderización con la función Clerk("content", "SELECTOR").
Cada vez que se carga una página, sigue estos pasos en orden:
Añade el snippet de Clerk al HTML con un selector único al que puedas dirigir.
Ejecuta
Clerk("content", "SELECTOR")para renderizarlo.
Cuando el visitante abandone la página, destruye el snippet y vuelve a renderizarlo si el visitante regresa a la misma página.
Esto es para asegurarte de que Clerk.js no vea el snippet como previamente renderizado, lo que provocaría que no se visualizara.
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 Elementos automáticamente con tus selectores personalizados después de la primera vez que lo renderices.
Impacto en la velocidad de la página #
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á.
A continuación puedes ver cómo impacta en el rendimiento de tu sitio.
Rendimiento #
La librería Clerk.js solo tiene 37,5kb de tamaño, por lo que se 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 contenido.
El aumento en el tiempo de carga de una página suele deberse a la carga de más imágenes que antes, ya que los resultados de búsqueda y las recomendaciones de Clerk funcionan mejor cuando son visualmente atractivos.
Para minimizar el tiempo de carga extra, recomendamos usar imágenes en formato webp con una resolución que coincida con el tamaño que tienen en los elementos de Clerk.
Por ejemplo, si las imágenes en las recomendaciones tienen una resolución de 400x400px en vista de escritorio, envía imágenes a una resolución máxima de 420x420px o similar.
Google Page Speed #
Si usas Google Page Speed Insights o una herramienta similar para analizar el rendimiento de tu sitio, es posible que veas Clerk.js listado bajo Leverage browser caching.
El propósito de Clerk.js es hacer que sea muy sencillo insertar resultados de Clerk en cualquier sitio web.
Clerk.js contiene muchas funcionalidades para manejar el seguimiento y componentes de UI como Instant Search, sliders, popups y más.
Cuando añadimos nuevas funcionalidades de UI o mejoramos las ya existentes, se incluyen en Clerk.js y deben ser descargadas por el usuario final para poder usarlas.
Tener un vencimiento de caché de 60 minutos significa que cuando lanzamos una nueva funcionalidad estará disponible para todos en un máximo de 60 minutos.
Cuanto mayor sea el tiempo de caché, más tarda en estar disponible para todos las novedades.
Lo importante es que los usuarios solo tienen que descargar Clerk.js una vez cuando hay nuevas funcionalidades disponibles.
El vencimiento de la caché de 60 minutos solo significa que el navegador del usuario final consultará a Clerk cada 60 minutos.
Si no se han hecho cambios en Clerk.js, no se descargará nada.
El tiempo de expiración de caché de 60 minutos es por tanto un compromiso entre minimizar solicitudes web y ver nuevas funcionalidades y mejoras.
La mayoría de las sesiones duran menos de 60 minutos y, por tanto, la solicitud solo se realizará una vez por sesión.
Como puedes ver en la captura, esta es una práctica normal que (además de Clerk) también usan Google Analytics, Facebook, Trustpilot y muchos otros.
Impacto en CLS #
Cumulative Layout Shift (CLS) puede tener un impacto negativo en SEO y experiencia de usuario cuando el contenido inyectado dinámicamente desplaza elementos en una página.
En algunos casos, entre otros factores, Clerk puede contribuir a la puntuación de CLS.
Puedes leer más sobre CLS aquí.
Sigue esta guía solo si tu puntuación de CLS es superior a 0.2 y los elementos de Clerk están por encima del primer pliegue.
Para evitar desplazamientos de contenido, es necesario reservar un espacio para las recomendaciones de Clerk antes de que Clerk.js las inyecte.
Para hacerlo, debes agregar 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%;
}
Realizando llamadas API #
Puedes usar Clerk.js para realizar llamadas API, utilizando la función incorporada Clerk("call").
Esta función recibe 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 API 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 realizas llamadas a la API, puedes utilizar funciones callback para manejar la respuesta como desees.
Las funciones reciben 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 según la plataforma y la funcionalidad puede variar según los plugins que uses.
Dado que los diseños de Clerk consisten en HTML & CSS, normalmente puedes añadir esta funcionalidad si entiendes cómo funciona en tu sitio.
Enfoque general #
Algunos botones de añadir al carrito requieren JavaScript para funcionar.
En estos casos, puedes agregar la funcionalidad al método existente cart de Clerk.
Revisa 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 elemento <div> o un button.
Copia todo el HTML del botón.
Copia y pega este código en tu Diseño.
Ahora necesitas identificar las variables en el código.
La mayoría de las veces, necesitas encontrar dónde el código usa:
ID de producto
Cantidad de producto
Reemplaza los valores para el ID del producto por las variables Liquid para esos puntos de datos.
El ID siempre será {{ product.id }} y la cantidad puede variar según cómo envíes esos 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 de abajo es un <div> con la clase button-container:
La cantidad se encuentra dentro del enlace del carrito después de /cart?add= y el ID de 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 reemplazados por etiquetas Liquid en el Diseño para que los IDs de productos y cantidades adecuadas se usen en el HTML generado.
Con estos cambios, el botón de añadir al carrito final 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.
Haciendo clic en el enlace del error obtendrás más información sobre lo que falló, lo que puedes utilizar para depurar el error tú mismo o para enviarlo a nuestro equipo de soporte, quienes te ayudarán.
A continuación, encontrarás una lista de los errores más comunes.
Contenido desconocido #
Este error aparecerá si el snippet que insertaste referencia un
Element que no existe, en el atributo data-template.
Para solucionarlo, asegúrate de que el nombre en el código incrustado coincide con un bloque Element que hayas creado en my.clerk.io.
Puedes hacer clic en Editar Elemento para cualquier Element para ver cuál debe ser la referencia.
Endpoint API inválido #
Este error ocurre si has usado la clase clerk en tu HTML en algún lugar.
Esta clase está reservada para su uso con nuestros snippets, ya que Clerk.js la usa para identificar los elementos a renderizar.
Para solucionarlo, asegúrate de que nombras la clase de otro modo, como clerk-product.
Argumento de producto inválido #
Este error significa que el ID proporcionado para un producto tiene un tipo o sintaxis incorrecto.
Por ejemplo, si tus IDs de producto son enteros, también deben serlo en el código incrustado.
Además, recuerda los corchetes alrededor del ID, para convertirlo en una lista.
<span
class="clerk"
data-template="@product-page"
data-products="[123]">
</span>
Argumento de categoría inválido #
Este error significa que el ID proporcionado para una categoría tiene un tipo o sintaxis incorrecto.
En la mayoría de los casos ocurre si el placeholder en el código incrustado de la categoría no ha sido reemplazado por un ID real:
<span
class="clerk"
data-template="@category-page"
data-category="INSERT_CATEGORY_ID">
</span>
La salida del código debe 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 copiar el snippet.
Entonces cambiará para incluir la lógica de tu plataforma y seleccionar el ID de categoría correcto.
Si tu plataforma no está listada, debes añadir manualmente la lógica para seleccionar el ID correcto de acuerdo a la funcionalidad de tu tienda online.
Clave API incorrecta #
Este error aparecerá si la clave pública API que has proporcionado no coincide con ninguna cuenta en Clerk.
Para solucionarlo, inicia sesión en 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 seguimiento Clerk.js directamente en el código o en la configuración de tu integración, dependiendo de tu plataforma.
Bloqueo de Iubenda #
Si usas iubenda para el consentimiento de cookies con el bloqueo automático activado, los visitantes que rechacen cookies pueden causar que iubenda bloquee los scripts o solicitudes de Clerk.io.
Esto generalmente 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 en absoluto, o Clerk.js puede iniciar un error en la consola sobre cargas múltiples (porque iubenda reescribe o aplaza los scripts).
Permitir dominios #
Para solucionarlo, añade Clerk.io a la lista de permitidos en iubenda para que sus scripts y solicitudes no sean bloqueados cuando un visitante rechace cookies.
Al menos, añade estos dominios a la lista de permitidos de iubenda:
cdn.clerk.io(Clerk.js)api.clerk.io(solicitudes de seguimiento y ventas)
Las etiquetas exactas de la interfaz varían, pero esta configuración suele encontrarse en la solución de cookies de tu proyecto iubenda, en la configuración de bloqueo automático.
Para la guía propia de iubenda, consulta su artículo sobre qué hacer cuando el modo de bloqueo automático bloquea demasiado.
Verificar la solución #
Después de actualizar la configuración de iubenda:
- Carga la tienda online, rechaza cookies y abre la consola del navegador.
- Confirma que Clerk.js esté disponible —
typeof Clerkno debe devolver"undefined". - Ejecuta
Clerk("debug"), haz un pedido de prueba y confirma que se envía una solicitudsalea Clerk.io y retornastatus: "ok".
Datos de ventas POS/ERP #
Para algunas tiendas online, puede ser relevante subir datos de ventas de otros sistemas distintos de la tienda web.
Por ejemplo, si quieres optimizar el algoritmo en base a ventas de una tienda física o una tienda B2B.
Clerk no diferencia entre pedidos de varias fuentes—mientras puedas proporcionar un ID, un timestamp y una lista de productos comprados, se pueden subir a Clerk.
El enfoque recomendado es usar la CRUD API, lo que te permite automatizar completamente la tarea.
Al implementar estas llamadas API, puedes enviar los datos del pedido directamente a tu Store en Clerk.
Simplemente crea una llamada POST al endpoint /orders en tu sistema ERP o tienda online, ejecuta la tarea regularmente, por ejemplo una vez al mes, y podrás usar pedidos offline para potenciar tus recomendaciones y resultados de búsqueda online.
Alternativamente, puedes subir un archivo CSV manualmente, sin necesidad de programar nada.
Puedes leer más sobre archivos CSV aquí.
Conversión de moneda #
Hay varias formas de trabajar con la conversión de moneda en Clerk.
Una forma sencilla de hacer que funcione se detalla a continuación.
Traducción de monedas #
Si los visitantes usan Google Translate en tu tienda online, los valores de precio pueden traducirse de formas que rompan el formato o cambien la visualización de la moneda.
Para evitar esto, envuelve la salida del precio en elementos que no deben traducirse.
Marcado recomendable #
Usa ambos translate="no" y la clase notranslate en el elemento del precio:
<span class="clerk-price notranslate" translate="no">
{{ product.price | money }}
</span>
Si muestras el precio de lista y el precio en 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>
Dónde aplicarlo #
- En tu Diseño de Clerk donde se rendericen precios.
- En cualquier wrapper HTML personalizado que muestre valores de precio.
Esto mantiene el resto de la página traducible mientras se preserva el formato correcto del precio y la moneda.
Enviar objetos de precios #
Clerk debe conocer los precios de cada producto en las diferentes monedas.
La forma más sencilla es enviarlos como un objeto JSON codificado como cadena de precios formateados, con 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,
// Ejemplos de JSON como cadena
"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,
// Ejemplo de JSON como cadena
"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 se pueden usar en tus Diseños.
Aquí puedes definir una función que reciba tu price-dict como argumento y devuelva el precio para una moneda específica, según la lógica del frontend.
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 por cliente #
Clerk permite mostrar precios distintos según el cliente conectado, ya sea obteniendo precios individuales durante el renderizado o almacenando previamente precios de grupo en los datos del producto.
Esto se cubre en detalle en el artículo dedicado a Customer Pricing.
Autenticación HTTP #
La autenticación HTTP se usa a menudo en sitios de prueba para evitar visitas no deseadas.
Esto, en muchos casos, también bloquea el importador Clerk y normalmente muestra 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í:
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 Clerk #
Si las ventas se rastrean pero ninguna aparece como influenciada por Clerk en analytics, consulta la sección No Clerk Impact del artículo 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 manejar esto:
Condicional en el Diseño de Clerk #
Usa un condicional alrededor del slider para que solo se renderice cuando se devuelvan 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 el slider debe mostrarse. Esto significa que aún consume una llamada a la API aunque el slider no se muestre.
Condicional del lado del servidor #
Si tu plataforma ya conoce el número de productos de la categoría, decide en tu plantilla si debe mostrarse el snippet 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 propia de tu tienda online.
Actualización a Clerk.js 2 #
Clerk.js 2 es una versión más rápida y flexible de nuestra librería JavaScript.
Hace más sencilla la instalación de Clerk en cualquier tienda online.
Sin embargo, como ambas versiones funcionan de manera ligeramente diferente, necesitas seguir estos pasos para actualizar con éxito.
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 Design Editor.
El script debe insertarse justo antes de la etiqueta
</head>en la plantilla de tu tienda online.
Crear diseños #
Como Clerk.js 2 tiene un enfoque diferente en cuanto a Diseños, necesitas crear otros nuevos.
Puedes crear tus Diseños Clerk.js 2 rehaciéndolos en el Design Editor o convirtiendo tus antiguos Diseños de código a Liquid, lo cual explica la guía siguiente.
Abajo, la explicación para convertir tus antiguos Diseños de código a Liquid.
Opción Design Editor #
Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
Selecciona cualquier tipo de diseño que no sea Blank y ponle un nombre. Recomendamos añadir “V2” para que sea evidente que usas 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 al Paso 2 de la guía.
Accede a Recommendations/Search > Elements y cambia tu Clerk Element para que use tu nuevo Diseño, luego haz clic en Update Element.
Esto hará que, de manera temporal, no aparezcan en tu tienda online hasta que hayas insertado Clerk.js 2 como se describe más abajo en esta guía.
Conversión de diseños #
Como Clerk.js 2 usa el lenguaje 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 evidente que usas diseños Clerk.js 2.
Haz clic en Create Design.
Obtendrás un diseño en blanco con el HTML y CSS de Producto que puedes usar.
Vuelve a la vista de diseños y haz clic en Edit Design de tu Diseño de Clerk.js 1. Recomendamos hacerlo en una nueva pestaña para copiar fácilmente el código.
Copia el antiguo Diseño de Clerk.js 1 a tu nuevo Diseño Clerk.js 2.
Notarás que no hay Container Code en el nuevo.
Esto es porque Liquid usa for loops para renderizar todos los productos.
Copia tu antiguo Product HTML dentro del bucle for, tu antiguo Container Code alrededor y copia también el CSS.
Convierte el diseño a la sintaxis de Liquid. La principal diferencia es que los antiguos Diseños usaban la sintaxis
{{ formatter attribute }}mientras que la 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 del contenedor en Clerk.js 2, ya que ya no son soportados.Debajo, un ejemplo de diseño Clerk.js 1 y su 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.
Accede a Recommendations/Search > Elements y cambia tu bloque de Element para que use tu nuevo Diseño.
Haz clic en Update Element. Esto hará que, de manera temporal, no se muestren hasta que termines el Paso 2. Elige el nuevo Diseño para todos los Element que deban ser actualizados.
Reemplazar script #
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 near the bottom.
Elimina el antiguo script de Clerk.js del archivo. Se verá similar a esto:
<!-- 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 > Tracking Code. Ahí encontrarás el código Clerk.js 2.
Copia ese código, insértalo justo antes de la etiqueta
</head>en la plantilla y guárdalo.
¡Felicidades! ¡Ahora tienes funcionando Clerk.js 2 mejorado!
Puedes ver toda la documentación de Clerk.js 2 aquí.
Manejo de require.js #
Esta sección solo aplica al usar Clerk.js 1.
En algunas instalaciones, Require.js impide la carga de Clerk.js, lo que significa que no se mostrarán sliders ni resultados de búsqueda.
Cuando ocurre, verás el siguiente error en tu consola:
Uncaught ReferenceError: Clerk is not defined
Hay dos formas de manejar Require.js. Ambos requieren que realices cambios en el tracking-script que has insertado en la parte inferior de todas las páginas.
Incluir en Require.js #
La mejor manera es tratar de que Require.js reconozca Clerk.
Puedes hacerlo insertando require(['clerk'], function() {}); al final del script de seguimiento:
Ignorar Require.js #
Si lo anterior no funciona, puedes ignorar Require.js.
Hazlo insertando window.__clerk_ignore_requirejs = true; al inicio del script de seguimiento:
Tras usar alguno de estos enfoques, 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.