Recommendations

Clerk.io ofrece más de 23 tipos diferentes de lógicas de producto, lo que hace posible mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo comenzar a utilizar una configuración de Clerk.js en Smartweb.

Para ver nuestras mejores prácticas completas, lee este artículo sobre qué Recommendations utilizar.

Configuración del Slider #

Recommendations se crean con Elements que hacen referencia a un Design. A continuación, la guía básica para configurar un Element.

Al seguir los pasos en my.clerk.io > Settings > Setup Guides se crearán automáticamente los Elements para nuestras mejores prácticas.

Crear un Design #

Recommendations se muestran como un slider por defecto. Esto permite a los clientes ver más productos con menos clics. Puedes utilizar el Editor de Design para configurarlo visualmente, o usar diseños de código.

Un Design puede reutilizarse para cualquier cantidad de elementos de Recommendations que crees.

Editor de Design #

1. Ve a Recommendations > Designs y haz clic en New Design.
2. Elige Product Slider
3. De la lista de plantillas de diseño, elige la que desees utilizar como punto de partida.
4. Asígnale un nombre y haz clic en Create design.
5. Realiza los cambios que desees en el diseño.

Diseño de Código #

1. Ve a Recommendations > Designs y haz clic en New Design.
2. Elige Other designs > Blank > Code.
3. Asígnale un nombre y haz clic en Create design.
4. Crea un diseño de código desde cero utilizando código Liquid.

Si deseas un diseño inicial, revisa la plantilla de Slider más abajo.

Crear Content #

Esto contiene todas las configuraciones usadas para mostrar las Recommendations y hacer que se puedan insertar en tu sitio web. Sigue estos pasos para cada banner de Recommendations que quieras crear.

1. Ve a Recommendations > Elements.
2. Haz clic en New Content.
3. Asígnale un nombre descriptivo. Recomendamos nombrarlo según la página y lógica que quieras usar. Ejemplo: “Home Page / Visitor Recommendations”.
4. En Content type, selecciona la lógica de producto que quieras usar del menú desplegable. Puedes ver una descripción general de todas las lógicas de producto aquí.
5. En Design selecciona el diseño que creaste y elige la cantidad de productos que deseas mostrar.
6. Haz clic en Save en la parte superior de la pantalla.

Agregar al sitio web #

Para añadir Clerk Recommendations en tu sitio web, tienes dos opciones: Inyección y Código incrustado.

1. Abre la pestaña Insert into website.
2. Aquí tienes dos opciones:
   • Utilizar inyección te permite insertar el código usando un selector CSS.
   • Utilizar código incrustado te permite insertar el código manualmente en tu sitio web.
3. Elige la opción que sea más fácil para ti.
4. Para algunas Lógicas verás el menú desplegable Choose your platform. Selecciona Smartweb en esos casos. Esto completará previamente el embedcode con los shortcodes correctos de Smartweb.

Para agregar detalles de sincronización o empezar una sincronización, ve a my.clerk.io > Data > Configuration.

Configuración de my.clerk.io #

1. Ve a Recommendations > Elements.
2. Selecciona el contenido que deseas insertar.
3. Abre la pestaña Insert into website.
4. Elige una de las siguientes opciones:
   • Utilizar inyección inserta el código usando un selector CSS.
   • Utilizar código incrustado inserta el código manualmente.
5. Para el código incrustado en Smartweb, las ubicaciones y nombres de archivo típicos son:
   • Página de producto: modules > product > product-entity.tpl — establece data-products en [{$product->Id}].
   • Página de categoría: modules > product > product-list.tpl — establece data-category en {$item->Id} y envuelve con {if $field == 'search'}...{else}...{/if} para evitar mostrar en la Search Page.
   • Página de carrito: modules > cart > cart.tpl — establece data-products en los IDs de productos del carrito (ver ejemplo en nuestra guía de configuración).
   • Página principal: inserta en tu plantilla principal/bloque CMS.

Páginas #

A continuación se muestran las páginas específicas donde debes insertar Recommendations, y qué tipos debes usar, para seguir nuestras mejores prácticas.

Página principal #

1. En my.clerk.io, crea 3 Elements con las siguientes lógicas:
   • Visitor Recommendations
   • Bestsellers
   • Hot Products
2. Inserta los embedcodes en tu plantilla principal/bloque CMS.

Página de categoría #

1. En my.clerk.io, crea un Element con la lógica Bestsellers In Category.
2. En el menú desplegable Insert into website > Choose your platform, selecciona Smartweb y copia el embedcode.
3. Ve a los archivos de tema de Smartweb y encuentra el archivo que genera tus páginas de categoría. Normalmente es modules > product > product-list.tpl.
4. Inserta el embedcode debajo del título y la descripción. Establece data-category en {$item->Id} y envuelve con {if $field == 'search'}...{else}...{/if} para evitar mostrar en la Search Page.

Página de producto #

1. En my.clerk.io, crea 2 Elements con las siguientes lógicas:
   • Best Alternative Products
   • Best Cross-Sell Products
2. En el menú desplegable Insert into website > Choose your platform selecciona Smartweb para cada uno y copia los embedcodes.
3. En los archivos de tema de Smartweb, encuentra el archivo que genera tus páginas de producto. Normalmente es modules > product > product-entity.tpl.
4. Inserta los embedcodes debajo de la descripción del producto. Establece data-products en [{$product->Id}].

Página de carrito #

1. En my.clerk.io, crea un Element con la lógica Best Cross-Sell Products.
2. En el menú desplegable Insert into website > Choose your platform selecciona Smartweb y copia el embedcode.
3. Ve a los archivos de tema de Smartweb y encuentra el archivo que genera tus páginas de carrito. Normalmente es modules > cart > cart.tpl.
4. Inserta el embedcode debajo de los artículos del carrito y el botón de finalizar compra. Establece data-products en los IDs de productos del carrito.

Después de habilitar las funciones, podrás ver la función RECOMMENDATIONS de Clerk.io en tu tienda online.