Externe Javascript Bibliothek / externes Javascript einbinden

Shopware 6 (German)
,
1

Hallo,

ich bin gerade dabei meinen Shop von Shopware 6.5 auf Shopware 6.6.x upzudaten.
Mein eigenes Theme wird geladen und die eigenen Scripte funktionieren soweit.
Das einziges Problem ist, das ich ein externes Javascript nicht eingebunden bekomme bzw. nicht laden kann. Es handelt sich dabei um einen Videoplayer. lite-youtube-embed/src/lite-yt-embed.js at master · paulirish/lite-youtube-embed · GitHub

In SW 6.5 habe ich diesen einfach in der Theme.json unter scripts hinterlegt und es wurde verwendet wenn ich das entsprechende Tag einbinde. Aber in SW 6.6 funktioniert das nicht mehr. Den Pfad zum js hab ich angepasst, es wird aber nicht geladen.
Nach meinem Verständnis vom neuen System, sollte es ja trotzdem möglich sein eine externes Script einzubinden, oder sehe ich das falsch? Ich bin die Doku schon mehrfach durchgegangen, kann aber keinen Fehler ausmachen. Meine eigenen Scripte werden geladen. Diese sind auch in der main.js eingebunden. Hat jemand eine Idee?

Danke schonmal.

Gruß
Thorsten

2

wir benutzen das dafür

3

Ein zusätzliches Script zum Einbinden von YouTube-Videos? Wieso? :thinking:

Man muss eigentlich nur „iframe“ bei „html_sanitizer“ erlauben (z-shopware.yaml), dann kann ganz normal den Code von YouTube benutzt werden. Da braucht man kein extra Javascript.

4

Danke für die Antwort.
Das Script lädt die Youtube Videos schneller, daher nehmen wir das, lief bisher auch sehr gut. Aber unabhängig von der Funktion des Scripts sollte es doch möglich sein, ein externes Javascript einzubinden. Oder habe ich da einen Denkfehler?

5

Echt? Weil bei der Demo das Video einfach per iFRame eingebunden wird. Also die selbe Methode wie beim Einbetten von YouTube.

Ansonsten das JavaScript mittels Plugin (wurde ja schon erwähnt) oder wenn du ein eigenes Themes hast, dann hier. Im Standard Backend gibt es dafür keine Funktion.

6

Ich hab ein eigenes Theme, würde daher auf ein externes Plugin verzichten wollen.
Das Problem ist, das ich das externe JS Script nicht geladen bekomme. Mein eigenes JS, um das Theme zu erweitern wird auch geladen und funktioniert. Das wurde aber auch extra für SW geschrieben. Aber externe Scripte, wie beispielsweise das Youtube Script, klappen leider nicht.
Ich verstehe leider nicht was ich in Shopware 6.6 machen muss, um das Laden zu können. In 6.5 ging es problemlos, da stand es nur in der Theme.json unter dem Script Tag.
Muss ich das Script jetzt als Plugin umarbeiten und kann es nicht mehr einbinden wie es original ist?
In der main.js hab ich es nicht eingetragen sondern in der theme.json Testweise in die main.js eingetragen habe ich es natürlich auch schon, aber nichts hilft. Das Script wird nicht eingelesen.

Wenn du hier eine Idee hättest, wäre ich dir sehr dankbar.

7

Das ext. Skript nutzt vermutlich auch selber wieder Abhängigkeiten, die dann mit Shopware kolidieren. Insbesondere wenn hier dann sogar unterschiedliche Version genutzt werden.
Für einen ersten Start-Punkt würde ich das „hart“ im Theme in den HTML Header einbauen.

8

Also externe JavaScripte habe ICH weder in die eine noch in die andere von dir erwähnte Datei eingetragen. Ich weiß auch gar nicht ob das überhaupt möglich ist.

Grundsätzlich gehört eigenes JS in die <name_theme>.js - also gemäß den Vorgaben ab SW 6.6 - zwischen SW 6.5 und SW 6.6 gibt es Änderungen bei der Struktur! Steht alles in der Doku.

Externe JS (also Verlinkungen mit https etc.) habe ich allerdings in die „base.html.twig“ gepackt.

{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_html %}
  {{ parent() }}
  <script src="link_zur_externen_js_datei"></script>
{% endblock %}

Da gibt es sicherlich auch noch andere Blöcke :slight_smile:

9

Danke für die Antworten. :slight_smile:
In Shopware 6.5 war es in der theme.json unter den Scripts verlinkt und konnte mit einem Tag angesprochen werden, genau so wie Shopware das eigentlich mit dem js aus dem Theme macht. Es entspricht halt von Haus aus nicht der Shopwarestruktur, aber hat funktioniert.

Wenn das jetzt nicht mehr geht, werde ich das so akzeptieren und es so machen wie ihr gesagt habt und den Pfad zum script einfach in den Block schreiben. Danke euch!

10

Ich hatte das Problem auch kürzlich, bei einem Update auf Version 6.6.x:

Ursache: Shopware hat die Verzeichnisstrukturen für die Einbindung von JavaScript verändert.

Before:

└── custom/apps/
    └── ExampleApp/src/Resources/app/storefront/dist/storefront/js/
        └── example-app.js

After:

└── custom/apps/
    └── ExampleApp/src/Resources/app/storefront/dist/storefront/js/
        ├── example-app.js         <-- OLD: Please remove
        └── example-app/           <-- NEW: Please include everything in this folder in the release
            ├── example-app.js     
            ├── async-example-1.js 
            └── async-example-2.js

Schau mal hier: shopware/UPGRADE-6.6.md at trunk · shopware/shopware · GitHub

Die neue Struktur wird nach einem bin/build-storefront.sh aufgebaut.

Die Scripte, müssen in das neue dist-Verzeichnis hinein und in der theme.json referenziert werden. Sie werden nicht berücksichtigt, wenn sie im src-Verzeichnis liegen.

Der sauberste Weg ist aber die Erstellung eines eigenen JavaScript-Plugins. Wie das geht, kannst Du hier lesen: Add Custom Javascript | Shopware Documentation

Wenn es so korrekt implementiert ist, landet der minimierte JS-Code nach einem bin/build-storefront.sh im neuen dist-Verzeichnis. Das Ganze funktioniert übrigens auch asynchron.