Magento Layout Tutorials

Viel Platz für die Produktpräsentation bietet der Big Produkt-Slider. Schnell und einfach kann der magento slider in eine Startseite oder beliebige Kategorieseite integriert werden. Die Produktzuweisung erfolgt mit einem Ja/Nein Schalter in der magento Produktverwaltung. Es können beliebig viele Produkte in den Slider eingefügt werden. Einige Besonderheiten sind
1. Stop bei mousehover, weiter bei mouseout
2. Einstellbar ob er automatisch und zeitabhängig scrollen soll oder nur bei Mausklick auf eine Slidenummer.
3. Bei Verwendung der “langen” magento Urls (mit Kategoriepfad) werden diese auch im Slider verwendet. D.h. die Breadcrumb-Navigation bleibt erhalten.
4. Eingabe eines individuellen Produkttextes möglich. Ist kein individueller Produkttext eingegeben erfolgt die Ausgabe der Standard Kurzbeschreibung als Produkttext.
5. Via css individuell auf das eigene Design einstellbar

Eine Demo ist hier zu sehen.
Hier nun das Tutorial für den magento Product-Slider:

Zuerst müssen zwei Attribute angelegt werden.

Admin -> Katalog -> Attribute -> Attribute verwalten

Rechts oben auf Neues Attribut klicken.

Attributcode: mageinternslider
Geltungsbereich: Global (oder was immer Sie möchten)
Katalog Eingabetyp für Shopbesitzer: Ja/Nein

Alle weiteren Felder so lassen wie sie sind.

Links oben auf Bezeichnungen/Optionen verwalten klicken und in das Feld Admin
In Slider anzeigen eingeben.

Rechts oben auf Attribut speichern klicken.

Im Produktslider kann wahlweise die Kurzbeschreibung des Produktes oder, wenn vorhanden, ein individueller Text für das Produkt ausgegeben werden.
Für die individuellen Produkttexte wird noch ein weiteres Attribut benötigt. Möchten Sie grundsätzlich nur die Standard Kurzbeschreibung im Slider anzeigen lassen benötigen Sie dieses zusätzliche Attribute nicht.

Attribut für individuelle Produkttexte im Slider anlegen (nur wenn gewünscht).

Wieder rechts oben auf Neues Attribut klicken.

Attributcode: mislidershortdesc
Geltungsbereich: StoreView
Katalog Eingabetyp für Shopbesitzer: Textbereich

Alle weiteren Felder so lassen wie sie sind.
Links oben auf Bezeichnungen/Optionen verwalten klicken und in das Feld Admin
Slider Produktbeschreibung eingeben.

Rechts oben auf Attribute speichern klicken.

Damit die Attribute auch verwendet werden können müssen sie noch den entsprechenden Attributsets zugeordnet werden.

Admin -> Katalog -> Attribute -> Attributsets verwalten

Beispielhaft verwende ich hier das Default Attributeset.

Rechts stehen die noch nicht zugewiesenen Attribute. Unter anderem auch mageinternslider und mislidershortdesc.

Diese werden nun beispielhaft In die General Gruppe unterhalb von meta_title gezogen.

Im rechten Feld das Attribut mageinternslider anklicken und mit gedrückter Maustaste in das mittle Fenster unterhalb von meta_title ziehen.
Maustaste loslassen und das Attribute ist dem Attributeset zugewiesen. Wenn es nicht funktioniert, einfach nochmal versuchen.
Das gleiche erfolgt mit dem Atrribute mislidershortdesc. Dieses wird unterhalb von mageinternslider gezogen.

Nun oben rechts auf Attributset speichern klicken. Je nach Anzahl der Produkte kann der SpeicherVorgang auch etwas länger dauern.

Sollen die beiden Atrribute auch in weiteren Attributesets zur Verfügung stehen muss der Vorgang entsprechend wiederholt werden.

Admin -> Katalog -> Produkte verwalten

Bei Produkten mit dem Default-Attributset stehen nun zwei neue Felder.

In Slider und Slider Produktbeschreibung.

Der Ja/Nein Schalter bestimmt ob das Produkt im Slider erscheinen soll oder nicht. Standard vorbesetzt ist Nein.
In das Textfeld Slider Produktbeschreibung kann eine abweichende Produktbeschreibung eingefügt werden. Wenn in diesem Feld ein Text steht wird dieser angezeigt. Steht kein Text in diesem Feld wird die normale Produkt Kurzbeschreibung angezeigt.

Nun müssen noch 4 Dateien in die richtigen Verzeichnisse kopiert werden.

1. Mageinternslider.php
2. mageinternslider.phtml
3. mageintern-slider.js
4. mageinternslider.css

1. Die Mageinternslider.php
wird in das Verzeichnis app/code/core/Mage/Catalog/Block/Product kopiert.
Die Datei ist zuständig für die Auswahl der Produkte die angezeigt werden sollen, Schalter = JA.

Dieses erfolgt mit der Abfrage
$products->addAttributeToFilter(‘mageinternslider’, 1)

So wird gefiltert:
Wenn das attribute mageinternslider = 1 ist ( Ja = 1) dann berücksichtigen.

2. Die mageinternslider.phtml
kommt in das Verzeichnis app/design/frontend/default/default/template/catalog/product

Sie ist zuständig für den sichtbaren Teil des sliders. Hier wird die Ausgabe festgelegt.

Der javascript Block beinhaltet auch die Optionen für den Slider.
autoplay: true (Slider scroll automatisch nach einer festgelegten Zeit weiter)
autoplay: false (Slider bleibt so lange stehen bis auf eine Nummer geklickt wird)

nextslidetime: 5000 (Zeit bis zum nächsten scrollen, 5000 = 5 Sekunden. Die Zahl kann nach Wunsch geändert werden.

showSlideNoDiv: true (Zeigt unten die Anzahl der Slider an. 1, 2, 3, 4 ….. Die Nummer können auch direkt angeklickt werden.
showSlideNoDiv: false (Keine Nummernanzeige)

showPause: true (Zeigt das Wort pause wenn man mit der Maus über den Slider fährt und der Slider stoppt)
showPause: false (keine Pause bei Mauskontakt)

Die mageinternslider.phtml beinhaltet noch eine kleine Besonderheit. Hier werden auch die korrekten Urls gebildet.
Wenn der Shop “lange” Produktlinks verwendet (also mit Kategoriepfad) werden diese auch im Slider verwendet.
D.h. die Breadcrumb Navigation bleibt erhalten.

3. Die mageinter-slider.js
wird in das Verzeichnis skin/frontend/default/default/js kopiert.
Sie ist für die Steuerung des Sliders zuständig und sollte nicht verändert werden.

4. Die mageinternslider.css
bitte in das Verzeichnis skin/frontend/default/default/css kopieren.
Die css Datei können Sie Ihren Wünschen bzw. Design anpassen.

Der Aufruf der js und css Datein müssen in die page.xml eingefügt werden.

In app/design/frontend/default/IhrTheme/layout befindet sich die page.xml.

Ist noch keine jQuery Basis installiert wird diese zuerst eingebunden.

Unterhalb von
<block type=”page/html_head” name=”head” as=”head”> diese Zeile einfügen

<action method="addJs"><script>jquery/jquery-1.3.2.js</script></action>

und unterhalb von
<action method=”addJs”><script>mage/cookies.js</script></action>
diese Zeile einfügen

<action method="addItem"><type>skin_js</type><name>js/mageintern-slider.js</name></action>

und unterhalb von
<action method=”addCss”><stylesheet>css/boxes.css</stylesheet></action>
diese Zeile einfügen

<action method="addCss"><stylesheet>css/mageinternslider.css</stylesheet></action>

Nun muss noch zusätzlich die Datei jquery-1.3.2.js in das Verzeichnis js/jquery kopiert werden.
Das Verzeichnis jquery ggf. neu anlegen. Die  jquery-1.3.2.js befindet sich auch in zip-Datei.

Hinweis:
Wird das jQuery Base Tool von Mxperts verwendet erfolgt die Einbindung der js und css Datein direkt dort im Admin Bereich und die jquery Basis (jquery-1.3.2.js) wird nicht benötigt da ja bereits vorhanden.

Der letzte Schritt:
Die Ausgabe in die Home Page einbinden.

Admin -> CMS -> Seiten verwalten

die Home Page auswählen und diese Zeile

{{block type='catalog/product_mageinternslider' template='catalog/product/mageinternslider.phtml'}}

an die Stelle kopieren an der die Ausgabe erfolgen soll. In der Regel ist dies die erste Zeile.

Seite Speichern.

Das war es auch schon.
Nun noch die Caches leeren und die entsprechenden Produkte auswählen die angezeigt werden sollen.

Alle Dateien hier als Download in einer zip-Datei.

Viel Spass mit diesem Produkt Slider.

Stefan Pröhl – robin2160
mageintern.de

Ein Tipp wenn der Slider nicht funktionieren sollte:
Wenn der Slider nicht funktioniert könnte es daran liegen das die magento Dateizusammenfassung für javascripte aktiviert ist. Die kann man auch ausschalten.
Admin – System – Konfiguration
dann im linken Menu ganz unten auf Entwickleroptionen.
Nun im mittleren Teil bei  JavaScript Einstellungen die Option  JavaScript Dateien verbinden = Nein
Konfiguration speichern und die caches leeren.

Nachtrag für den IE6:
Damit der Big Produktslider auch im IE6 funktioniert muss die css Datei etwas angepaßt werden.
In der price-box darf keine % Breitenangabe angegeben werden sondern als Pixel.
Also width und margin-left in Pixel angeben.

.mi-slidebox .price-box {
	float: left;
	width: 300px; /*no % for IE6*/
	margin-left: 50px; /*no % for IE6*/
	padding-top: 10px;
	padding-bottom: 0px;
	}

Und im mi-slidesContainer muss eine Breitenangabe hinzugefügt werden.
width: 100%;

#mi-slideshow #mi-slidesContainer {
	width:100%; /*IE6*/
	margin:0px;
	overflow:auto;
	position:relative;
	}

Nun funktioniert der Big Produktslider auch im IE6.