Ajax Modal - kein JS scheinbar möglich

Ich öffne durch

<a class="btn btn-primary link-light anfragen" data-ajax-modal="true" data-modal-class="modal-XXX" data-url="/widgets/cms/0191cb35a110791e9793bb47f0e13775" href="/widgets/cms/0191cb35a110791e9793bb47f0e13775" title="XXX">XXX</a>

Das Modal wird generiert und auch das Formular darin funktioniert. Leider haben sowas wie TWIG Variablen keine Auswirkung weil das ja „wie“ eine eigene Seite ist.

Ich nutze darin das Plugin: Formular für Anfragen für die Erlebniswelten | Shopware Store

Ich hätte aber gerne das darin Felder aus dem Plugin nun mit Daten aus der Ursprungsseite per JS gefüllt werden, und zwar diese hier:

<div class="form-hidden-fields">
   <input type="hidden" name="originId" value="">
   <input type="hidden" name="originName" value="">
</div>

Nun habe ich ein JS aber ich bekomme weder in der Konsole ausgaben noch sonstwie und die Felder werden auch nicht gefüllt.

Das JS binde ich durch das Plugin ein: HTML Erlebniswelten Element mit Twig Compiler | Shopware Store

sollte eigentlich also funktionieren. Vielleicht könnt ihr mir helfen?

Habe gerade nochmal gestestet.

<div class="form-hidden-fields">
<input type="hidden" name="origin" value="Produkt">
<input type="hidden" name="originName" value="{{ page.metaInformation.metaTitle }}">
<input type="hidden" name="originId" value="{{ page.metaInformation.metaKeywords }}">
</div>

Diese Daten in den TWIG Block sowie auch in das Formular hat keine Auswirkungen. Daher wollte ich es mit JS lösen.

Hallo,

genau, wenn man eine Modalbox per Ajax nachlädt, befindet man sich logischerweise nicht im Kontext der Seite, in der die Modalbox geöffnet wird. Somit stehen einem im Rahmen der Modalbox auch nicht die Daten des Produkts zur Verfügung - man hat ja schließlich nur einen Link zu einer Modalbox bzw. einer Erlebniswelt platziert und mehr nicht.

Wenn die Modalbox über ajax-model aufgerufen wird, müsste es eigentlich voll und ganz ausreichen, wenn man sich auf dieses Event subscribt: shopware/src/Storefront/Resources/app/storefront/src/plugin/ajax-modal/ajax-modal.plugin.js at trunk · shopware/shopware · GitHub .

Beispielsweise so:

const plugin = window.PluginManager.getPluginInstanceFromElement(document.querySelector(".anfragen"), "AjaxModal");

plugin.$emitter.subscribe("ajaxModalOpen", () => {
     …
}

Das Ganze gehört dann aber natürlich in das eigene Theme in ein JavaScript-Plugin.

Natürlich müsste man dann auch noch irgendwo auf der (Produkt-)Seite die Information „ablegen“ (ggf. als verstecktes Feld), damit man auf diese Information an dieser Stelle zugreifen und sie dann über JavaScript und beispielsweise die ID des Formulars dann in die entsprechenden Felder übertragen kann.

Ich kann mir kaum vorstellen, das man das über JavaScript, das man nur in die Erlebniswelt einbettet, gelöst bekommt.

Andernfalls bietet die Erweiterung auch die Möglichkeit, die Werte der Felder manuell zu setzen - dann könnte man es ganz ohne eigene Anpassung lösen. Natürlich müsste man dann in dem Fall natürlich jedem Produkt, bei dem das Formular platziert wurde, ein eigenes Layout mit eigenen Werten zuweisen.

Grüße
Sebastian

Hallo @sschreier

naja ich habe es soweit bekommen das ein MutationObserver die Klicks gecheckt und auch das Modal geladen hat.

Das Modal wird ja durch Ajax am ende (vor dem gehängt in den

ist dann alles vorhanden.

Leider habe ich es nicht hinbekommen auch wenn ich den kompletten CSS Pfad angegeben habe das er mit in der Form in die HiddenFields die Daten einträgt.

Hätte er das gemacht dann wäre ich schon glücklich und hätte alles was ich wollte.

Ich habe dann vorhin das Plugin von @aggrosoft probiert. Ich konnte die Seite in meinen Theme einbinden (bzw das Formular was ja als eigene Erlebnisswelt fungiert) Leider fehlten mir dann wieder die Daten dich ich in den HiddenFlieds möchte.

Ich habe mal die vom Telekom Plugin angeschrieben. Vielleicht haben die einen Tipp für mich!

Gerade habe ich dann auch probiert das Formular über die class d-none ausblenden und dann dynamisch innerhalb der Seite in ein Modal zu kopieren.

Somit hätte ich das Formular in einen Modal (Usability) und die Daten wären alle vorhanden.
Klappt aber auch nicht so wie ich es möchte. Nach gut 10 Stunden habe ich nun keine Lust mehr :smiley:

Aber danke erstmal für deine Info