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.
Hallo Stefan,
ich versuche, diesen coolen Slider zu erstellen – allerdings ohne Erfolg. Habe alle Schritte brav befolgt, aber es taucht kein Slider auf…
Ich nutze Magento 1.4.1. und habe:
- JQuery installiert
- die Attribute angelegt
- die Attribute zugewiesen
- die Produkte eingestellt
- die Dateien hochgeladen
- den Code in die Home Page eingefügt
- den Cache gelert
Und nichts erscheint… woran kann es liegen?
Dank dir,
Florian
[Antwort]
Hallo robin2160,
deine Anleitung für den Slider ist wirklich allererste Sahne. Habe sie unter Magento 1.3.2.4 problemlos zum laufen gebracht – mit einer Änderung: Auch wenn ich nicht vorbelastet bin was den Streit “Mootoos – jQuery – Prototype” angeht so empfand ich es als “sinniger” den Slider mit einem script.acol.us-Plugin umzusetzen anstatt per mXperts-Modul oder eigenhändig noch jQuery als Framework draufzusatteln (4kb vs. 34+2kb in deinem Package). Vielleicht hast du ja Interesse das als Alternative im Artikel zu erwähnen? Die Anpassungen sind nur minimal und das Plugin ist auch schon entwickelt (wenn auch nich von mir
).
[Antwort]
mageintern - robin2160 Antwort vom August 2nd, 2010 21:31:
Hi Cajetan,
vielen Dank, freut mich.
Ich bin immer offen für alles was Ladezeiten spart bzw. verringert. Wenn dies ein freies Prototype Plugin ist werde ich es hier gerne mit aufführen und als Alternative vorschlagen.
Viele Grüße
Stefan Pröhl
robin2160 – mageintern.de
[Antwort]
Cajetan Antwort vom August 2nd, 2010 21:58:
Also angelehnt ist das ganze an code.google.com/p/prototype-carousel/ (unter MIT-License), und zwar die minified-Version.
Im Prinzip ist’s nur ein Austausch des Script-Aufrufs im Block (Syntax ist im obigen Link), das Einfügen eines Iterators (und damit verbunden iterierte DIVs für die einzelnen Slides) in die Schleife und das Ändern der DIVs damit die IDs hinhauen. Und natürlich der Aufruf per page.xml.
Grüße,
Cajetan
[Antwort]
Cajetan Antwort vom August 2nd, 2010 22:00:
Anmerkung: Mir ist noch eingefallen dass es vielleicht praktisch sein könnte die Kurzbeschreibung (habe kein extra Attribut erzeug) per substr() zu begrenzen.
Cajetan Antwort vom August 8th, 2010 22:58:
Wie sieht’s denn aus, robin2160, soll ich dir die entsprechenden Dateien mal schicken? Bzw. eine dazu passende Kurzanleitung beifügen?
Grüße,
Cajetan
Hi,
klasse Tutorial, vielen Dank!
Aber leider funktioniert es bei mir nicht so richtig.
Es werden alle Produkte geladen (576 statt 7) und auch wenn die Slider Funktion funktioniert tauchen einige Produkte unterhalb des Sldiers auf.
Ich verwende
Magento Version 1.4.x-devel-71052
und jqery v1.4.2
kann es daran liegen?
[Antwort]
mageintern - robin2160 Antwort vom Juli 2nd, 2010 14:13:
Hi Nico,
ja es liegt an der magento 1.4er bzw. den Flatkatalogen.
Das Tutorial wurde zur Zeit der 1.3…. geschrieben wo der Flatkatalog noch beta war und vorzugsweise nicht verwendet wurde.
Nun in der 1.4er ist er standardmäßig aktiviert. D.h. die Produktcollection wird aus dem Flatkatalog Produkte konstruiert.
Die in diesem Tutorial verwendete Abfrage (für das EAV Modell) funktioniert nicht mehr in der 1.4er bei aktiviertem Flatkatalog.
Da der Flatkatalog nach meinen Erfahrungen erst ab 1.000 SKUs etwas Geschwindigkeitsvorteil bringt kannst du ihn eigentlich deaktivieren.
Dann sollte die Abfrage wieder greifen.
Evtl. schreibe ich mal demnächst eine neue Abfrage für die 1.4er mit aktivierten Flatkatalogen.
Wenn Artikel unterhalb des Sliders auftauchen ist entweder die css nicht richtig eingebunden oder das Slider Javascript bzw. Qjery greifen nicht.
Versuche mal im Admin unter System -> Entwickleroptionen -> Javascript Datein verbinden = Nein.
Viele Grüße
Stefan Pröhl
[Antwort]
nico Antwort vom Juli 2nd, 2010 14:58:
Hi Stefan,
vielen Dank für die schnelle Info!
Stimmt wenn ich unter
system -> konfiguration -> Katalog -> Shop -> Flat Catalog Category verwenden = Nein
einstelle (Flat Catalog Product verwenden kann auf ja stehen bleiben) funktioniert alles einwandfrei.
Auch das zerschossene Frontend taucht dann nicht mehr auf. Das wurde evtl. dadurch verursacht, dass in einigen langen Produktbeschreibungen möglicherweise fehlerhafter html code ist und es wurden ja vorher sämtliche attribute in den slider geladen.
Beste Grüße
Nico
P.S: wenn das ganze auch mit Flat Categories laufen würde wäre natürlich super, da mir scheint das dies die bessere Methode ist, die Daten in der DB zu speichern.
[Antwort]
Hey, super tut, klappt alles wunderbar.
ich hab nur noch eine kleine frage, ich hab den slider nun etwas kleiner gemacht und wollte noch eine grafik daneben einbauen.
leider ist die grafik dann immer über dem slider, ist es möglich die auch direkt daneben einzubauen oder geht das nicht?
gruß
kai
[Antwort]
Hi, super tut.
leider habe ich ein kleines problem, bei mir werden irgendwie alle artiekel angezeigt.
dabei habe ich im moment nur bei einem artikel im slider anzeigen auf ja gestellt, ansonsten stehen alle auf nein.
wo könnte mein fehler liegen?
meine seite: www/.2schuhe/.de
magento 1.4.x
gruß
kai
[Antwort]
Hi,
bekomme den Slider leider nicht zum laufen. Es wird folgender Fehler geworfen:
Ungültiger Blocktyp: Mage_
'catalog'Was mache ich falsch? Liegt es an der genutzten Magento-Version --> 1.4?
Danke
[Antwort]
Super Tutorial!!!
Ich habe nur das Problem, dass ich auch Produkte angezeigt bekommen will, die die Sichtbarkeit “Nur Suchen” haben. (z.B. bei gruppierten Artikeln)
Ist das möglich?
Grüße
Philipp
[Antwort]
Hallo Stephan,
auch von meiner Seite Komplimente für die gute Anleitung.
Ich hab alls fleissig so gemacht, wie beschrieben, bekomme aber leider jetzt auf meiner Startseite nur moch diesen Fehler:
Warning: include(/html/magento/app/design/frontend/default/default/template/catalog/product/mageinternslider.phtml) [function.include]: failed to open stream: No such file or directory in /html/magento/app/code/core/Mage/Core/Block/Template.php on line 144
….
Das geht dan jetzt kilometerweise weiter – will ich dir jetzt nicht hier reinspammen.
Hast Du oder jamand sonst eine Idee was ich falsche gemacht nabe?
[Antwort]
mageintern - robin2160 Antwort vom Mai 2nd, 2010 21:29:
Hi Robert,
die Fehlermeldung sagt das die mageinternslider.phtml sich bei dir nicht im richtigen Verzeichnis befindet.
Kopiere die Datei einfach in das richtige Verzeichnis app/design/frontend/default/default/template/catalog/product
und dann sollte es auch bei dir funkionieren.
VG stefan
[Antwort]
Hallo,
ich habe auch das Problem, dass die URL falsch zusammengebaut wird. Die Kategorie wird einfach “verschluckt” und es kommt eine falsche Adresse raus, was dann auf die 404-Fehlerseite führt…
Weiß da jemand eine Lösung?
[Antwort]
Arnie Antwort vom Juli 29th, 2010 14:10:
Hatte dasselbe Problem und mir den Sourcecode angesehen. Dabei habe ich festgestellt, das er sich die erste Kategorie holt, welcher das Produkt zugeteilt ist. Sollte bei dem Produkt also auch der Haken bei der Hauptkategorie (standardmäßig “default”) drin sein, nimmt er sich den Link davon. Darfst also quasi nur Unterkategorien Produkte zuteilen, dann klappt alles wunderbar.
[Antwort]
Fehler: jQuery(“#mi-slideshow”).mageintern is not a function
HI, kann mir jemand zu diesem Thema weiterhelfen?
Ich kann leider, da ich neu in diesem Thema bin nichts mit diser meldung anfangen.
Wäre super
[Antwort]
Hallo zusammen!
Zu erst einmal vielen Dank für die tolle Anleitung. Funktioniert hervorragend.Zwei Fragen habe ich nur. Lässt sich der Slider eventuell so anlegen, dass ich verschiedenste Versionen habe. Z.B. sollten auf der Startseite die Produkte 1,2,3 und 4 in einer Box 800 x 400 angezeigt werden. Auf einer Unterseite (z.b. Shop) sollen die Produkte 1, 2 und 5, 6 in einer Box mit 400x 400 angezeigt werden.
Lässt sich so etwas realisieren?
Vielen Dank im Voraus!
[Antwort]
Hallo,
nach der Installation von Slider, besteht bei mir ein kleines Problem und zwar klicke ich auf ein Produkt im Slider leitet der das ganze falsch weiter.
bsp. meinedomain.de/kategorie1/kategorie2/produkt.html
der leitet aber nur auf meinedomain.de/produkt.html weiter, die Kategorien die fehlen.
Kennt jemand die Lösung?
Gruß
[Antwort]
Kann mir niemand helfen wie ich für jeden Storview einen eigenen Slider machen kann?
[Antwort]
mageintern - robin2160 Antwort vom Februar 25th, 2010 19:28:
Kleiner Tipp:
Etwas nach unten scrollen und meine Antwort zu deiner ersten Farge lesen.
VG Stefan
[Antwort]
Franz Antwort vom März 1st, 2010 11:32:
Jo Danke, die Antwort habe ich übersehen :=)
Eine Frage habe ich noch und zwar bekomme ich im Internet Explorer diese Meldung:
Details zum Fehler auf der Webseite
Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Creative AutoUpdate v1.40.01)
Zeitstempel: Mon, 1 Mar 2010 10:31:50 UTC
Meldung: ‘jQuery’ ist undefiniert
Zeile: 1
Zeichen: 1
Code: 0
URI: meine Domain.net/skin/frontend/default/default/js/mageintern-slider.js
[Antwort]
Hallo zusammen,
ich habe den Slider nach diesem Tutorial eingebaut. Das Layout stimmt auf soweit nur leider werden die Artikel nur untereinander angezeigt und nicht als Slider. Das würde doch heißen, dass das Javascript nicht funktioniert oder?
bitte um Hilfe !
Grüße vom Problemfall
[Antwort]
Jenny Antwort vom Februar 27th, 2010 16:31:
Cache leeren
danach gings bei mir auch
ich hoffe das hilft dir weiter!
[Antwort]
Super Anleitung.
Eine Frage habe ich zu einem Multistore.
Ich möchte nur das die Produkte des jeweiligen Storeviews angezeigt werden.
Wie kann ich das Einstellen?
[Antwort]
mageintern - robin2160 Antwort vom Februar 23rd, 2010 17:15:
Hi Franz,
das geht ganz einfach:
Ändere in der Attributverwaltung das Attribut mageinternslider von Geltungsbereich global auf storeView.
Nun läßt du in der Produktverwaltung bei Standardwerte den Schalter auf Nein und stellst ihn nur in der gewünschten StoreView auf Ja.
VG Stefan
[Antwort]
Also der Slider funzt schonmal wunderbar.
Hat evtl. wer ne Ahnung wie ich es hinbekomme das auch so nen verstaubter Explorer wie der IE6 das ganze vernünftig anzeigt! Der scheint nämlich mit CSS so garnicht richtig was anfangen zu können. Der zeigt die ganzen Bilder vom Slider nämlich schön in einer Reihe Hintereinander an, anstatt jedes einzeln.
Gruß
Markus
[Antwort]
mageintern - robin2160 Antwort vom Februar 22nd, 2010 13:15:
Hi Markus,
ich habe hierzu einen kleinen Nachtrag geschrieben.
VG Stefan
[Antwort]
Markus Antwort vom Februar 22nd, 2010 21:52:
Hi Stefan,
vielen Dank dafür! Jetzt zerreißt es mir nicht mehr das ganze Fenster.
Und nen paar Leute die ihren Rechner nicht immer auf dem neusten Stand haben werden denk ich auch froh sein.
So dann werde ich mal weiter basteln.
Vielen Dank für eure Mühe die ihr euch hier macht.
Gruß
Markus
[Antwort]
Hallo zusammen,
sehr gutes Tutorial. Ich hab leider das selbe Problem wie Jenny. Die Homepage lautet vinomet.de .
Viele Grüße
Sebastian
[Antwort]
mageintern - robin2160 Antwort vom Februar 17th, 2010 22:53:
Hi Sebastian,
wie ich sehe funktioniert der Slider jetzt.
VG Stefan
[Antwort]
Sehr schön, klasse Tutorial
hab aber leider immernoch ein kleines Problem.. bei mir werden keine Nummern angezeigt und die Artikel stehen direkt untereinander auf der Startseite, anstatt, dass sie nacheinander eingeblendet werden..
Kann mir das jemand erklären, was ich falsch machen könnte?
Liebe Grüße
[Antwort]
mageintern - robin2160 Antwort vom Januar 31st, 2010 15:40:
Hi Jenny,
Es sieht so aus als wenn die jquery Scripte nicht richtig eingebunden sind.
Da brauche ich mal einen Link um mir das ansehen zu können.
VG Stefan
[Antwort]
Wow, sieht super aus – clean, simpel, würde super zu meinem Shop passen.
Ist das ein selbstgeschriebener Slider? Google leitet nur auf diesen Artikel zurück. Bin gespannt auf das Tutorial.
P.S.: Der Spamschutz für die Kommentare ist genau nach meinem Geschmack – ist das auch selbstgeschrieben? Das wär doch mal eine tolle Ergänzung für die Contacts Page – wesentlich schöner als die Re-Captcha Erweiterung.
[Antwort]
Ein kleiner Hinweis in eigener Sache:
Kommerentare die einen externen Link beinhalten werden grundsätzlich geblockt.
Ich bitte um Verständnis, aber sonst ist dem Spam hier kein Einhalt zu gebieten.
Also bitte keine externen Link, dann wird auch automatisch der Kommentar freigeschaltet.
VG Stefan
[Antwort]