CMS Element Config Daten in main.js abrufen

Hi zusammen,

ich habe in meinem Theme einen neuen CMS Block mit custom CMS Element für shopping experiences erstellt. In der Konfiguration von diesem Element in der Administration kann man einen API-Schlussel eingeben. Ich möchte nun in meiner main.js die API Request mit diesem Schlüssel durchführen um die Response in der Storefront auszugeben.

Aber wie komme ich an den in der Config eingegebenen Schlüssel ran? Im Twig-Template kann ich ja easy {{ element.config.apiKey.value }} verwenden, aber da kann ich die API Request nicht ausführen. Wie komme ich an die Config Values in der main.js?

Oder gibt es einen besseren Ansatz als die Request in der main.js vom Theme zu machen? Ich bin für alle Vorschläge offen!

Danke im Voraus!

Über den systemCofnigApiService

Beispiel: shopware-esd/index.js at master · Shape-and-Shift/shopware-esd · GitHub

PS: Ah, du willst den in der Storefront bekommen und an dein Storefront JS übergeben? Dafür nutzt die die data-options

Beispiel: shopware-maps/cms-element-maps.html.twig at master · Shape-and-Shift/shopware-maps · GitHub

Und im JS Storefront Plugin holst du dir das data-attr value -> shopware-maps/sas-maps.plugin.js at master · Shape-and-Shift/shopware-maps · GitHub

Oder sauberer direkt über die Options -> Shopware 6: Write your own storefront JavaScript plugin