Grundlegendes zur Einbindung über den Widgetkonfigurator

Einbindung der Widgets

Die entsprechenden Widgets stehen unter Messeverwaltung Messeeinstellungen Messeveranstaltung im Reiter Stammdaten zur Verfügung. Über das Symbol am Ende der jeweiligen Seite gelangen Sie direkt zum Widgetkonfigurator, über den weitere Einstellungen möglich sind.

data-attributes steuern die Einbindung des Widgets

Es stehen mehrere allgemeine data-attributes zur Verfügung, um die Einbindung in die Website zu erleichtern:

Shadow Root

Dies ist erforderlich, um Stiländerungen durch das übergeordnete Element zu verhindern. Dies bedeutet, festgelegte Styles der Website werden ignoriert. Die Deaktivierung kann somit zu unerwünschten Stiländerungen führen.

Hash Routing aktivieren

Hash-Routing ermöglicht es, clientseitige Routing-Funktionalität in Webanwendungen zu implementieren. Damit kann das Widget seine eigene Routing-Logik haben, ohne dass dadurch die Haupt-URL beeinflusst wird.
data-hash-routing="true"

Scroll-Position beim Wechseln der Seiten merken

Das widget managed selbstständig die Scrollposition: Navigiert der User zur Detailansicht, wird das Fenster hochgescrollt. Die ScrollPosition der Listenansicht wird gespeichert und wiederhergestellt, sobald der User zurücknavigiert.
data-save-scroll-position="true"

Ein Beispiel zur Einbindung könnte so aussehen:

<div data-id="exhibitor" data-organizer="sandbox" data-fair-id="3" data-locale="de_DE" data-disable-header-color-gradient="true" data-hash-routing="true" data-save-scroll-position="true"></div>

 Mailadresse ausblenden

In den Widgets (konkret im Aussteller-, Vortrags- und Speaker Widget) kann definiert werden, ob bei den Referenten eine Mailadresse ausgegeben werden soll oder nicht. Hierzu steht dieses data-attribute zur Verfügung:

data-hide-contact-email="true"

 Im Konfigurator der Widgets gibt es hierzu eine entsprechende Checkbox.

Event Listener

Wenn der User von der Listenansicht zur Detailansicht wechselt, wird über document ein event gefeuert. Wechselt der User zurück zur Listenansicht, wird ein weiteres Event gefeuert, der über document erreichbar ist.

    document.addEventListener('pf-widget', e => {
    const {name, data} = e.detail;
    console.log(name, data);
    });

Die Events bestehen jeweils aus dem Namen (zum Beispiel router:beforeEach) und dem Payload (data).

Folgende Events werden erfasst:

• router:initialized
• router:beforeEach
• exhibitor:loadedNextPage
• exhibitor:fetched
• exhibitor:fetchedAll
• exhibitor:set
• exhibitor:watchlist:fetched
• exhibitor:watchlist:added
• exhibitor:watchlist:removed

Generierung der Quellcodes

Für jedes Widget stehen neben den allgemeinen Grundeinstellungen spezifische, auswählbare Optionen zur Verfügung. In den meisten Fällen können die Voreinstellungen des Konfigurators übernommen werden. 

Über den Button Go to Widget gelangen Sie zu einer Vorschau, wie das Widget später auf der Messe-Website angezeigt wird - basierend auf den bisher eingepflegten Daten in profairs. 

Anschließend kann der generierte Quellcode kopiert und auf der Website der Messe entsprechend eingebunden werden.