1. Die Vorteile der Widgets
Die Hauptvorteile:
- Neue React-Technologie: Verbesserte Performance und erhöhte Auffindbarkeit in Google
- Mobile-first Ansatz
- Modernes und zeitgemäßes Design
Weitere Vorteile:
- Verbesserte Konversionsrate durch ein besseres Benutzererlebnis
- Optimierte Tracking-Optionen
- Erhöhter Google Lighthouse Score
- Integrierte Produktbewertung in der Google-Suche
- Moderne Widget-Navigation
- Verbesserte Filter- und Sortierfunktionalität
- React JS anstelle von iFrame-Technologie
2. Catalog Widget
Was kann das Catalog Widget?
Das Catalog Widget bietet Ihnen eine modern gestaltete Übersicht über Ihre Angebote. Dem Kunden wird der Angebotstitel, ein Bild, der Preis und eine kleine Beschreibung angezeigt. Mit der Schaltfläche "Hier buchen" wird der Kunde zur Produktansicht weitergeleitet.
Zum einen ist es möglich, die Angebote nach Ort, Datum und Kategorie, wie z. B. Touren oder Outdoor-Sportarten, zu filtern. Andererseits können die Angebote auch nach niedrigstem und höchstem Preis, verschiedenen Sprachen und anderem sortiert werden.
3. Product Widget
Was kann das Product Widget?
Das Product Widget ist in der Lage, Fotos von Ihren Produkten und Angeboten sowie deren Produktbeschreibung anzuzeigen. Außerdem ist es möglich, dass ein Kunde das Angebot direkt über das integrierte Booking Widget kauft. Damit sich das Produkt-Widget auch optisch in Ihre Website einfügt, können Sie auch Farben und Styles mit CSS anpassen.
4. Schritt-für-Schritt-Anleitung zum Einfügen der Widgets
1. Schritt
Wenn Sie eines der Widgets gerne verwenden möchten, dann gehen Sie zu Dashboard > Ticketshop > Integration Website.
2. Schritt
Kllicken Sie anschließend auf Widget Editor, um zu den IntegrationsSettings zu gelangen.
3. Schritt
Bitte fügen Sie mithilfe des Buttons + Neues Widget ein neues Widget hinzu.
Hinweis
Der Artikel Wie man den Widget Editor benutzt erklärt alle weiteren Schritte und Details.
5. Passen Sie Ihre Widgets mit CSS an!
Alle wichtigen Widget-Elemente haben einen Regiondo-spezifischen html-Klassennamen, der eine einfache Anpassung über CSS ermöglicht. Dies ermöglicht eine einfache Anpassung über CSS. Die Klassennamen sind unten aufgeführt. Das Widget verwendet die Technik der Styling-Isolierung (Shadow DOM), daher müssen alle Stile für das Widget in ein bestimmtes Tag eingefügt werden: <template id="product-catalog-widget-styles"></template> . Stellen Sie sicher, dass die id-Eigenschaft des Template-Tags mit der styles-template-id Eigenschaft des Widget-Tags übereinstimmt.
Hinweis
Der Artikel Wie passe ich den Widget-Editor Code über CSS an? zeigt Ihnen alle möglichen Individualisierungsmöglichkeiten anhand eines detaillierten Beispiels.
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',
},
},
},
};