Standardmäßig muss jedes einzelne Widget für jeden Artikel zuerst im Shop Backend angelegt werden, um dann eingebunden zu werden.
Es ist jedoch auch möglich zum Beispiel nur 1 Widget für jede Widget Art im Shop Backend zu erstellen und dann die Konfiguration davon beim Einbinden zu überschreiben.
Beispiel
Der Kunde möchte Preistabellen Widgets für alle seine 120 Artikel im Onlineshop auf seiner zweisprachigen Website einbinden.
Herkömmliche Lösung
120 Preistabellen Widgets erstellen für jeden Artikel und diese nochmal duplizieren für die 2 Sprachen. Also insgesamt 240 Widgets, die sich nur durch Artikel ID und Sprache unterscheiden.
Widgetlösung für Experten
1 Preistabellen Widget erstellen und die Konfiguration davon beim Einbinden in die Website überschreiben.
Umsetzung
Um die Konfiguration eines Widgets beim Einbinden in die Website zu überschreiben, muss man den Code den man zum Einbinden aus dem Shop Backend kopiert ergänzen.
Nehmen wir an wir wollen beim Preistabellen Widget den Artikel je nachdem wo wir dieses Widget einbinden ändern. Dann können wir den Code beim Einbinden folgendermaßen erweitern:
Code Teil vorher
initWSSW({
containerId: "shopWidgetContainer",
widgetId: "9JFW6BDWSC"
})
Code Teil mit anderem Artikel
initWSSW({
containerId: "shopWidgetContainer",
widgetId: "9JFW6BDWSC",
config: {
articleId: 5 // ID des gewünschten Artikels
}
})Beim Preistabellen Widget kann also der Artikel mit dem Key articleId überschrieben werden. Welche Keys es bei den verschiedenen Widget Arten gibt, sind unten zusammengefasst.
TIPP: Du siehst die aktuelle Konfiguration vom Widget auch im Shop Backend bei der Liste der Widgets, wenn du mit der Maus über die Widget Art fährst. Hier kannst du dir auch diese Konfiguration kopieren, die du dann beim Einbinden überschreiben kannst.
Wichtig: Beim Einfügen muss ein Beistrich nach der “widgetId” und vor dem “config” Teil manuell hinzugefügt werden.
Mögliche Konfigurationen je nach Widget Art
Besonderheit beim Key language!
Hier wird standardmäßig die ID von der Sprache im TYPO3 verwendet. Du kannst diese aber auch mit dem offiziellen zweistelligen Sprachkürzel überschreiben. Zum Beispiel > "de" oder "en"
WICHTIG: Überschreibe beim Einbinden immer nur die Felder die du ändern willst
Button
config: {
"type": "articleButton",
"articleId": null,
"T3PageId": null,
"bookNowBtnLabel": "",
"language": 0,
"showLogo": false,
"affiliationParam": "",
"linkTargetBlank": true
}
Artikelliste
config: {
"type": "articleList",
"articleIds": [],
"articleCategory": null,
"showTopArticles": false,
"T3PageId": null,
"bookNowBtnLabel": "",
"language": 0,
"affiliationParam": "",
"linkTargetBlank": true
}Artikel Inhalte
config: {
"type": "articleContent",
"articleIds": [],
"articleCategory": null,
"showTopArticles": false,
"T3PageId": null,
"bookNowBtnLabel": "",
"language": 0,
"affiliationParam": "",
"linkTargetBlank": true
}Artikel Preistabelle
config: {
"type": "articlePriceTable",
"articleId": null,
"T3PageId": null,
"bookNowBtnLabel": "",
"language": 0,
"affiliationParam": "",
"linkTargetBlank": true
}Artikel Filter
config: {
"type": "articleFilter",
"showResultsOnPage": false,
"showFilter": {
"startday": true,
"articleType": false,
"sport": true,
"level": false,
"category": false
},
"filterCategoryTypes": [],
"resultListSettings": {
"T3PageId": null,
"bookNowBtnLabel": ""
},
"filterTitle": "",
"searchBtnLabel": "",
"T3PageId": null,
"language": 0,
"affiliationParam": "",
"linkTargetBlank": true,
"linkTargetBlankResults": true
}