Centro de Ayuda Wix
    Inicio
    Tutorial de Wix Blocks: crear un widget de cuenta regresiva

Tutorial de Wix Blocks: crear un widget de cuenta regresiva

22 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 cuenta regresiva, que cuenta hacia atrás hasta una fecha específica. También contiene un widget de registro donde los visitantes del sitio pueden registrarse y recibir una notificación por email el día anterior a un evento. Además, aprenderás cómo instalar tu widget de cuenta regresiva en un sitio y explorar todas las funciones clave de Wix Blocks.
Widget de cuenta regresiva

Lo que obtienes en la plantilla

Para facilitar el proceso, hemos creado una plantilla de modo que puedas comenzar de inmediato.

La plantilla contiene lo siguiente:
  • Un widget de cuenta regresiva. Debes completar su diseño y codificar sus funciones y propiedades.
  • Un widget de registro que debes completar y agregar al widget de cuenta regresiva.
  • Algunas utilidades públicas que puedes usar para implementar la funcionalidad del widget.
  • Algo de código de backend que puedes usar para implementar las funciones de tu notificación por email.

Obtén la plantilla

Paso 1 | Completa el diseño del widget

Para crear este widget, comienza con esta plantilla y edítalo en tu cuenta de Wix. La plantilla se ha dejado incompleta para que puedas aprender a agregar elementos al widget.
El widget está diseñado con una cuadrícula para que puedas alinear y colocar elementos con facilidad.

  1. Abre la plantilla. 
  2. Haz clic en Countdown (Cuenta regresiva) dentro de Widgets y diseño.
  3. Haz clic en Agragar elementos Add icon en la barra superior.
  4. Selecciona Texto. Arrastra y suelta un cuadro 48px Title al widget.
  5. Haz clic en Editar texto y cambia el texto a SS.
  6. Cambia el color del texto a blanco y céntralo con el Inspector profesional . 
  7. Selecciona el cuadro de texto y muévelo al cuadrado de la cuadrícula sobre la etiqueta SECONDS (SEGUNDOS) usando move elements icon.
  8. Cambia el tamaño usando stretch icon.

Más información sobre cómo diseñar un widget

Paso 2 | Agrega y define las propiedades de la API del widget

Puedes definir una API para el widget de modo que el creador de sitios que instala el widget pueda interactuar con él a través del código. La API puede contener propiedades, eventos y funciones exportadas.

Este widget utiliza dos propiedades:
  • endDate: define la fecha de finalización cuando la cuenta regresiva llega a cero. Con esta propiedad, los creadores de sitios pueden cambiar la fecha de finalización para que el widget se personalice para su sitio.
  • emailId: determina el mensaje de email que se enviará a los usuarios cuando se registren para recibir una notificación.

Más información sobre las propiedades de la API de widgets (artículo en inglés)

Asignar una ID a los elementos del widget

Primero debes dar a los elementos del widget una identificación para que puedas referirte a ellos fácilmente en el código.
  1. Haz clic en el cuadro de texto.
  2. Asigna una ID al cuadro de texto en el panel Propiedades y eventos properties icon. En este ejemplo, la ID es secondsTxt. Ten en cuenta que a los otros elementos ya se les ha asignado las ID.

Definir las propiedades "endDate" y "emailId"

  1. Haz clic en Propiedades y eventos en el panel de la API. properties icon
  2. Ingresa el nombre de la propiedad, endDate.
  3. Selecciona el tipo de propiedad, en este caso, fecha y hora (la fecha se muestra en formato de los EE. UU.: mm/dd/aaaa).
  4. Selecciona un valor predeterminado (el creador de sitios podrá cambiar esto cuando instale el widget en los Editores).
  5. Pasa el cursor sobre Properties (Propiedades) y haz clic en el icono add icon que aparece.
  6. Crea otra propiedad para el email accionable y llámalo emailId. Esta es una propiedad de tipo texto sin valor predeterminado.

Paso 3 | Agrega código para que tu widget funcione


Para hacer que el widget cuente regresivamente, necesitamos crear una función en el código que calcule el tiempo restante hasta la fecha de finalización. Para ello, la plantilla incluye algunas utilidades preinstaladas que puedes encontrar en el menú Público y Backend.public and backend icon  

Blocks usa una nueva variable global, $widget; y la propiedad, $widget.props, que contiene todas las propiedades que has definido para el widget.

Blocks también utiliza el autocompletado de Velo para que puedas escribir código con mayor facilidad.

Más información sobre la API de widgets

Importar utilidades

  1. Haz clic en el menú Público y backend .
  2. Selecciona dateUtils.js en Public (Público). Esto abre el archivo en el panel de código.

Cambiar el código para tener en cuenta la nueva función

Crea una función, updateTime(), para que el widget de cuenta regresiva actualice el recuento. La nueva función debería verse así:

1$widget.onPropsChanged(function () {
2});
3    function updateTime() {
4    const {days, hours, minutes, seconds} = getRemainingTime (new Date($widget.props.endDate));
5    $w('#daysTxt').text = days.toString();
6    $w('#hoursTxt').text = hours.toString();
7    $w('#minutesTxt').text = minutes.toString();
8    $w('#secondsTxt').text = seconds.toString();
9 }

También debes establecer un intervalo para la frecuencia con la que el widget actualiza el tiempo restante.
Para ello, agrega el siguiente código en tu función onReady(). Esto actualiza el widget cada segundo.

1$w.onReady(function () {
2    updateTime();
3    if (wixWindow.viewMode !== "Editor") {
4        setInterval(updateTime, 1000);
5    }
6});
Editar la condición de tiempo
El código de Velo solo se ejecuta cuando haces clic en la vista previa o cuando abres el sitio online. El código de Blocks onReady también se ejecuta durante el tiempo de edición para que puedas verlo en acción mientras trabajas en el Editor. Usamos la condición anterior para que el widget de cuenta regresiva no cuente regresivamente durante el tiempo de edición. 

Previsualizar el widget y probar sus propiedades de API

Ya puedes obtener una vista previa del widget y sus propiedades de API.

  1. Haz clic en Preview (Previsualizar). El widget debe contar regresivamente cada segundo hasta la fecha de finalización.
  2. Haz clic en Probar porpiedades de API. Aparece un panel con el valor predeterminado que estableciste anteriormente. 
  3. Cambia la fecha para verificar si el widget responde y comienza la cuenta regresiva hasta la nueva fecha.

Paso 4 | Crea y codifica un panel personalizado

Puedes crear un panel de ajustes personalizado para que los creadores de sitios puedan cambiar los ajustes del widget cuando lo instalen en un sitio. En este ejemplo, el panel de ajustes personalizado permite al creador de sitios cambiar la fecha de finalización y definir una ID de email que determina qué email se enviará a los usuarios cuando se registren para recibir notificaciones.

Más información sobre los paneles

Crear un panel personalizado

  1. Haz clic en la pestaña Paneles en la barra superior.
  2. Haz clic en Agregar panel.
  3. Asigna un nombre a tu panel. En este ejemplo, "Mis ajustes".
  4. Haz clic en Agregar panel.
  5. Haz clic en + Agregar elemento.
  6. Selecciona Texto. Esto será para la fecha de finalización.
  7. Haz clic en Propiedades y eventospropeties icon. Dale a tu entrada de texto una ID, endDateInput.
  8. Selecciona el elemento de texto y haz clic en Ajustes.
  9. Agrega el nombre "fecha de finalización" en el campo Field Title (Título del campo).
  10. Elimina el texto en el campo Default Text (Texto predeterminado).
  11. Establece el texto del marcador de posición en "End Date" (Fecha de finalización).
  12. Agrega un separador de sección.
  13. Haz clic en Ajustes. Agrega un título en el campo Section Title (Título de la sección). En este ejemplo, "email accionable".
  14. Agrega otra entrada de texto. Dale a tu entrada de texto una ID, emailIdInput.
  15. Selecciona el elemento de texto y haz clic en Ajustes.
  16. Agrega el nombre "ID de email" en el campo Field Title (Título del campo).
  17. Elimina el texto en el campo Default Text (Texto predeterminado).
  18. Establece el texto del marcador de posición en "Email ID" ("ID de email").
El diseño de tu panel personalizado está completo. Ahora necesitas implementarlo agregando código.

Agregar código a tu panel personalizado


Quieres que tu panel personalizado muestre la fecha de finalización actual y la ID de email cuando se carga. El creador de sitios usa el panel para cambiar estos valores. Debes agregar código al panel para que se actualice el widget cuando estas entradas cambien.

Más información sobre cómo agregar código a tus paneles personalizados (artículo en inglés)

Para permitir que los elementos del panel interactúen con el widget y realicen acciones en el Editor, puedes usar el módulo wix-widget de Velo en tu código.

Para usar la API de widgets, importa wixWidget desde el módulo wix-widget.

Inserta el siguiente código antes de la función onReady().

1import wixWidget from 'wix-widget';

Quieres que el widget se actualice cuando cambien los valores, por lo que debes registrar un evento onChange. También debes agregar async en la función onReady (), ya que usarás algunas funciones asíncronas.

La función onReady() debería verse así:

1$w.onReady(async function () {
2    const { endDate, emailId } = await wixWidget.getProps();
3    $w('#endDateInput').value = endDate;
4    $w('#emailIdInput').value = emailId;
5
6    $w('#endDateInput').onChange(e => {
7        wixWidget.setProps({ endDate: e.target.value });
8    });
9
10    $w('#emailIdInput').onChange(e => {
11        wixWidget.setProps({ emailId: e.target.value });
12    });
13});
Haz clic en run icon Ejecutar o Preview (Previsualizar) para revisar tu código

Paso 5 | Configura el widget

Ahora que el panel está diseñado y codificado, debes configurar el widget para que el panel se conecte a uno de los botones de la barra de acciones del widget.

La pestaña Configuración te permite controlar cómo se comporta el widget cuando el creador de sitios lo instala y lo personaliza en un sitio. Puedes asignar a tu widget y a sus elementos nombres visibles de modo que los creadores de sitios vean claramente lo que hace el widget. También puedes realizar cambios en las barras de acciones flotantes que aparecen en los Editores cuando los creadores de sitios seleccionan elementos en el widget.

Más información sobre la pestaña Configuración

Agregar tu panel personalizado a la barra de acciones flotante de tu widget

  1. Haz clic en Configuración en la barra superior. 
  2. Selecciona el widget de cuenta regresiva. Aparece una barra de acciones flotante.
  3. Haz clic en Ajustes.
  4. Haz clic en settings icon Botón de acción. Aparece el panel Ajustes de la acción principal.
  5. Selecciona My settings (Mis ajustes) en la lista desplegable para elegir tu panel personalizado.

Paso 6 | Agrega un segundo widget (interno) e implementa la lógica de registro

La plantilla incluye un segundo widget llamado Registration (Registro). Puedes encontrarlo en Widgets y Diseño. 

Al hacer clic en Layers (Capas), puedes ver que se ha creado como una caja multiestado con tres estados. Tiene un botón etiquetado como Register (Registrarse), que cambia a Submit (Enviar) cuando el visitante del sitio hace clic. También tiene un cuadro de campo donde los visitantes del sitio pueden agregar su dirección de email. Aparece un mensaje de agradecimiento cuando un visitante del sitio se registra.

Este widget también incluye un diseño preestablecido que puede usarse para la versión móvil.

Más información sobre los diseños preestablecidos

Agregar tu widget de registro al widget de cuenta regresiva

Ahora está todo listo para agregar tu widget de registro a tu primer widget, el widget de cuenta regresiva. En Blocks, puedes crear una gran cantidad de widgets diferentes y agregarlos a otros widgets. 

Más información sobre cómo trabajar con widgets dentro de widgets
  1. En la pestaña Diseño, selecciona el widget de countdown (cuenta regresiva).
  2. Haz clic en Más opciones more options y selecciona Agregar widget.
  3. Selecciona Registration (Registro). El widget interno aparece en el medio del widget de cuenta regresiva.
  4. Arrastra y estira el widget interno para que se ajuste a la sección inferior del widget de cuenta regresiva.
  5. Cambia su ID a registration en Propiedades y eventos propeties icon.
Otra forma de agregar un widget
También puedes agregar un widget interno haciendo clic en el menú  add button Add Elements (Agregar elementos). Selecciona MY WIDGETS (MIS WIDGETS) y arrastra y suelta el widget que deseas agregar en el primer widget.

Implementar la lógica de registro en el código del widget principal

Implementarás el código para el registro de usuarios en el widget principal (de cuenta regresiva), usando la utilidad preinstalada contactUtils.js. Utiliza la API de wix-crm para conectar tu contacto a tu colección.

Este código dirige la información a tu colección. Usa la utilidad que usarás más adelante cuando crees una colección. Puedes ver getSubscriptionsCollectionName() en el código.

  1. Crea una nueva función asíncrona.
  2. Llámala onSubmit. Usa la utilidad de creación de contactos.

Tu código debería verse así:

1 async function onSubmit({ email }) {
2   const contact = await createContact(email);
3   wixData.insert(getSubscriptionsCollectionName(), {
4       endDate: new Date($widget.props.endDate),
5       emailId: $widget.props.emailId,
6       contactId: contact.contactId
7   });
8 }
9

Registrarse para el evento onSubmit

En onReady(), después de tu función updateTime(), agrega el siguiente código:

1$w('#registration').onSubmit(onSubmit);
El código del backend ya está incluido
El código del backend ya está implementado en tu plantilla en Blocks. Incluye una función de exportación, notify(), que usa las utilidades preinstaladas. Verifica el tiempo restante, activa el email cuando está listo y actualiza la colección. Debes invocar esto en el Editor, como se explica a continuación en el paso 10.

Paso 7 | Crea tu app y asígnale un espacio de nombres

Ahora ya puedes crear tu app por primera vez. Tu primera versión será una versión principal. Más adelante, cuando estés trabajando en tu app, podrás elegir crear una versión secundaria o una versión principal. La versión secundaria se actualiza automáticamente en todos los sitios donde aparece. Solo tienes que actualizar la página. Cuando creas una versión principal, el creador de sitios debe actualizar tu app manualmente. Aparece un punto junto al nombre del panel de la app Installed Apps (Apps instaladas) en el Editor para que los creadores de sitios sepan que hay una nueva versión disponible. 

Más información sobre las versiones en Blocks

Cuando haces clic en la opción de crear por primera vez, Blocks te solicita un espacio de nombres para tu app. Este espacio de nombres se usa para hacer referencia a tu colección en el código de Velo en los Editores y en el código de la app en Blocks.

Más información sobre el espacio de nombres de la app (artículo en inglés)

Tu primera versión

  1. Haz clic en Build (Crear).
  2. Ingresa un espacio de nombres para tu app y haz clic en Next (Siguiente).
  3. Selecciona Major Version (Versión principal) y haz clic en Build (Crear).
  4. Recibirás un mensaje para indicar que se ha creado la versión 1.0. Haz clic en Got it (Entendido) para seguir trabajando en tu app.

Paso 8 | Agrega una colección a tu widget

Ahora necesitas crear una colección para almacenar todas las suscripciones. Las categorías en Blocks son marcadores de posición vacíos diseñados en Blocks, que se rellenarán con datos una vez que la app esté instalada en un sitio. Más información sobre las colecciones en Wix Blocks

La plantilla tiene una utilidad preinstalada llamada getSubscriptionsCollectionName(), en collectionUtils.js dentro de Public & Backend (Público y de backend). Construye el nombre completo de la colección para que no tengas que agregar el espacio de nombres completo de tu app cada vez que hagas referencia a ella en el código.

Configurar la utilidad de colección

  1. Haz clic en collectionUtils.js dentro de Público y backend.
  2. Agrega el espacio de nombres de tu app.
Tu código debería verse así, con tu propio espacio de nombres.
1
2const NAMESPACE = '@mywixaccount/my-app-namespace';
3
4export function getSubscriptionsCollectionName() {
5    return `${NAMESPACE}/subscriptions`;
6}

Crear tu colección

  1. Haz clic en Databases (Bases de datos).
  2. Haz clic en + Create collection (Crear colección).
  3. Asigna a tu colección un nombre significativo. En este ejemplo, Suscripciones.
  4. Haz clic en Crear. 

Agregar campos a la colección

  1. Haz clic en add button para agregar un campo a la colección.
  2. Selecciona Date (Fecha) en el menú desplegable Field Type (Tipo de campo).
  3. Ingresa endDate en el campo Field Name (Nombre del campo). Esta será la última fecha hasta la cual las personas podrán registrarse.
  4. Haz clic en Save (Guardar).
  5. Ahora agrega un campo de tipo texto y llámalo emailId para el email accionable.
  6. Agrega otro campo de tipo texto y llámalo contactId. Esto permitirá almacenar los datos de contacto de los usuarios registrados.
  7. Ahora crea un campo de tipo booleano y llámalo notificado. Esto garantiza que los suscriptores sean notificados solo una vez.

Configurar los permisos para tu colección

Quieres que cualquier visitante del sitio pueda agregar contenido a tu colección al suscribirse. 

  1. Haz clic en Más opciones more options icon para tu colección desde el menú Databases (Bases de datos).
  2. Selecciona Permissions & Privacy (Permisos y privacidad). 
  3. Selecciona el menú desplegable Can add content (Se puede agregar contenido).
  4. Selecciona Anyone (Cualquiera).
  5. Haz clic en Save (Guardar).

Paso 9 | Instala tu app en un sitio desde el Editor de Wix

Puedes instalar el widget en cualquiera de los Editores. El siguiente ejemplo utiliza el Editor de Wix. Antes de instalar tu app, debes crearla por segunda vez. Esta será una versión principal porque has creado una colección.
  1. Después de crear tu app, abre tu sitio web.
  2. Haz clic en Agregar apps add apps icon. 
  3. Haz clic en Apps personalizadas. Aparece una lista de todas tus apps.
  4. Selecciona tu app en la lista de Apps disponibles.
  5. Haz clic en Instalar app.
  6. Haz clic en Agregar elementos. add elements icon.
  7. Selecciona Mis widgets.
  8. Haz doble clic en el widget para agregarlo a tu sitio. 

Tu widget es fluido, y puedes seleccionar sus elementos para poder personalizar el widget para tu sitio. También puedes abrir el panel de ajustes y cambiar la fecha de finalización predeterminada. 

Configurar una ID de email

Los usuarios pueden registrarse para recibir una notificación por email. Debes crear el email que se enviará y obtener una ID para que la API del widget pueda identificar qué email debe enviarse.
  1. Abre Mi panel de control desde el menú Sitio en la barra superior.
  2. Ve a Triggered Emails (Emails accionables) en Developer Tools (Herramientas para desarrolladores).
  3. Haz clic en Get Started (Comenzar). 
  4. Ingresa un asunto.
  5. Diseña el email con las herramientas del Editor.
  6. Haz clic en Save & Publish (Guardar y publicar).
  7. Agrega los detalles del remitente, el nombre del remitente y el email de respuesta, y haz clic en Save (Guardar).
  8. Haz clic en Got it (Entendido).
  9. Haz clic en Save & Publish (Guardar y publicar) nuevamente. Obtendrás un código de identificación generado que enlaza al email que has diseñado para que se envíe a cualquiera que se registre. 
  10. Ingresa este código en tu panel personalizado en el campo Email ID (ID de email).

Usar el código del backend en el Editor de Wix para enviar notificaciones a los suscriptores

El código del backend está incluido con tu app en Blocks, pero debes invocar la notificación en el Editor.

Invocar la función de notificación

  1. Haz clic en + New web module (Nuevo módulo web) dentro de Backend en Public & Backend (Público y de backend) en el Editor de Wix.
  2. Llámalo backend.jsw.
  3. Importa la función de backend en la sección de código de tu sitio en backend.jsw.

Tu código debería verse así:

1import { notify } 'myWixId/my-application-name-backend';

Ahora crea una función de exportación invokeNotify en backend.jsw en la sección de código de tu sitio.

Tu código debería verse así:

1export function invokeNotify() {
2     return notify ();
3}
Ahora necesitas crear un trabajo programado. 

  1. Haz clic en Add (Agregar) add icon en el backend.
  2. Haz clic en settings icon Add scheduled jobs (Agregar tareas programadas). Agrega el siguiente código debajo de jobs.config en la sección de código de tu sitio. En este ejemplo, la función de notificación se invoca 10 minutos después de la hora, cada hora.

Tu código debería verse así:
1{
2   "jobs": [{
3       "functionLocation": "/backend.jsw",
4       "functionName": "invokeNotify",
5       "description": "",
6       "executionConfig": {
7           "cronExpression": "10 * * * *"
8       }
9   }]
10}

Paso 10 | Prueba tu app

Ya puedes probar tu app. 

  1. Publica tu sitio. 
  2. Regístrate para recibir una notificación por email. 
  3. Vuelve al Editor y revisa tu colección. 
  4. Puedes ver que hay un nuevo suscriptor. Cuando se envíe el email de notificación, también verás una marca de verificación en el campo notified (notificado).
Revisar los emails accionables
También puedes verificar los emails accionables debajo de Developer Tools (Herramientas para desarrolladores) en el panel de control para ver si el email se ha enviado.

¿Te ha sido útil?

|

En este artículo

  • Lo que obtienes en la plantilla
  • Paso 1 | Completa el diseño del widget
  • Paso 2 | Agrega y define las propiedades de la API del widget
  • Asignar una ID a los elementos del widget
  • Definir las propiedades "endDate" y "emailId"
  • Paso 3 | Agrega código para que tu widget funcione
  • Importar utilidades
  • Cambiar el código para tener en cuenta la nueva función
  • Previsualizar el widget y probar sus propiedades de API
  • Paso 4 | Crea y codifica un panel personalizado
  • Crear un panel personalizado
  • Agregar código a tu panel personalizado
  • Paso 5 | Configura el widget
  • Agregar tu panel personalizado a la barra de acciones flotante de tu widget
  • Paso 6 | Agrega un segundo widget (interno) e implementa la lógica de registro
  • Agregar tu widget de registro al widget de cuenta regresiva
  • Implementar la lógica de registro en el código del widget principal
  • Registrarse para el evento onSubmit
  • Paso 7 | Crea tu app y asígnale un espacio de nombres
  • Tu primera versión
  • Paso 8 | Agrega una colección a tu widget
  • Configurar la utilidad de colección
  • Crear tu colección
  • Agregar campos a la colección
  • Configurar los permisos para tu colección
  • Paso 9 | Instala tu app en un sitio desde el Editor de Wix
  • Configurar una ID de email
  • Usar el código del backend en el Editor de Wix para enviar notificaciones a los suscriptores
  • Invocar la función de notificación
  • Paso 10 | Prueba tu app