Cómo utilizar el editor de widgets

El Editor de widgets es el centro de control de todos tus widgets React. Está diseñado tanto para profesionales como para principiantes, así que no necesitas conocimientos previos de CSS.

Puedes encontrarlo en Configuración de la tienda > Página web de integración > Widget Editor.

Vista general

Al abrir el Editor de widgets, verás dos secciones principales.

• Tus widgets - Creación y configuración de tus widgets.
• Ajustes de diseño - Cambia el aspecto de tus widgets.

1. Crear y personalizar tus widgets

En Tus widgets, puedes configurar y gestionar todos los widgets que has creado en el Editor de widgets. Están ordenados por tipo de widget.

1.1. Tipo de widget

Puedes elegir entre cuatro tipos de widget:

• Widget de catálogo: vista general de varios productos.
• Widget de producto: página de detalle de uno de los productos que hayas seleccionado.
• Widget de reserva: módulo de reserva con calendario.
• Button Widget: botón con calendario. Para más información, consulta el siguiente artículo: ¿Cómo funciona la integración con el widget de botones?

1.2. Ajustes del widget

Los ajustes dependen del tipo de widget seleccionado:

1.2.1. Widget de catálogo

• En el Widget de catálogo, puedes seleccionar el idioma del producto, el filtro de categoría y el filtro de ubicación, y crear un Sub-ID.
  
  
   
• Las categorías son las que tú mismo has creado y organizado. Si quieres más información sobre cómo organizar tus categorías, lee este artículo: Como crear una categoria?
• Además, o de forma independiente, puedes usar el filtro de ubicación. La ubicación se determina según la Ciudad que introduzcas. Para aumentar o reducir la cantidad de productos que se muestran en el Widget de catálogo, puedes introducir un Radio dentro del cual debe encontrarse el producto para que se muestre.
• Aquí también puedes crear un Sub-ID: añade el Sub-ID en Ajustes > Sub ID: letras minúsculas y números.
  Nota: No puedes ver el Sub-ID en tu código porque está oculto.

1.2.2. Widget de producto / reserva

• En el Widget de producto y el Widget de reserva, puedes seleccionar el idioma del producto, seleccionar el producto y crear un Sub-ID.
  
  

1.2.3. Button Widget

• En el Button Widget, puedes seleccionar el idioma, vincular el botón a uno de los tipos de widget, seleccionar el producto, crear un Sub-ID, añadir el texto del botón y elegir si prefieres un botón flotante.
  
  
   

1.3. Seleccionar un diseño

En este paso, puedes seleccionar el tema con el que se mostrará el widget. Para cambiar colores concretos, consulta la sección Ajustes de diseño más abajo.

Consejo:
La selección de tema puede resultar muy útil si actualizas tu diseño con regularidad.
Imagina que cambias el aspecto de tu página web cada temporada. Puedes adaptar fácilmente el widget al nuevo diseño sin tener que cambiar nada en el backend.

1.4. Definir el contenido visible

Aquí también depende del tipo de widget seleccionado previamente.

Puedes personalizar la caja de producto, definir por qué atributos puede filtrar el cliente y decidir también el nivel de detalle de la página de producto.

• Widget de catálogo: Cuadro del producto, Panel de filtros, Detalles del producto, Detalles de la reserva, Lista de catálogo
  
  
   
• Widget de producto: Cuadro del producto, Detalles del producto, Detalles de la reserva
  
  
   
• Widget de reserva y Button Widget: Detalles de la reserva
  
  
   

1.5. Guardar y publicar

En el último paso, asignas un nombre y una descripción a tu widget. Ambos serán visibles en la vista general.
En cuanto hagas clic en Guardar, se generará un código HTML. Puedes insertar este código en tu página web.

Consejo:
¡Solo tienes que integrar el código en tu página web una vez! Cada cambio que hagas en el Editor de widgets también se aplicará al widget de tu página web.

2. Crear un diseño

Ajustes de diseño te permite crear temas y, de este modo, cambiar el aspecto de tus widgets. Los temas se componen de colores y fuentes.

2.1. Colores

En cuanto al color, actualmente tienes acceso al color de acento, que afecta a los botones principales (Reservar aquí y Añadir al carrito).

2.2. Fuente

Puedes elegir entre 8 fuentes diferentes y 5 tamaños de fuente.

2.3. Radio de esquina

Aquí puedes ajustar el radio del borde de todos los widgets.

2.4. Guardar y publicar

Cuando hayas terminado de editar tu diseño global, asígnale un nombre y una descripción. Al guardar, todos los widgets que usan ese diseño se actualizarán automáticamente.