von

Javascript bei Shopware nur auf bestimmten Seiten einbinden

Wie erweitere ich Shopwaretemplates um eigenen Javascriptcode?

Wie so oft ist dies bei Shopware recht simpel, wenn man weiß wo man suchen muss. In Shopware 5.2 findet sich der Block in dem Javascriptcodes eingebunden werden in der themes/frontend/bare/frontend/index/index.tpl und sieht wie folgt aus:

{* Include jQuery and all other javascript files at the bottom of the page *}
{block name="frontend_index_header_javascript_jquery_lib"}
    {compileJavascript timestamp={themeTimestamp} output="javascriptFiles"}
    {foreach $javascriptFiles as $file}
        <script src="{$file}"></script>
    {/foreach}
{/block}

 

Die Datei oder der Block sollten nicht verändert werden, da mit einem Shopwareupdate alles hinfällig wäre. Statt dessen hängen wir die eigenen JS-Files einfach via Append an jeder gewünschten Stelle innerhalb eigener Templates an. Das bietet den Vorteil, dass man bestimmte JS-Files auch nur an gewünschten Stellen laden lassen muss. Zum Beispiel einen individuellen Effekt. Der Appendblock würde wie folgt aussehen:

{block name='frontend_index_header_javascript_jquery_lib' append}
    <script type="text/javascript" src="{link file='frontend/_public/src/js/custom_detail.js'}"></script>
{/block}

Ich bin ein diplomierter Wirtschaftsinformatiker und meine Tätigkeiten im Onlinemarketing begannen 2008 mit dem Management von Webprojekten bei der Schach&Matt GmbH. Nachdem ich Feuer für alle Facetten der Branche gefangen hatte machte ich mich 2009 mit r-evolve selbstständig und arbeite in Dresden.