Shortcode Principali

Simple Bike Rental Pro fornisce diversi shortcode per integrare il sistema di prenotazione nelle tue pagine e nei tuoi post WordPress.

Inizia inserendo gli shortcode richiesti nelle pagine appropriate:

Shortcode: Modulo di prenotazione

[simpbire_bike_rental]

Visualizza il modulo di prenotazione frontend, consentendo agli utenti di noleggiare biciclette.

Puoi aggiungere questo shortcode a una pagina pubblica chiamata, ad esempio, "Prenota una bicicletta", oppure creare una nuova pagina in WordPress e incollare lo shortcode nell'editor.

Il modulo può essere posizionato dove si preferisce, si adatta alla larghezza del contenitore, in questo esempio l'ho posizionato in una sidebar di 400px di larghezza. Ecco un'anteprima del modulo:

Una volta inserito, il modulo apparirà automaticamente nel frontend e visualizzerà:

Selezione del tipo di noleggio - giornaliero, orario o multi-day
Il calendario per la data (e l'ora, se necessario)
Le biciclette disponibili per il periodo selezionato
Gli accessori disponibili (opzionali, devono essere abilitati nelle impostazioni)
I campi per il nome, l'email e il numero di telefono del cliente

Nota: il tipo di noleggio "multi-day" e gli accessori sono disponibili solo nella versione Pro.

Layout centrato del modulo

A partire dalla versione 1.5.2, lo shortcode principale supporta anche un layout frontend centrato e più moderno tramite l'attributo layout="centered".

[simpbire_bike_rental layout="centered"]

Questa variante è particolarmente utile per:

pagine dedicate alla prenotazione
landing page
layout a tutta larghezza
temi moderni con contenitori ampi

Il layout centrato migliora la distribuzione delle card delle biciclette e la leggibilità del modulo. Ecco un esempio del layout centrato:

Si adatta perfettamente anche per i dispositivi mobili e tablet

Shortcode: layout a due colonne

A partire dalla versione 1.4.1, è disponibile un nuovo shortcode pensato per migliorare l’esperienza di prenotazione, soprattutto nei siti che gestiscono un numero elevato di biciclette.

Utilizzo

Per utilizzare il nuovo layout, inserisci lo shortcode in una pagina:

[simpbire_bike_rental_split]

Struttura del layout

Il layout è organizzato in due colonne:

Colonna sinistra: contiene i controlli (tipo di noleggio, date e dati utente)
Colonna destra: mostra la griglia delle biciclette disponibili

Questa struttura rende il processo di prenotazione più chiaro e veloce, mantenendo sempre visibili le opzioni disponibili.

Comportamento delle biciclette

Il comportamento delle card cambia automaticamente in base alla selezione delle date.

Senza date selezionate – modalità catalogo. Le biciclette vengono mostrate come un catalogo navigabile: cliccando su una card si apre la pagina di dettaglio della bicicletta (solo se è stato inserito il Detail URL nelle impostazioni di quella bici)

Con date selezionate – modalità prenotazione. Quando l’utente seleziona le date:

la griglia viene filtrata per mostrare solo le biciclette disponibili per la data selezionata
le card non portano più alla pagina di dettaglio, cliccando su una card si seleziona direttamente la bicicletta In questo modo, il layout si trasforma automaticamente in uno strumento rapido di prenotazione.

Quando utilizzarlo

Questo layout è particolarmente indicato per siti con molte biciclette, noleggi con più categorie o modelli o per chi desidera mostrare tutte le opzioni in modo immediato. Questa configurazione mantiene il layout responsive, impilando correttamente le colonne sui dispositivi mobili.

Nota: Puoi testare questo layout nella pagina demo del sito.

Prenotazione in attesa

[simpbire_pending_confirmation]

Questo shortcode viene utilizzato solo quando i pagamenti online (Stripe) sono disabilitati. In questo caso la conferma della prenotazione avviene tramite email.

con questo shortcode mostriamo un messaggio agli utenti che hanno inviato una prenotazione ma devono ancora confermarla cliccando sul link inviato al loro indirizzo email.

Crea una pagina chiamata "In attesa di conferma" (o simile)
aggiungi lo shortcode e imposta questa pagina nelle impostazioni del plugin come Pagina di reindirizzamento post-prenotazione .

Dopo aver inviato il modulo di prenotazione, gli utenti verranno reindirizzati a questa pagina e visualizzeranno un messaggio simile al seguente:

Grazie per la prenotazione! Ti abbiamo inviato un'e-mail con un link per confermare la prenotazione. Per completare il noleggio, clicca sul link entro breve tempo.

Questo messaggio predefinito funziona bene nella maggior parte dei casi. Se preferisci un messaggio personalizzato, puoi ignorare questo shortcode e aggiungere semplicemente il tuo contenuto alla pagina.

Conferma prenotazione

[simpbire_token_messages]

Anche questo shortcode viene usato solo quando i pagamenti online sono disabilitati, gestisce e visualizza i messaggi relativi alla verifica del token di conferma inviato tramite e-mail.

Crea una pagina chiamata "Conferma prenotazione" (o simile)
aggiungi lo shortcode e imposta questa pagina nelle impostazioni del plugin in Pagina per messaggi di conferma.

Quando gli utenti cliccano sul link di conferma nell'email, verranno indirizzati a questa pagina. A seconda dell'esito, verrà visualizzato un messaggio di conferma o di errore.

Griglia biciclette

[simpbire_bike_grid]

Lo shortcode [simpbire_bike_grid] mostra un catalogo a schede di tutte le biciclette. Ogni scheda include:

immagine della bicicletta (cliccabile se è disponibile una pagina dettagli)
nome
prezzo giornaliero
call-to-action “Verifica disponibilità”

La call-to-action (e l’immagine) puntano automaticamente al link impostato nel campo details_url della bicicletta. Se details_url non è stato impostato, il pulsante viene mostrato in versione disabilitata e l'immagine avrà solo il link al file dell'immagine.

Numero di colonne

Puoi controllare quante colonne usare su desktop con l’attributo columns:

[simpbire_bike_grid columns="4"]

Valori consigliati:

3 per una griglia "comoda" con card più grandi
4 per un layout più compatto, utile se hai molte bici

Nota: il layout è responsivo. Su schermi più piccoli le card si adattano automaticamente (tablet: 2 per riga, mobile: 1 per riga).

Filtro per tipo di bicicletta

Se vuoi mostrare solo un tipo specifico di bicicletta, usa l’attributo type. Devi inserire esattamente il nome che hai usato per il campo "tipo bicicletta". Esempio:

[simpbire_bike_grid columns="4" type="e-bike"]

Valori:

type="all" (default) mostra tutte le biciclette
type="..." mostra solo quelle con quel valore nel campo "tipo bicicletta"

Requisito importante: larghezza del contenitore

Per ottenere una griglia gradevole (soprattutto con 3–4 colonne) è importante inserire lo shortcode in una sezione a tutta larghezza o comunque in un contenitore abbastanza ampio.

Molti temi WordPress, soprattutto quelli "di default", applicano un layout con contenuto centrale e larghezza limitata. In quei casi:

con columns="4" le card possono diventare troppo strette
i pulsanti e i testi possono andare a capo più del necessario

Consiglio pratico: se il tuo editor o page builder lo permette, usa una sezione “Full width” (o equivalente) per la pagina che ospita la griglia.

Visualizzazione dell'immagine e object-fit

Di default, le immagini delle biciclette nella griglia utilizzano il seguente CSS:

.sbr-bike-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

Il valore cover di object-fit garantisce che l'immagine riempia sempre lo spazio disponibile, ma a seconda del rapporto d'aspetto delle foto della bicicletta, alcune parti dell'immagine potrebbero essere ritagliate.

Se preferisci visualizzare sempre l'intera bicicletta, puoi modificare object-fit su contain:

.sbr-bike-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  display: block;
}

Quando si utilizza contain, potrebbe apparire dello spazio vuoto intorno all'immagine. Se necessario, è possibile definire un colore di sfondo personalizzato per l'area dell'immagine:

.sbr-bike-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  display: block;
  background-color: #ffffff !important;
}

L'opzione migliore dipende dal formato e dalle proporzioni delle immagini utilizzate nel catalogo delle biciclette.

Collega la pagina dettagli

Per utilizzare correttamente il flusso di prenotazione "catalogo → pagina singola bici", ogni bicicletta deve essere collegata alla propria pagina di dettaglio.

Questa connessione viene gestita tramite l'impostazione URL dettagli bicicletta nella configurazione della bicicletta.

Come funziona

Lo shortcode della griglia delle biciclette [simpbire_bike_grid] mostra un elenco di biciclette con un pulsante "Verifica disponibilità".

Quando viene impostato un URL dei dettagli per una bicicletta, quel pulsante (e l'immagine) si collegano alla pagina specificata.

Quella pagina deve contenere lo shortcode della singola bicicletta: [simpbire_bike id = "X"]

Dove X è l'ID della bicicletta corrispondente. L'ID lo trovi nella tabella delle bici in admin (click nel menu: Biciclette).

Configurazione richiesta

Per far funzionare correttamente questo flusso:

Crea una pagina dedicata per la bicicletta (o per ogni tipo di bicicletta).
Inserisci lo shortcode [simpbire_bike id="X"] in quella pagina.
Apri le impostazioni della bicicletta nel pannello di amministrazione.
Impostare il campo URL dettagli sull'URL della pagina appena creata.

Nota: Se l'URL dei dettagli non è impostato, il pulsante "Verifica disponibilità" verrà visualizzato come disabilitato.

Pagina bici singola

[simpbire_bike id="4"]

Inserisci questo shortcode in una pagina (o in un CPT) per mostrare i dettagli della bicicletta e il modulo di prenotazione. L'ID della bicicletta lo trovi nella colonna ID della tabella in "Biciclette".

Attributi

id (obbligatorio) ID della bicicletta da mostrare (è l’ID salvato nella tabella delle biciclette del plugin).
show_calendars (opzionale) Mostra i mini-calendari di disponibilità:
- true per mostrarli
- false per non mostrarli (default)
months (opzionale) Numero di mesi da visualizzare nei mini-calendari quando show_calendars="true"

Esempio:

[simpbire_bike id="4" show_calendars="true" months="3"]

Quando usarlo

Questo shortcode è ideale quando vuoi un flusso "catalogo → dettaglio", ad esempio:

l’utente vede la griglia con le biciclette [simpbire_bike_grid]
clicca su “Verifica disponibilità”
arriva alla pagina dei dettagli della bici singola e il modulo di prenotazione
se attivi, saranno visibili anche i mini-calendari

Nota sui mini-calendari

I mini-calendari sono un aiuto visivo per capire a colpo d’occhio la disponibilità nei prossimi mesi. Non sostituiscono il controllo finale effettuato dal modulo di prenotazione: la disponibilità viene sempre verificata al momento dell’invio della richiesta.

Consiglio pratico: una pagina per ogni bici

Per ottenere un’esperienza pulita e ordinata, crea una pagina dedicata (o un CPT) per ogni bicicletta e imposta il relativo URL nel campo details_url della bici. In questo modo, dalla griglia l’utente verrà portato automaticamente alla pagina corretta.

Mini calendario di disponibilità

[simpbire_mini_calendar bike_id="1" months="3" legend="1"]

Questo shortcode visualizza una griglia mensile compatta che mostra quando una bici specifica è disponibile. Funziona in post, pagine e aree widget.

Attributi

bike_id (obbligatorio) – L'ID della bici di destinazione (lo puoi vedere nella pagina con l'elenco delle biciclette in WP Admin).
months (default: 1) – Numero di mesi consecutivi da visualizzare.
start (predefinito: primo giorno del mese corrente) – Mese di inizio nel formato AAAA-MM-01 (ad esempio, 2025-10-01).
legend (default: 1) – Mostra la legenda (1) o la nasconde (0).

Puoi consultare questa pagina per vedere alcuni esempi di utilizzo.

Note

Il valore iniziale deve puntare al primo giorno del mese desiderato (AAAA-MM-01).
Se non appare nulla, ricontrolla bike_id e che la bici esista nel tuo catalogo.
Puoi inserire più calendari nella stessa pagina per biciclette diverse.