Multiple Frontend Widgets auf einmal laden
Einige Hinweise vorab: In der Theorie ist es möglich mehrere Frontend Widgets auf einmal zu laden. Dies ist jedoch in manchen Fällen nicht empfehlenswert, insbesondere dann, wenn man für die Objektseiten ordentliches SEO betreiben möchte, da weitere Widgets die Ladezeit der Seite verlängern. Denkbare sinnvolle Szenarien sind aber zum Beispiel das Suchwidget im Header einer Prospektbestellseite.
Achtung, dieser Abschnitt setzt weitergehendes Verständnis von Javascript voraus. Die Lösung muss an Ihre Bedürfnisse adaptiert werden.
Nicht alle Widgets können gleichzeitig geladen werden, da sie beispielsweise als Hauptelemente entworfen sind und daher das Routing übernehmen.
Beispiel für mehrere Widgets
Anpassen des Loader Codes
Der Standard Ladecode der Widgets ist darauf ausgelegt nur ein Widget zu laden. Wird er mehrfach eingebunden, überschreibt die jeweils letzte Einbindung die vorherigen. Der Code muss daher angepasst werden.
Schritt 1
Zunächst müssen die Ladeoptionen der beiden Module in getrennte Variablen separiert werden.
Die verwendeten Optionen dienen nur der Illustration. Verwenden Sie die Optionen gemäß der Dokumentation des jeweiligen Widgets. Unterschiedliche Basisoptionen werden nicht unterstützt (z.B. useCookies). Stellen Sie daher sicher, dass die Grundoptionen identisch sind.
var loadOptions = [];
// erstes Widget
loadOptions.push({
module: 'op-frontend-suche',
content_id: 'op_content_box',
options: {
useCookies: true,
hasOwnCookieInfo: false,
languageSwitcherEnabled: true,
scrollTopOffset: 50,
alwaysShowExtendedFilters: true,
enableShare: true,
extraImages: true,
enableMap: true,
limit: {}
}
});
// zweites Widget
loadOptions.push({
module: 'op-frontend-searchwidget',
content_id: 'op_search_box', // wichtig, das Content Element muss sich zwingend unterscheiden!
options: {
useCookies: true,
hasOwnCookieInfo: false,
limit: {}
}
});
Die entsprechenden Teile können auch getrennt auf der Seite eingebunden werden, solange die erste Zeile immer zuerst verwendet wird. Das macht besonders dann Sinn, wenn die Kombination der Widgets sich von Seite zu Seite unterscheiden kann.
Schritt 2
Als letztes Element muss dann der Code eingebunden werden, der die Widgetoptionen tatsächlich lädt. Er muss zwingend nach allen Optionen eingebunden werden, z.B. am Ende des BODYs oder einer passenden Entsprechung im jeweiligen Projekt.
Der Code lädt hier die gewünschten Widgets entweder direkt (wenn der Frontend Kern schon geladen ist) oder schreibt sie in die Ladewarteschlange (vgl. async Option des Bootstrappers).
var secra_op_client;
if(loadOptions){
if(secra_op_client){
for(var i in loadOptions){
if(loadOptions.hasOwnProperty(i)){
secra_op_client.loadModule(
loadOptions[i]['module'],
loadOptions[i]['content_id'],
loadOptions[i]['options']
);
}
}
} else {
secra_op_client = {};
secra_op_client.loadQueue = [];
for(var i in loadOptions){
if(loadOptions.hasOwnProperty(i)){
secra_op_client.loadQueue.push({
module: loadOptions[i]['module'],
embed_id: loadOptions[i]['content_id'],
options: loadOptions[i]['options']
});
}
}
}
}