Guida al frontend – Shortcode

Simple BnB Rental include due shortcode che puoi utilizzare per mostrare il modulo di prenotazione sul tuo sito. Grazie a questi shortcode, i visitatori possono verificare la disponibilità e inviare una richiesta di prenotazione direttamente dal front end del sito, senza bisogno di conoscenze tecniche.

1. Modulo di prenotazione principale

Shortcode:

[simpbnb_booking]

Cosa fa

Questo shortcode aggiunge un modulo di prenotazione completo a qualsiasi pagina o articolo.

Permette agli ospiti di:

Selezionare le date di check-in e check-out
Indicare il numero di adulti e bambini
Visualizzare le camere disponibili
Inviare una richiesta di prenotazione

Come usarlo

Crea una nuova pagina in WordPress (ad esempio “Prenota il tuo soggiorno”).
Incolla questo shortcode nell’area di contenuto: [simpbnb_booking]
Pubblica la pagina.

Il plugin caricherà automaticamente il modulo di prenotazione, le schede delle camere e tutti gli script e gli stili necessari.

Cosa vedranno i visitatori

A sinistra: una barra laterale con la selezione delle date e del numero di ospiti.
A destra: un elenco delle camere disponibili, ognuna con nome, immagine e pulsante “Prenota ora”.

Se nelle impostazioni del plugin hai attivato l’opzione “Mostra le camere prima della ricerca”, la pagina mostrerà subito tutte le camere al caricamento. Altrimenti, le camere verranno visualizzate solo dopo che l’utente avrà selezionato le date e cliccato su Cerca disponibilità.

2. Modulo di prenotazione per singola camera

Shortcode:

[simpbnb_room id="X"]

(dove X è l’ID della camera)

Cosa fa

Questo shortcode mostra un modulo di prenotazione per una specifica camera. È ideale se hai creato una pagina WordPress (o un Tipo di post personalizzato) dedicata a ogni camera, con descrizione e immagini.

Come usarlo

Crea una nuova pagina (o un CPT) in WordPress per la camera (ad esempio “Camera Deluxe”).
Incolla lo shortcode con l’ID corretto, ad esempio: [simpbnb_room id="2"]
Pubblica la pagina.

Quella pagina mostrerà:

Il nome, la descrizione e l’immagine della camera
Un modulo di prenotazione con la selezione di date e ospiti
I pulsanti per verificare la disponibilità e confermare la prenotazione

Se un visitatore arriva su questa pagina dopo aver cliccato su una camera dal modulo principale, le date e il numero di ospiti verranno precompilati automaticamente.

3. Rendere cliccabili le schede delle camere

Nel modulo principale [simpbnb_booking], ogni camera appare come una scheda con immagine, titolo e pulsante “Prenota ora”.

Per impostazione predefinita, le schede non sono cliccabili: solo il pulsante funziona.
Tuttavia, puoi rendere immagine e titolo cliccabili, in modo che portino alla pagina della singola camera.

Come abilitare i link

Vai nel pannello di amministrazione di WordPress → Camere.
Modifica una camera.
Nel campo “URL dettagli”, inserisci il link completo alla pagina WordPress dove hai aggiunto lo shortcode [simpbnb_room id="X"].
Salva le modifiche.

Da questo momento:

L’immagine e il titolo della camera nel modulo principale diventeranno cliccabili.
Quando un visitatore li clicca, verrà indirizzato alla pagina dedicata di quella camera.
Se aveva già selezionato date di arrivo e partenza, questi valori verranno mostrati automaticamente nel modulo della pagina camera.

4. Il processo di prenotazione

Indipendentemente dallo shortcode utilizzato, il processo di prenotazione segue sempre gli stessi passaggi:

L’ospite inserisce le date e il numero di persone, quindi clicca su Cerca disponibilità (oppure su Verifica disponibilità nella pagina della camera).
Il plugin mostra le camere disponibili e i relativi prezzi.
Cliccando su Prenota ora, si apre un piccolo modulo che chiede:
Nome e cognome
Indirizzo email
(Opzionale) numero di telefono
Dopo la conferma, la prenotazione viene salvata con stato in sospeso.

A seconda delle impostazioni del plugin, le prenotazioni in sospeso possono bloccare temporaneamente la camera selezionata per un certo periodo, finché non vengono confermate o scadono.

Se i pagamenti Stripe sono abilitati, dopo la conferma è possibile proseguire con il pagamento online (tramite Stripe).

5. Stile e layout

I moduli di prenotazione sono responsive e si adattano automaticamente alla maggior parte dei temi WordPress.

Se la tua pagina utilizza un layout stretto o un page builder, puoi inserire lo shortcode all’interno di una sezione a larghezza piena, per garantire abbastanza spazio alla barra laterale e all’area dei risultati.

Il design predefinito è semplice e pulito, ma può essere personalizzato facilmente tramite CSS.

6. Pagina di conferma pagamento

Shortcode:

[simpbnb_success]

Questo shortcode mostra una pagina di conferma dopo che l’utente ha completato con successo il pagamento tramite Stripe.

Come funziona

Dopo il ritorno da Stripe (pagina “Success”), il plugin crea automaticamente un riepilogo della prenotazione. Il contenuto viene generato dinamicamente in base ai dati della prenotazione.

Cosa mostra

Un messaggio chiaro di conferma, insieme ai dettagli principali:

Pagamento ricevuto - (numero di prenotazione e tipo di camera)
Date check-in/check-out (e numero notti)
Ospiti (dettagli sul numero di ospiti - adulti/bambini)
Totale (importo totale)
Importo pagato
Saldo dovuto rimanente (in caso di pagamento con deposito mostra quanto resta ancora da pagare)

I valori (date, ospiti, importi) vengono automaticamente presi dalla prenotazione. Il testo può variare a seconda della lingua del sito e delle impostazioni del plugin.

Come usarlo

Crea una nuova pagina WordPress, per esempio “Prenotazione completata”.
Inserisci lo shortcode [simpbnb_success].
Nelle Impostazioni → Pagamenti (Stripe), seleziona questa pagina come Success page.

Quando un pagamento va a buon fine, l’utente verrà reindirizzato qui e vedrà il riepilogo della prenotazione confermata.

7. Pagina di annullamento pagamento

Shortcode: [simpbnb_cancel]

Questo shortcode viene utilizzato per mostrare la pagina di destinazione dopo che un utente ha annullato o interrotto il pagamento su Stripe.

Cosa mostra

Il messaggio varia in base alla situazione:

Se la prenotazione è ancora “in sospeso”, viene mostrato un messaggio che informa l’utente che il pagamento è stato annullato, con la possibilità di riprovare.
Se la prenotazione non può più essere pagata online, viene mostrato un messaggio che invita l’utente a contattare la struttura per assistenza.

Il messaggio viene sempre accompagnato da uno o più link, configurabili dalle impostazioni:

Retry payment → per ripetere il pagamento (se possibile)
Back to search → per tornare alla pagina di prenotazione
Contact us → per contattare la struttura

Come usarlo

Crea una nuova pagina WordPress, per esempio “Pagamento annullato”.
Inserisci lo shortcode [simpbnb_cancel].
Nelle Impostazioni → Pagamenti (Stripe), seleziona questa pagina come Cancel page.
Imposta anche i link “Back to search” e “Contact us” nei rispettivi campi.

Esempio di risultato

Se un utente interrompe il pagamento, vedrà un messaggio simile a questo:

Il pagamento per la prenotazione n. 31 (Camera Matrimoniale) è stato annullato. Puoi riprovare qui sotto.

con i pulsanti [Riprova pagamento] [Torna alla ricerca] [Contattaci]

8. Riepilogo

Shortcode	Funzione	Dove utilizzarlo
`[simpbnb_booking]`	Mostra il modulo principale con l’elenco camere	Nella pagina principale “Prenotazioni” o “Camere”
`[simpbnb_room id="X"]`	Mostra il modulo di prenotazione per una camera	Nella pagina dedicata a ciascuna camera
`[simpbnb_success]`	Mostra un riepilogo della prenotazione avvenuta	Nella pagina impostata come "Success page"
`[simpbnb_cancel]`	Mostra un messaggio dopo che un utente ha annullato o interrotto il pagamento su Stripe	Nella pagina impostata come "Cancel page"

Suggerimento

Per ottenere la migliore integrazione:

Crea una pagina principale di prenotazione con [simpbnb_booking]
Crea una pagina per ogni camera con [simpbnb_room id="X"]
Nelle impostazioni di ogni camera, imposta il suo URL dettagli su quella pagina
Crea la pagina di successo per i pagamenti con [simpbnb_success]
Crea la pagina di cancellazione per i pagamenti con [simpbnb_cancel]

In questo modo tutto si collegherà automaticamente in modo fluido.