Componente de recomendaciones de productos
El componente de recomendaciones de productos se encuentra dentro del Editor Creativo de Fanplayr.
Ejemplos
.Cq3T80KX.png)
Ejemplo del componente de recomendaciones.
.Bc6qDc-r.png)
El icono del componente de recomendaciones.
Conceptos
Conceptos de alto nivel relacionados con este componente:
- Muestra una lista de productos en una cuadrícula
El número de productos mostrados se basa en la cantidad de espacio disponible y el tamaño de la plantilla de producto definida. - Plantilla de producto
El estilo de los elementos en la lista está controlado por la plantilla de producto. Esto permite a los usuarios diseñar el tamaño general de un producto, así como su imagen, texto y llamada a la acción. - Navegación de la lista
Las flechas de navegación izquierda y derecha aparecerán si hay más productos para mostrar. - Clic en productos
Cuando un usuario hace clic en un producto, su navegador navega a la página de producto correspondiente. Esta acción también se rastrea en Insights. - La presentación del widget depende de este componente
Cuando se utiliza un componente de recomendaciones en un widget, el widget esperará a que el servicio devuelva las recomendaciones de productos antes de mostrar el widget.
La estructura del componente y el diseño de la cuadrícula de la plantilla de producto.
La estructura y el diseño de la Plantilla de Producto
Propiedades generales
Estas propiedades controlan qué modelo de IA de recomendación se utiliza y cuántos productos se solicitan al servicio de recomendaciones.
Tipo de recomendación
- Tipo: Modelo de IA de recomendación
El modelo de IA de recomendación a utilizar:
Modelos generales:
- Comprados Juntos Frecuentemente
- Otros que te Podrían Gustar
- Recomendado para Ti
- Vistos Recientemente
Modelos de clasificación de productos:
- Clasificados por Vistas
- Clasificados por Carritos
- Clasificados por Compras
- Clasificados por Ingresos
Nota: Solo los modelos que estén habilitados en su cuenta y hayan completado el entrenamiento estarán disponibles para su selección.
Productos mínimos
- Tipo: Entero
El número mínimo de productos requeridos. Esto se puede usar para asegurar que al menos un cierto número de productos estén disponibles para renderizar desde el modelo de IA de recomendación. Si el servicio de recomendaciones no puede devolver suficientes productos, el widget no se renderizará.
INFO
Para los modelos de IA que no sean Vistos Recientemente, recomendamos usar un mínimo de 5 o más productos para asegurar que haya suficiente contenido atractivo para los usuarios.
Productos máximos
- Tipo: Entero
El número máximo de productos a solicitar al servicio.
Este valor es solo un número sugerido de productos para que el servicio los consulte y no hay garantía de que se devuelva este número máximo de productos. Sugerimos mantener el número máximo por debajo de 30 para reducir los tiempos de respuesta de la consulta.
Número de días
- Tipo: Entero
- Se aplica a: Solo a recomendaciones de clasificación de productos
El número de días de historial a usar al consultar los productos mejor clasificados, a partir de hoy. Los valores válidos están entre 1 y 30, donde "1" consultará hasta las últimas 24 horas de datos y "2" consultará hasta las últimas 48 horas de datos, etc.
Precio inicial
- Tipo: Entero
- Se aplica a: Solo a recomendaciones de clasificación de productos
Limita los resultados a solo productos cuyo precio sea mayor o igual al precio inicial. Deje en blanco para no establecer límite.
Precio final
- Tipo: Entero
- Se aplica a: Solo a recomendaciones de clasificación de productos
Limita los resultados a solo productos cuyo precio sea menor o igual al precio final. Deje en blanco para no establecer límite.
Categoría
- Tipo: Texto
- Se aplica a: Solo a recomendaciones de clasificación de productos
Limita los resultados a solo productos con el nombre de categoría especificado. Esto también se puede configurar para usar la categoría de la página actual.
Propiedades del producto
Estas propiedades se refieren a las dimensiones generales de un producto.
Ancho
- Tipo: Dimensión (píxeles)
El ancho de un solo producto.
El componente utilizará su ancho total y el ancho del producto para determinar cuántos productos se pueden renderizar visiblemente a la vez. Cualquier producto restante se ocultará y se mostrarán botones de flecha al usuario para navegar por la lista.
Por ejemplo, si el componente tiene 800px de ancho y el producto tiene 150px de ancho, entonces se pueden mostrar hasta 5 productos a la vez.
Alto
- Tipo: Dimensión (píxeles)
El alto de un solo producto.
El componente utilizará su alto total y el alto del producto para determinar cuántas filas de productos se pueden mostrar.
Por ejemplo, si el componente tiene 500px de alto y el producto tiene 200px de alto, entonces se pueden mostrar hasta 2 filas de productos si es necesario.
Espacio entre elementos
- Tipo: Dimensión (píxeles)
La cantidad mínima de espacio para rodear cada producto. Esto se usa para agregar separación entre productos adyacentes en la lista o filas.
Borde
- Tipo: Borde
Estilo de borde estándar.
Radio del borde
- Tipo: Radio del borde
Estilo de radio del borde estándar.
Fondo
- Tipo: Color
El color de fondo del producto.
Relleno horizontal (X-Padding)
- Tipo: Dimensión (píxeles)
Agrega espaciado horizontal a los bordes del componente, lo que se utiliza para empujar la cuadrícula de productos hacia el centro.
Propiedades de la imagen
Alto
- Tipo: Dimensión (píxeles)
El alto de la imagen.
La imagen siempre ocupará todo el ancho del producto, pero el alto de la imagen es ajustable.
Fondo
- Tipo: Color
El color de fondo a usar para cualquier parte transparente de la imagen del producto.
Tamaño del fondo
- Tipo: Tamaño del fondo
Estilo de tamaño de fondo estándar. Controla si la imagen se escala para ocupar todo el espacio disponible (potencialmente recortando parte de la imagen) o se reduce para asegurar que toda la imagen sea visible.
Propiedades de la descripción
Texto
- Tipo: Texto enriquecido
Elemento de texto que permite opciones de personalización enriquecidas. Admite las siguientes variables que se pueden agregar usando la acción Insertar Variable:
{{ productRec.name }}- El nombre actual del producto.{{ productRec.price }}- El precio actual del producto, incluyendo el símbolo de la moneda.{{ productRec.url }}- La URL actual del producto.{{ productRec.rank }}- El rango actual del producto. Ej. 1, 2, 3.
Demostración de cómo agregar variables de producto al componente.
Margen
- Tipo: Margen
Espaciado para agregar en el exterior del área de texto. Esto agrega espacio entre la imagen y el botón.
Propiedades del botón
Mostrar
- Tipo: Booleano
Si mostrar u ocultar el botón de llamada a la acción.
Margen
- Tipo: Margen
Espaciado para agregar en el exterior del botón. Esto agrega espaciado con respecto al texto del producto que está encima del botón.
Relleno
- Tipo: Relleno
Espaciado para agregar en el interior del botón.
Borde
- Tipo: Borde
Estilo de borde estándar.
Radio del borde
- Tipo: Radio del borde
Estilo de radio del borde estándar.
Texto
- Tipo: Texto enriquecido
Texto del botón. Admite las mismas variables que el Texto de descripción.
Color del texto
- Tipo: Color
Color del texto del botón.
Fondo
- Tipo: Color
Color de fondo del botón.
Propiedades del botón de navegación
Estos botones aparecen en el lado izquierdo y derecho del componente cuando hay más productos para mostrar de los que se pueden visualizar visiblemente.
La estructura del botón de navegación (se muestra el botón derecho).
Borde
- Tipo: Borde
Estilo de borde estándar.
Radio del borde
- Tipo: Radio del borde
Estilo de radio del borde estándar. (Sugerencia: Establezca el radio en 50% para hacer que el botón sea un círculo)
Relleno
- Tipo: Relleno
Espaciado para agregar en el interior del botón.
Desplazamiento X
- Tipo: Dimensión (píxeles)
Espaciado horizontal para agregar entre el botón de navegación y el borde del componente.
Fondo
- Tipo: Color
Color de fondo del botón.
Tamaño de la flecha
- Tipo: Dimensión (píxeles)
El tamaño general de la flecha.
Ancho de la flecha
- Tipo: Dimensión (píxeles)
El grosor de la flecha.
Color de la flecha
- Tipo: Color
El color de la flecha.