# JavaScript im Theme

**URL:** <https://forum.shopware.com/t/javascript-im-theme/103137>\
**Category:** Shopware 6 (German)\
**Created:** [27. Februar 2024 um 09:51 UTC](https://forum.shopware.com/t/javascript-im-theme/103137 "2024-02-27T09:51:30Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [27. Februar 2024 um 09:51 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/1 "2024-02-27T09:51:30Z")

</div>

Hallo,

ich benötige eigene JavaScript-Funktionen im Theme und bin entsprechend dieser Anleitung vorgegangen:

> **[Add SCSS Styling and JavaScript to a Theme | Shopware Documentation](https://developer.shopware.com/docs/guides/plugins/themes/add-css-js-to-theme.html)**
>
> Documentation for Shopware developers

In der `src/Resources/app/storefront/src/main.js` habe ich folgendes testweise implementiert:

```auto
function showAlert(){
   alert("Das ist ein Test");
}

showAlert();

```

Nach einem `sh ./bin/build-storefront.sh` auf der Konsole wird das PopUp im Shop korrekt angezeigt. Wenn ich die Funktion showAlert() aber in einem Twig-Template aufrufe, beispielsweise mit `onclick="showAlert();"`, dann bekomme ich auf der Konsole die Fehlermeldung „Uncaught ReferenceError: showAlert is not defined at HTMLImageElement.onclick“.

Warum komme ich im Twig-Template nicht an die Funktionen heran?

Viele Grüße

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [28. Februar 2024 um 09:18 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/2 "2024-02-28T09:18:09Z")

</div>

… ich beschreibe das Problem nochmal genauer, weil mir da bestimmt jemand einen Tipp geben kann:

Ich erstelle mittels `bin/console theme:create` ein neues Theme. In der Datei theme.json entsteht dabei auch der Eintrag

```auto
"script": [
    "@Storefront",
    "app/storefront/dist/storefront/js/my-theme.js"
  ],

```

Neuerdings übrigens mit einer falschen Pfadangabe, was dazu führt, dass das frisch erstellte „Standard-Theme“ keinem Verkaufskanal zugeordnet werden kann. Nach einer Korrektur klappt es dann aber.

Danach läuft es eigentlich so, wie unter [Add SCSS Styling and JavaScript to a Theme | Shopware Documentation](https://developer.shopware.com/docs/guides/plugins/themes/add-css-js-to-theme.html#adding-custom-js) beschrieben:

Wenn man in der Datei `/MyTheme/src/Resources/app/storefront/src/js/main.js` den JavaScript Code einträgt, speichert und danach auf der Konsole `bin/build-storefront.sh` ausführt, wird der JS-Code minimiert und unter `/MyTheme/src/resources/app/storefront/dist/storefront/js/my-theme.js` abgelegt.

Im Beispiel wird der Befehl `console.log('SwagBasicExampleTheme JS loaded‘);` eingetragen. Dieser Befehl landet auch korrekt in der minimierten Form in `/MyTheme/src/resources/app/storefront/dist/storefront/js/my-theme.js` Wenn das neue Theme zugewiesen ist und die Storefront aufgerufen wird, sehe ich in der Browser-Konsole auch die Log-Ausgabe. Bis dahin klappt also eigentlich alles, wie beschrieben.

Wenn ich jetzt aber JS-Funktionen erstelle, beispielsweise `function showAlert(){alert("test");}` die ich später im Twig-Template aufrufen möchte, gibt es die Probleme. Beim späteren Aufruf im Template, über `onClick="showAlert();"` kommt die Fehlermeldung "`Uncaught ReferenceError: showAlert is not defined at HTMLImageElement.onclick`“.  
Der minimierte JS-Code der Funktion ist auch nicht in `/MyTheme/src/resources/app/storefront/dist/storefront/js/my-theme.js` enthalten.

Wenn ich nun statt `console.log('SwagBasicExampleTheme JS loaded‘);` mal die Funktion aufrufe, also `showAlert();` dann wird die Funktion bei jeder Seite in der Storefront ausgeführt. Der Aufruf im Template über `onClick='…'` scheitert aber weiterhin.  
In der Datei `/MyTheme/src/resources/app/storefront/dist/storefront/js/my-theme.js` ist jetzt der folgende Code zu finden: `(self.webpackChunk=self.webpackChunk||[]).push([["my-theme"],{5350:()=>{alert("Das ist ein Test")}},e=>{var s;s=5350,e(e.s=s)}]);`

Im Endeffekt sieht es so aus, als wenn in `/MyTheme/src/resources/app/storefront/dist/storefront/js/my-theme.js` immer nur der JS-Code steht, der direkt aufgerufen wird. Der Code von Funktionen fehlt dort.

Wenn ich jetzt den Code der Funktion nachträglich in `/MyTheme/src/resources/app/storefront/dist/storefront/js/my-theme.js` eintrage, klappt es wieder. Aber dass kann es ja nicht sein. Ich würde also sagen, der grundsätzlich beschriebene Ablauf funktioniert, aber es wird eben nicht der komplette JS-Code minimiert und übertragen.

Wie bekomme ich es hin, das auch der JS-Code meiner Funktionen berücksichtigt wird?

Viele Grüße

---

<div class="post-metadata">

**Author:** ![olli.k](https://avatars.discourse-cdn.com/v4/letter/o/e99b99/32.png) [@olli.k](https://forum.shopware.com/u/olli.k)\
**Post date:** [28. Februar 2024 um 13:56 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/3 "2024-02-28T13:56:47Z")

</div>

Hast du mal versucht, ein Event draufzulegen? In der main.js

```auto
const button = document.getElementById('say-hello');

button.addEventListener('click', () => {
    alert('hallo')
})

```

und dann im Twig  
`<button id="say-hello">Hello</button>`

---

<div class="post-metadata">

**Author:** ![olli.k](https://avatars.discourse-cdn.com/v4/letter/o/e99b99/32.png) [@olli.k](https://forum.shopware.com/u/olli.k)\
**Post date:** [28. Februar 2024 um 17:39 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/4 "2024-02-28T17:39:48Z")

</div>

Empfehlen würde ich aber, das Plugin-System von Shopware zu verwenden.

> **[Add SCSS Styling and JavaScript to a Theme | Shopware Documentation](https://developer.shopware.com/docs/guides/plugins/themes/add-css-js-to-theme.html#add-scss-styling-and-javascript-to-a-theme)**
>
> Documentation for Shopware developers

> **[Add Custom Javascript | Shopware Documentation](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-javascript.html)**
>
> Documentation for Shopware developers

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [29. Februar 2024 um 07:41 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/5 "2024-02-29T07:41:19Z")

</div>

Hallo @olli.k

danke für Deine Hinweise. In das Thema „Storefront JavaScript plugins with vanilla JavaScript ES6 classes“ muss ich mich dann wohl erstmal mehr einarbeiten. Offenbar kann man, ohne solch ein Plugin, nur begrenzt in Shopware 6 mit JS arbeiten.

Ich hatte zwischenzeitlich noch diese beiden kostenlosen Plugins gefunden:

> **[Custom JavaScript/CSS Manager für Shopware 6](https://store.shopware.com/dne5719820551438f/custom-javascript/css-manager-fuer-shopware-6.html)**
>
> Fügt dem Backend einen Container Manager für eigenes JavaScript/CSS/SCSS hinzu. Das Plugin bietet die folgenden Features: Anlegen von beliebig…

> **[jQuery Support für Shopware \>= 6.5](https://store.shopware.com/netzk25481711950f/jquery-support-fuer-shopware-6.5.html)**
>
> Dieses Plugin fügt die von Shopware empfohlene Version von jQuery kompatibel in das bestehende System ein. Das bedeutet, dass bestehende Skripte, die…

Damit kann ich meine Dinge erstmal recht gut umsetzen, habe aber wieder den Konflikt, sogar gleich zwei, Plugins einzusetzen, die bei einem der nächsten Updates dann eventuell Probleme machen.

Viele Grüße, Frank

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [1. März 2024 um 07:52 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/6 "2024-03-01T07:52:00Z")

</div>

Hallo,

> **[Add Custom Javascript | Shopware Documentation](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-javascript.html#writing-a-javascript-plugin)**
>
> Documentation for Shopware developers

… brauche ich ein separates/eigenes Plugin, wenn ich den JS-Code über den Plugin-Ansatz realisieren will, oder kann ich dass auch innerhalb meines Themes erledigen?

Viele Grüße

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [1. März 2024 um 08:38 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/7 "2024-03-01T08:38:19Z")

</div>

okay, habe es einfach mal probiert. Es funktioniert auch im Theme 🙂.

Viele Grüße

---

<div class="post-metadata">

**Author:** ![olli.k](https://avatars.discourse-cdn.com/v4/letter/o/e99b99/32.png) [@olli.k](https://forum.shopware.com/u/olli.k)\
**Post date:** [1. März 2024 um 10:39 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/8 "2024-03-01T10:39:14Z")

</div>

Das Theme ist im Grunde auch nur ein Plugin 🙂

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [1. März 2024 um 10:44 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/9 "2024-03-01T10:44:18Z")

</div>

Genau. Da ich sowieso ein eigenes Theme habe, um die Templates anzupassen, kann ich das Thema mit JS gleich mit unterbringen. So benötige ich kein zusätzliches Plugin 🙂.

---

<div class="post-metadata">

**Author:** ![olli.k](https://avatars.discourse-cdn.com/v4/letter/o/e99b99/32.png) [@olli.k](https://forum.shopware.com/u/olli.k)\
**Post date:** [1. März 2024 um 10:48 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/10 "2024-03-01T10:48:41Z")

</div>

Ja, bei uns machen wir das ähnlich. Wir entscheiden nach dem Kontext, wenn es direkt für das Theme passend ist, dann immer ins Theme. Wenn es aber den Shop erweitert, dann machen wir eigene Plugins.

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [1. März 2024 um 10:54 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/11 "2024-03-01T10:54:30Z")

</div>

… trotzdem habe ich noch einen merkwürdigen Effekt:

```auto
// <plugin root>/src/Resources/app/storefront/src/my-theme/my-theme.plugin.js
import Plugin from 'src/plugin-system/plugin.class';

export default class MyTheme extends Plugin {
    static options = {
        /**
         * @type string
         */
        text: 'Seems like there\'s nothing more to see here.',
    };

    init() {
        window.addEventListener('click', this.onClick.bind(this));
    }

    onClick() {
        console.log(this.options.text);
    }
}

```

Ich habe das mal umgebaut für das Click-Event, da ich ein zusätzliches Element im Listing benötige, was durch Klicken auf ein Symbol in der Produkt-Box ausgelöst werden soll.

Im Listing habe ich mal zu Testzwecken folgendes eingebaut:

```auto
{% set examplePluginOptions = {
         text: product.translated.name
} %}

<button data-my-theme data-my-theme-options='{{ examplePluginOptions|json_encode }}'>Klick mich...</button>

```

Wenn ich jetzt auf den neuen Button klicke, erscheint die Ausgabe in der Konsole. Allerdings für alle Produktboxen, die im Listing vorhanden sind. Ich möchte aber nur die eine, wo ich geklickt habe?

---

<div class="post-metadata">

**Author:** ![olli.k](https://avatars.discourse-cdn.com/v4/letter/o/e99b99/32.png) [@olli.k](https://forum.shopware.com/u/olli.k)\
**Post date:** [1. März 2024 um 11:01 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/12 "2024-03-01T11:01:35Z")

</div>

du musst das anders machen

```auto
    init() {
        this.el.addEventListener('click', this.onClick.bind(this));
    }

```

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [1. März 2024 um 11:04 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/13 "2024-03-01T11:04:51Z")

</div>

Super! Das funktioniert prima. Genau das ist für mich der Lösungsweg.

Viele Dank!

---

<div class="post-metadata">

**Author:** ![olli.k](https://avatars.discourse-cdn.com/v4/letter/o/e99b99/32.png) [@olli.k](https://forum.shopware.com/u/olli.k)\
**Post date:** [1. März 2024 um 11:05 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/14 "2024-03-01T11:05:02Z")

</div>

> [@Frank\_2812](#):
>
> `window.addEventListener('click', this.onClick.bind(this));`

Das ist doof aus der Doku, denn da wird das scroll event angesprochen, welches für das komplette Fenster gilt `window`. Du willst aber nur das Element. Dadurch das du von `Plugin` erbst, hast du mit `this.el` zugriff auf das Element auf welches du regieren willst

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/2/9/29c7587ba660f00e4995d1743162782e5d6d8653.svg) [@system](https://forum.shopware.com/u/system)\
**Post date:** [31. März 2024 um 11:05 UTC](https://forum.shopware.com/t/javascript-im-theme/103137/15 "2024-03-31T11:05:06Z")

</div>

Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.