Edición de Widget

Introducción

Figura 1: Editor de Widgets

Al hacer clic en "Crear" o "Editar" en uno de sus Widgets, verá un editor de página completa (Figura 1). El editor consta de cuatro secciones principales:

• Barra de navegación superior — Controles básicos del editor
• Barra lateral de secciones — Lista de todas las secciones del widget para una fácil navegación
• Área de vista previa — Vista del estado actual del widget
• Barra lateral de configuración — Contiene todas las configuraciones y opciones de personalización del widget

INFO

El editor de widgets es una extensión del editor de Personal Shopper. Si está familiarizado con el editor de shoppers, le resultará fácil aprender el editor de widgets.

Barra de Navegación Superior

Figura 2: Barra de Navegación Superior

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

1. El botón Atrás cierra el editor.
2. El Nombre es un identificador para el widget en particular. Haga clic en el botón de edición para personalizar el nombre. El cambio de nombre no se finaliza hasta que el widget se guarda/publica.
3. El Indicador de estado indica si el widget que está editando se encuentra en estado "Publicado", "Borrador" o "Deshabilitado". Consulte la nota a continuación.
4. El Botón de vista previa alterna entre el modo "vista previa" y el modo "selección". En el modo vista previa, podrá interactuar con el widget como lo haría en su sitio. En el modo selección, al hacer clic en la vista previa del widget, seleccionará componentes.
5. El Botón de punto de quiebre cambia el área de vista previa entre tres tamaños diferentes: escritorio, móvil y pantalla completa.
6. Botones de deshacer y rehacer.
7. Acciones principales del editor. "Vista previa" inicia la funcionalidad de Vista Previa en Vivo. "Publicar" guardará y publicará la versión actual del widget en su sitio. "Guardar" guardará la versión actual del widget, pero no actualizará la versión en vivo en su sitio.

INFO

Importante: El sistema de tiempo de ejecución siempre utiliza la versión más recientemente publicada de cada widget. Sin embargo, los widgets publicados aún pueden actualizarse y cambiar su estado a "Borrador". En este caso, el widget ahora "Borrador" sigue utilizándose en su sitio con la versión publicada anteriormente. Deshabilite un widget de la lista para evitar que se utilice.

Vista Previa en Vivo

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

Figura 3: Vista Previa en Vivo

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

Si su widget está marcado como incrustado, deberá especificar un selector de incrustación en esta ventana emergente. De lo contrario, todo lo que necesitará proporcionar es una URL para probar el widget. La URL debe estar en un dominio donde se ejecute el script de segmentación de Fanplayr. Esta URL no tiene que coincidir con la URL definida en la configuración del widget. En otras palabras, puede previsualizar el widget en una URL diferente a la que finalmente aparecerá si lo desea.

La vista previa del widget le permite ver cómo se vería en su sitio antes de ponerlo a disposición de todos sus usuarios. Esto le permite ajustar la apariencia del widget antes de publicarlo.

Barra Lateral de Secciones

Figura 4: Barra Lateral de Secciones

En el lado izquierdo del editor se encuentra la Barra Lateral de Secciones. Esta proporciona una navegación sencilla entre las secciones del editor. Haga clic en cada sección para desplazar automáticamente el área de vista previa 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 widget.

En la parte superior de la barra lateral hay un enlace a la "Configuración General". Al hacer clic en este enlace, podrá editar algunas configuraciones genéricas para el widget. 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 que desea añadir a su widget.

Figura 5: Ventana Emergente para 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 widget.

Visualización de Errores / Problemas

En la parte inferior de la barra lateral de secciones hay un indicador que muestra cuántos problemas pueden impedir la publicación en su widget. Al hacer clic en el indicador, se mostrará más información sobre cualquier problema y cómo resolverlo.

Área de Vista Previa

Figura 6: Área de Vista Previa

La parte principal del editor de widgets es el área de vista previa. Es una vista responsiva de su widget que le da una indicación de cómo se verá en su sitio. Por defecto, la vista previa está en modo "selección" (consulte Barra de Navegación Superior), 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 widget. Hay dos grupos de configuraciones editables en la barra lateral: "Configuración General" y "Configuración de Componentes".

Configuración General

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

Figura 7: Configuración General

La configuración general del widget contiene varios controles que rigen el comportamiento general del widget. A continuación, desglosaremos algunas configuraciones clave:

• Tipo de visualización — Esto controla si el widget está "incrustado" en el sitio o es una "superposición".
• URL de visualización — Esta es la URL de su dominio en la que el sistema intentará renderizar el widget una vez publicado. Esta cadena puede incluir comodines (*) para que pueda utilizarse en más de una URL.
• Selector de incrustación — Este es el selector de elementos CSS que se utilizará para encontrar el elemento al que se adjuntará el widget (si está incrustado).
• Altura + Ancho — Esta es la altura y el ancho máximos del widget (si es una superposición).
• Activar al salir — Si está habilitado, el sistema solo mostrará el widget si el usuario indica "intención de salida" moviendo el ratón al borde de la pantalla (si es una superposición).
• Activar después de un retraso — Si se establece, el widget solo se mostrará después de un retraso que coincida con el valor definido en segundos (si es una superposición).

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

Configuración de Componentes

Figura 8: Configuración de Componentes

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 "Alineación de Texto Predeterminada" 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 "CSS Personalizado" 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 "Fuente de Productos". 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:

• Modelo — Controla el algoritmo utilizado para generar la lista de productos.
• Lista de productos — 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.
• Elementos mínimos — Número mínimo de elementos para renderizar el componente de recomendación de productos.
• Límite de productos — Número máximo de productos a mostrar en el componente.

INFO

Si utiliza los modelos "Otros que le pueden gustar", "Comprados con frecuencia juntos" o cualquier modelo de "Actividad del producto", el widget solo se mostrará en una página de producto, ya que estos modelos se basan en el producto que se está viendo actualmente.

Actividad del Producto

Figura 10: Componente de Actividad del Producto

Si el widget es de tipo "Actividad del Producto" (consulte Crear Widget), en lugar de un componente de recomendaciones de productos, tendrá acceso a un componente de "Actividad del Producto". La configuración para este componente se puede ver en la Figura 10.

El elemento clave de estas configuraciones tiene que ver con la variable {{count}} utilizada en la configuración de texto "Contenido". La actividad del producto proporciona un valor en tiempo real para el número de veces que el producto actual ha sido visto / añadido al carrito / comprado recientemente (según se define en la fuente del producto). Para acceder a este valor en su widget, debe usar la variable {{count}} en algún lugar de su texto "Contenido".

La configuración "Fuente de Producto" para la Actividad del Producto también define una configuración para la "Actividad Mínima". Si en tiempo de ejecución el valor que se mostrará para el recuento de actividad es inferior a esta configuración, el widget no se mostrará.