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 #
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 de Element en esa página.
Sin embargo, para aplicaciones de una sola página que utilizan frameworks como vue.js o next.js, las páginas se renderizan con JavaScript en lugar de mediante una carga de página estándar.
Por ello, necesitas controlar el renderizado con Clerk.js para que coincida con la forma en que cargas las páginas en la app.
Incluir Clerk.js #
Clerk.js solo necesita cargarse una vez, cuando se carga inicialmente el sitio.
Después de esto, la biblioteca 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 el renderizado #
Por defecto, Clerk.js renderiza cualquier elemento que tenga la clase clerk, sin importar si es insertado durante la carga inicial de la página o cuando el DOM muta.
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 snippet de Clerk al HTML con un selector único que puedas seleccionar.
Ejecuta
Clerk("content", "SELECTOR")para renderizarlo.
Cuando el visitante abandone la página, destruye el snippet y vuelve a renderizarlo si regresa a la misma página.
Esto es para asegurarse de que Clerk.js no vea el snippet como previamente renderizado, provocando que no se visualice.
Ejemplo:
<span
id="clerk-custom-snippet"
data-template="@home-page-visitor-recommendations">
</span>
<script>
Clerk("content", "#clerk-custom-snippet")
</script>
Clerk.js también se puede configurar para inicializar automáticamente los Elements con tus selectores personalizados después de la primera vez que los 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 a la carga de la página.
Rendimiento #
La biblioteca Clerk.js solo pesa 37.5kb, por lo que se carga muy rápidamente.
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 cargar más imágenes que antes, ya que los resultados de Search y Recommendations de Clerk funcionan mejor cuando son visualmente atractivos.
Para minimizar el tiempo de carga adicional, recomendamos usar imágenes en formato webp cuya resolución coincida con el tamaño que tienen en los elements de Clerk.
Por ejemplo, si las imágenes en Recommendations 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 usas Google Page Speed Insights o una herramienta similar para analizar el rendimiento de tu sitio, puede que veas Clerk.js listado bajo Leverage browser caching.
El propósito de Clerk.js es hacer muy sencillo insertar resultados de Clerk en cualquier sitio web.
Clerk.js contiene muchas funciones para gestionar el seguimiento y componentes de UI como Instant Search, sliders, popups y más.
Cuando añadimos nuevas funciones UI o mejoramos las existentes, se incluyen en Clerk.js y deben descargarse por el usuario final para poder usarlas.
Tener un vencimiento de caché de 60 minutos significa que, cuando lanzamos nuevas funciones, estarán disponibles para todos en un máximo de 60 minutos.
Cuanto más largo el tiempo de caché, más tarda en estar disponible la última versión para todos.
Lo importante es que los usuarios finales solo tienen que descargar Clerk.js una vez cuando las nuevas funciones están disponibles.
El vencimiento de caché de 60 minutos solo significa que el navegador del usuario comprobará con Clerk cada 60 minutos.
Si no se han realizado cambios en Clerk.js, no se descargará nada.
El tiempo de vencimiento de caché de 60 minutos es así un compromiso entre minimizar las peticiones web y ver funciones nuevas y mejoras.
La mayoría de las sesiones duran menos de 60 minutos, por lo que la petición solo se hará una vez por sesión.
Este tipo de vencimiento de caché es normal y también lo usan servicios como Google Analytics, Facebook, y Trustpilot.
Impacto CLS #
El Cumulative Layout Shift (CLS) puede afectar negativamente al SEO y a la experiencia de usuario cuando el 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 puntuación CLS es superior a 0.2 y los elements de Clerk están above the fold.
Para evitar el desplazamiento del contenido, hay que reservar un espacio para las recomendaciones de Clerk antes de que Clerk.js las 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; /* Ajustar según la altura esperada del contenido */
width: 100%;
}
Realizar llamadas a la API #
Puedes usar Clerk.js para hacer llamadas a la API, usando la función incorporada Clerk("call").
Esta función toma 3 argumentos:
Un endpoint de la API
Un diccionario JSON de parámetros
Una función callback para manejar la respuesta
Solicitudes #
A continuación, un script de ejemplo que solicita los 10 productos más populares y registra la respuesta en la consola.
La respuesta contiene un objeto de JavaScript con el estado de la llamada a la 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 realices llamadas a la 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.
Debajo hay 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 = 'Categorias Relacionadas';
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 cambiar dependiendo de los plugins que uses.
Debido a que los diseños de Clerk consisten en HTML & CSS, normalmente puedes agregar esta funcionalidad si entiendes cómo funciona en tu sitio.
Enfoque general #
Algunos botones de añadir al carrito requieren que se ejecute JavaScript para que funcionen.
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 será normalmente un elemento <div> o un elemento button.
Copia todo el HTML del botón.
Copia y pega este código en tu Design.
Ahora necesitas identificar las variables en el código.
La mayoría de las veces, necesitas encontrar dónde usa el código:
ID del producto
Cantidad del producto
Reemplaza los valores del ID de producto con las variables Liquid para esos datos.
El ID será siempre {{ product.id }} y la cantidad variará según cómo estés enviando los datos.
En este ejemplo podría ser {{ product.qty }}.
Pega tu código en el HTML de tu Design 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 después de &id_product=.
El ID de producto también se hace referencia en data-id-product, y la cantidad en .data-minimal_quantity.
Estos valores deben ser sustituidos por etiquetas Liquid en el Design para que se usen los IDs y cantidades correspondientes en la salida HTML.
Con estos cambios, el botón 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 usar para depurar problemas.
Al hacer clic en el enlace de error, obtendrás más información sobre lo que salió mal, que puedes usar para depurarlo tú mismo o enviar a nuestro equipo de soporte, que te ayudará.
A continuación se muestra una lista de los errores más comunes.
Contenido desconocido #
Este error aparece si el snippet insertado 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 incrustado coincida con un bloque Element que hayas creado en my.clerk.io.
Puedes hacer clic en Edit Element de cualquier Element para ver cuál debería ser la referencia.
Endpoint de API inválido #
Este error ocurre si has usado la clase clerk en tu HTML en alguna parte.
Esta clase está reservada para su uso con nuestros snippets, ya que Clerk.js usa esta clase para identificar los elementos a renderizar.
Para solucionarlo, asegúrate de que nombres la clase de otra manera, como clerk-product.
Argumento de producto invá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 también deben serlo en el código incrustado.
Además, recuerda los corchetes alrededor del ID, para hacerlo 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 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 incrustado de la categoría no se ha 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 para seleccionar el ID de categoría correcto.
Si tu plataforma no está listada, deberás añadir manualmente la lógica para seleccionar el ID de categoría correcto en función de la funcionalidad de tu tienda online.
Clave API incorrecta #
Este error aparecerá si la clave API pública proporcionada 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 podrás añadir a tu script de seguimiento de Clerk.js, ya sea directamente en el código o en la configuración de tu integración, según tu plataforma.
Bloqueo por Iubenda #
Si usas iubenda para consentimiento de cookies con el bloqueo automático activado, los visitantes que rechacen las cookies pueden hacer que iubenda bloquee los scripts o solicitudes de Clerk.io.
Esto normalmente tiene dos consecuencias:
- 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 registrar un error de consola sobre haberse cargado varias veces (porque iubenda reescribe o difiere scripts).
Permitir dominios #
Para solucionar esto, añade Clerk.io a la lista blanca en iubenda para que sus scripts y solicitudes no se bloqueen cuando un visitante rechaza las cookies.
Como mínimo, añade estos dominios a la lista blanca de iubenda:
cdn.clerk.io(Clerk.js)api.clerk.io(solicitudes de seguimiento y ventas)
Las etiquetas de la interfaz pueden variar, pero esta configuración suele encontrarse en los ajustes de Cookie Solution para Automatic blocking de tu proyecto iubenda.
Para la guía propia 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 los ajustes de iubenda:
- Carga la tienda online, rechaza las 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 se envía una solicitudsalea Clerk.io y retornastatus: "ok".
Datos de ventas de POS/ERP #
Para algunas tiendas, puede ser relevante subir datos de ventas de otros sistemas aparte de la tienda online.
Por ejemplo, si deseas optimizar el algoritmo en base a ventas en una tienda física o tienda B2B.
Clerk no diferencia entre pedidos de diversas fuentes: mientras puedas proporcionar un ID, timestamp y una lista de productos comprados, pueden subirse a Clerk.
La opción recomendada es usar la CRUD API, ya que permite automatizar totalmente la tarea.
Implementando estas llamadas podrás enviar datos de pedidos directamente a tu Store en Clerk.
Simplemente crea una llamada POST al endpoint /orders en tu sistema ERP o tienda, ejecuta el trabajo de forma periódica (ej. una vez al mes), y podrás usar pedidos offline para potenciar tus recomendaciones y resultados de Search 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 múltiples formas de trabajar con conversión de moneda en Clerk.
A continuación se expone una forma simple de hacerla funcionar.
Traducir monedas #
Si los visitantes usan Google Translate en tu tienda, 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 de precios en elementos que no deban ser traducidos.
Marcado 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 precio de lista y precio en oferta, aplica el mismo patrón a cada valor:
<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 ubicaciones #
- En tu Clerk Design donde se renderizan los precios.
- En cualquier contenedor HTML personalizado que muestre valores de precio.
Esto mantiene el resto de la página traducible mientras se preserva el formato correcto de precio y moneda.
Enviar objetos de precio #
Clerk necesita conocer los precios de cada producto en las distintas monedas.
La forma más sencilla de hacerlo es enviándolos 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 con tus Designs.
Aquí puedes definir una función que toma tu price-dict como argumento y retorna el precio para una moneda específica, según la lógica del frontend de tu elección.
Asegúrate de reemplazar currency con la moneda seleccionada actualmente desde 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, puede usarse en tu design con la siguiente sintaxis:
<div class="price">
<span class="price">
{{ product.prices_formatted | currency_selector }}
</span>
</div>
Precios específicos por cliente #
Clerk soporta mostrar diferentes precios según el cliente conectado, ya sea obteniendo precios individuales en el momento de renderizado o almacenando previamente precios de grupo en los datos de producto.
Esto se explica en detalle en el artículo dedicado Customer Pricing.
Autenticación HTTP #
La autenticación HTTP se usa a menudo en sitios de pruebas para evitar visitantes no deseados.
Esto, en muchos casos, también bloquea el importador de Clerk y normalmente muestra un error 401 Unauthorized en el log de sincronización.
Puedes solucionarlo insertando los datos 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
No se rastrean pedidos #
Para una guía completa sobre cómo funciona el rastreo 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 están rastreando pero ninguna aparece como influenciada por Clerk en la analítica, 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 formas de gestionar esto:
Condicional en Clerk Design #
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 el slider debe mostrarse. Esto significa que igualmente consume una llamada a la API, aunque el slider no se muestre.
Condicional en el servidor #
Si tu plataforma ya conoce el número de productos de la categoría, decide en tu plantilla si debes o no mostrar el código embebido 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 totalmente alineado con la lógica de cantidad de productos por categoría de tu tienda.
Actualizar a Clerk.js 2 #
Clerk.js 2 es una versión más rápida y flexible de nuestra biblioteca JavaScript.
Hace que instalar Clerk en cualquier tienda online sea más fácil.
Sin embargo, como las dos versiones funcionan de manera un poco distinta, debes seguir estos pasos para actualizar con éxito.
Las dos principales diferencias en Clerk.js 2 son:
Los Designs en my.clerk.io usan Liquid, pero 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.
Crear diseños #
Como Clerk.js 2 utiliza un método distinto para los Designs, debes crear nuevos.
Puedes crear tus Designs de Clerk.js 2 rehaciéndolos en el Design Editor, o convirtiendo tus antiguos Code Designs a Liquid, lo cual se explica a continuación.
A continuación una guía para convertir tus antiguos Code Designs a Liquid.
Opción Design Editor #
Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
Selecciona un tipo de design distinto a Blank y ponle un nombre. Recomendamos añadir “V2” para que quede claro que usas designs de Clerk.js 2.
En el Design Editor, haz clic en cualquiera de los elementos existentes como el nombre, imagen, botón, etc., para editarlos o añadir nuevos elementos al Design.
Haz clic en Publish Design cuando hayas terminado y pasa a Paso 2 de la guía.
Ve a Recommendations/Search > Elements, cambia tu Clerk Element para usar tu nuevo Design y haz clic en Update Element.
Esto hará que temporalmente no se muestren en tu tienda hasta que insertes Clerk.js 2 como se explica más abajo.
Convertir diseños #
Como Clerk.js 2 utiliza el lenguaje de plantillas Liquid, necesitas convertir los Designs a este lenguaje.
Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
Selecciona Blank > Code y ponle un nombre. Recomendamos añadir “V2” para distinguir los designs de Clerk.js 2.
Haz clic en Create Design.
Obtendrás un diseño en blanco con HTML y CSS de producto que puedes usar.
Vuelve a la lista de diseños y haz clic en Edit Design en tu Design de Clerk.js 1. Recomiendo abrirlo en otra pestaña para copiar fácilmente el código.
Copia el antiguo Design de Clerk.js 1 en el nuevo Design de 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 for-loop, tu antiguo Container Code alrededor y copia el CSS también.
Convierte el Design a la sintaxis de Liquid. La principal diferencia es que los antiguos Designs usaban la sintaxis
{{ formatter attribute }}mientras que la de v2 es{{ product.attribute | formatter }}.Repasa 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 container code en la versión de Clerk.js 2, ya que ya no se soportan.A continuación un ejemplo de un diseño Clerk.js 1 y su versión totalmente convertida:
Design 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>
<!-- This code creates the slider by its ID. -->
<script type="text/javascript">
Clerk.ui.slider("{{ id }}").init();
</script>
Design 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 Design.
Haz clic en Update Element. Esto hará que temporalmente no se muestren en tu tienda hasta que termines el Paso 2. Elige el nuevo Design en todos los Elements que deban actualizarse.
Reemplaza el script #
Localiza el archivo de plantilla usado para mostrar todas las páginas de la tienda, donde suele hallarse el script original de Clerk.js cerca del final.
Elimina el antiguo script de Clerk.js del archivo. Su aspecto será similar a este:
<!-- 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. Allí se encuentra el código de Clerk.js 2.
Copia ese código, insértalo justo antes de la etiqueta
</head>en la plantilla y guárdalo.
¡Enhorabuena! ¡Ahora tienes Clerk.js 2 funcionando en tu tienda, con muchas mejoras!
Puedes ver 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 algunos entornos, Require.js impide que Clerk.js se cargue, lo que significa que no se muestran sliders ni resultados de Search.
Cuando esto sucede, el siguiente error aparece en consola:
Uncaught ReferenceError: Clerk is not defined
Hay dos formas de gestionar Require.js. Ambas requieren cambios en el tracking-script que has insertado al final de todas las páginas.
Incluir en Require.js #
La mejor opción es intentar que Require.js reconozca Clerk.
Añade require(['clerk'], function() {}); al final del tracking script.
Ignorar Require.js #
Si la solución anterior no funciona, es posible ignorar Require.js.
Añade window.__clerk_ignore_requirejs = true; al principio del tracking script.
Tras usar cualquiera de estos enfoques, Require.js será 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.