Passa al contenuto principale

Aggiungi ricerca e prenotazione alle pagine

È un layout minimo usato da molti siti: ricerca dove serve, widget di prenotazione ricco su ogni pagina unità.

1. Metti una barra di ricerca sulla homepage (o pagina dedicata)​

  1. Modifica la pagina nell’editor a blocchi.
  2. Aggiungi un blocco Shortcode (o HTML personalizzato se il tema consente shortcode lì).
  3. Incolla:
[bec_search]
  1. Aggiorna la pagina.

Quando un visitatore invia il modulo, il browser si ricarica con date e conteggi ospiti nell’URL. Altri shortcode nella pagina di destinazione leggono gli stessi valori.

Shortcode barra ricerca front-end

2. Aggiungi un riepilogo prenotazione su ogni pagina unità​

Nel template singola unità o nel contenuto dell’articolo:

[bec_booking_summary]

Questo blocco include:

  • Ricerca incorporata quando mancano le date
  • Prezzo e dettaglio quando l’API restituisce un preventivo
  • Pulsante Continue verso il motore di prenotazione esterno (se configurato)
  • Link Enquiry opzionale

Se lo shortcode è sulla pagina dell’unità stessa, non serve passare un ID unità.

Riepilogo prenotazione desktop front-end

3. Opzionale: riga prezzo negli archivi​

In un query loop, griglia personalizzata o template archivio puoi mostrare un prezzo compatto per un’unità specifica:

[bec_quote unit_id="123"]

Sostituisci 123 con l’ID post WordPress dell’unità. Lo shortcode produce testo solo se l’URL ha già date complete — vedi bec_quote.

4. Opzionale: Elementor Pro Loop Grid senza schede “nessuna disponibilità”​

Se costruisci l’elenco con Elementor Pro Loop Grid invece che solo shortcode, imposta il Query ID della griglia su bec_available_only così le unità senza disponibilità per la ricerca URL corrente sono nascoste (non mostrate come schede vuote). Vedi Elementor — nascondere unità senza disponibilità.

Costruendo link HTML da un elenco a un’unità, usa [bec_unit_url] dentro href per mantenere check-in, check-out e ospiti:

<a href="[bec_unit_url]">Vedi dettagli</a>

Oppure passa un ID post specifico: [bec_unit_url unit_id="123"].

Stile​

Modifica l’aspetto in Booking Engine → Styling o aggiungi CSS — vedi Panoramica stile.

Riferimento completo shortcode​

Panoramica shortcode →