Recommendations

Clerk.io ofrece más de 23 tipos diferentes de lógicas de productos, lo que te permite mostrar productos completamente automatizados en cualquier página. Este artículo explica cómo comenzar cuando usas una configuración de Clerk.js en SmartWeb Classic.

Para ver todas nuestras Mejores Prácticas, lee este artículo sobre qué Recommendations utilizar.

Configuración del Slider #

Las Recommendations se crean con Elements que referencian a un Design. A continuación, se muestra 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 Design #

Las Recommendations se muestran como un slider por defecto. Esto permite que los clientes vean más productos con menos clics. Puedes usar el Design Editor para configurarlo visualmente, o usar code designs.

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

Design Editor #

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 usar 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.

Code Design #

1. Ve a Recommendations > Designs y haz clic en New Design.
2. Selecciona Other designs > Blank > Code.
3. Asígnale un nombre y haz clic en Create design.
4. Crea un code design desde cero usando Liquid code.

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

Crear Element #

Esto contiene todas las configuraciones usadas para mostrar las Recommendations y hacerlas insertables 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 Element.
3. Asígnale un nombre descriptivo. Recomendamos nombrarlo según la página y la lógica que desees usar. Por ejemplo, “Home Page / Visitor Recommendations”.
4. En Element type, selecciona la lógica de producto que deseas usar desde el menú desplegable. Puedes ver una descripción general de todas las lógicas de producto aquí.
5. En Design selecciona el design que creaste desde el menú desplegable y elige la cantidad de productos que quieres mostrar.
6. Haz clic en Save en la parte superior de la pantalla.

Agregar al sitio web #

Para agregar Clerk Recommendations en tu sitio web, tienes dos opciones: Injection y Embedded code.

1. Abre la pestaña Insert into website.
2. Aquí tienes dos opciones:
   • Usar injection permite insertar el código usando un selector CSS.
   • Usar embedded code permite insertar el código manualmente en tu sitio web.
3. Elige la opción que más te convenga.
4. Para algunas Logics verás el desplegable Choose your platform. Selecciona SmartWeb Classic en esos casos. Esto llenará el embedcode con los shortcodes correctos de SmartWeb Classic.

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

my.clerk.io Setup #

1. Ve a Recommendations > Elements.
2. Selecciona el element que deseas insertar.
3. Abre la pestaña Insert into website.
4. Elige una de las siguientes opciones:
   • Usar injection inserta el código usando un selector CSS.
   • Usar embedded code inserta el código manualmente.
5. Para embedded code en SmartWeb Classic, 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 envuélvelo con {if $field == 'search'}...{else}...{/if} para evitar que se muestre en la página Search.
   • 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 de inicio: inserta en tu plantilla de inicio/bloque CMS.

Páginas #

A continuación, se muestran las páginas específicas donde deberías insertar Recommendations, y qué tipos deberías usar, para seguir nuestras Mejores Prácticas.

Página de inicio #

1. En my.clerk.io, crea 3 Elements con las siguientes lógicas:
   • Visitor Recommendations
   • Bestsellers
   • Hot Products
2. Inserta los embedcodes en la plantilla de inicio/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 desplegable Insert into website > Choose your platform, selecciona SmartWeb Classic y copia el embedcode.
3. Ve a los archivos de tema de SmartWeb Classic y encuentra el archivo que genera tus páginas de categoría. Usualmente es modules > product > product-list.tpl.
4. Inserta el embedcode en algún lugar debajo del título y la descripción. Establece data-category en {$item->Id} y envuélvelo con {if $field == 'search'}...{else}...{/if} para evitar que se muestre en la página Search.

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 Insert into website > Choose your platform desplegable, selecciona SmartWeb Classic para cada uno y copia los embedcodes.
3. En los archivos de tema de SmartWeb Classic, encuentra el archivo que genera tus páginas de producto. Usualmente es modules > product > product-entity.tpl.
4. Inserta los embedcodes en algún lugar 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 desplegable Insert into website > Choose your platform, selecciona SmartWeb Classic y copia el embedcode.
3. Ve a los archivos de tema de SmartWeb Classic y encuentra el archivo que genera tus páginas de carrito. Usualmente es modules > cart > cart.tpl.
4. Inserta el embedcode en algún lugar 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 virtual.