To-Top Link: Teil 4 - Umsetzung in Magento

In den letzten drei Teilen haben wir schon sehr viel Vorarbeit geleistet, sodass wir unsere Vorlage nur noch in Magento integrieren müssen.
Folgendes muss getan werden:
- jQuery in Magento integrieren falls noch nicht vorhanden
- Unsere CSS- und Javascript-Dateien einbinden
- Den To-Top Link in den Footer integrieren
- Lokalisierung für mehrere Sprachen integrieren

Bei der Integration von jQuery muss man jQuery im noConflict - Modus ausführen, da andere Scripte aus Magento auch die $ Variable verwenden. So kommt es zu keinen Konflikten zwischen den verschiedenen Ajax-Frameworks. Allerdings müssen wir bei der Codierung von jQuery auf die Variable $ verzichten. Das habe ich natürlich in Teil 1 bis Zeil 3 schon bedacht und anstatt $ die Variable jQuery verwendet.
Mit dieser Information können wir nun mit der Umsetzung beginnen.

1. Kopieren der Dateien auf den Webserver
Unsere erstellten Dateien aus den vorangegangen Artikeln müssen nun auf den Webserver kopiert werden.

js/jquery-1.3.2.min.js nach skin/frontend/default/[Ihr Theme]/js (falls nicht installiert)
js/jquery.scroll_to_top.js to skin/frontend/default/[Ihr Theme]/js
css/scroll_to_top.css to skin/frontend/default/[Ihr Theme]/css
images/to-top-bg.png to skin/frontend/default/[Ihr Theme]/images/to-top-bg.png
images/to-top-button.png to skin/frontend/default/[Ihr Theme]/images/to-top-button.png

2. Externe Dateien einbinden
Öffnen Sie die Datei app/design/frontend/default/[Ihr Theme]/layout/page.xml und suchen Sie die Zeile

                   <action method="addJs"><script>prototype/prototype.js</script></action>.

Kopieren Sie vor diese Zeile (ganz wichtig - vor die Zeile!) folgenden Inhalt

<action method="addItem"><type>skin_js</type><name>js/jquery-1.3.2.js</name></action>

Und vor:

</block>
<block type="page/html_header" name="header" as="header">

folgenden Inhalt einfügen:

<action method="addItem"><type>skin_js</type><name>js/jquery.easing.1.3.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/jquery.easing.compatibility.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/jquery.scroll_to_top.js</name></action>
<action method="addCss"><stylesheet>css/scroll_to_top.css</stylesheet></action>

3. Footer anpassen
Öffnen Sie die Datei app/design/frontend/default/[Ihr Theme]/template/page/html/footer.phtml und fügen Sie am Ende folgende Zeile ein:

        <a href="#" id="toTop"><?php echo '<IMG src="'.$this->getSkinUrl('images/to-top-button.png').'">'.$this->__('Scroll to Top') ?></a>

4. Anpassen der Lokalisierung
Um den Text nun ins Deutsche zu übersetzen öffnen Sie die Datei app/design/frontend/default/[Ihr Theme]/locale/de_DE/translate.csv und fügen Sie die Zeile “Scroll to Top”,”zum Anfang” hinzu.

Nun müssen Sie im Backend den Cache löschen oder den Inhalt des Verzeichnisses var/cache/. Ich hoffe das Ergebnis sieht auch bei Ihnen so aus wie in unserem Demoshop http://shop.mxperts.de.

Die Files zur Umsetzung in Magento finden Sie hier zum DOWNLOAD.

Ich hoffe Sie hatten Spaß und Freude und Sie haben etwas gelernt beim erstellen Ihres To-Top Links. Für Feedback und Verbesserungen habe ich immer ein offenes Ohr.
Johannes Teitge

3 Kommentare to “To-Top Link: Teil 4 - Umsetzung in Magento”

1. To-Top Link: Einführung | Magento Experts sagt:

   4. Mai 2009 um 12:22

   [...] Umsetzung in Magento [...]

   Zum Antworten anmelden
2. ds_1984 sagt:

   1. Juni 2009 um 19:30

   Hallo Johannes, vielen Dank für das tolle Tutorial !!!

   2 Sachen sind mir noch aufgefallen:

   1. Wenn ich die letzten XML-Verknüpfungen an der Stelle einfüge wie du sie beschreibst, dann erhalte ich außer einen ERROR garnichts. Diese actions müssen immer innerhalb eines Blocks platziert werden, daher habe ich diese 4 Zeilen innerhalb von “” positioniert und zwar unterhalb von “
   css/print.css media=”print”“. Das klappt hervorragend und nun habe ich auch diesen Top-Link.

   2. Kann es sein das du für das Tutorial ein Core Theme verwendet hast? Ich frage nur da es auf deiner Demo Shopseite nicht mehr erscheint. Nicht das du dein Theme überschrieben hast.

   In der Hitze des Gefechts…

   Aber dennoch vielen Dank für den Exkurs aus Grafikbearbeitung, HTML, JavaScript, PHP, CSS & XML !

   Hat Spaß gemacht und das Ergebnis kann sich wirklich sehen lassen.

   LG - Daniel

   Zum Antworten anmelden
3. Johannes Teitge sagt:

   2. Juni 2009 um 07:29

   Danke für den Hinweis, ich hatte die footer.phtml beim experimentieren überschrieben

   Zum Antworten anmelden