Modals innerhalb von Shopware 5 kann man relativ einfach einbinden und bspw. eine Shopseite per AJAX laden. Hierzu benötigen wir nicht einmal Javascript oder jQuery, sondern können das ganze bequem über das HTML5 data- Attribut ansteuern.

Modal Erläuterung

Den Button welcher das Modal öffnet, umschliesst ein Eltern Element „p„. Dieses beinhaltet die Konfiguration für das Modal.

data-width gibt in dem Fall die Breite des Modals an und data-height entsprechend die Höhe. Da wir intern eine Shopseite innerhalb des Modals laden möchten benötigen wir hier ebenfalls das Attribut data-mode=“ajax“. So können wir ohne einen Reload der Page innerhalb unserer Modal Box via AJAX unsere Shopseite laden.

Welches Attribut bei Klick angesprochen wird bestimmt das Attribut data-targetSelector=“a“. In diesem Fall wird bei Klick auf unser Anker Element ( a ) die Shopseite geladen.

Nun müssen wir unserem Anker Element nur noch mitteilen, welche Shopseite innerhalb des Modals geladen werden soll. Dazu setzen wir den Link auf die URL {url controller=custom sCustom=1}. sCustom=1 gibt in dem Fall die ID unserer Shopseite an, welche wir innerhalb unseres Modals in Shopware 5 laden möchten.

Shopware Onlinekurs Jetzt kostenlos anmelden.