Get Started

Pon Clerk en funcionamiento en tu tienda SmartWeb Classic en solo unos pocos pasos. Esta guía te lleva 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 #

El primer paso para instalar Clerk es conectar tu tienda con tu cuenta de Clerk.

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

Añadir tienda #

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

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

2. Elige SmartWeb como la Plataforma y selecciona tu Moneda.

3. Haz clic en Add Store.

Instalar el seguimiento de visitantes #

1. En tu panel de administración de SmartWeb Classic, ve a Kontrolpanel > Design Manager > Rediger design.

2. Haz clic en Indsæt Javascript y pega el script de seguimiento de visitantes de Clerk. Luego haz clic en Gem.

3. Asegúrate de que el script esté insertado en el encabezado bajo <head>.

Utiliza INSERT_PUBLIC_API_KEY en el siguiente fragmento y reemplázalo con tu Public Key de my.clerk.io > Developers > API Keys.

<!-- Clerk.io Visitor Tracking (SmartWeb Classic) -->
<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>

Instalar seguimiento de pedidos #

1. En SmartWeb Classic, ve a Kontrolpanel > Design Manager > Rediger filer > Modules > Checkout.

2. Abre checkout-approved.tpl y añade el código de seguimiento de ventas al final del archivo.

<span
  class="clerk"
  data-api="log/sale"
  data-sale="{$page.orderId}"
  data-email="{$orderCustomer->Email}"
  data-customer="{$user->Id}"
  data-products='[{$products}]'>
</span>

Sincronizar datos #

La sincronización de datos conecta tu tienda SmartWeb Classic con Clerk, permitiendo que Clerk acceda a tus productos, pedidos, clientes y otra información de la tienda. Esto permite que Clerk proporcione recomendaciones personalizadas y resultados de búsqueda basados en los datos reales de tu tienda. Sigue los pasos en la guía de Sincronización de Datos para configurar la sincronización de datos.

Añadiendo Clerk.js #

1. En my.clerk.io, abre Developers > Clerk.js.

2. Copia el Tracking Script

3. Inserta este código en el archivo que genere todas las páginas.

   Normalmente es Kontrolpanel->Design Manager-> Rediger filer->index.tpl

4. Haz clic en Gem en la parte superior de la página para guardar los cambios.

Seguimiento de pedidos #

1. En el administrador de SmartWeb Classic, ve a Modules → Checkout → checkout-approved.tpl

2. Inserta el siguiente Sales-Tracking code al final del archivo, justo antes de la etiqueta de cierre </div>.

   {% raw %}{if !empty($page.orderId)}
    {entity controller=order assign=order id=$page.orderId userId=false statusId=false}

    {* Order Customer entity *}
    {entity controller=orderCustomer assign=orderCustomer orderId=$page.orderId}

    {* Order Lines collection *}
    {collection controller=orderLine assign=orderLines orderId=$page.orderId repay=false}

    {* Group order collection by class *}
    {$orderList = $orderLines->groupByClass()}

    {assign var=products value=''}

    {if $orderLines->getActualSize() gt 0}
        {if isset($orderList['CollectionOrderLine'])}
            {foreach $orderList.CollectionOrderLine as $orderLine}
                {$products = $products|cat:{ldelim}|cat:' "id": '|cat:$orderLine->ProductId|cat:', "quantity": '|cat:$orderLine->Amount|cat:', "price": '|cat:$orderLine->Price|cat:{rdelim}}

                {if !$orderLine@last}
                    {$products = $products|cat:', '}
                {/if}
            {/foreach}
        {/if}
    {/if}

    <span
        class="clerk"
        data-api="log/sale"
        data-sale="{$page.orderId}"
        data-email="{$orderCustomer->Email}"
        data-customer="{$user->Id}"
        data-products='[{$products}]'>
    </span>
   {/if}{% endraw %}

3. Haz clic en Gem para guardar los cambios.

Múltiples sitios #

Clerk puede integrarse fácilmente en varios sitios que comparten el mismo backend de SmartWeb Classic / Hostedshop.

La forma más sencilla de implementar Clerk en varios sitios en configuraciones estándar es creando una tienda separada para cada sitio en my.clerk.io.

De esta manera, puedes separar productos, ventas, monedas, etc., para llevar un control de cada sitio.

1. Comienza creando tu tienda principal y sigue la Guía de Configuración para conectar tu tienda a Clerk y elegir las Recommendations y/o Search Results que deseas mostrar en tu tienda online.

2. Cuando termines la configuración inicial, regresa a la página de inicio de my.clerk.io (haciendo clic en el logo de Clerk en la esquina superior izquierda del menú lateral) y luego haz clic en "+ Add new store", la última opción de la lista desplegable (generalmente debajo de la(s) tienda(s) existente(s) y del nombre de tu empresa):

3. En la página Add New Store, haz clic en Advanced para ver todas las configuraciones.

4. Rellena los detalles de tu tienda online, y selecciona tu tienda principal en el desplegable Copy Elements From Existing Store, luego haz clic en Add Store.

Esto copiará los Elements y Designs de tu tienda principal.

5. Ahora puedes seguir nuevamente la Guía de Configuración, para activar Clerk haciendo clic en Getting Started, para Sync Data para el nuevo sitio.

6. En tu panel de administración SmartWeb Classic, cambia al sitio que deseas configurar.

7. Esto te permitirá activar Clerk en el sitio a través de la Guía de Configuración en my.clerk.io.

8. Cuando termine la Data Sync, tu sitio estará listo y usará la misma configuración que tu tienda principal.

Recuerda traducir los Headlines, en Element-> Edit -> Select Design al idioma correcto también.

Puedes seguir este proceso para todos los sitios con los que quieras usar Clerk.