Guida introduttiva a Velo by Wix

Velo (in origine Corvid) è la piattaforma di sviluppo di Wix, che arricchisce il tuo sito con JavaScript intuitivo. La sintassi ricorda jQuery ($w(), .onClick()) ma con API integrate al CMS.

📖 Breve storia

2017: nasce come Wix Code
2019: rinominato Corvid by Wix
2020: diventa ufficialmente Velo

⚙️ Come attivare l’editor Dev Mode

Apri il tuo Wix Editor
Clicca su Dev Mode
Seleziona Enable Velo
Comparirà l’editor di codice, diviso in:
- Page Code → script per pagina
- Public / Backend → funzioni riutilizzabili
- Collections → database del sito

👩‍💻 Esempio base: click sul bottone


$w.onReady(function () {
$w("#myButton").onClick(() => {
$w("#myText").text = "Hai cliccato il bottone!";
});
});

📂 Esempio avanzato: Repeater → pagina dinamica


import wixLocation from 'wix-location';

export function container1_click(event) {
let $item = $w.at(event.context);
let currentItem = $item("#dynamicDataset").getCurrentItem();

if (currentItem && currentItem._id) {
wixLocation.to('/dbutenti/' + currentItem._id);
}
}

💡 Tip: Usa un campo “slug” personalizzato invece di _id per creare URL più leggibili e SEO-friendly.

🔐 Esempio reale: Modulo di Login


export function button2_click(event) {
wixData.query("dbUtenti")
.eq("email", $w('#input1').value) // filtra per email
.find()
.then((results) => {
if(results.items.length > 0) {
let user = results.items[0];
if (user.password === $w('#input2').value) {
$w("#text2").text = "User Recognized";
$w("#text2").show();
// memorizza l'ID nella sessione
session.setItem('myownID', user._id);
// redirect alla pagina dinamica del profilo
wixLocation.to('/dbutenti/' + user._id);
} else {
$w("#text2").text = "Password mismatch";
$w("#text2").show();
}
} else {
$w("#text2").text = "User not found";
$w("#text2").show();
}
});
}

Questo script implementa un Login personalizzato:

Cerca nella Collection dbUtenti un record con l’email inserita
Se trova corrispondenza, confronta il campo password con l’input dell’utente
Se le credenziali coincidono:
- Mostra un messaggio di User Recognized
- Memorizza l’ID utente in una variabile di sessione
- Reindirizza alla pagina dinamica personale dell’utente
Altrimenti, mostra errori di “Password mismatch” o “User not found”

📌 Requisiti:
– Un database utenti (dbUtenti) con almeno i campi email e password.
– Elementi di input con ID coerenti (#input1, #input2, …).
– Configurazione della pagina dinamica /dbutenti/[ID].

⚠️ Nota importante per la sicurezza: per ambienti reali consigliato hashing delle password (non memorizzare mai password in chiaro).

Questo esempio mostra bene come con Velo by Wix si possano creare logiche complesse con codice leggibile, poco verboso e facilmente rimanipolabile. In poche righe gestiamo query al database, confronto credenziali, creazione di sessione e navigazione dinamica.