Eigenes Javascript einbinden

Hallo, ich bin gerade auf der Suche nach einer Möglichkeit JavaScript in mein Shopware-Shop einzubinden. Dabei wollte ich eine custom.js anlegen. An welcher Steller aber müsste ich es im Template einbinden? Hatte es im meinTemplate/frontend/index/header.tpl probiert, dort wird es auch im Quelltext ausgegeben, jedoch wirkt es nicht. Für eine Antwort bin ich sehr dankbar. Viele Grüße

Hallo, das Template ist schon ok. Je nach Script kannst du es vielleicht auch in den Footer packen. Stimmt denn der Pfad zum JS im Quellcode, ansonten hast du vielleicht einen Fehler im Script? Du kannst ja deinen Code auch ja mal testweise direkt in das Template schreiben und testen. Gruß Marco

Laufen tut das JS auf anderen Instanzen. Ist es normales scroll-down script. Im Quelltext ist es auch richtig verlinkt, wird jedoch nicht ausgeführt. Hatte es folgendermaßen eingebunden: meinTemplate/frontend/index/header.tpl {extends file='parent:frontend/index/header.tpl'} {block name="frontend\_index\_header\_css\_screen" append} <link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='meinTemplate/frontend/_resources/styles/emotion_red.css'%7D"><script type="text/javascript" src="'meinTemplate/frontend/_resources/JavaScript/custom.js"></script>{/block} Hast du noch eine Idee?

Dateien würde ich immer so einbinden: <script type="text/javascript" src="%7Blink%20file='frontend/_resources/JavaScript/custom.js'%7D"></script> Ansonsten muss es an deinem Script liegen. Gruß Marco

Hallo @crz, du gehst wie folgt vor: [list=1] [*] Neuen Ordner unterhalb von „/templates“ anlegen - z.B. emotion_mytemplate[/*] [*] Unterhalb von „emotion_mytemplate“ einen Ordner „frontend“ und hierin einen Ordner namens „index“[/*] [*] …innerhalb des Ordners „index“ legst du jetzt eine neue Datei namens „header.tpl“ anlegen [/*] [*] In der Datei fügst du folgendes ein:[/*][/list] {extends file="parent:frontend/index/header.tpl"} {block name="frontend\_index\_header\_javascript\_jquery"" append} <script type="text/javascript" src="%7Blink%20file='frontend/_resources/javascript/custom.js'%7D"></script>{/block} [list=5] [*] Als Nächstes legst du unterhalb von „emotion_mytemplate/frontend“ einen Ordner „_resources“ an und hierin einen Ordner namens „javascript“[/*] [*] Innerhalb vom Ordner „javascript“ legst du jetzt deine Datei „custom.js“ an[/*] [*] Als letzten Schritt leerst du den Template-Cache im Shopware Backend und deine Javascript Datei sollte geladen werden[/*][/list] Viele Grüße, Stephan Pohl :shopware:

2 „Gefällt mir“

Perfekt, jetzt funktioniert alles! Es lag an Schritt 4. Vielen lieben Dank!

Hallo, wie sieht die custom.js aus? Kann mir da jemand eine Vorlage geben, damit unser Trustbadge richtig im Shop angezeigt wird? Danköö

Kann dem nicht zustimmen dass eigenes JS im Header eingebunden werden soll (vor allem nicht wenn jQuery verwendet werden soll). Das Body Ende ist hier viel besser geeignet und wird auch so von Shopware eingesetzt (zumindest in Shopware 5), um dies so umzusetzen folgendes im eigenen Theme (frontend/index/index.tpl) eintragen:

{extends file='parent:frontend/index/index.tpl'}

{* Include own Javascript Code *}
{block name="frontend_index_header_javascript_jquery_lib" append}
    
{/block}

 

1 „Gefällt mir“

Guten Morgen ;-) , da kann man auch besser im Theme.php einen Eintrag machen, dann wird es gleich gemerged. Wo es eingefügt wird kommt auch darauf an was Vorrang in der Ausführung hat.

1 „Gefällt mir“

Ja, die Theme.php wäre dann mit Komprimierung / Zusammenführung. In diesem Fall wäre folgendes in der eigenen Theme.php einzutragen (auf SW5 bezogen, evtl. auch für SW4 das Gleiche, allerdings arbeite ich nur mit SW5):

/* @var array Defines the files which should be compiled by the javascript compressor */
protected $javascript = array(
    "src/js/meinplugin1.js",
    "src/js/meinplugin2.js",
    "src/js/meinplugin3.js"
);

 

1 „Gefällt mir“

Wer sucht der findet :slight_smile:
Da alle vorherigen Lösungsansätze noch nicht zu Erfolg führten, habe ich es in der theme.php probiert. Dann bleibt die Seite weiss.
Habe es bisher in der header.tpl und in der index.tpl probiert.
Nüscht.
Alles probiert. Theme neu kompiliert (wozu das auch jedesmal gut sein soll). Cache gelöscht. Cookies gelöscht. nix.

Gibt es noch andere Lösungen? Vielleicht eine header.php?
Kann doch nicht so schwer sein. Wundert mich das dieser Hinweis noch nicht implementiert ist. Nur weil Deutschland es noch nicht umgesetzt hat wird das muss doch kommen und man bewegt sich nicht auf dünnen Eis.

{extends file=‚parent:frontend/index/index.tpl‘}

{* Include own Javascript Code *}
{block name=„frontend_index_header_javascript_jquery“ append}
  
{/block}

Für die letzte Lösung habe ich das file auch noch ins verzeichnis /var/www/clients/client3/web5/web/themes/Frontend/meintemplate/frontend/_public/src/js kopiert.
Damit man es später ewig suchen muss :slight_smile:

Hallo,

ich habe auch Probleme ein custom.js in mein Theme welches als Basis das respnsive-Theme hat einzufügen.
Trage ich das JS in die Theme-Datei ein - geht anschließend nach der Kompilierung dann das automatische Nachladen des Listings nicht mehr und es wird die Anzeige mit Seitenenamen angezeigt. 

Neme ich dann das javascript wieder aus der Theme.php heraus funktioniert es. 

Das Script hat aber nichts mit dem Nachladen der Anzeige zu tun.

Daher denke ich, dass ich einen Fehler gemacht habe - nur welchen?

 

Die Theme.php sieht wie folgt aus:

die custom.js ist in das theme verzweichnis unter

Themename\frontend\_public\src\js

reinkopiert worden.
Sobald ich in der theme.php nun:

    protected $javascript = [
        'src/js/custom.js'
    ];	

hinzufüge funktioniert leider das automatische Nachladen des Listings nicht mehr und so ziemlich alle anderen jquery´s

 

Was mache ich hier falsch? 

Möchte dieses ältere Thema hier auch nochmal gerne aufgreifen, weil ich gerade wirklich am verzweifeln bin…
Ich muss nach einem callback in einem iframe in meinem Shop diesen iframe “sprengen” und dafür sorgen, dass der Warenkorb normal angezeigt wird und durch das aufgefüllt wird, was der Kunde gerade bestellt hat und mir durch den Callback des Drittanbieters bestätigt wurde mit seinen mit weitergegebenen Daten. So, das ist - erstmal nur zum Testen ohne Variablenübergabe - eine Zeile javasript:
 

    window.top.location = "http://www.example.de";

Habe diese in einer js-Datei hinterlegt, sie im Ordner \themes\Frontend\MeinTheme\frontend_public\src\js gespeichert, dann eine cart_header.tpl in themes\Frontend\MeinTheme\frontend\checkout angelegt:

 

{extends file='parent:frontend/checkout/cart_header.tpl'}

{* Include own Javascript Code *}
{block name="frontend_checkout_cart_header_field_labels" append}
    
{/block}

Funktioniert nur leider nicht und das ist nur eine von vielen Möglichgkeiten, die ich ausprobiert habe. Auch direkt den Javascript-Code in die cart.tpl geschrieben usw…

Wie ist es denn richtig?

Versuche es nun über einen meta refresh, den ich im eigenen checkout ordner als erweiterung der index.tpl in den dortigen header einfüge. Leider wird mir dann nur eine leere Seite angezeigt und die Ladezeiten steigen exorbitant. :frowning:
Hat vielleicht noch jemand eine Idee, wie ich dieses „iframe-Sprengen“ Problem lösen könnte?