Magento: Externe Javascripts und CSS-Dateien im Footer einfügen
Diverse Dienste wie zum Beispiel Google Analytics oder Typekit stellen einen Javascript-Link zur Verfügung welcher auf der eigenen Webseite eingebaut werden muss. Dadurch werden Funktionalitäten und zusätzliche Inhalte zur Verfügung gestellt, wie zum Beispiel ein Tracking-Skript oder eine Font-Datei.
Externe Skripte im Header oder Footer?
Um ein solches Skript in Magento einzubauen steht unter «System» → «Design» → «Diverse Skripte & Skriptverknüpfungen» ein Feld zur Verfügung, in welches beliebige Skripte und Skript-Links eingefügt werden können. Auch externe CSS-Dateien lassen sich so einfügen.
Nicht ideal: Externe Javascripts welche hier hinterlegt werden werden im Kopfbereich der Seite geladen.
Diese Vorgehensweise hat jedoch den Nachteil dass die Skripts und Links bereits im Kopf-Bereich der Seite geladen werden. Die «Best Practice», also die von Spezialiste empfohlene Vorgehensweise, besagt aber das Skripte erst am Ende der Seite, also im Fussbereich, geladen werden sollten. Ansonsten kann der Download eines externen Javascript-Files den Download von «wichtigeren» Dateien behindern, wie zum Beispiel Bilder oder Text-Inhalte (mehr Informationen dazu finden Sie im Yahoo! Developer Network).
Lösung: Externe Skripte im Footer einbauen
Um dieser «Best Practice» also Folge zu leisten und eine möglichst gute Performance im Magento-Onlineshop zu erreichen kann das nachfolgend beschriebene Vorgehen verwendet werden.
Falls noch nicht vorhanden muss im eigenen Theme eine Datei namens local.xml erstellt werden. Diese Datei muss am richtigen Ort abgelegt werden, und der Pfad ist abhängig vom verwendeten Design-Package und Template. Falls kein vorgefertigtes Design verwendet wird, muss die Datei wie folgt abgelegt werden: /app/design/frontend/default/default/layout/local.xml. Falls aber ein vorgefertigtes oder selbst angefertiges Design verwendet wird so muss die Datei hier abgelegt werden: /app/design/frontend/PAKETNAME/THEMENAME/layout/local.xml. Beachten Sie dabei die gross geschriebenen Inhalte, welche natürlich gemäss Ihrem Shop angepasst werden müssen.
Fügen Sie in diese Datei folgende Inhalte ein (falls die Datei local.xml in Ihrem Shop bereits existiert können die ersten beiden und die letzte Zeile weg gelassen werden):
console.log('nur ein beispiel!');]]>
Der Text-Block welcher das Javascript beinhaltet (also Zeile 8) muss natürlich durch Ihrem eigenen Inhalt ersetzt werden, also z.B. der Link zu Ihrem externen Typekit-Skript.
Öffnen oder erstellen Sie nun die Datei /app/design/frontend/default/default/template/page/html/footer.phtml. Auch dieser Pfad variiert natürlich wenn Sie nicht das Standard (default/default)-Design verwenden. In dieser Datei muss irgendwo, aber am besten ganz am Ende, folgender Inhalt eingefügt werden:
<?php echo $this->getChildHtml('custom_js'); ?>
Wenn Sie diese beiden Änderungen vorgenommen haben und die Caches geleert haben so sollte in Ihrem Shop fortan auf jeder Seite Ihr eigenes Javascript ganz am Ende der Seite geladen werden.
Eine kurze technische Erklärung: In der ersten Datei, der local.xml, wird ein neuer Block samt Inhalt definiert. Dieser Inhalt kann beliebig abgeändert werden. In der zweiten Datei wird der eben definierte Block ins Template des Footer geladen, welches bei jedem Seitenaufruf gerendert wird. So können Sie sicherstellen dass der neu definierte Block auf jeder Seite erscheint.
PS: Brauchen Sie Hilfe beim Unterhalt Ihres Magento-Onlineshop? Gerne stehen wir Ihnen zur Verfügung! Nehmen Sie dazu einfach durch das unten stehende Formular mit uns Kontakt auf. Bis bald!