1. I vantaggi dei widget
Vantaggi chiave:
- Nuova tecnologia React: performance migliori e maggiore reperibilità su Google
- Approccio prima mobile
- Design moderno e contemporaneo
Ulteriori vantaggi:
- Tasso di conversione migliore con un'esperienza utente migliore
- Opzioni di tracciamento ottimizzate
- Miglior Punteggio Google Lighthouse
- Product rating integrato sulla ricerca Google
- Navigazione widget moderna
- Migliori funzionalità di filtraggio e ordine
- React JS invece della tecnologia iFrame
2. Catalog Widget
A cosa serve il Catalog Widget?
Il Catalog Widget ti offre una panoramica moderna delle tue offerte. Al cliente viene mostrato il titolo dell'offerta, un'immagine, il prezzo e una breve descrizione. Con il pulsante "Book here" (Prenota qui), il cliente viene indirizzato alla panoramica del prodotto.
Da una parte è possibile filtrare le offerte per location, data e categoria, come tour o sport all'aperto. Dall'altro lato le offerte possono anche essere ordinate dal prezzo più basso a quello più alto, lingue diverse e altro.
3. Product Widget
A cosa serve il Product Widget?
Con il product widget è possibile visualizzare le foto dei tuoi prodotto e offerte, oltre alle descrizioni dei prodotti. Inoltre, il cliente può acquistare l'offerta direttamente tramite il booking widget integrato. Per garantire che il product widget si adatti anche visivamente al tuo sito, puoi anche adattare i colori e gli stili con il CSS.
4. Guida step-by-step per aggiungere i widget
1. Step
Se desideri utilizzare il Product Widget vai su Dashboard > Configura Shop > Integrazione sul sito.
2. Step
Poi clicca su Widget Editor per andare alle impostazioni dell'integrazione.
3. Step
Selezionare + Nuovo Widget per aggiungere un nuovo Widget.
Nota
L'articolo Come usare il Widget Editor fornisce informazioni più dettagliate. Date un'occhiata e aggiungete il vostro primo Widget.
5. Personalizza i tuoi widget con il CSS
Tutti gli elementi importanti dei widget hanno uno specifico nome di classe html, che consente una facile personalizzazione tramite CSS. Puoi utilizzare le classi sottostanti.
Nota
L'articolo Come modificare il codice dell'editor di widget mostra esempi per ogni possibilità di personalizzazione in modo più dettagliato.
export const classes = {
details: {
prefix: 'Re-p',
root: 'regiondo-product-details',
drawer: {
root: 'regiondo-drawer',
header: 'regiondo-drawer-header',
content: 'regiondo-drawer-content',
},
collapsible: {
root: 'regiondo-collapsible',
header: 'regiondo-collapsible-header',
content: {
root: 'regiondo-collapsible-content',
closed: 'regiondo-collapsible-content-closed',
open: 'regiondo-collapsible-content-open',
},
},
backLink: 'regiondo-back-link',
content: {
root: 'regiondo-content',
main: 'regiondo-content-main',
side: 'regiondo-content-side',
},
reviews: {
root: 'regiondo-reviews',
header: 'regiondo-reviews-header',
preview: 'regiondo-reviews-preview',
summary: 'regiondo-reviews-summary',
loadButtonContainer: 'regiondo-reviews-load-button-container',
list: 'regiondo-reviews-list',
carousel: 'regiondo-reviews-carousel',
review: {
root: 'regiondo-review',
header: 'regiondo-review-header',
body: 'regiondo-review-body',
caption: 'regiondo-review-caption',
replies: 'regiondo-review-replies',
},
rating: 'regiondo-reviews-rating',
ratingCategory: 'regiondo-reviews-rating-category',
},
crossSelling: {
root: 'regiondo-cross-selling',
header: 'regiondo-cross-selling-header',
list: 'regiondo-cross-selling-list',
item: 'regiondo-cross-selling-product',
},
booking: {
root: 'regiondo-booking-container',
header: 'regiondo-booking-header',
price: 'regiondo-booking-price',
priceLabel: 'regiondo-booking-price-label',
priceValue: 'regiondo-booking-price-value',
mobileButton: 'regiondo-booking-mobile-button',
drawer: 'regiondo-booking-drawer',
},
tripadvisor: 'regiondo-tripadvisor',
shortDescription: 'regiondo-product-short-description',
highlights: 'regiondo-product-highlights',
description: 'regiondo-product-description',
information: {
root: 'regiondo-product-information',
product: {
root: 'regiondo-product-information-item',
icon: 'regiondo-product-information-item-icon',
header: 'regiondo-product-information-item-header',
body: 'regiondo-product-information-item-body',
},
covid19: 'regiondo-product-information-item-covid19',
services: 'regiondo-product-information-item-services',
notIncluded: 'regiondo-product-information-item-not-included',
duration: 'regiondo-product-information-item-duration',
equipment: 'regiondo-product-information-item-equipment',
participants: 'regiondo-product-information-item-participants',
languages: 'regiondo-product-information-item-languages',
openingHours: 'regiondo-product-information-item-opening-hours',
importantInfo: 'regiondo-product-information-item-important-info',
attachments: 'regiondo-product-information-item-attachments',
},
location: {
root: 'regiondo-product-location',
description: 'regiondo-product-location-description',
details: {
root: 'regiondo-product-location-details',
address: 'regiondo-product-location-address',
operator: 'regiondo-product-location-operator',
name: 'regiondo-product-location-name',
},
additional: {
root: 'regiondo-product-location-additional',
parking: 'regiondo-product-location-parking',
publicTransport: 'regiondo-product-location-public-transport',
},
map: {
image: 'regiondo-product-location-map-image',
interactive: 'regiondo-product-location-map-interactive',
},
},
header: 'regiondo-product-header',
headerLabels: 'regiondo-product-header-labels',
tags: 'regiondo-product-tags',
labels: {
rating: 'regiondo-product-label-rating',
covid19: 'regiondo-product-label-covid19',
duration: 'regiondo-product-label-duration',
location: 'regiondo-product-label-location',
soldOut: 'regiondo-product-label-sold-out',
saleEnded: 'regiondo-product-label-sold-sale-ended',
new: 'regiondo-product-label-new',
bestseller: 'regiondo-product-label-bestseller',
},
gallery: {
root: 'regiondo-product-gallery',
thumbnails: {
root: 'regiondo-product-thumbnails',
previousButton: 'regiondo-product-thumbnails-previous',
nextButton: 'regiondo-product-thumbnails-next',
pages: 'regiondo-product-thumbnails-pages',
page: 'regiondo-product-thumbnails-page',
thumbnail: 'regiondo-product-thumbnail',
},
screen: {
root: 'regiondo-product-gallery-screen',
imageSlide: 'regiondo-product-gallery-slide regiondo-product-image',
videoSlide: 'regiondo-product-gallery-slide regiondo-product-video',
previousButton: 'regiondo-product-gallery-previous',
nextButton: 'regiondo-product-gallery-next',
video: {
frame: 'regiondo-product-video-frame',
preview: 'regiondo-product-video-preview',
playButton: 'regiondo-product-video-play',
},
},
},
},
catalog: {
prefix: 'Re-c',
root: 'regiondo-catalog',
header: 'regiondo-catalog-header',
list: 'regiondo-catalog-list',
product: {
root: 'regiondo-list-product',
image: 'regiondo-list-product-image',
content: 'regiondo-list-product-content',
details: 'regiondo-list-product-details',
header: 'regiondo-list-product-header',
description: 'regiondo-list-product-description',
rating: 'regiondo-list-product-rating',
shortInfo: {
root: 'regiondo-list-product-short-info',
duration: 'regiondo-list-product-duration',
location: 'regiondo-list-product-location',
},
footer: 'regiondo-list-product-footer',
button: 'regiondo-list-product-button',
price: {
root: 'regiondo-list-product-price',
label: 'regiondo-list-product-price-label',
value: 'regiondo-list-product-price-value',
},
labels: {
soldOut: 'regiondo-list-product-label-sold-out',
saleEnded: 'regiondo-list-product-label-sold-sale-ended',
new: 'regiondo-list-product-label-new',
bestseller: 'regiondo-list-product-label-bestseller',
},
},
},
};