Widgetlösung für Experten

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
}