Edición de widgets

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 de todo el 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 para el 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: Navegación superior

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

1. El botón de retroceso 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 muestra si el widget que está editando está en estado "Publicado", "Borrador" o "Deshabilitado". Consulte la nota a continuación.
4. El selector de vista previa alterna entre el modo "vista previa" y "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 selector de punto de interrupción 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 Vista previa en vivo. "Publicar" guardará y publicará la versión de trabajo actual del widget en su sitio. "Guardar" guardará la versión de trabajo 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 en "Borrador" sigue utilizándose en su sitio con la versión publicada anteriormente. Deshabilite un widget de la lista para dejar de usarlo.

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 usar esta función, la versión de trabajo del widget debe guardarse.

Si su widget está marcado como incrustado, se le pedirá que especifique 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 en el que se esté ejecutando 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 de donde aparecerá finalmente el widget 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. 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 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 esto, podrá editar algunas configuraciones genéricas para el widget. Consulte Barra lateral de configuración para obtener más información.

Agregar una sección

Haga clic en el botón "Agregar sección" en la barra lateral para seleccionar un nuevo componente para agregar a su widget.

Figura 5: Ventana emergente de añadir sección

Seleccione un componente en esta lista y haga clic en "Agregar" para adjuntar una nueva sección al final de su widget.

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 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" (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 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 usarse 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 intento de salida — Si está habilitado, el sistema solo mostrará el widget si el usuario indica "intento de salida" moviendo el ratón al borde de la pantalla (si es una superposición).
• Activar después de un retardo — Si se establece, el widget solo se mostrará después de un retardo que coincida con el valor definido en segundos (si es una superposición).

La configuración general restante consiste en varios estilos para 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 contendrá 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 configura el ajuste "Alineación de texto predeterminada" para un componente de recomendación de productos, no afectará al mismo ajuste en otros componentes 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 del producto

La configuración más crucial para cualquier componente de recomendación de productos es la "Fuente del producto". 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 fuentes de productos

La configuración específica aquí puede depender del modelo seleccionado, pero generalmente se reduce a las cuatro configuraciones siguientes:

• 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.
• Cantidad mínima de artículos — Cantidad mínima de artículos para renderizar el componente de recomendación de productos
• Límite de productos — Cantidad máxima de productos a mostrar en el componente

INFO

Si utiliza los modelos "Otros que pueden gustarle", "Comprados con frecuencia juntos" o cualquier modelo de "Actividad de productos", 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 del tipo "Actividad del producto" (consulte Creación de widgets), 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 esta configuración 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".