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.
Moin,
prima slider, ich hätte den gerne in meiner Startseite, allerdings habe ich auch das Problem der Listendarstellung ohne Slider. Habe die Vermutung das liegt an der page.xml und den Verlinkungen, aber alle Variationen haben mir nicht geholfen.
Arbeite mit Magento 1.6 habe jquery in der Version 1.6.4 verwendet und dementsprechend eingebunden. Leider alles ohne Erfolg. Wo steckt der Denkfehler?
Vielen Dank,
Jan
[Antwort]
Christian Antwort vom Dezember 23rd, 2011 11:53:
Hallo Jan,
hast du mittlerweile eine Lösung für Magento 1.6.1 gefunden. Ich habe das gleiche Problem, das die Artikel einfach nur untereinander stehen.
Viele Grüße und frohe Weihnachten,
Christian
[Antwort]
Eine Frage noch: Wie kann man die Reihenfolge der Produkte während des Ablaufs festlegen. Also Produkt x immer als 1. y als 2. usw.?
[Antwort]
Hallo,
zum Thema Bildgröße: Nicht vergessen, den resize-Wert zu verändern. Denn ohne das bring der Wechsel von small_image auf image nix.
Ein Problem das ich habe:
Ich würde gern die Preisbox komplett weg haben. So das der Kunde den Preis erst auf der Produktseite sieht. Geht das? Habe schon versucht das Feld auszukommentieren. Da hängt sich aber alles auf…
Hilfe wäre super!
[Antwort]
mageintern - robin2160 Antwort vom September 20th, 2011 10:21:
Damit der Preis nicht angezeigt werden soll einfach die Ausgabe in der mageinternslider.phtml entfernen:
Achtung: Das 2te schließende div in der Zeile jedoch nicht entfernen.
VG Stefan Pröhl
[Antwort]
ConceptArt Antwort vom September 20th, 2011 15:11:
Hab ich gemacht. Funzt Super!
[Antwort]
Hallo Zusammen,
erstmal vielen Dank für das wirklich tolle TUT.
Eine bescheidene Frage, kann es sein, dass der Slider irgendwie unter 1.5 nicht läuft?
Ich bekomm es einfach nicht zu laufen – alle externen Dateien sind richtig eingebunden, Produkte sind ausgewählt und ich sehe einfach nix.
Wo kann ich noch schauen?
Gruß
Christian
[Antwort]
Frank Antwort vom Mai 16th, 2011 21:49:
Funktioniert einwandfrei mit Magento 1.5
[Antwort]
Hallo, in wie weit kann ich neben den Nummern auch Pfeile zum weiter skippen einbauen. Bzw. wie funktioniert der Funktionaufruf per onclick?
Besten Dank, Maik!
[Antwort]
Ich steh leider immer noch vor dem Problem, das alle Produkte untereinander angezeigt werden
[Antwort]
Hallo,
Erstmal respekt für das Tut, es funktioniert ohne probleme. Ich möchte jedoch nun nicht ein kleines Bild (small_image) sondern das große Bild anzeigen lassen, wenn ich aber aus “small_image” -> “image” mache gehts nicht, dann zeigt er mir garnichts mehr an,
Bin absoluter Neuling und bekomme es nicht hin
Wäre super wenn ihr mir helfen könntent…
Gruß Kai,
Danke
[Antwort]
mageintern - robin2160 Antwort vom Januar 30th, 2011 23:17:
Hallo Kai,
einfach in der img scr Ausgabe ‘small_image’ gegen ‘image’ austauschen sollte funktionieren. Ggf. mal den Bildercache im Admin leeren.
VG Stefan Pröhl
robin2160 – mageintern.de
[Antwort]
Kai P. Antwort vom Januar 31st, 2011 17:41:
Hallo Stefan,
Er lädt dann nur den Code bis zum dem Punk wo er das Bild aurufen will, alles was dadrunter passiert verschwindet…
Danke für deine Antwort jedoch geht das nicht
<img src="
So siehts dann im Quelltext aus! Was ist da zutun?
Gruß Kai
[Antwort]
Halli Hallo,
gibt es die Möglichkeit bei der Vorschau [1] [2] [3] etc. statt den Zahlen den Produktnamen oder einen Individuellen Text anzeigen zu lassen ?
Danke und Gruß
Der Ben
[Antwort]
Kai P. Antwort vom Januar 30th, 2011 20:18:
Antwort
[Antwort]
mageintern - robin2160 Antwort vom Januar 30th, 2011 23:20:
Leider nicht so einfach, da die Ziffernboxen via javascript generiert werden.
Hier müßte man mit der Ausgabe neu ansetzen, dies würde aber den Rahmen eines kostenfreien Tutorials sprengen.
VG Stefan Pröhl
robin2160 – mageintern.de
[Antwort]
Wow – endlich habe ich den perfekten Slider gefunden!! Hat direkt auf Anhieb geklappt – vielen, vielen Dank!!
Eine Frage bzw Anregung hätte ich noch: Der Slider soll anhand der besuchten Kategorie auswählen, welche Produkte angezeigt werden. Über die entsprechende Code-Zeile bin ich auch schon gestolpert:
$products->addAttributeToFilter(‘mageinternslider’, 1)
in Mageinternslider.php
Allerdings habe ich keine Ahnung, wie ich das umsetzen kann. Das Attribut mageinternslider steht schon auf “Einzeiliges Textfeld” und gibt die ID der Kategorie an – im Grunde muss ich dann doch nur noch die 1 ändern und automatisch die aktuelle Kategorie-ID abfragen, richtig?
$products->addAttributeToFilter(‘mageinternslider’, getID())
Und genau dieses getID() kann ich nirgendwo finden – hat jemand Erfahrung damit?
Danke,
B
[Antwort]
Batman Antwort vom Januar 22nd, 2011 06:18:
Problem gelöst! Einfach im Mageinternslider.php die ID nutzen. Das Attribut gibt nun nicht mehr Ja/Nein an, dort muss stattdessen die ID gespeichert werden.
So lässt sich der Slider in allen Kategorien einsetzen – und man kann bestimmen, welche Produkte in welcher Kategorie (ID) ausgegeben werden.
Viel Spass damit!
class Mage_Catalog_Block_Product_Mageinternslider extends Mage_Catalog_Block_Product_Abstract
{
public function __construct()
{
$category = Mage::getModel(‘catalog/layer’)->getCurrentCategory()->getID();
parent::__construct();
$storeId = Mage::app()->getStore()->getId();
$products = Mage::getResourceModel(‘catalog/product_collection’);
$products->addAttributeToFilter(‘mageinternslider’, $category)
->addAttributeToSelect(‘*’)
->setStoreId($storeId)
->addStoreFilter($storeId)
->setOrder(‘name’, ‘desc’);
Mage::getSingleton(‘catalog/product_status’)->addVisibleFilterToCollection($products);
Mage::getSingleton(‘catalog/product_visibility’)->addVisibleInCatalogFilterToCollection($products);
$this->setProductCollection($products);
}
}
[Antwort]
Bianca Antwort vom Februar 9th, 2011 18:52:
Ich frage mich aber nun, wie ich den Slider in einer Kategorie ausgeben kann?..
Denn egal was ich versuche ich sehe den Slider nicht sondern nur den Code.
[Antwort]
Danke für diese Anleitung, funktioniert auch mit JQuery 1.4 und Magentio 1.4.2 einwandfrei.
[Antwort]
Okay, für alle mit dem selben Problem, heir die Lösung:
1. Problem mit der Breite:
Die “Mageintern-Slider.js” muss angepasst werden, nicht die andere
2. Das URL-Problem
Tritt nur bei denen auf, die im Backend “.html” Url-Endung eingestellt haben.
Man sieht er versucht auf die URL ohne .html zu zugreifen.
Einfachste Lösung, in der Datei mageinternslider.phtml gehen und in der Zeile: 48
<a href="”> (das .html) anhängen
Viel Erfolg weiterhin und nochmal danke für das Tut und Widget!
mfg,
teekayo2
[Antwort]
Hi,
das Widget ist top, soviel vorweg!
Ich habe nur ein Problem bei der CSS Anpassung…
Ich will die Slidebox auf 730 statt 640 haben, eigentlich kein Problem aber er scheint hier irgenwie die CSS eigenschaften zu überschreiben. Ich habe jetzt die mageinternslider.phtml, nastürlich die css und die js (man weiss ja nie) durchgeforstet aber finde nichts, wo er das überschreibt?
Vll. liegts auch an der position? naja, nach rel. hab ich natürlich absolute probiert … aber nichts.
Ich vermute hier hat sicherlich schon wer die breite angepasst (also des “inners” nicht den outer mit der grauen linien. Ich wäre froh, wenn mir jhemand mal nen schubs in die richtige richtung geben könnte?!
[Antwort]
Christoph Antwort vom April 11th, 2011 07:56:
für einfach in der “mageinternslider.phtml” Zeile 22 den zusatz miboxWidth: 730 hin zu.
jQuery(document).ready(function()
{
jQuery(‘#mi-slideshow’).mageintern({autoplay: true, nextslidetime: 5000, showSlideNoDiv: true, showPause: true});
});
jQuery(document).ready(function()
{
jQuery(‘#mi-slideshow’).mageintern({autoplay: true,miboxWidth: 730 nextslidetime: 5000, showSlideNoDiv: true, showPause: true});
});
[Antwort]
Sieht gut aus – allerdings musste ich die Breite des Sliders irgendwie in der *.js anpassen, damit 3 Produkte nebeneinander passen und keine riesige Lücke in der Mitte entsteht, richtig?
Außerdem funktionieren die Links leider nicht. Die Produkte kann man zwar sehen, aber wenn ich drauklicke, werde ich nicht zu den Produkten weitergeleitet. Woran kann das liegen?
[Antwort]
Hatte bei Magento 1.4.1.1 das gleiche Problem: Produkte werden untereinander angezeigt.
Bei mir hat geholfen eine aktuelle Version der jQuery.js zu verwenden.
Benutze jetzt version 1.4.2 – in der Datei gibts die URL zur Quelle.
Hoffe es hilft euch.
Gruß Veit
[Antwort]
Bianca Antwort vom Februar 8th, 2011 06:39:
Bitte was meinst Du ich finde nirgends ne URL
[Antwort]
Hallo Zusammen,
bei mir werden die Produkte in einer Liste untereinander und nicht im Slider angezeigt.
Wo könnte das Problem liegen, dass die Produkte nicht im Slider angezeigt werden?
Gruß
[Antwort]
Hallo zusammen,
leider habe ich Probleme mit dem Produkt-Slider. Manche Produkte erscheinen wenn ich sie für den Slider auswähle, andere nicht.
Das ist äußerst seltsam. Ansonsten funktioniert er einwandfrei. Es handelt sich bei allen Produkten um “Einfaches Produkt”.
Hat jemand das gleiche Problem?
Gruß Andi
[Antwort]
Also, bei mir werden alle Produkt nur untereinander dargestellt, jedoch nicht als slider. Ich habe alles paarmal überprüft, habe alles richtig eingebunden, alle caches paarmal gelerrt. Keine Chande. Ich bekomme keinen Slider angezeigt. Magento 1.4.1.1
[Antwort]
Sorry, muss nochmal stören – habe gerade bemerkt, dass auf der Homepage kein Slider erscheint, sondern die Produkte, die dort eigentlich durchscrollen sollen, als Liste angezeigt werden…
Der Code in der Home Page sieht so aus:
Home Page
{{block type=’catalog/product_mageinternslider’ template=’catalog/product/mageinternslider.phtml’}}
Ansonsten sind alle Einstellungen unverändert, CSS combine aus und Flat Katalog deaktiviert!
Danke,
Florian
[Antwort]
Ich glaube, es ist ein generelles Ausgabe-Problem / Verständniss-Problem meinerseits
Wo muss ich welchen Code einfügen, um den Slider auf welchen Seiten angezeigt zu bekommen?
Ich habe unter CMS > Seiten verwalten > Home Page > Gestaltung > XML für Layoutänderung die Zeile eingefügt. Habe auch die {{}} Version versucht, aber ebenfalls erfolglos.
Macht das Sinn?
Danke für eure Hilfe!
Florian
[Antwort]
mageintern - robin2160 Antwort vom August 11th, 2010 21:33:
Hi Florian,
einfach die Codezeile mit den schön geschweiften Klammern dort in die CMS Homepage kopieren wo du auch den normalen Content eingibst. Diese Sliderversion funktioniert in magento 1.4.. nur bei deaktiviertem Produkt Flatkatalog .
Viele Grüße
Stefan Pröhl
[Antwort]
Florian Jacobs Antwort vom August 13th, 2010 08:23:
Hallo Stefan,
vielen Dank für deine Hilfe – jetzt klappts!
Florian
[Antwort]