Edición de Personal Shopper

Introducción

Figura 1: Editor de Personal Shopper

Al hacer clic en "Crear" o "Editar" en uno de sus Personal Shoppers, verá un editor de página completa (Figure 1). El editor se compone de cuatro secciones principales:

• Barra de navegación superior — Controles básicos de todo el editor
• Barra lateral de secciones — Lista de todas las secciones del shopper para facilitar la navegación
• Área de previsualización — Vista del estado actual del shopper
• Barra lateral de configuración — Contiene todas las opciones de configuración y personalización del shopper

Barra de Navegación Superior

Figura 2: Barra de navegación superior

La barra de navegación superior contiene todos los controles de todo el editor para el editor de Personal Shopper (Figure 2):

1. El botón Atrás cierra el editor.
2. La insignia de estado indica si la versión del Personal Shopper que está editando está "Publicada" o en estado de "Borrador".
3. El selector de previsualización alterna entre el modo de "previsualización" y el modo de "selección". En el modo preview, podrá interactuar con el Personal Shopper como lo haría en su sitio. En el modo selection, al hacer clic en el Personal Shopper, seleccionará componentes.
4. El selector de punto de interrupción cambia el área de previsualización entre tres tamaños diferentes: escritorio, móvil y pantalla completa.
5. Botones de deshacer y rehacer
6. Acciones principales del editor. "Previsualizar" inicia la funcionalidad Vista Previa en Vivo. "Publicar" guardará y publicará la versión de trabajo actual del Personal Shopper en su sitio. "Guardar" guardará la versión de trabajo actual del Personal Shopper pero no actualizará la versión en vivo en su sitio.

Vista Previa en Vivo

Al hacer clic en el botón "Previsualizar" en la barra de navegación superior, accederá a la función "Vista Previa en Vivo" del editor de Personal Shopper.

Figura 3: Vista Previa en Vivo

La Vista Previa en Vivo le permite ver la versión del shopper de Personal Shopper que está editando en vivo en su sitio sin tener que Publicar. Para usar esta función, la versión de trabajo del Personal Shopper debe estar guardada.

Para usar la Vista Previa en Vivo, deberá ingresar una URL y un Selector de Inserción. La URL debe estar en un dominio donde tenga el script de Fanplayr Targeting en ejecución. Por defecto, la URL será la misma que la "URL de Inserción" definida en la Configuración General.

También deberá agregar un Selector de Inserción que se utiliza para apuntar a un elemento en la página en el que agregar el Personal Shopper. El sistema generará y mostrará una URL; haga clic y previsualice el Personal Shopper.

Previsualizar el Personal Shopper le permite ver cómo se vería el shopper en su sitio antes de ponerlo a disposición de todos sus usuarios. Esto le permite ajustar la apariencia del Personal Shopper antes de Publicar.

Barra Lateral de Secciones

Figura 4: Barra Lateral de Secciones

En el lado izquierdo del editor se encuentra la Barra Lateral de Secciones. Esto proporciona una fácil navegación entre las secciones del editor. Haga clic en cada sección para desplazar automáticamente el área de previsualización a la sección específica y editar la configuración del componente. Puede hacer clic en el lado izquierdo de cada sección y arrastrarla hacia arriba o hacia abajo para moverla dentro del shopper.

En la parte superior de la barra lateral hay un enlace a la "Configuración General". Al hacer clic en esto, podrá editar algunas configuraciones genéricas para el shopper. Consulte Barra Lateral de Configuración para obtener más información.

Añadir una Sección

Haga clic en el botón "Añadir Sección" en la barra lateral para seleccionar un nuevo componente para añadir a su shopper.

Figura 5: Ventana emergente Añadir Sección

Seleccione un componente de esta lista y haga clic en "Añadir" para agregar una nueva sección al final de su Personal Shopper.

Ver Errores / Problemas

En la parte inferior de la Barra Lateral de Secciones hay un indicador que muestra cuántos problemas que pueden impedir la publicación están presentes en su Personal Shopper. Al hacer clic en el indicador, se mostrará más información sobre cualquier problema y cómo resolverlos.

Área de Previsualización

Figura 6: Área de Previsualización del Shopper

La parte principal del editor de Personal Shopper es el área de previsualización. Es una vista responsiva de su Personal Shopper que le da una indicación de cómo se verá en su sitio. Por defecto, la previsualización está en modo de "selección" (ver Barra de Navegación), lo que significa que puede resaltar y seleccionar secciones individuales para ver y editar su configuración.

Barra Lateral de Configuración

La barra lateral de configuración se encuentra en el lado derecho del editor y es donde se realiza la mayor parte de la personalización del Personal Shopper. Hay dos grupos de configuraciones editables en la barra lateral: "Configuración General" y "Configuración de Componente".

Configuración General

Si se selecciona "Configuración General" en la barra lateral izquierda, la barra lateral de configuración consistirá en la configuración general del Personal Shopper.

Figura 7: Configuración General

El grupo de configuración principal en "Configuración General" es la "Configuración a Nivel de Widget". Estas configuraciones informan al sistema dónde renderizar el personal shopper. Hay dos configuraciones que controlan esto:

• URL de Inserción — Esta es la URL en su dominio en la que el sistema intentará renderizar el personal shopper una vez publicado. Esta cadena puede incluir comodines (*) para que el shopper pueda ser utilizado en más de una URL.
• Selector de Inserción — Este es el selector de elemento CSS que se utilizará para encontrar el elemento al que se agregará el shopper.

Las configuraciones generales restantes consisten en varios estilos para todo el shopper, incluyendo el tamaño y color de fuente base, tamaños de fuente para encabezados y el color de fondo general. Además, hay una configuración llamada "Global CSS" que permite a los usuarios avanzados con conocimientos de CSS escribir CSS que se aplicará a todo el shopper.

Configuración de Componente

Figura 8: Configuración de Componente

Si se selecciona un componente específico, la barra lateral derecha consistirá en todas las configuraciones para el componente seleccionado. Por ejemplo, en la Figura 8, se selecciona un componente de recomendación de productos.

Cada componente tendrá su propio conjunto único de configuraciones para personalizar la apariencia del componente. Cada configuración solo se aplicará a esa sección específica. Por ejemplo, si establece la configuración "Default Text Align" para un componente de recomendación de productos, no afectará la misma configuración en ningún otro componente de recomendación de productos.

Al igual que con la "Configuración General", cada componente tendrá una configuración de "Custom CSS" que los usuarios avanzados pueden aprovechar para personalizar aún más sus componentes.

Fuente de Productos

La configuración más crucial para cualquier componente de recomendación de productos es la "Product Source". El valor de esta configuración informa al sistema qué productos mostrar en el componente. Al hacer clic en "Cambiar" en el editor de configuración, aparecerá la ventana emergente de la Figura 9.

Figura 9: Editor de Fuente de Productos

Las configuraciones específicas aquí pueden depender del modelo seleccionado, pero generalmente se reducen a las siguientes cuatro configuraciones:

• Model — Controla el algoritmo utilizado para generar la lista de productos
• Product List — Esta es la lista de productos de la que el algoritmo seleccionado puede obtener sus productos. Esto se puede usar para limitar sus productos recomendados solo a productos en oferta, por ejemplo.
• Minimum Items — Número mínimo de artículos para renderizar el componente de recomendación de productos
• Product Limit — Número máximo de productos a mostrar en el componente