Get Started

Haz que Clerk funcione en tu tienda Lightspeed en solo unos pocos pasos. Esta guía te guía a través de la conexión de tu tienda, la instalación de scripts de seguimiento y la sincronización de tus datos.

Conectando tu tienda #

Después de seguir estos sencillos pasos, podrás ver tu Live Demo, que te da una visión general personalizada de cómo funcionará Clerk en tu tienda online antes de configurar el resto del sistema.

Agregar tienda #

Después de iniciar sesión en my.clerk.io, lo primero que debes hacer es agregar tu tienda:

1. Escribe el Nombre y el Dominio de tu tienda online.

2. Elige Lightspeed como la Platform y selecciona tu Currency.

3. Haz clic en Add Store.

Instalar scripts de seguimiento #

El script de seguimiento de Clerk utiliza variables Lightspeed Liquid para leer datos de la tienda como la moneda y el contexto del producto. Por esta razón, el script debe colocarse en un archivo del tema donde se procese Liquid.

Seguimiento de visitantes #

1. En tu panel de Lightspeed, ve a Design > Theme Editor > Advanced > Edit Code.

2. Abre layouts > custom.rain.

3. Pega el siguiente script al final del archivo y reemplaza INSERT_PUBLIC_API_KEY con tu Public Key de my.clerk.io > Developers > API Keys.

<!-- Clerk.io Visitor Tracking (Lightspeed) -->
<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',
    formatters: {
      convert_currency: function(price) {
        const rate_raw = '{{ 100 | money }}'.replace(/[^0-9.]/g, '');
        const rate = parseFloat(rate_raw) ? (parseFloat(rate_raw) / 100) : 1;
        return rate * price;
      }
    },
    globals: {
      currency_iso: '{{ shop.currency2.code }}',
      currency_symbol: '{{ shop.currency2.symbol }}'
    }
  });
  // Clerk.js Context
  Clerk('context', {
    product: {% if product.id %}'{{ product.id }}'{% else %}null{% endif %},
    category: {% if collection.category_id %}'{{ collection.category_id }}'{% else %}null{% endif %},
    page: {% if product.id %}null{% else %}{% if collection.category_id %}null{% else %}'{{ template }}'{% endif %}{% endif %}
  });

  {% if page.account.email %}
  Clerk('call', 'log/email', { email: '{{ page.account.email }}' });
  {% endif %}
</script>

4. Haz clic en Save.

Las páginas de carrito y de agradecimiento en Lightspeed usan un archivo de tema separado llamado fixed.rain. Este archivo no hereda scripts de custom.rain, por lo que Clerk.js no se cargará en esas páginas a menos que el script también se agregue allí.

5. Abre layouts > fixed.rain en el mismo Editor de Temas.

6. Pega el mismo script justo antes de la etiqueta de cierre </head>.

7. Haz clic en Save.

Seguimiento de pedidos #

1. En tu panel de Lightspeed, ve a Settings > Website-Settings > Web Extras.

2. Busca la caja Tracking e inserta el código de seguimiento de pedidos de Clerk.

<span
  class="clerk"
  data-api="log/sale"
  data-sale="{{ order.information.number }}"
  data-email="{{ order.customer.email }}"
  data-customer="{{ order.customer.id }}"
  data-products='[{% for product in order.products %}{"id":{{ product.product_id }},"quantity":{{ product.quantity }},"price":{{ product.base_price_incl }}}{% if not loop.last %},{% endif %}{% endfor %}]'>
</span>

3. Haz clic en Save.

Si los pedidos aún no se rastrean #

Algunos temas de Lightspeed no cargan Clerk.js desde custom.rain y fixed.rain durante el proceso de compra. Si Clerk.io ya está agregado en ambos archivos y los pedidos aún no se rastrean, agrega también el script de seguimiento de visitantes en Web Extras.

1. Ve a Settings > Website-Settings > Web Extras y busca la caja Tracking.

2. Pega el visitor tracking script inmediatamente por encima del código de seguimiento de pedidos de Clerk.io.

3. Haz clic en Save.

Usa esta ubicación solo cuando la configuración estándar del archivo de tema no rastree los pedidos. Si esto es necesario depende del tema activo de Lightspeed.

Sincronizar datos #

Sincronizar datos conecta tu tienda Lightspeed con Clerk, permitiendo que Clerk acceda a tus productos, pedidos, clientes y otra información de la tienda. Esto permite a Clerk proporcionar recomendaciones y resultados de búsqueda personalizados basados en los datos reales de tu tienda. Sigue los pasos en la guía de Sync Data para configurar la sincronización de datos.