Tutorial de Wix Blocks: crear un widget de contador

13 min de lectura
Wix Blocks está abierto a todos los usuarios de Wix Studio. Para acceder a Blocks, únete a Wix Studio.
Este tutorial te muestra cómo crear un widget de contador, donde puedes incrementar y disminuir un número. A través de este sencillo widget, te mostraremos todo lo que puedes hacer con Wix Blocks. 

contador
Te recomendamos crear este widget desde cero, pero si te atascas, puedes ver una plantilla del widget en Blocks y editarla en tu cuenta de Wix.

Paso 1 | Crea un nuevo widget en Blocks

  1. Crea una app de Blocks vacía.
  2. Si la app no se crea con un widget predeterminado, agrega un widget a tu app. 

Paso 2 | Agrega un creador de estilo

Un creador de estilo es un contenedor que permite capacidad de respuesta. Mantendrá los otros elementos organizados. Para agregar un creador de estilo: 
  1. Haz clic en el botón Agregar elementos add en el menú superior. 
  2. Haz clic en Estilo -> Flexboxes
  3. Haz clic en el creador de estilo vertical de 3 secciones. 

Paso 3 | Agrega elementos del widget

Agregar los botones

  1. Haz clic en el botón Agregar elementos add en el menú superior. 
  2. Haz clic en Botones
  3. Arrastra y suelta un botón en la sección derecha del creador de estilo.
4.  Haz clic en Cambiar texto. 
5. Selecciona Solo texto en la lista desplegable. 
6. Cambia el texto a "+".
7. Haz clic en el icono Diseño design icon en el panel Inspector profesional inspector y selecciona Texto.
8. Haz clic en Temas y selecciona Heading 6 (Encabezado 6) en la lista desplegable. 
9. Arrastra y suelta otro botón cuadrado en la sección izquierda. 
10. Cambia el texto a "-".

Sumar el número del medio

  1. Haz clic en el botón Agregar elementos add y selecciona Texto.
  2. Arrastra y suelta un elemento de 32px Title en la sección central del creador de estilo. 
  3. Edita el texto a "0" y alinéalo al centro. 

Cambiar las ID

  1. Haz clic en el icono Propiedades y eventos properties and events  en la parte inferior derecha de la pantalla.  
  2. Cambia la ID del botón de incremento a incBtn.
  3. Cambia la ID del botón de disminución a decBtn.
  4. Cambia la ID del elemento de texto a countTxt.

Paso 4 | Agrega código a los elementos

Ahora es el momento de hacer que el widget realice lo que se supone que debe realizar: contar hacia arriba y hacia abajo cuando se hace clic en los botones. 
1. Haz clic en la pestaña Código o ve a la parte inferior de la pantalla para agregar código al widget. 
2. Agrega el siguiente código antes de tu función onReady().

1//Set the count to 0 
2let count = 0;
3
4//Assign the count to your text element
5function render() {
6 $w('#countTxt').text = count.toString();
7}
8
9//Add a certain amount to the count and fire an event in the widget API
10function addToCount(amount) {
11 count += amount;
12 render();
13}
3. Agrega el siguiente código en tu función onReady(). 
1 $w('#incBtn').onClick(() => {
2  addToCount(1);
3 });
4 
5   $w('#decBtn').onClick(() => {
6  addToCount(-1); 
7 });
8  
9  render();
4. Haz clic en el botón Vista previa para ver el widget en acción. 

Paso 5 | Haz que el widget sea personalizable con Widget API

Puedes definir una API para el widget de modo que el usuario (el propietario del sitio que instala el widget) pueda personalizarlo según sus necesidades. La API puede contener propiedades, eventos y funciones exportadas.

Supongamos que quieres que el propietario del sitio pueda decidir cuál es el "paso" del recuento. Tal vez quieran que el paso sea 2 para que el recuento sea 0,2,4,6, etc. 

Puedes definir una propiedad en la API del widget llamada "step" (paso) y permitir que el usuario la personalice.

Definir la propiedad "step"

  1. Haz clic en el icono API pública del widget widget api para abrir el panel de la API del widget.
  2. Haz clic en Nueva propiedad en la sección Propiedades (o pasa el cursor sobre la sección y haz clic en el icono add que aparece).
3. Nombra tu propiedad "step", asígnale el tipo Number y un valor predeterminado de 1

Cambiar el código para tener en cuenta la nueva propiedad

Cambia tu código para que, cuando se haga clic en los botones, se llame a addToCount con el paso de las propiedades en lugar de con el valor predeterminado de 1.
Usa $widget.props para acceder a tus propiedades (observa las sugerencias de autocompletar de Velo). 
1$w.onReady(function () {
2 $w('#incBtn').onClick(() => {
3  addToCount($widget.props.step);
4 });
5 $w('#decBtn').onClick(() => {
6  addToCount(-$widget.props.step);
7 });
8
9 render();
10});

Hacer una prueba de tu propiedad en el modo de vista previa

  1. Haz clic en Preview (Vista previa) para pasar al modo de vista previa. 
  2. Haz clic en Probar propiedades de API
3. Cambia el paso a un número diferente y mira cómo funciona el widget. 

Agregar un evento público a la API del widget

La API del widget te permite agregar un evento que se active cuando tú lo decidas. 
Agrega un evento que se active cuando cambie la variable de recuento "count":
  1. Haz clic en el icono API del widget widget api para abrir el panel de la API del widget. 
  2. Haz clic en Nuevo evento en la sección Eventos (o pasa el cursor sobre la sección y haz clic en el icono add que aparece). 
  3. Nombra tu evento y descríbelo
4. Agrega esta línea a tu función addToCount() para activar el evento cuando cambie el recuento. 
1$widget.fireEvent('change', count);
5. Ahora, tu función addToCount() debería verse así:  
1function addToCount(amount) {
2 count += amount;
3 render();
4 $widget.fireEvent('change', count);
5}
Captura tu evento en el Editor del sitio
Deberás capturar tu evento en el editor del sitio una vez que hayas instalado el widget en tu sitio web (esto se describirá en el paso 8).

Agregar una función pública a la API del widget

Crea y exporta una función reset() para que los propietarios del sitio puedan establecer fácilmente el recuento en 0. 
  1. Haz clic en el icono API del widget widget api para abrir el panel de la API del widget. 
  2. Haz clic en Add New Public Function (Agregar nueva función pública) en la sección Funciones (o pasa el cursor sobre la sección y haz clic en el icono add que aparece). 
  3. Se crea una nueva función vacía con el nombre predeterminado foo(), con un JSDoc designado (el bloque de comentarios), que puede ser leído por cualquiera que use tu función en un sitio. 
4. Pega el siguiente código en lugar del código predeterminado de la función: 
1export function reset(){
2 //This function is part of my public API
3 count = 0;
4 render();
5}
5. Actualiza el JSDoc. Nota: Debes mantener la anotación de la función en este formato.  
1/**
2*@function
3*@description Sets count to 0 and renders. 
4*@returns nothing
5*/
Consejo
También puedes hacerlo al revés. Cualquier función exportada con el JSDoc adecuado encima aparecerá en el panel de la API del widget a la derecha. Por lo tanto, puedes escribir tu código directamente en lugar de recibir la plantilla haciendo clic en Add New Public Function (Agregar nueva función pública). 

Paso 6 | (Opcional) Configura el comportamiento del widget en el momento de editarlo

La pestaña Configuración te permite determinar el comportamiento del widget y sus elementos cuando el propietario del sitio lo edita en el Editor. Prueba algunas opciones en la pestaña Configuración.
Establece un nombre visible para los elementos del widget: 
  1. Selecciona el botón de disminución.
  2. Cambia su nombre visible debajo de Nombre del elemento a "My Decrement" (Mi disminución) en el panel Inspector profesional inspector .
Evita que el elemento de texto se pueda seleccionar en el Editor: 
  1. Selecciona el elemento de texto que representa tu recuento. 
  2. Haz clic en la opción Se puede seleccionar en la sección Comportamiento del Inspector profesional inspector para eliminar la marca de verificación azul. 

Paso 7 | (Opcional) Crea más diseños preestablecidos

Blocks te permite crear diversas variaciones para el diseño y el estilo de tu widget a través de diseños preestablecidos. Para crear otro diseño preestablecido: 
  1. Haz clic en la pestaña Diseño en el menú superior. 
  2. Haz clic en + Añadir preajuste de diseño en la sección Preajustes de diseño del panel Diseño debajo de App Structure app structure. (Estructura de la app).
  3. Haz clic en el icono Más acciones   para cambiar el nombre del preajuste (también puedes duplicarlo o eliminarlo). 
4. Haz algunos cambios visibles en tu widget, como cambiar el color de la sección central.
Avanza y retrocede entre los preajustes para ver las diferencias.
Cambios por preajuste frente a cambios globales
Ten en cuenta que algunos cambios de diseño y estilo solo afectan tu actual preajuste, mientras que otros afectan a todos (más información). 

Paso 8 | Captura tu evento en el Editor del sitio

Importante
Este paso se lleva a cabo en el Editor de Wix o en el Editor de Wix Studio, no en Blocks. 
Ve al editor de tu sitio para capturar el evento desde tu app. Primero debes registrar un controlador de eventos para el evento de cambio:
  1. Instala tu app de widgets
  2. Habilita el Modo desarrollador
  3. Haz clic en el icono Propiedades y eventos .
  4. Cambia la ID de tu widget, por ejemplo, a "counter1".
  5. Haz clic onChange( ) debajo de Event Handlers (Controladores de eventos).
  6. Selecciona counter1_change en el cuadro.
Ahora escribe la función. Obtiene el "recuento" como parámetro y lo restablece cuando llega al número que decidas (en nuestro ejemplo: 30). Tu función debería verse así:
1export function counter1_change({data: count}) {
2 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
3 // Add your code for this event here: 
4 if (count > 30) {
5  $w('#counter1').reset();}
6}
Previsualiza o publica para ver tu sitio en acción.

¿Te ha sido útil?

|