API
Das Modul bietet einen Api Call um die Informationen (Configuration und Ergebnis des Algorithmus) abzufragen und das Rendern auf anderen Systemen zu ermöglichen.
Aufruf
Request:
https://www.domain.tld/{storecode}/countrypopup/popup/index/Response
{
"storeCountry": "CH",
"storeLocale": "de_CH", (1)
"browserLocales": "en_US,en_EN,fr_FR,de_DE", (2)
"onlyOnHomepage": false, (3)
"openPopup": true, (4)
"modalImage": "https:\/\/www.domain.tld\/media\/country_modal_image\/default\/favicon_1.png", (5)
"useDelay": false, (6)
"delayDuration": 1000, (7)
"cookieLifetime": 0, (8)
"showModalOverlay": true, (9)
"responsiveModal": true, (10)
"recommendedStore": { (11)
"country": "US",
"language": "en_US",
"storecode": "default",
"base": "https:\/\/www.domain.tld\/default\/",
"pageurl": "https:\/\/www.domain.tld\/default\/countrypopup\/popup\/index\/"
},
"storeUrls": {
"CH": {
"de_CH": [
{
"country": "CH",
"language": "de_CH",
"storecode": "store_view_2",
"base": "https:\/\/www.domain.tld\/store_view_2\/",
"pageurl": "https:\/\/www.domain.tld\/store_view_2\/countrypopup\/popup\/index\/"
}
],
"fr_CH": [
{
"country": "CH",
"language": "fr_CH",
"storecode": "store_view_3",
"base": "https:\/\/www.domain.tld\/store_view_3\/",
"pageurl": "https:\/\/www.domain.tld\/store_view_3\/countrypopup\/popup\/index\/"
}
]
},
"US": {
"en_US": [
{
"country": "US",
"language": "en_US",
"storecode": "default",
"base": "https:\/\/www.domain.tld\/default\/",
"pageurl": "https:\/\/www.domain.tld\/default\/countrypopup\/popup\/index\/"
}
]
}
},
"modalContent": "<div>Leider haben wir noch keinen Online-Shop in Deutschland</div" (13)
}| 1 | "storeCountry" & "storeLocale": Der Api-Call wurde gegen folgende URL aufgerufen "https://www.domain.tld/store_view_2/". Dieser URL entspricht den schweizer Shop in der deutschen Sprache. |
| 2 | "browserLocales": Vom Api Call wurden über den HTTP-Header “Accept-Language” die angegebenen Sprachen übergeben |
| 3 | "onlyOnHomepage": Im CountryPopip wurde konfiguriert, ob nur auf der Startseite das Popup angezeigt wird und nicht auf Unterseiten |
| 4 | "openPopup": Der Algorithmus kommt zu der Entscheidung, dass ein Popup angezeigt werden soll |
| 5 | "modalImage": Eine Bild URL, das im Popup angezeigt wird oder leer. |
| 6 | "useDelay": Soll das Popup sofort angezeigt werden oder erst nach einiger Zeit |
| 7 | "delayDuration": Wenn “useDelay” aktiviert, dann die dauer in Millisekunden, bis das Popup angezeigt wird |
| 8 | "cookieLifetime": Cookie Lifetime, wie lange das Fenster nicht mehr angezeigt wird. 0 ⇒ Session Lifetime |
| 9 | "showModalOverlay": Soll hinter dem Dialog ein “Overlay” (meist vollflächiger dunkler Hintergrund) angezeigt werde, ob dem Popup mehr Aufmerksamkeit zu schenken |
| 10 | "responsiveModal": Auf Mobil Devices das Popup als Off-Canvas einblenden |
| 11 | "recommendedStore": Der “recommendedStore” beinhaltet nach dem den Algorithmus den empfohlenen Store. Kann evtl. im Layout extra dargestellt werden. Er beinhaltet neben den Store Informationen Country, Language und Storecode auch den Link zur Startseite des Stores und die HREF-Lang des Stores um bei Unterseiten auf die jeweilige Unterseite des empfohlenen Stores zu verlinken. Dieser Eintrag ist leer, falls keine Empfehlung gegeben werden kann. |
| 12 | "storeUrls": Unter “StoreUrls” werden alle Stores der Magento Instanz nach Land und Sprache aufgelistet um eine möglichst flexible Darstellung des Store-Switchers zu ermöglichen. |
| 13 | "modalContent": Zusätzlicher Text der im Popup angezeigt wird. Dieser kann auch Sprachen bezogen hinterlegt werden und wird anhand der Browser Informationen ermittelt. Der Text wird über RTE im Backend gepflegt und kann sehr komplexes Markup beinhalten. |
Implementierung
Die Implementierung des Dialogs kann dann im Frontend vorgenommen werden, da im JSON-Response alle Konfigurationseinstellungen und Ergebnisse aus der Browser-Analyse übergeben werden. Beispiel, wie die Logik implementiert werden kann:
-
JavaScript prüft ob Cookie gesetzt ist. Cookie gesetzt? ⇒ Ende
-
JavaScript ruft per AJAX Magento gemäß API auf mit dem aktuellen Kontext
-
JavaScript rendert Popup
-
JS setzt Cookie
-
URLs für Auswahl werden dem hreflang Tag entnommen
-
Sprachen welche nicht dem hreflang entnommen werden können, da es für die aktuelle Seite keine Übersetzung gibt, müssen aus dem APi Call aus dem Eintrag “base” des jeweiligen Landes und der Sprache entnommen werden, da dies alle Startseiten und Sprachen kennt
-
User wird Vorschlag anhand des AJAX Results dargestellt
-
|
Die "pageurl" des jeweiligen Storeviews beinhaltet innerhalb von Magento die HREF-Lang der Seite. Wird der Check über den Api-Call aufgerufen, ist der Api-Call die aktuelle Seite und dementsprechend liefert Magento den Api-Call für die verschiedenen Stores zurück. Im Grunde muss das aufrufende System wissen, wie seine HREF-Langs lauten und diese beim Rendern des Dialoges einsetzen. Es kann aber auch immer die "base" verwendet werden, da diese im Grunde auf die Startseite zeigt. |
Default Layout
Das Modul liefert für Magento ein rudimentäres Default Template mit, dass auch über einen Api-Call abgerufen werden kann. Dazu müssen die
POST-Request:
https://www.domain.tld/{storecode}/countrypopup/popup/content/Als Parameter JSON codiert der “storeUrls” Inhalt aus dem GET Request übergeben. Die "pageurl" muss vorab durch die spezifischen HREF-Lang ausgetauscht werden
jsonData={
"storeUrls": {
"US": {
"en_US": [
{
"country": "US",
"language": "en_US",
"storecode": "store_view_2",
"base": "https:\/\/www.domain.tld\/store_view_2\/",
"pageurl": "https:\/\/www.domain.tld\/store_view_2\/product.html\"
}
]
},
"DE": {
"de_DE": [
{
"country": "DE",
"language": "de_DE",
"storecode": "default",
"base": "https:\/\/www.domain.tld\/default\/",
"pageurl": "https:\/\/www.domain.tld\/default\/product.html\"
}
]
},
"FR": {
"fr_FR": [
{
"country": "FR",
"language": "fr_FR",
"storecode": "store_view_3",
"base": "https:\/\/www.domain.tld\/store_view_3\/",
"pageurl": "https:\/\/www.domain.tld\/store_view_3\/product.html\"
}
]
}
}
}Response
{
(1)
"openPopup": true,
(2)
"storeSwitcherContent": "\n<div class=\"popup-store-switcher\">\n<div class=\"recommended-store\">\n<div><b>Recommended stores<\/b><\/div>\n<div class=\"switcher\n store_view_2 US en_US\"\n>\n <span class=\"country-code US\">\n <span>US<\/span>\n <\/span>\n <a href=\"https:\/\/magento235ce.test\/store_view_2\/product.html\/\"\n class=\"language-link en_US\">\n <span class=\"language-code en_US\">\nen_US <\/span>\n <\/a>\n<\/div>\n <\/div>\n \n <div class=\"all-stores\">\n <div><b>Available stores:<\/b><\/div>\n <div class=\"switcher US\">\n <span class=\"country-code US\">\nUS <\/span>\n<a href=\"https:\/\/magento235ce.test\/store_view_2\/product.html\/\"\n class=\"language-link en_US\">\n <span class=\"language-code en_US\">\nen_US <\/span>\n <\/a>\n<\/div>\n <div class=\"switcher DE\">\n <span class=\"country-code DE\">\nDE <\/span>\n<a href=\"https:\/\/magento235ce.test\/default\/product.html\/\"\n class=\"language-link de_DE\">\n <span class=\"language-code de_DE\">\nde_DE <\/span>\n <\/a>\n<\/div>\n <div class=\"switcher FR\">\n <span class=\"country-code FR\">\nFR <\/span>\n<a href=\"https:\/\/magento235ce.test\/store_view_3\/product.html\/\"\n class=\"language-link fr_FR\">\n <span class=\"language-code fr_FR\">\nfr_FR <\/span>\n <\/a>\n<\/div>\n<\/div>\n<\/div>\n",
(3)
"additionalContent": "\n<div class=\"additional-content\">\n<p>dieser text ist deutsch aus dem Popup<\/p><\/div>\n"
}| 1 | "openPopup": Der Algorithmus kommt zu der Entscheidung, dass ein Popup angezeigt werden soll |
| 2 | "storeSwitcherContent": Das Markup des Store Switchers |
| 3 | "additionalContent": Zusatztext der angezeigt werden kann |
Die Daten können dann Client-Seitig zusammengebaut und gerendert werden.
