Shortcode e widget

Come inserire JetBookIn nel tuo sito: tutti gli shortcode e i widget Elementor con tutte le opzioni, la pagina in cui va ciascuno, come adattarli ai colori del tuo brand, come funzionano i siti multilingue e – per gli sviluppatori – REST API, hook e comandi WP-CLI.

Le pagine che ti servono

Un tipico sito con JetBookIn ha queste pagine. Ogni blocco si può inserire con uno shortcode (qualsiasi tema o editor) o con il widget Elementor corrispondente.

La configurazione per una piccola villa con tre appartamenti può essere semplicissima: la home page con l’Hero di ricerca e la griglia delle camere, una pagina per appartamento (creata automaticamente) e la pagina di conferma. Un hotel di 20 camere di solito aggiunge una pagina Prenota con i risultati, così la ricerca di ogni pagina porta lì.

Pagine di conferma della prenotazione e di checkout

Due impostazioni in JetBookIn → Impostazioni → Generale dicono a JetBookIn dove mandare gli ospiti:

A seconda di come viene aperta, la pagina di conferma mostra: il checkout per un soggiorno scelto in un riquadro di prenotazione; la prenotazione dell’ospite (da un link con riferimento e chiave della prenotazione); oppure il modulo Trova la Sua prenotazione. Non ti serve mai più di una pagina di questo tipo per lingua. Cosa possono fare lì gli ospiti è descritto in La pagina della prenotazione dell’ospite.

Per trovare l’ID di una pagina, aprila in Pagine; il numero dopo post= nella barra degli indirizzi è l’ID.

I temi possono adattare la pagina intorno alla prenotazione con due classi del body: jbi-is-checkout mentre l’ospite sta ancora prenotando, e jbi-is-booking quando c’è una prenotazione da mostrare – per esempio per nascondere un titolo “Grazie” durante il checkout.

Shortcode di prenotazione

Questi blocchi sono interattivi: caricano disponibilità e prezzi in tempo reale e richiedono JavaScript (i visitatori senza JavaScript vedono Attivi JavaScript per prenotare online.). Per gli attributi yes/no, qualsiasi valore diverso da no vale come sì.

[jetbookin_search] – modulo di ricerca

Date e ospiti, poi un pulsante di ricerca. Senza una pagina dei risultati, i risultati si aprono sotto il modulo.

[jetbookin_search results_url="/book/" button="Check availability"]

[jetbookin_results] – risultati di ricerca e checkout

Elenca le tipologie di camera libere per le date scelte con le loro tariffe, permette all’ospite di sceglierne una o più e gestisce il checkout. Se non c’è nulla di libero, propone altre date.

[jetbookin_booking] – riquadro di prenotazione della camera

Calendario, ospiti, tariffe e prezzo per una tipologia di camera. Prenota prosegue nella pagina di checkout con il soggiorno già compilato.

[jetbookin_booking room="42" months="2"]

[jetbookin_calendar] – calendario della disponibilità

[jetbookin_confirmation] – conferma / gestione della prenotazione

Nessun attributo. [jetbookin_manage] fa esattamente la stessa cosa. Inseriscilo in una sola pagina (per lingua) e imposta quella pagina come ID della pagina di conferma prenotazione.

[jetbookin_search_hero] – hero a tutta larghezza con ricerca

[jetbookin_search_hero image="https://example.com/wp-content/uploads/pool.jpg" heading="Three stone houses above Elounda" subheading="Book direct for the best price" results_url="/book/"]

Shortcode per camere e struttura

Questi vengono generati sul server (ottimo per velocità e motori di ricerca). Quando un attributo indica una tipologia di camera, ometterlo usa la tipologia della pagina mostrata; gli attributi della struttura ricadono sulla struttura corrente, sulla struttura della camera corrente o sulla tua prima struttura.

Quando un blocco non ha nulla da mostrare (nessuna foto, nessun servizio…), gli ospiti non vedono niente; lo staff connesso e l’editor di Elementor vedono un suggerimento su cosa compilare.

[jetbookin_rooms] – griglia o carosello delle camere

[jetbookin_rooms layout="carousel" columns="3" orderby="price" amenities="0"]

[jetbookin_room_gallery]

[jetbookin_room_amenities]

[jetbookin_room_specs]

[jetbookin_room_price]

Il prezzo per notte più basso dalle tue tariffe, per es. da €95 / notte.

[jetbookin_room_policies]

[jetbookin_property_info]

Shortcode per le recensioni Pro

Entrambi richiedono il modulo Recensioni degli ospiti; con il modulo disattivato non mostrano nulla.

[jetbookin_reviews] – recensioni pubblicate

Il punteggio medio con la sua etichetta (per es. Eccellente), le schede delle recensioni con le tue risposte, un pulsante Mostra altre recensioni e i dati di valutazione schema.org per i motori di ricerca.

[jetbookin_reviews limit="3" bars="yes" empty="Be the first to review your stay."]

[jetbookin_review] – modulo di recensione

Nessun attributo. Serve solo se vuoi che gli ospiti recensiscano su una pagina dedicata: inseriscilo lì e indica l’ID della pagina come ID della pagina recensioni in Prenotazioni → Recensioni. Altrimenti gli ospiti recensiscono sulla pagina di conferma della prenotazione. Il modulo si apre dal link firmato nell’e-mail di richiesta di recensione.

Pagine per le pulizie e per i proprietari Pro

• [jetbookin_housekeeping] (modulo Pulizie): l’elenco giornaliero delle pulizie su smartphone, per gli utenti connessi con il ruolo Addetto alle pulizie e per i gestori delle prenotazioni. Agli altri viene chiesto di accedere oppure viene detto che non hanno accesso. Dopo l’accesso, gli addetti alle pulizie vengono mandati su questa pagina.
• [jetbookin_owner] (modulo Proprietari e rendiconti): i rendiconti mensili e il calendario di occupazione di un proprietario, per gli utenti connessi con il ruolo Proprietario della struttura collegati a una struttura. Dopo l’accesso i proprietari vengono mandati qui invece che in wp-admin.

Nessuno dei due ha attributi. Entrambe le pagine vengono escluse automaticamente dalle cache delle pagine. Crea ciascuna come normale pagina di WordPress pubblicata.

Pagine delle camere senza page builder

Ogni tipologia di camera ha una propria pagina sul sito. Se non è costruita con Elementor, JetBookIn la trasforma da solo in una pagina camera completa: la galleria fotografica (un mosaico a partire da cinque foto), ospiti / letti / dimensione, il prezzo “a partire da”, la tua descrizione, i servizi, le condizioni e il riquadro di prenotazione – accanto ai dettagli sugli schermi larghi, sotto sugli smartphone.

Se il contenuto della camera contiene già uno shortcode [jetbookin_room_…], alla fine viene aggiunto solo il riquadro di prenotazione; se contiene [jetbookin_booking], non viene aggiunto nulla. Con Elementor, progetta nel Theme Builder un unico template singolo per le tipologie di camera e usa i widget della camera con — Tipologia di camera corrente —.

Widget Elementor

Nell’editor di Elementor cerca JetBookIn oppure apri la categoria JetBookIn nel pannello dei widget. Ogni widget genera esattamente lo stesso blocco del suo shortcode.

Controlli del contenuto

Le colonne sono responsive: per impostazione predefinita 3 su desktop, 2 su tablet e 1 su smartphone, e puoi impostare ogni dispositivo separatamente.

Controlli di stile

Ogni widget JetBookIn ha una sezione Colori e forma nella scheda Stile:

• Primario (pulsanti, selezione), Testo dei pulsanti, Sfondo, Testo, Bordi – colori;
• Raggio degli angoli – da 0 a 24 px;
• Tipografia – famiglia di caratteri, dimensione, peso e così via per l’intero widget.

Alcuni widget hanno controlli in più:

• Griglia / carosello camere: Scheda (Sfondo, Ombra, Spaziatura interna), Titolo della camera e Prezzo (tipografia e colore).
• Servizi della camera: Icone (Colore, Dimensione).
• Prezzo camera a partire da: Prezzo (tipografia e colore).
• Hero di ricerca: Titolo e Sottotitolo (tipografia e colore).
• Recensioni: Titolo della recensione e Testo della recensione (tipografia e colore).

Suggerimento: imposta lo stesso colore Primario su tutti i widget di prenotazione della pagina. Il pulsante Completa la prenotazione che compare per le prenotazioni non pagate prende colori, angoli e carattere dal widget di prenotazione presente nella pagina.

Colori e stile

Tutti i blocchi JetBookIn leggono colori e forme da variabili CSS impostate sul contenitore .jbi-widget. I controlli di stile di Elementor impostano queste stesse variabili. Senza Elementor, impostale in Aspetto → Personalizza → CSS aggiuntivo o nel foglio di stile del tuo tema.

Le variabili sono definite su .jbi-widget stesso, quindi impostale con un selettore almeno altrettanto specifico, per esempio:

/* Pulsanti blu mare, angoli squadrati, ovunque */
body .jbi-widget {
	--jbi-primary: #0e5e6f;
	--jbi-on-primary: #ffffff;
	--jbi-radius: 4px;
}

/* Un riquadro di prenotazione scuro in una sola sezione */
.booking-dark .jbi-widget {
	--jbi-surface: #1f1d1a;
	--jbi-surface-2: #2a2723;
	--jbi-text: #f4f1ea;
	--jbi-muted: #b9b4aa;
	--jbi-border: #3a3631;
}

Impostare le variabili solo su body o :root non ha effetto, perché .jbi-widget imposta i propri valori predefiniti.

Siti multilingue (Polylang, WPML)

JetBookIn funziona con Polylang e WPML. Le traduzioni di una tipologia di camera o di una struttura sono la stessa camera: condividono disponibilità, prezzi, prenotazioni, galleria e immagine principale. Gli ospiti vedono tutto nella lingua della pagina su cui prenotano, e ricevono e-mail e pagina della prenotazione in quella lingua.

Cosa tradurre

• Tipologie di camera e strutture: traducile con il tuo plugin multilingue (titolo, descrizione, riassunto). Nella traduzione di una struttura scrivi anche le sue istruzioni per il check-in in quella lingua.
• La pagina di conferma della prenotazione e, se la usi, la pagina Prenota / checkout: crea una traduzione di ciascuna con lo stesso shortcode o widget. Nelle Impostazioni va solo l’ID dell’originale; JetBookIn manda gli ospiti alla traduzione nella loro lingua.
• Le pagine dei termini e della privacy e la pagina delle recensioni: traducile allo stesso modo. Il checkout apre la versione nella lingua dell’ospite.
• Pagine con ricerca, camere e recensioni: traducile come normali pagine; shortcode e widget restano gli stessi.

Se una pagina non ha traduzione, viene usato l’originale.

I nomi che scrivi nella dashboard

Nomi dei piani tariffari, extra (nome e descrizione), promozioni, costi personalizzati e coordinate per il bonifico vengono registrati come stringhe: in Polylang in Lingue → Traduzioni (gruppo JetBookIn), in WPML in String Translation (dominio JetBookIn). Piani tariffari, extra e promozioni hanno anche i campi In altre lingue proprio sotto il loro nome nella dashboard; i due punti restano allineati. Una traduzione vuota mostra l’originale.

E-mail

I testi delle e-mail si modificano per lingua in Impostazioni → E-mail, non con il plugin multilingue. Vedi E-mail → Un testo per ogni lingua.

Sviluppatori: REST API

Tutto ciò che fa la dashboard passa dalla REST API nel namespace jetbookin/v1, per es. https://example.com/wp-json/jetbookin/v1/availability/search. Gli endpoint per lo staff richiedono un utente connesso con la capability manage_jetbookin (amministratori e ruolo Gestore prenotazioni) – un cookie con un nonce REST, oppure una password per le applicazioni per app e altri server. Gli endpoint pubblici più usati (checkout, preventivi, azioni dell’ospite, recensioni) hanno un limite di richieste per client.

Principali endpoint pubblici

Gli endpoint per lo staff comprendono /bookings (elenco, creazione, PUT /bookings/{id}, cancellazione, pagamenti, richieste di pagamento, messaggi), /calendar, /quote, /settings, /emails, /reviews e /ical/connections. I fornitori di pagamento chiamano le proprie route webhook nello stesso namespace.

Sviluppatori: hook

Tutti gli hook di JetBookIn iniziano con jbi/. Usali da un piccolo plugin o dal functions.php del tuo tema child.

Azioni

Filtri

// Consenti due prenotazioni non pagate per indirizzo e-mail.
add_filter( 'jbi/max_open_holds', fn() => 2 );

// Invia ogni prenotazione confermata a un altro sistema.
add_action( 'jbi/booking_confirmed', function ( array $booking ) {
	wp_remote_post( 'https://example.com/hook', [ 'body' => [ 'ref' => $booking['ref'] ] ] );
} );

// Per i motori di ricerca le camere sono camere d'hotel.
add_filter( 'jbi/structured_data_room_type', fn() => 'HotelRoom' );

Le e-mail di avviso fisse si possono sovrascrivere copiando admin-conflict.php, admin-sync-failing.php o admin-late-payment.php in yourtheme/jetbookin/emails/.

Sviluppatori: WP-CLI

Sui siti live è consigliato un vero cron sul server al posto del cron di WordPress attivato dai visitatori, per esempio ogni 5 minuti:

*/5 * * * * cd /path/to/wordpress && wp jetbookin run-jobs --quiet

Vedi Impostazioni avanzate per le attività in background.

Domande

Il riquadro di prenotazione non mostra nulla.

Fuori dalla pagina della tipologia di camera ha bisogno di room="ID" (in Elementor: scegli la Tipologia di camera). Controlla anche che la tipologia sia pubblicata e abbia delle tariffe.

La ricerca manda gli ospiti alla pagina sbagliata.

Imposta results_url nella ricerca (oppure Pagina dei risultati nel widget) sulla pagina con [jetbookin_results]. Senza, i risultati si aprono sotto il modulo.

I miei colori non cambiano.

Imposta le variabili su .jbi-widget (per esempio body .jbi-widget { … }), non solo su body o :root. Poi svuota la cache CSS o del plugin di ottimizzazione.

Posso usare gli shortcode in Gutenberg, Divi o Bricks?

Sì. Aggiungi un blocco Shortcode (o l’elemento shortcode del tuo builder) e incolla lo shortcode.

Mi serve una pagina di checkout separata?

No. Se ID della pagina di checkout è vuoto, il riquadro di prenotazione prosegue sulla pagina di conferma della prenotazione. Una pagina Prenota dedicata con i risultati è utile quando vuoi anche una pagina di ricerca.

Ho eliminato per errore la pagina Conferma della prenotazione.

Crea una pagina con [jetbookin_confirmation], pubblicala e inserisci il suo ID come ID della pagina di conferma prenotazione in Impostazioni → Generale. I link nelle e-mail inviate prima puntano ancora al vecchio indirizzo, quindi se serve invia di nuovo il link della prenotazione agli ospiti interessati.