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.

Api Calls

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\/" (12)
    },
    "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\/" (12)
                }
            ],
            "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\/" (12)
                }
            ]
        },
        "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\/" (12)
                }
            ]
        }
    },
    "modalContent": "<div>Leider haben wir noch keinen Online-Shop in Deutschland</div"  (13)
}
1 storeCountry & storeLocale:
2 browserLocales:

  • Vom Api-Call wurden über den HTTP-Header Accept-Language die angegebenen Sprachen übergeben
3 onlyOnHomepage:

  • Im Country Popup 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

    • Dem User wird der 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 nur 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.

Beispielansicht

cp man default

WIR HÄTTEN IHNEN DIESE MELDUNG AUCH GERNE ERSPART ...

... aber wir müssen Sie informieren, dass wir auf unserer Website Cookies verwenden:
  1. Diese Website verwendet keine technisch notwendigen Cookies.
  2. "Böse" Tracking-Cookies von Google Analytics (natürlich mit IP-Anonymisierung) und Leadfeeder, damit wir unsere Inhalte besser auf Ihre Bedürfnisse anpassen können.
Solange Sie nicht explizit akzeptieren, tracken wir Sie auch nicht.
Versprochen!

Detaillierte Infos in unserer Datenschutzerklärung

P.S.: Während der Entwicklung dieser Website wurden intensiv Chocolate Cookies eingesetzt.
Die sind aber alle schon weg - wir bräuchten bitte neue.
Akzeptieren Verweigern