Get Started

Haz que Clerk funcione en tu tienda SmartWeb Classic 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 #

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, lo que te brinda una vista personal 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 necesitas 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 backend 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 la cabecera bajo <head>.

Utiliza INSERT_PUBLIC_API_KEY en el fragmento a continuación 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 el 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 #

Sincronizar los datos conecta tu tienda SmartWeb Classic con Clerk, lo que permite a Clerk acceder a tus productos, pedidos, clientes y otra información de la tienda. Esto permite que Clerk ofrezca 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. Haz clic en el icono de Configuración en el menú lateral de tu tienda y luego en Tracking Code.

2. Copia el Tracking Script

3. Inserta este código en el archivo que genera 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 tus cambios.

Seguimiento de pedidos #

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

2. Inserta el siguiente código de seguimiento de ventas 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 tus cambios.

Múltiples sitios #

Clerk puede integrarse fácilmente en varios sitios que comparten el mismo backend 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 forma, puedes separar productos, ventas, divisas, etc. para hacer un seguimiento de cada sitio.

1. Empieza creando tu tienda principal y sigue la guía de configuración para conectar tu tienda a Clerk y seleccionar los Recommendations y/o Search Results que deseas mostrar en tu tienda online.

2. Cuando hayas terminado la configuración inicial, vuelve 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 el nombre de tu empresa):

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

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

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

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

6. En el backend de tu 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 usando 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.