Centro di Assistenza Wix
    Home
  1. Creare il tuo sito
  2. Funzionalità avanzate
  3. Wix Blocks
  4. Tutorial
    5. Tutorial Wix Blocks: creare un widget per il conto alla rovescia

Tutorial Wix Blocks: creare un widget per il conto alla rovescia

Tempo di lettura: 21 min.
Wix Blocks è aperto a tutti gli utenti di Wix Studio. Per ottenere l'accesso a Blocks, iscriviti a Wix Studio.
Questo tutorial mostra come creare un widget per il conto alla rovescia, per eseguire il conto alla rovescia fino a una data specifica. Contiene anche un widget per la registrazione e permettere ai visitatori del sito di registrarsi, ricevendo una notifica via email il giorno prima dell'evento. Imparerai anche come installare il widget per il conto alla rovescia su un sito ed esplorerai tutte le funzionalità chiave di Blocks.
Widget per il conto alla rovescia

Cosa troverai nel template

Per semplificarti le cose, abbiamo creato un template con cui puoi iniziare subito.

Il template contiene:
  • Un widget per il conto alla rovescia. È però necessario completare il design e codificare le sue funzioni e proprietà
  • Un widget di registrazione che devi completare e aggiungere al widget per il conto alla rovescia
  • Alcuni programmi di utility che puoi utilizzare per implementare le funzionalità del tuo widget
  • Codice di backend che puoi utilizzare per implementare le funzioni delle tue email di notifica

Vai al template

Passaggio 1 | Completa il design del tuo widget

Per creare questo widget, inizia con questo template e modificalo nel tuo account Wix. Il template è stato lasciato incompleto in modo che tu possa imparare come aggiungere elementi al tuo widget.
Il widget è progettato con una griglia in modo da poter allineare e posizionare facilmente gli elementi.

  1. Apri il template 
  2. Clicca su Countdown (Conto alla rovescia) sotto Widget e design 
  3. Clicca su Aggiungi elementi Add icon nella barra in alto
  4. Seleziona Testo. Trascina una casella Titolo da 48 px nel widget
  5. Clicca su Modifica testo e modifica il testo in SS
  6. Cambia il colore del testo in bianco e centra il testo utilizzando il pannello Ispezione  
  7. Seleziona la casella di testo e spostala nel quadrato della griglia sopra l'etichetta Seconds move elements icon
  8. Ridimensiona con stretch icon

Scopri di più sul design del tuo widget

Passaggio 2 | Aggiungi e definisci le proprietà API del tuo widget

Puoi definire un'API per il tuo widget (articolo in inglese), in modo che il creatore del sito che installa il widget possa interagire con esso tramite il codice. L'API può contenere proprietà, eventi e funzioni esportate.

Questo widget utilizza due proprietà:
  • endDate: definisce la data di fine quando il conto alla rovescia raggiunge lo zero. Utilizzando questa proprietà, i creatori del sito possono modificare la data di fine in modo che il widget sia personalizzato per il loro sito
  • emailId: determina il messaggio email che verrà inviato agli utenti quando si iscrivono per ricevere una notifica

Scopri di più sulle proprietà dell'API del widget (articolo in inglese)

Dai un ID agli elementi del widget

Per prima cosa devi dare un ID agli elementi del widget in modo da poter fare facilmente riferimento ad essi nel codice.
  1. Clicca sulla casella di testo
  2. Assegna un ID alla casella di testo nel pannello Proprietà ed eventi properties icon . In questo esempio l'ID è secondsTxt. Nota che agli altri elementi sono già stati assegnati ID

Definisci le proprietà "endDate" e "emailId"

  1. Clicca su Aggiungi nuova proprietà nel pannello API properties icon
  2. Inserisci il nome della proprietà, endDate
  3. Seleziona il tipo di proprietà, in questo caso Data e ora (la data viene visualizzata nel formato USA mm/gg/aaaa)
  4. Seleziona un valore predefinito (il creatore del sito sarà in grado di modificarlo quando installerà il tuo widget nell'editor)
  5. Passa il mouse su Proprietà e clicca sull'icona visualizza add icon
  6. Crea un'altra proprietà per l'email trigger e chiamala emailId. Si tratta di una proprietà di tipo testo, senza valori predefiniti

Passaggio 3 | Aggiungi un codice per far funzionare il tuo widget


Per fare il conto alla rovescia del tuo widget, dobbiamo creare una funzione nel codice che calcoli il tempo rimanente fino alla data di fine. Per fare ciò, il tuo template viene fornito con alcune utility preinstallate che puoi trovare nella sezione del menu Pubblico e backend public and backend icon . 

Blocks utilizza una nuova variabile globale, $widget e la proprietà, $widget.props, che contiene tutte le proprietà che hai definito per il tuo widget.

Blocks utilizza anche il completamento automatico Velo, in modo da poter scrivere il codice più facilmente.

Scopri di più sull'API widget (articolo in inglese).

Importa i tuoi programmi di utility

  1. Clicca sul menu Pubblico e backend
  2. Seleziona dateUtils.js in Pubblico. Questo apre il file nel pannello del codice

Cambia il codice per aggiornarlo con la tua nuova funzione

Crea una funzione, updateTime(), in modo che il widget del conto alla rovescia aggiorni il conteggio. La tua nuova funzione dovrebbe apparire così:

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 }

È inoltre necessario impostare un intervallo per la frequenza con cui il widget aggiorna il tempo rimanente.
Per fare ciò, aggiungi il seguente codice nella tua funzione onReady(). Questo aggiorna il widget ogni secondo.

1$w.onReady(function () {
2    updateTime();
3    if (wixWindow.viewMode !== "Editor") {
4        setInterval(updateTime, 1000);
5    }
6});
Modifica le condizioni dell'orario
Il codice Velo viene eseguito solo quando clicchi su anteprima o quando apri il sito live. Il codice Blocks onReady viene eseguito anche durante la fase di modifica, in modo che tu possa vederlo in azione mentre lavori nell'Editor. Usiamo la condizione di cui sopra in modo che il widget del conto alla rovescia non faccia il conto alla rovescia durante il tempo di modifica. 

Visualizza l'anteprima del widget e testa le proprietà API

Sei pronto per visualizzare in anteprima il tuo widget e le sue proprietà API.

  1. Clicca su Anteprima Il widget dovrebbe effettuare un conto alla rovescia ogni secondo fino alla data della fine
  2. Clicca su Test delle proprietà API. Viene visualizzato un pannello con il valore predefinito impostato in precedenza 
  3. Modifica la data per verificare se il widget risponde ed esegue il conto alla rovescia fino alla nuova data

Passaggio 4 | Crea e codifica un pannello personalizzato

Puoi creare un pannello delle impostazioni personalizzato in modo che i creatori di siti possano modificare le impostazioni del widget quando lo installano su un sito. In questo esempio il pannello delle impostazioni personalizzate consente al creatore del sito di modificare la data di fine e definire un ID email che determina quale email verrà inviata agli utenti al momento della registrazione per ricevere le notifiche.

Scopri di più sui pannelli.

Crea un pannello personalizzato

  1. Clicca sulla scheda Pannelli nella barra in alto
  2. Clicca su Crea pannello
  3. Dai un nome alla tua pannello. In questo esempio, "My settings" (Le mie impostazioni)
  4. Clicca su Crea pannello
  5. Clicca su + Aggiungi elemento
  6. Seleziona Input di testo. Sarà per la data della fine
  7. Clicca su Proprietà ed eventi propeties icon. Dai un ID al tuo input di testo - endDateInput
  8. Seleziona l'elemento di testo e clicca su Impostazioni
  9. Aggiungi il nome "End Date" nel campo Titolo campo
  10. Elimina il testo nel campo Testo predefinito
  11. Imposta il testo placeholder su "Data della fine"
  12. Aggiungi un divisore di sezione
  13. Clicca su Impostazioni. Aggiungi un titolo nel campo Sezione Titolo. In questo esempio, "Triggered email" (Email trigger)
  14. Aggiungi un altro input di testo Dai al tuo input di testo un ID - emailIdInput.
  15. Seleziona l'elemento di testo e clicca su Impostazioni
  16. Aggiungi il nome "ID email" nel campo Titolo campo
  17. Elimina il testo nel campo Testo predefinito
  18. Imposta il testo placeholder su "ID email"
Il design del tuo pannello personalizzato è completo. Ora devi implementarlo aggiungendo un codice.

Aggiungi il codice al pannello personalizzato


Vuoi che il tuo pannello personalizzato mostri la data di fine e l'ID email attuali durante il caricamento Il creatore del sito utilizza il pannello per modificare questi valori. È necessario aggiungere un codice al pannello in modo che, quando questi input cambiano, aggiorni il widget.

Scopri di più su come aggiungere codice ai riquadri personalizzati (articolo in inglese).

Per consentire agli elementi del pannello di interagire con il widget ed eseguire azioni nell'Editor, puoi utilizzare nel tuo codice il modulo Velo wix-widget.

Per utilizzare l'API Widget, importa wixWidget dal modulo wix-widget .

Inserisci il codice seguente prima della funzione onReady()

1import wixWidget from 'wix-widget';

Vuoi che il tuo widget si aggiorni quando i valori cambiano, quindi è necessario registrare un evento onChange . Devi anche aggiungere async nella tua funzione onReady () poiché utilizzerai alcune funzioni asincrone.

La tua funzione onReady() dovrebbe apparire così:

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});
Clicca su run icon Esegui o Anteprima per controllare il codice

Passaggio 5 | Configura il tuo widget

Ora che il pannello è progettato e codificato, devi configurare il widget in modo che il pannello si colleghi a uno dei tasti della barra delle azioni del widget.

La scheda Configurazioni consente di controllare il modo in cui il widget si comporta quando un creatore di un sito lo installa e lo personalizza su un sito. Puoi assegnare nomi visualizzati al tuo widget e ai suoi elementi, in modo che sia chiaro ai creatori del sito cosa fa il widget. Puoi anche apportare modifiche alle barre delle azioni mobili che appaiono nell'editor quando i creatori del sito selezionano elementi nel widget.

Scopri di più sulla configurazione.

Aggiungi il tuo pannello personalizzato alla barra delle azioni del widget

  1. Clicca su Configurazione nella barra in alto 
  2. Seleziona il widget per il conto alla rovescia. Viene visualizzata una barra azioni
  3. Clicca su Impostazioni
  4. Clicca su settings icon Impostazioni del tasto azione. Viene visualizzato il pannello Impostazioni delle azioni principali
  5. Seleziona Le mie impostazioni dall'elenco a tendina per selezionare il tuo pannello personalizzato

Passaggio 6 | Aggiungi un secondo widget (interno) e implementa la logica per la registrazione

Il template viene fornito con un secondo widget chiamato Registration. Puoi trovarlo sotto Widget e design. 

Quando clicchi su Livelli puoi vedere che è stato creato come riquadro multistato con tre stati. Ha un tasto etichettato Register (Registrazione), che cambia in Submit (Invia) quando il visitatore del sito clicca. Ha anche un campo in cui i visitatori del sito possono aggiungere il loro indirizzo email. Quando un visitatore del sito si è registrato, viene visualizzato un messaggio di ringraziamento.

Questo widget viene fornito con un design predefinito che può essere utilizzato per la visualizzazione mobile.

Scopri di più sui design predefiniti (articolo in inglese).

Aggiungi il widget di registrazione al widget del conto alla rovescia

Ora sei pronto per aggiungere il widget di registrazione al tuo primo widget, il widget del conto alla rovescia. In Blocks puoi creare tantissimi widget diversi e aggiungerli ad altri widget. 

Scopri di più su come lavorare con i widget all'interno dei widget
  1. Nella scheda Design, seleziona il widget per il conto alla rovescia
  2. Clicca su Altre opzioni more options e seleziona Aggiungi widget
  3. Seleziona Registration. Il tuo widget interno viene visualizzato al centro del widget del conto alla rovescia
  4. Trascina e allunga il widget interno per adattarlo alla sezione inferiore del widget del conto alla rovescia
  5. Cambia il suo ID in Registration in Proprietà & Eventi propeties icon
Un altro modo per aggiungere un widget
Puoi anche aggiungere un widget interno cliccando sul menu  add button  Aggiungi elementi. Seleziona I miei widget e trascina il widget che vuoi aggiungere al primo widget.

Implementa la logica di registrazione nel codice del widget principale

Implementerai il codice per la registrazione degli utenti nel widget principale (conto alla rovescia), utilizzando utility preinstallata contactUtils.js. Usa l'API wix-crm per collegare il tuo contatto alla tua raccolta

Questo codice indirizza le informazioni alla tua raccolta. Utilizza l'utilità che utilizzerai in seguito quando creerai una raccolta. Puoi vedere getSubscriptionsCollectionName() nel codice.

  1. Crea una nuova funzione asincrona
  2. Chiamala onSubmit. Userà l'utility di creazione del contatto

Il tuo codice dovrebbe apparire così:

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

Registra per l'evento onSubmit

Nel tuo onReady(), dopo la funzione updateTime(), aggiungi il seguente codice:

1$w('#registration').onSubmit(onSubmit);
Il codice di backend è già incluso
Il codice di backend è già implementato nel tuo template in Blocks. Include una funzione di esportazione, notify(), che utilizza le utility preinstallate. Controlla il tempo rimanente, attiva l'email quando è l'ora e aggiorna la raccolta. Devi richiamarlo nell'Editor, come spiegato di seguito al passaggio 10.

Passaggio 7 | Crea la tua app e assegnagli un Namespace

Ora puoi creare la tua app per la prima volta. La tua prima build sarà una versione principale. In seguito, quando stai lavorando alla tua app, puoi scegliere di fare una build minore o maggiore. Una versione secondaria viene aggiornata automaticamente su tutti i siti in cui appare. Devi solo aggiornare la pagina. Quando fai una build principale, il creatore di un sito deve aggiornare la tua app manualmente. Accanto al nome dell'app App installate nell'Editor viene visualizzato un punto in modo che i creatori del sito sappiano che è disponibile una nuova versione. 

Scopri di più sulle versioni in Blocks.

Quando clicchi su Crea per la prima volta, Blocks ti chiede di assegnare uno spazio nomi all'app. Questo spazio dei nomi viene utilizzato per fare riferimento alla tua raccolta sul codice Velo nell'Editor e nel codice dell'app in Blocks.

Scopri di più sullo namespace delle app.

La tua prima build

  1. Clicca su Crea
  2. Inserisci uno spazio nomi per la tua app e clicca su Avanti
  3. Seleziona Versione principale e clicca su Crea
  4. Verrà visualizzato un messaggio che ti informa che la versione 1.0 è stata creata. Clicca su OK per continuare a lavorare sulla tua app

Passaggio 8 | Aggiungi una raccolta al tuo widget

Ora devi creare una raccolta per archiviare tutte le iscrizioni. Le Raccolte in Blocks sono segnaposto vuoti che puoi progettare in Blocks, che verranno riempiti di dati una volta installata l'app su un sito. Scopri di più sulle raccolte in Blocks.

Il template ha un'utility preinstallata chiamata getSubscriptionsCollectionName(), in collectionUtils.js sotto Pubblico e backend. Costruisce il nome completo della raccolta in modo da non dover aggiungere lo spazio dei nomi completo dell'app ogni volta che vi fai riferimento nel codice.

Configura il tuo programma di utility di raccolta

  1. Clicca su collectionUtils.js sotto Pubblico e backend
  2. Aggiungi il namespace alla tua app
Il tuo codice dovrebbe apparire così, con il tuo namespace:
1
2const NAMESPACE = '@mywixaccount/my-app-namespace';
3
4export function getSubscriptionsCollectionName() {
5    return `${NAMESPACE}/subscriptions`;
6}

Crea la tua raccolta

  1. Clicca su Database
  2. Clicca su + Crea raccolta
  3. Dai un nome alla tua raccolta. In questo esempio, Subscriptions (Abbonati/Iscrizioni)
  4. Clicca su Crea 

Aggiungi campi alla tua raccolta

  1. Clicca su add button per aggiungere un campo alla raccolta
  2. Seleziona Data dal menu a tendina Tipo di campo
  3. Inserisci endDate nel campo Nome. Questa sarà l'ultima data fino alla quale le persone potranno registrarsi.
  4. Clicca su Salva
  5. Ora aggiungi un campo di testo e chiamalo emailId per l'email trigger
  6. Aggiungi un altro campo di testo e chiamalo contactId. In questo modo verranno memorizzati i dettagli di contatto degli utenti registrati
  7. Ora crea un campo di tipo booleano e chiamalo notified (Notificato). Ciò garantisce che gli iscritti vengano avvisati una sola volta

Imposta le autorizzazioni per la raccolta

Vuoi che qualsiasi visitatore del sito possa aggiungere contenuti alla tua raccolta iscrivendosi. 

  1. Clicca su Altre opzioni more options icon per la raccolta dal menu Database
  2. Seleziona Autorizzazioni e Privacy 
  3. Seleziona il menu a tendina Può aggiungere contenuti
  4. Seleziona Tutti
  5. Clicca su Salva

Passaggio 9 | Installa la tua app su un sito nell'Editor Wix

Puoi installare il widget su qualsiasi Editor. L'esempio seguente utilizza l'Editor Wix. Prima di installare l'app, devi crearla una seconda volta. Sarà un build principale perché hai creato una raccolta.
  1. Dopo aver creato la tua app, apri il tuo sito web
  2. Clicca su Aggiungi app add apps icon 
  3. Clicca su App personalizzate. Vedrai un elenco di tutte le tue app
  4. Seleziona la tua app dall'elenco App disponibili
  5. Clicca su Installa l'app
  6. Clicca su Aggiungi elementi add elements icon
  7. Seleziona I miei widget
  8. Clicca due volte sul widget per aggiungerlo al tuo sito 

Il widget è fluido e puoi selezionare i suoi elementi in modo da poter personalizzare il widget per il tuo sito. Puoi anche aprire il pannello delle impostazioni e modificare la data di fine predefinita. 

Imposta un ID email

Gli utenti possono registrarsi per ricevere una notifica via email. È necessario creare l'email che verrà inviata e ottenere un ID in modo che l'API del widget possa identificare quale email deve essere inviata.
  1. Apri Il mio pannello di controllo dal menu Sito nella barra in alto
  2. Vai a Email trigger negli Strumentiper gli sviluppatori
  3. Clicca su Inizia 
  4. Inserisci un oggetto
  5. Progetta il design dell'email utilizzando gli strumenti dell'Editor
  6. Clicca su Salva e pubblica
  7. Aggiungi i dettagli del mittente, il Nome mittente e l'Email di risposta e clicca su Salva
  8. Clicca su OK
  9. Clicca di nuovo su Salva e pubblica. Ricevi un codice identificativo generato che si collega all'email che hai progettato in modo che venga inviato a chiunque si registri 
  10. Inserisci questo codice nel pannello personalizzato nel campo ID email

Usa il codice di backend nell'Editor Wix per avvisare gli iscritti

Il codice di backend è incluso nella tua app in Blocks, ma devi richiamare la notifica nell'Editor.

Richiama la tua funzione di notifica

  1. Clicca su + Nuovo modulo web sotto Backend in Pubblico e backend nell'Editor Wix
  2. Chiamalo backend.jsw
  3. Importa la funzione di backend nella sezione codice del tuo sito sotto backend.jsw

Il tuo codice dovrebbe apparire così:

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

Ora crea una funzione di esportazione invokeNotify in backend.jsw nella sezione codice del tuo sito.

Il tuo codice dovrebbe apparire così:

1export function invokeNotify() {
2     return notify ();
3}
Ora devi creare un lavoro programmato. 

  1. Clicca su Aggiungi add icon nel backend
  2. Clicca su settings icon Aggiungi attività pianificate Aggiungi il seguente codice sotto jobs.config nella sezione codice del tuo sito. In questo esempio la funzione di notifica viene richiamata ogni ora dopo 10 minuti

Il tuo codice dovrebbe apparire così:
1{
2   "jobs": [{
3       "functionLocation": "/backend.jsw",
4       "functionName": "invokeNotify",
5       "description": "",
6       "executionConfig": {
7           "cronExpression": "10 * * * *"
8       }
9   }]
10}

Passaggio 10 | Prova l'app

Ora puoi testare la tua app. 

  1. Pubblica il tuo sito 
  2. Registrati per ricevere una notifica via email 
  3. Torna all'Editor e controlla la tua raccolta 
  4. Puoi vedere che c'è un nuovo iscritto. Quando l'email di notifica viene inviata, vedrai anche un segno di spunta nel campo notifica
Controlla le email trigger
Puoi anche controllare le Email Trigger sotto Strumenti per gli sviluppatori nel Pannello di controllo per vedere se l'email è stata inviata.

Hai trovato utile questo articolo?

|

In questo articolo:

  • Cosa troverai nel template
  • Passaggio 1 | Completa il design del tuo widget
  • Passaggio 2 | Aggiungi e definisci le proprietà API del tuo widget
  • Dai un ID agli elementi del widget
  • Definisci le proprietà "endDate" e "emailId"
  • Passaggio 3 | Aggiungi un codice per far funzionare il tuo widget
  • Importa i tuoi programmi di utility
  • Cambia il codice per aggiornarlo con la tua nuova funzione
  • Visualizza l'anteprima del widget e testa le proprietà API
  • Passaggio 4 | Crea e codifica un pannello personalizzato
  • Crea un pannello personalizzato
  • Aggiungi il codice al pannello personalizzato
  • Passaggio 5 | Configura il tuo widget
  • Aggiungi il tuo pannello personalizzato alla barra delle azioni del widget
  • Passaggio 6 | Aggiungi un secondo widget (interno) e implementa la logica per la registrazione
  • Aggiungi il widget di registrazione al widget del conto alla rovescia
  • Implementa la logica di registrazione nel codice del widget principale
  • Registra per l'evento onSubmit
  • Passaggio 7 | Crea la tua app e assegnagli un Namespace
  • La tua prima build
  • Passaggio 8 | Aggiungi una raccolta al tuo widget
  • Configura il tuo programma di utility di raccolta
  • Crea la tua raccolta
  • Aggiungi campi alla tua raccolta
  • Imposta le autorizzazioni per la raccolta
  • Passaggio 9 | Installa la tua app su un sito nell'Editor Wix
  • Imposta un ID email
  • Usa il codice di backend nell'Editor Wix per avvisare gli iscritti
  • Richiama la tua funzione di notifica
  • Passaggio 10 | Prova l'app