Comenzar

Conecta ideal.shop a Clerk.io mediante su integración incorporada y luego configura Search y Recommendations para tu tema. La integración instala Clerk.js y el seguimiento de ventas cuando el seguimiento está habilitado.

Habilitar la integración #

Conecta la tienda Clerk.io correspondiente antes de configurar los Elementos de tu escaparate.

1. En ideal.shop, ve a Indstillinger > Integrationer y abre Clerk.io.
2. En my.clerk.io, abre tu Tienda y ve a Developers > API Keys.
3. Copia la clave API pública en Public API key en ideal.shop.
4. Copia la clave API privada heredada en Private API key.
5. Activa Aktivér tracking y Feed offentligt.
6. Haz clic en Gem.

Verifica que no existan códigos ya instalados de Clerk.js y de seguimiento de ventas antes de añadir algo manualmente. Habilitar la integración nativa junto con una instalación por separado puede causar solicitudes o eventos de venta duplicados.

Configurar productos #

Importa los datos primero para que tus Diseños, filtros y contexto de página utilicen registros reales del webshop.

1. Sigue Sync Data para la importación histórica, límites del feed continuo y comprobaciones de datos.
2. Configura Recommendations con identificadores de página verificados y ubicaciones de destino.
3. Configura Search para tus entradas de escritorio y móviles.
4. Mantén los Elementos en In preview mientras pruebas.

Los selectores, identificadores de módulo, diseños y funciones nativas de JavaScript varían entre temas. Los ejemplos de Fodmagasinet en estas guías muestran cómo examinar un tema; verifica cada valor en tu propio webshop.

Navegación dinámica #

Algunos temas reemplazan el contenido de la página sin recargar por completo. Clerk.io debe detectar el contenido de reemplazo y usar los identificadores actuales.

En my.clerk.io, revisa Settings > Features > SPA Auto Detect Changes. Esto permite que Clerk.js detecte contenido cargado dinámicamente. Prueba la navegación después de activarlo: esa configuración por sí sola no garantiza que todas las actualizaciones de tema funcionen.

Verifica la navegación entre productos, la paginación de categorías, las actualizaciones de la cesta y los botones Atrás/Adelante. Si las recomendaciones desaparecen o usan el identificador de una página anterior, sigue el navigation FAQ.

Verificar configuración #

Utiliza esta lista de comprobación antes de cambiar los Elementos de Preview a Live. Sigue las mejores prácticas generales de Recommendations y Search para elegir experiencias.

• Abre las páginas deseadas con ?clerk_content_mode=preview (o &clerk_content_mode=preview si ya existe una consulta). Revisa el modo después de la paginación o navegación nativa.
• Revisa los diseños de escritorio y móvil: ancho de página nativo, tarjetas legibles, precios claros, imágenes nítidas, flechas del deslizador funcionando y sin desbordamiento horizontal de la página.
• Visita dos productos, categorías y artículos diferentes. Confirma que cada Elemento envía el identificador importado actual.
• Añade, elimina y cambia las cantidades en la cesta de prueba acordada. Confirma que las recomendaciones usan los identificadores de producto actuales y gestionan una cesta vacía.
• Prueba la compra con producto simple, selección de variante obligatoria, productos no disponibles y mensajes de error. Restaura la cesta después.
• Abre, escribe en, cierra y vuelve a abrir Search. Prueba Escape, selección con teclas de dirección, Enter y controles móviles. Al cerrar Search debe mantenerse la página y la posición de desplazamiento.
• Repite la navegación y Atrás/Adelante tras usar Search. Comprueba si faltan Elementos, resultados obsoletos, ubicaciones duplicadas o solicitudes duplicadas desde el mismo Elemento.
• Confirma que Clerk.js se carga mediante la integración nativa y que solo una instalación inicializa la Tienda. Inspecciona las solicitudes de red del navegador y los errores de consola.
• Verifica el seguimiento de ventas contra un pedido de prueba acordado o un pedido completado existente con pruebas de seguimiento. Comprueba el identificador del pedido, identificadores de productos, cantidades, precios y un único evento de venta. Una sincronización de datos exitosa por sí sola no verifica el seguimiento en frontend.
• Abre explícitamente ?clerk_content_mode=live para salir del modo Preview. Quitar solo el parámetro Preview puede mantener activo Preview. Confirma que la experiencia Live planeada es la visible.

Mantén las correcciones temporales fuera de la instalación estándar. Consulta el FAQ para casos límite de feed, tema y navegación.