Vai al contenuto principale

Come è possibile integrare il React Booking Widget?

Kay Endörfer
  • Aggiornato

1. Cos'è un React Booking Widget?

 

Il widget di prenotazione è un'alternativa per i rivenditori che già forniscono una descrizione dettagliata delle loro offerte. Con il widget delle prenotazioni, verranno elaborate solo le procedure di prenotazione effettuate attraverso il tuo ticketshop. La presentazione delle tue offerte verrà lasciata completamente a te e al tuo sito. La sua configurazione si trova sul tuo account Regiondo: 
 
 
 
Nota
Clicca su Booking Widget (React.JS) per configurare il nuovo widget di prenotazione. Se non vedi questa opzione, invia un'email a support@regiondo.com.
 

2. Quali sono i vantaggi?

 

  • Utilizza la tecnologia più recente 
  • Ha tempi di caricamento più veloci 
  • Il design è nuovo e pulito
  • L'Ottimizzazione per i motori di ricerca è migliore perché il contenuto viene caricato sul proprio sito web 
  • Ci sono varie opzioni di personalizzazione non possibili con il vecchio widget, ad es. l'adattamento dei singoli widget invece di tutti insieme, widget solo per i voucher (senza vendite di biglietti con data) > CSS

 

3. Quali impostazioni posso scegliere per il widget di prenotazione?

Prima di generare il tuo codice, definisci le seguenti impostazioni:
 
1. Seleziona Prodotto: Seleziona la tua lingua preferita e l'offerta che desideri per configurare la tua procedura di prenotazione come widget. Inserisci la larghezza desiderata di iFrame. Puoi scegliere tra Auto, Fullscreen e una larghezza specifica in pixel.
 
 
2. Il tuo codice HTML: Dopo aver inserito le impostazioni, verrà generato automaticamente il tuo codice HTML.
 
 
3. Anteprima: Viene mostrata unun'anteprima del widget di prenotazione.
 

 

4. Dove può essere collocato il widget di prenotazione sul sito web?

Sulla pagina del caricamento verrà visualizzato all'interno del tag DIV. Il tag SCRIPT può essere posizionato 
  • all'interno del tag HEAD, insieme al tag DIV o 
  • prima di chiudere il tag BODY. 
Se vengono implementati più snippet codici widge sulla stessa pagina, ogni tag DIV verrà elaborato solo una volta. 
 
Importante
Per questioni di sicurezza, molti sistemi di gestione dei contenuti (CMS) bloccano i tag SCRIPT all’interno del contenuto. Alcuni sistemi hanno la possibilità di modificare la restrizione per consentire i tag SCRIPT all’interno del contenuto. Quando non è possibile rimuovere questa restrizione, è possibile aggiungere un tag SCRIPT alla pagina con il campo “script personalizzato” corrispondente, se presente, o modificando direttamente i file del tema.
 
Importante
Se il widget è integrato dinamicamente nella pagina, ad esempio all'interno di pop-up modali o sezioni della barra laterale a scorrimento, il tag SCRIPT del widget deve prima essere caricato sulla pagina affinché PayPal funzioni correttamente quando il cliente ritorna sul sito web dopo un acquisto riuscito o una cancellazione del metodo di pagamento.
 
Nota
Per aggiungere widget su WordPress, Regiondo ha creato un Plugin del widget di prenotazione. Dopo l'installazione, è possibile aggiungere frammenti di codice come widget o shortcode integrati. Per saperne di più, leggi qui.
 

5. Come è possibile personalizzare la funzionalità del widget?

La funzionalità del widget può essere personalizzata aggiungendo attributi al tag div. 
 

5.1 Attributi predefiniti del widget:

Ecco l'elenco degli attributi fondamentali del widget: 
 
  • data-locale = "en_US"
L'attributo indica la lingua locale del prodotto selezionato.
  • data-provider = "RE000"
L'attributo indica il codice unico del provider. 
  • data-product = "T-RE000-000000"
L'attributo indica il codice unico SKU del prodotto selezionato. È possibile sostituire il codice SKU del prodotto in modo dinamico per implementare facilmente molti widget di prodotto sul sito. 
  • data-url = "https://regiondo-demo.regiondo.com/"
L'attributo indica il titolo del prodotto selezionato. È una proprietà informativa e può essere omessa.
  • data-font = "Open Sans"
L'attributo imposta il font di base per il widget. Se impostato, il file del font corrispondente verrà caricato da Google Fonts. Se il sito web ha lo stesso file di font già caricato da Google, si consiglia di disattivare il caricamento del font per il widget. Vedi data-disable-font su come disattivare il caricamento del font. 
Ecco un elenco dei font più popolari di Google Font:
  • Open Sans
  • Roboto
  • Lato
  • Oswald
  • Source Sans Pro
  • Montserrat
  • PT Sans
  • Raleway 
  • Lora
  • Noto Sans
 
Importante
Il widget non caricherà il file di font da Google Fonts, se il font specificato corrisponde a uno dei font standard del sistema: 
 
Arial
Verdana
Tahoma
Helvetica
Helvetica Neue
Times New Roman
Times
Courier New
Courier
Georgia
Geneva
Palatino
Palatino Linotype
Candara
Cambria
Calibri
Segoe UI
Garamond
Bookman
Book Antiqua
Lucida Sans Unicode
Lucida Grande
Consolas
Avant Garde
Comic Sans MS
Trebuchet MS
Arial Black
Impact
 
  • data-width = "400px"
L'attributo imposta la larghezza massima del widget. Il valore di default è automatico, il che significa che il widget prenderà tutta la larghezza disponibile. Se c'è bisogno di limitare la larghezza massima del widget, il valore può essere impostato come "400px" fisso o "50%". Può essere omesso per avere un widget reattivo.
  • data-layout = "fullscreen"
Questo attributo appare al posto della larghezza dei dati selezionato come "Fullscreen". Se selezionato, il widget verrà posizionato come assoluto, come larghezza e altezza impostata al 100%, per coprire tutto lo spazio disponibile. Questo è utile se il widget deve essere implementato all'interno della lightbox o sulla slide-out sidebar.

 

5.2 Attributi aggiuntivi del widget:

Ecco l'elenco degli attributi aggiuntivi del widget:
 
  • data-gift-option = "true"
L'attributo consente di sovrascrivere le impostazioni dell'opzione Regalo del prodotto nella dashboard. Se impostato su "vero", questo attributo forzerà il widget affinché mostri i tab Prodotto e Regalo. Se impostato su "falso", l'opzione Regalo verrà disattivato e i tab verranno nascosti. 
  • data-gift-option-highlighted = "true"
Oltre a data-gift-option, questo attributo consente di sovrascrivere le impostazioni per mostrare opzione Regalo come attivato di default. Se impostato su "vero", verrà attivata l'opzione Regalo. Se impostato su "falso", verrà attivato il tab Prodotto e disattivato il tab Regalo. 
  • data-gift-option-only = "true"
L'attributo consente di mostrare il widget solo con l'opzione Regalo. Se impostato su "vero", i tab widget verranno nascosti e sarà disponibile solo l'opzione Regalo.  
Questo è utile per una maggiore flessibilità, per disattivare la prenotazione degli appuntamenti causa difficoltà temporanee o ristrutturazioni.
  • data-date = "2020-12-31"
L'attributo consente di impostare la data preselezionata per una prenotazione, nel formato "AAAA-MM-GG:. Se impostato, la data specificata verrà selezionata sul calendario. Il cliente può comunque modificare la data. Questo è utile quando il sito ha un elenco di eventi o calendario e il widget si aprirà nella lightbox per una data specifica. 
  • data-time = "20:20"
Oltre a data-date, questo attributo consente di impostare un orario preselezionato per una prenotazione, formattato come "HH:MM". Se impostato, verrà selezionato l'orario specifico per un appuntamento. Il cliente può comunque modificare l'orario preselezionato. 
  • data-maximum-months = "2"
L'attributo consente di impostare una quantità massima di mesi da mostrare contemporaneamente sul calendario. Il widget ha una larghezza adattiva e, in base allo spazio disponibile, il cliente può vedere fino a 6 mesi. Questo attributo è utile quando c'è bisogno di limitare il numero dei mesi del calendario, per esempio quando la larghezza di un singolo mese del calendario è influenzato dal CSS personalizzato e in una riga può essere inserito solo un mese. 
  • data-step = "cart"
Questo attributo può essere utilizzato per mostrare il widget su una pagina separata del carrello del sito web, ad esempio dove il cliente può accedere cliccando sul pulsante del carrello nell’intestazione
L’attributo imposta il widget per aprire inizialmente lo step indicato. Il valore vuoto o omesso è il comportamento predefinito del widget. Se impostato su “carrello”, il widget caricherà la visualizzazione del carrello.
  • data-old-cart = "true"
Ciò può essere utile se i nuovi stili del carrello degli acquisti sono influenzati dalle regole CSS impostate a livello globale, pertanto il nuovo carrello potrebbe sembrare inaspettato
L’attributo consente di procedere con il vecchio carrello della spesa in iframe, invece che con il nuovo carrello.
  • data-skip-cart = "true"
L’attributo consente di modificare il comportamento del widget predefinito per saltare il passaggio del carrello. Se impostato su “vero”, dopo che il prodotto è stato aggiunto al carrello, il cliente procede direttamente al checkout.
  • data-disable-loading-animation = "true"
Questo è utile se il sito web ha una propria animazione di caricamento
L’attributo consente di disabilitare l’animazione di caricamento del widget.
  • data-disable-font = "true"
L’attributo permette di disabilitare il caricamento dei file dei font da Google Fonts, specificati in “data-font”. Se il sito web ha già lo stesso carattere personalizzato, si consiglia di aggiungere questo attributo impostato su “vero”, per evitare richieste extra al caricamento della pagina.
  • data-font-size = "16px"
L’attributo imposta la dimensione del carattere di base per il widget. Ciò consente di modificare facilmente la dimensione del font di base del widget, per abbinare meglio la tipografia del sito web. Inoltre, può essere utile se il sito web ha una dimensione del carattere adattiva, basata sulla larghezza dello schermo dei visitatori.
  • data-font-size-large = "20px"
Simile a “data-font-size”, l’attributo imposta la dimensione del font per titoli, nomi di prodotti, pulsanti, ecc.
  • data-font-size-small = "12px"
Simile a “data-font-size”, l’attributo imposta la dimensione del font per il testo dell’avviso, le etichette dei campi di input, ecc.
  • data-checkout-lightbox-width = "900px"
L’attributo imposta la larghezza massima per la lightbox di checkout. Il valore predefinito è “900 px” o come valore percentuale, ad esempio “80%”.
  • data-checkout-lightbox-height = "600px"
Simile a “data-checkout-lightbox-width”, ma specifica l’altezza iniziale della lightbox di checkout. Prima di caricare la pagina di checkout del widget, è necessario impostare l’altezza minima iniziale in pixel, ad esempio 600px. Altrimenti sarà 0px di altezza, perché nessun contenuto è stato ancora caricato. Dopo il caricamento del contenuto, imposterà l’altezza del lightbox in base all’altezza del contenuto in modo dinamico.
 

6. In che modo può essere personalizzata la funzionalità del widget con CSS?

 

Il nuovo widget di prenotazione può essere facilmente personalizzato con CSS, poiché tutto il contenuto del widget viene visualizzato sulla pagina senza iframe. A tal fine, è necessario aggiungere regole CSS al sito web con file .css e tag <link> o solo con tag <style></style> consentiti.
 
1. Quando è possibile caricare il file css sul server, si consiglia di aggiungere il file css con<link>, poiché il file css verrà memorizzato nella cache dal browser dopo il caricamento della prima pagina. Per collegare il file "custom.css" con tutte le regole CSS all'interno, nella sezione <head> della pagina web puoi inserire quanto segue: 
 
<link rel="stylesheet" href="/css/custom.css">
2.Se non c’è la possibilità di aggiungere il tag di collegamento all’intestazione, è possibile inserire il file css con javascript, come segue: 
 
<script>
(function(d) {
    var css = d.createElement('link');
    css.setAttribute('rel', 'stylesheet');
    css.setAttribute('href', '/css/custom.css');
    d.getElementsByTagName('head')[0].appendChild(css);
}(document));
</script>
Altrimenti, le regole CSS possono essere inserite all’interno del tag <style> </style> e possono essere inclusi ovunque nella pagina, in questo modo:
 
<style>
.regiondo-booking-widget {
    border:2px solid #d0d0d0;
}
</style>

 

7. Come possono essere modificati i testi e le traduzioni?

Regole specifiche del CSS consentono di modificare non solo i colori o gli stili dell'html, ma anche il contenuto del testo. 
 
Ecco degli esempio su come modificare il testo di diversi elementi all'interno del widget di prenotazione. 

7.1 Testo di prodotto e tab Regalo

Questo esempio mostra anche come modificare il testo della specifica lingua locale:
 
Codice: 
<style>
.regiondo-widget .regiondo-tabs__tab[data-tab="product"]:after {
    content: 'Ticket';
}
.regiondo-widget .regiondo-tabs__tab[data-tab="gift"]:after {
    content: 'Regalo';
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-tabs__tab[data-tab="product"]:after {
    content: 'Eintrittskarte';
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-tabs__tab[data-tab="gift"]:after {
    content: 'Geschenk';
}
</style>
Risultato:

 

7.2 Testo della riga introduttiva

In alcuni casi, può essere aggiunto per sovrascrivere una regola "!important". Tuttavia, è meglio usare regole più specifiche. Indicando uno o più elementi prima dell'elemento target, la regola diventa più specifica e ottiene maggiore priorità:
 
Nota
Se utilizzi le stesse classi css come all'interno del css del widget, come fatto sul tuo sito web, potrebbe essere sovrascritto.  Per sovrascrivere le regole css con quelle tue, utilizza  "!important".
 
Codice:
<style>
.regiondo-widget .regiondo-intro-text:after {
    content: 'Scegli una data qui sotto per vedere gli orari disponibili:' !important;
}
</style>
Codice:
<style>
.regiondo-widget .regiondo-content .regiondo-intro-text:after {
    content: 'Scegli una data qui sotto per vedere gli orari disponibili:';
}
</style>
Risultato:

 

7.3 Testo del titolo Data/Ora/Opzione

Alcuni elementi hanno classi specifiche sulla base dello stato dell'elemento o dell'azione dell'utente, che possono essere utilizzati per modificare il testo anche dopo aver selezionato un'opzione:  
 
Codice:
<style>
.regiondo-widget .regiondo-step-variation .regiondo-step__title:after {
    content: 'Seleziona una Opzione';
}
.regiondo-widget .regiondo-step-date .regiondo-step__title:after {
    content: 'Seleziona una Data';
}
.regiondo-widget .regiondo-step-time .regiondo-step__title:after {
    content: 'Seleziona un Orario';
}
.regiondo-widget .regiondo-step-variation.regiondo-step--selected .regiondo-step__title:after {
    content: 'Opzione:';
}
.regiondo-widget .regiondo-step-date.regiondo-step--selected .regiondo-step__title:after {
    content: 'Data:';
}
.regiondo-widget .regiondo-step-time.regiondo-step--selected .regiondo-step__title:after {
    content: 'Orario:';
}
</style>
Risultato:

 

7.4 Testo degli intervalli di tempo

Nel passaggio per la selezione dell'orario, ci sono più intervalli. Fasce orarie separate dai periodi di tempo sulla base delle ore, come segue:
  • da 0 alle 5 è "Notte"
  • dalle 6 alle 11 è "Mattina"
  • dalle 12 alle 17 è "Pomeriggio"
  • dalle 18 alle 27 è "Sera"
 
Questi titoli degli intervalli temporali possono essere modificati con CSS come segue: 
Codice:
<style>
.regiondo-widget .regiondo-times__period.regiondo-times--night:after {
    content: 'NOTTE:';
}
.regiondo-widget .regiondo-times__period.regiondo-times--morning:after {
    content: 'MATTINA:';
}
.regiondo-widget .regiondo-times__period.regiondo-times--afternoon:after {
    content: 'POMERIGGIO:';
}
.regiondo-widget .regiondo-times__period.regiondo-times--evening:after {
    content: 'SERA:';
}
</style>
Risultato:
In alternativa, i titoli degli intervalli temporali possono essere nascosti. Bisogna aggiungere "display: inline" per rimuovere le interruzioni di linea sui gruppi di orari se necessario:
 
Codice:
<style>
.regiondo-widget .regiondo-times__period {
    display: none;
}
.regiondo-widget .regiondo-times__group {
    display: inline;
}
</style>
Risultato:

 

7.5 Testo dei pulsanti "Aggiungi al carrello" e "Procedi al Checkout"

Ecco un esempio di come modificare il testo dei pulsanti, incluse le lettere maiuscole e minuscole:
 
Codice:
<style>
.regiondo-widget .regiondo-addtocart .regiondo-button-addtocart:after {
    content: 'Aggiungi al carrello';
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-addtocart .regiondo-button-addtocart:after {
    content: 'In den Warenkorb';
}
.regiondo-widget .regiondo-button.regiondo-button-checkout:after {
    content: 'Passa al Checkout';
    text-transform:uppercase;
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-button.regiondo-button-checkout:after {
    content: 'Zur Kasse';
    text-transform:uppercase;
}
</style>
Risultato:

 

7.6 Testo dei pulsanti "Continua lo shopping" e "Riscatta codice"

Questo esempio mostra come modificare il testo dei pulsanti secondari, così come il testo della visualizzazione del carrello dello shopping. Gli elementi hanno gli stessi nomi della classe per diverse pagine e per distinguerli bisogna aggiungere maggiori specificità per le nostre regole: 
 
Codice:
<style>
.regiondo-widget .regiondo-cart .regiondo-cart-buttons .regiondo-button-continue:after {
    content: '« Indietro';
}
.regiondo-widget .regiondo-cart .regiondo-cart-buttons .regiondo-button-coupon:after {
    content: 'Hai un Coupon?';
}

.regiondo-widget .regiondo-empty-cart .regiondo-cart-buttons .regiondo-button-continue:after {
    content: '« Torna al Prodotto';
}
.regiondo-widget .regiondo-empty-cart-text:after {
    content: 'Il carrello dello shopping è vuoto.' !important;
}
</style>
Risultato:

 

7.7 Testo per i titoli dei progressi del checkout

 

I progressi vengono mostrati sul carrello dello shopping esulle sessioni di checkout. Ecco l'elenco di tutti gli step di checkout disponibili:
 
  • Cart (Carrello)
  • Add-On
  • Contact (Contatto)
  • Shipping (Spedizione)
  • Payment (Pagamento)
Gli step"Add-On" e "Shipping" possono essere visualizzati solo dove il prodotto Add-on (Merchandising) viene aggiunto al carrello. Se l'importo totale da pagare è zero, allora lo step del pagamento verrà disabilitato. 
 
Questo esempio mostra come modificare gli step del checkout: 
Codice:
<style>
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__cart:after {
    content: 'Carrello';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__merchandising:after {
    content: 'Add-On';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__contact:after {
    content: 'Contatto';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__shipping:after {
    content: 'Spedizione';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__payment:after {
    content: 'Pagamento';
}

/*

Articoli correlati