Magento kann von Haus aus keine grafische Navigation und auch keine grafischen Headlines. Aus esthetischen Gründen ist dieses aber durchaus manchmal gewünscht. Im Folgenden wird gezeigt wie diese mit facelift aka flir (http://facelift.mawhorter.net/) realisiert werden kann.

Zu allererst braucht man neben einer laufenden Magento Installation das flir packet. Welches hier herruntergeladen werden kann.

Das Packet sollte in ein Verzeichniss entpackt werden auf das update sicher ist und auf das der Webserver Zugriff hat. Viele Magento Verzeichnisse sind per htaccess gesperrt, daher bietet es sich an Flir als Teil des Skins zu realisieren. Ich persönliche bevorzuge folgendes Verzeichniss:

/skin/frontend/whatever/default/vendor/facelift

Nach dem Flir dorthin entpackt worden ist muss dem Flir sein eigener Pfand mitgeteilt werden, dies kann man entweder direkt in der flir.js machen oder später beim initialisieren.

flir.js:

var FLIR = {

version: ‘1.2′

,options: {

/* die folgende ist die relevante Zeile */

path: ‘/skin/frontend/whatever/default/vendor/facelift/’

,classnameIgnore: false

,findEmbededFonts: false

,ignoredElements: ‘BR,HR,IMG,INPUT,SELECT’

}

Als nächstes ist dafür zu sorgen, das Magento flir.js läd. Hierzu bietet es sich an folgenden Zeile der head.phtml des Page templates hinzuzufügen ( app/design/frontend/whatever/default/template/page/html/head.phtml):

head.phtml:

<script src="<?php echo $this->getSkinUrl('vendor/facelift/flir.js') ?>" type="text/javascript"></script>

Im Anschluss muss das flir initialisiert werden, dies geschieht am besten direkt vor Ende des body tags des jeweiligen Templates (bspw. app/design/frontend/whatever/default/template/page/1column.phtml)

1column.phtml:<script type="text/javascript">

FLIR.init(new FLIRStyle( { realFontHeight: true, mode: ‘wrap’ } ));

FLIR.auto(['h1','h2','h3','li.level0 a span']);

</script>

</body>

In diesem Fall wird die Ersetzung für h1, h2, h3 und den inhalt eines a tags welches sich in einem span befindet welches wiederum von einem li tag der class level0 umschlossen ist aktiviert. Der ‘wrap’ mode sorgt für umbrüche bei Mehrzeiligen Texten. Die Bedeutung aller weiteren Parameter lässt sich hier nachschlagen: http://facelift.mawhorter.net/doc/flir-js-flirstyle-object

Dieser Code schnippsel muss natürlich auch in alle weitern benutzten Page Templates eingefügt werden (2colums…, 3colums usw).

Pitfalls

Probleme bei Umlauten:

Wird bei realFontHeight und Umlauten der obere Teil abgeschnitten, so lässt sich dies beheben indem man diese Zeichen der Liste zur Höhenberechnung hinzufügt.

config-flir.php (~ zeile 38):

define('HBOUNDS_TEXT', 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz[]{}()_ÄÜÖäöü');

Der Beitrag wurde am Donnerstag, den 25. September 2008 um 17:23 Uhr veröffentlicht und wurde unter Alltags Trash, Web Trash abgelegt. Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.