El widget builder es un editor de código para JavaScript, HTML y CSS que permite construir integraciones de Front End con sistemas de negocios y generar distintas versiones de código al publicar. El widget builder crea librerías de widgets que pueden ser utilizadas en distintos layouts del sitio. 

En este artículo:

• Orientación
• Acciones del Widget
• Crear un Widget
• Editor de Código
• Configurar Widgets
• Diferencia de Versiones

Orientación

Listado de Widgets

Para ver el listado de widgets de tu sitio dirígete a Sitio > Builder > Widgets.

En el encabezado del listado puedes filtrar los widgets por cuatro criterios:

Estado: Filtra los widgets por sus tres estados: Publicado, No Publicado y Archivado. Por defecto este filtro muestra Todos.

Autor: Filtra por el autor del widget.

Etiquetas: Te permite filtrar los widgets hasta por tres etiquetas distintas. 

Buscar: Te permite filtrar los widgets por palabras claves en su título.

Acciones del Widget

Al presionar  puedes realizar las siguientes cuatro acciones:

•  Editar: Abre la vista de edición del Widget.
•   Copiar: Crea una réplica del widget. Esta copia es titulada automáticamente "Copia de [Título Original]".
•  Archivar: Archiva el Widget.
•  Restaurar: Esta acción restaura el Widget y lo hace disponible nuevamente. 

Crear widgets

Para crear un nuevo widget haz click en + Nuevo en la esquina superior derecha. 

Un widget público significa que el widget estará disponible para ser editado por cualquier persona con el rol adecuado. 

Editor de código

El widget builder utiliza CodeMirror como editor de código, el cual soporta ESLint, que es un validador de JavaScript de código abierto. Cómo herramienta de validación, provee análisis estático de código para detectar patrones de código problemáticos que no se adhieren a las guías de estilo. 

El editor de código también valida la sintaxis de Liquid Markup. 

El editor está compuesto de cuatro pestañas:

JavaScript: En Modyo utilizamos Vue.js como el framework de JavaScript primario para construir widgets livianos y fáciles de administrar. También puedes utilizar JavaScript puro si es que lo prefieres. 

Stylesheet: Contiene todo el CSS necesario para que el Widget funcione. Sólo soporta CSS puro (no soporta SASS, less, etc)

HTML: Esta pestaña contiene todo el HTML del Widget.

Preview: Muestra el resultado de tu trabajo antes de ser publicado. 

Nota: El editor de código en el widget builder soporta el código de los templates del sitio. El JavaScript y estilos CSS del widget pueden ser utilizados desde el template principal. 

Cada pestaña (JavaScript, Stylesheet, HTML) viene con dos funcionalidades para el editor de código en la esquina superior derecha:

•  Versiones Locales: Contiene todas las versiones locales guardadas del Widget desde que fue publicado por última vez. Una vez que el Widget es publicado, estas versiones son borradas y remplazadas por nuevas versiones locales de la última versión publicada del Widget.  
  
  
• Selector de Snippets: Este es un dropdown con buscador que le permite a los desarrolladores acceder a todos los snippets personalizados disponibles en el sitio. Esto significa que colaboradores pueden utilizar librerías, frameworks y scripts en el Widget sin poder cambiar el código base de estos. 

La pestaña de previsualización viene con la opción de  Previsualizar el Widget en una nueva pestaña/ventana del navegador. La herramienta de previsualización sólo muestra el Widget y no en el contexto del sitio. Para ver el widget en el contexto del sitio, necesitas insertar el Widget en un layout y luego previsualizar el layout. 

Configurar Widgets

Existen otras tres pestañas a la derecha del editor de código:

Editar: Nombra el Widget, hazlo público y agrega etiquetas para organizar mejor tus widgets.

Archivos: Sube archivos e imágenes para el Widget y mantén tus recursos claves juntos. Los archivos serán guardados en la CDN de Modyo. 

Colaboradores: Selecciona las personas que tendrán acceso al Widget si este es privado. Comienza a escribir el email o nombre del colaborador. 

Diferencia de versiones 

Si seleccionas  puedes publicar tu widget en la librería. Una versión del widget es publicada y enviada a la librería para ser utilizada en el sitio. Existen dos funcionalidades importantes de tener en cuenta. 

Restablecer a esta versión: Remplazará la versión editable por la versión que se encuentre seleccionada a la izquierda. 

Rollback a esta versión: Remplazará la versión actualmente publicada por la versión que se encuentre seleccionada a la izquierda. 

Nota: Una vez que un widget es publicado en un layout, los cambios hechos al widget cuando es revisado y publicado serán reflejados directamente en el layout. El widget builder promueve cambios livianos e iterativos que son fáciles de monitorear y evolucionar a experiencias digitales.

A la izquierda se marcan en rojo todas las líneas que tienen cambios, resaltando los caractéres eliminados o modificados. A la derecha  se marcan en verde todas las líneas que tienen cambios, resaltando los caracteres añadidos o modificados.