Featured Products für die Startseite von Magento (Überarbeitete Fassung)
Auf der Startseite eines Onlineshops sollte man Produkte die besonders gut, besonders preiswert oder besonders gut zu verkaufen sind platzieren. Damit die Startseite nicht zu überladen ist, eignet sich hierfür ein Script, mit welchem man Inhalte scrollen kann. Ich habe mir einige Scripte angesehen und meine persönliche Wahl fiel dabei auf jQuery-Tools, scrollable. Ich werde in diesem Tutorial nicht weiter auf die Funktionsweisen dieses Plugin eingehen, da sich auf der Website des Herstellers eine sehr gute Beschreibung mit vielen Beispielen befindet.
Liveshop: http://www.switzerlandshop.com/shop.html
Wir müssen Produkte für die Ansicht in unserem Module auf der Startseite definieren können. Dazu erstellen wir ein neues Attribut und weisen es unseren Attributsets zu. Damit das ganze auf der Startseite erscheint programmieren wir ein Modul, mit welchem wir einen Block über das CMS einbinden können.
Daraus ergeben sich folgende Schritte:
2. Attribut anlegen und Attributsets zuweisen
3. Modul für die Datenbankabfrage und Ausgabe entwickeln
4. Block in CMS/Startseite einbinden
1. Installation von jQuery-Tools und Konfiguration
Wenn Sie unsere Erweiterung mxperts-jquerytools noch nicht installiert haben, dann machen Sie dies als erstes. Aktivieren Sie jQuery und jQuery-Tools mit dem Scrollable-Plugin. Weitere Infos zum Scrollable-Plugin findet man unter:
http://flowplayer.org/tools/scrollable.html (Dokumentation)
http://flowplayer.org/tools/demos/scrollable/index.html (Demos)
Für das die Verwendung von Scrollable in Magento habe ich die Datei jquery.featured.css vorbereitet. Zusätzlich habe ich mir auch das Plugin Mouse Wheel heruntergeladen, dann kann der Besucher mit dem Mausrad durch alle Produkte scrollen. Für Animationseffekte fehlt uns noch das jQuery Easing Plugin (version 1.3).
Der große Vorteil von jQuery Base - man muss Javascript und CSS nicht mehr via page.xml einbinden. Sie machen das nun schön bequem übers Backend wie der folgende Screenshot zeigt.
Die Dateien werden wie folgt auf den Server kopiert:
1. skin/frontend/default/[ihr_theme]/css/jquery.featured.css
2. skin/frontend/default/[ihr_theme]/js/jquery.easing.1.3.js
3. skin/frontend/default/[ihr_theme]/js/jquery.mousewheel.js
Nachdem Sie im Backend den Cache geleert und die Website neu geladen haben, sollten im Quellcode des Shops die Dateien bereits zu finden sein.
2. Attribut anlegen und Attributsets zuweisen
Legen Sie ein neues Attribut featured an. Nachfolgend die Screenshots zu den Eigenschaften.
Weisen Sie nun Ihren Attributsets das Attribut featured zu. Beim Bearbeiten der Produkte können Sie dann das Attribut auf Ja oder Nein stellen.
3. Modul für die Datenbankabfrage und Ausgabe entwickeln
Für das Modul verwende ich wieder Mxperts als Namespace wie im Tutorial “Extensions Tutorial”. Ich gehe hier nicht auf die Details zur Extensions-Programmierung ein. Wenn Sie hier nicht weiterkommen, arbeiten Sie mit unserem Tutorial “Extensions Tutorial”.
Unser Modul besteht aus folgenden Dateien:
1. app\etc\modules\Mxperts_Featured.xml
<?xml version="1.0"?>
<config>
<modules>
<Mxperts_Featured>
<active>true</active>
<codePool>local</codePool>
</Mxperts_Featured>
</modules>
</config>
2. app\code\local\Mxperts\Featured\etc\config.xml
<?xml version="1.0"?>
<config>
<modules>
<Mxperts_Featured>
<version>0.2.1</version>
</Mxperts_Featured>
</modules>
<global>
<blocks>
<featured>
<class>Mxperts_Featured_Block</class>
</featured>
</blocks>
</global>
</config>
3. app\code\local\Mxperts\Featured\Block\Featured.php
<?php
class Mxperts_Featured_Block_Featured extends Mage_Catalog_Block_Product_Abstract
{
public $store_id;
public function getFeaturedProducts() {
$this->store_id = Mage::app()->getStore()->getId();
$resource = Mage::getSingleton('core/resource');
$read = $resource->getConnection('catalog_read');
$productEntityIntTable = (string)Mage::getConfig()->getTablePrefix() . 'catalog_product_entity_int';
$eavAttributeTable = $resource->getTableName('eav/attribute');
$categoryProductTable = $resource->getTableName('catalog/category_product');
$select = "
SELECT DISTINCT
ccp.product_id
FROM
$productEntityIntTable cpei
INNER JOIN $categoryProductTable ccp ON (cpei.entity_id = ccp.product_id),
$eavAttributeTable ea
WHERE
cpei.attribute_id = ea.attribute_id AND
ea.attribute_code = 'featured' AND
cpei.value = '1'";
$res = $read->fetchAll($select);
return $res;
}
}
Das ist unser Herzstück - hier wird die SQL-Abfrage für unsere Produktliste mit dem Attribute featured erstellt und ausgeführt.
4. Das Template app\design\frontend\default\default\template\catalog\product\featured.phtml
<div class="featured">
<!-- navigator -->
<div class="featured_title">Featured Products</div>
<div class="navi"></div>
<br clear="all" />
<!-- prev link -->
<a class="prev"></a>
<div class="scrollable">
<div class="items">
<?php
$featured_products = $this->getFeaturedProducts();
foreach($featured_products as $_res) {
$_product = Mage::getModel('catalog/product')->load($_res['product_id']);
if ($_product->getStatus() == 1) {
?>
<div>
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
<img class="product-image" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(148, 148); ?>" width="148" height="148" alt="<?php echo $this->htmlEscape($_product->getName()); ?>" />
</a>
<div class="featured-product-name" >
<h3>
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
<?php echo $this->htmlEscape($_product->getName()) ?>
</a>
</h3>
</div>
</div>
<?php
}
}
?>
</div>
</div>
<!-- next link -->
<a class="next"></a>
<!-- let rest of the page float normally -->
<br clear="all" />
</div>
<script>
// custom easing called "custom"
jQuery.easing.feature = function (x, t, b, c, d) {
var s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
jQuery(function() {
// initialize scrollable
jQuery("div.scrollable").scrollable({
size: 3,
clickable: false,
loop: true,
easing: 'feature',
speed: 700
});
});
</script>
Die Struktur des HTML-Codes finden Sie auch in den Demos des jQuery-Plugins.
In Zeile 15 wird unsere SQL-Abfrage ausgeführt, un din der foreach Schleife werden alle Produkte als Items für unseren Scroller angelegt. Das ist hier nur ein Anschaungsbeispiel - jetzt ist Ihre Kreativität gefragt. Gestalten Sie den Scroller nach Ihren Wünschen und Anforderungen. Wenn Sie noch mehr Attribute der Produkte anzeigen möchten finden Sie eine Liste der verfügbaren Methoden im Tutorial Methoden von Klassen ausgeben.
4. Block in CMS/Startseite einbinden
Nun müssen Sie nur noch folgende Zeile im CMS für Ihre Startseite eintragen.
{{block type="featured/featured" name="product_featured" as="product_featured" template="catalog/product/featured.phtml"}}
Wichtig: Bei Problemen bitte type=”featured/featured” überprüfen, das haben wir geändert!
Screenshop vom Magento-Backend:
Das Ergebnis sollte wie in unserem Demoshop www.mxperts-shop.de sein.
40 Kommentare to “Featured Products für die Startseite von Magento (Überarbeitete Fassung)”
Kategorien
Letzte Artikel
- Fehlersuche mit Mage::Log()
- Achtung: ungewolltes ausspionieren Ihres Onlineshops
- Backend-Navigation mit eigenem Logo (Image)
- Personalisierter Browsertitel
- Produkte importieren für Magento 1.4.x
- Kostenfreie Broschüre für Magento-Interessierte und Agenturen
- Sprachpaket | Lokalisierung für Magento ab Version 1.4
- Erweiterung: Mxperts Tooltip
- Schneegestöber für Ihren Magento-Shop
- Image Zoom für Products-Listing
Letzte Kommentare
- Magento 1.4 Grundlagen: Ablauf eines Page-Requests | Matthias Zeis bei Magento Page Request
- boogles » Blog Archive » Magento Extensions selbst programmieren bei In 5 Minuten zur eigenen Magento Extension
- boogles » Blog Archive » Magento Extensions selbst programmieren bei Extensions Tutorial: Teil 1 - “Hallo Magento”
- aleis bei Erweiterung/Extension: Mxperts - Jquerytools
- boogles » Blog Archive » In 5 Minuten zur eigenen Magento Extension | Magento Experts bei In 5 Minuten zur eigenen Magento Extension
- burnymc bei Extensions Tutorial: Teil 3 - Datenbank
- StefanSchwan bei Extension/Erweiterung: Mxperts - jQuery Base
- FashionFux bei Extension/Erweiterung: Mxperts - jQuery Base
- FashionFux bei Extension/Erweiterung: Mxperts - jQuery Base
- FashionFux bei Extension/Erweiterung: Mxperts - jQuery Base
Admin Controler Animation Anleitung Backend Bestellung Bilder Blätterkatalog Block Box CMS Deutsch E-Mail Erweiterung Erweiterungen Extension Frontend Ausgabe Hotline Import iPhone jQuery jQuery-Tools Kontaktformular Kurs Layered Navigation Magento 1.3 Magento Update Menü Navigation Produkte rechte Spalte Scrolling seo Service Shipping-Modul Sprachfile Sprachpaket Tutorial Versandkosten Versenden Version 1.3.0 Video Vorlagen Währungen YouTube Zoom
WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 9 or better.
| M | D | M | D | F | S | S |
|---|---|---|---|---|---|---|
| « Jul | ||||||
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 | |||||
wurde da jetzt irgendwat am code geändert?
ich kann auf den ersten blick jetzt keinen unterschied zur vorherigen version sehen oO
Wir haben die SQL-Statement überarbeitet und den Produktstatus “aktiv” berücksichtigt. Außerdem basiert der Vorgang nun auf Mxperts jQuery-Tools. Viele hatten jQuery manuell über die page.xml integriert und das hat für Verwirrung gesorgt. Also beim genauen hinsehen hat sich einiges geändert
Viele Grüße
Dscho
aso aso ^^ joa hatte jetzt nur grob drüber geschaut gehabt *schäm*
beeinflusst dat jetzt ne bestehende install wenn ich dat update?
ich denke ja mal nein, aber sicherheitshalber lieber nochmal nachfragen ^^
Wenn es bei Dir läuft dann kannst du die SQL-Statements noch anpassen. Aber wenn Du Dir nicht sicher bist - dann lass es
Never change a running system!
Und da ich Deine Gesamtkonfiguration nicht kenne, kann ich Dir so aus der “Ferne” auch keine hundertprozentige Empfehlung geben.
Gruß
Dscho
Tausend Dank für die tolle Seite.
Ich habe leider Probleme die featured Products anzuzeigen.
Bereits bei der ersten Version der featured Products schienen einige Leute Probleme zu haben.
Gilt dabei eure Einschränkung auch für die überarbeitete Version?
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Hinweis - 23.07.2009: Die folgenden Schritte funktionieren nur wenn den jeweiligen Produkten auf Kategorieebene->Kategorie Produkte die Position 0 zugewiesen ist, sonst werden diese nicht angezeigt! Vielen Dank für den Hinweis robin2160.
Es ist kein Bug, daran wurde nur eben nicht gedacht, da die verwendeten Sample-Daten immer eine “0″ als Position vordefiniert haben - wir sind dran!
Liebe Grüße
Daniel & Johannes
>>>>>>>>>>>>>>>>>>>>>>>
Wenn ja, was muss ich einstellen. Geht es hier um die categroy-IDs?
Besten Dank
HT
Genau aus den angesprochenen Gründen haben wir dieses Tutorial überholt. Ich habe es gestern abend auf meinem Demoshop http://www.mxperts-shop.de durchgespielt. Lief einwandfrei - immer wieder schreiben uns Leute läuft bei uns nicht. Damti wir helfen können brauchen wir wenigstens eine URL um den Header und die engbundenen Daten überprüfen zu können. Dann konnten wir oft den Fehler lokalisieren.
Also einfach mal mehr Infos zusenden
Gruß
Johannes Teitge
Ok, das ist mal daneben gegangen…
Darf die Seite leider nicht öffentlich posten.
An welche Email kann ich die Zugangsdaten schicken?
an teitge(at)mxperts.de
Gruß
Johannes Teitge
zu Punkt 4.
Wichtig: Bei Problemen bitte type=”featured/featured” überprüfen, das haben wir geändert!
Hallo Johannes,
eine kleine frage noch. Die featured products werden angezeigt (gourmeo24.com) aber die jquery Funktionen gehen wohl nicht (kein “Weiter” Klick, kein autoslide). Im Quellcode habe ich gesehen, dass die in der Admin bei jquery eingetragenen javascript dateien erst hinter den besonderen CSS Datein für den IE, also auch nach der prototype.js. Nun meine ich mich zu erinnern, dass die Jquery Dateien vor der prototype.js kommen müssen. Ist das so und kann das die Ursache sein? n ja, wie krieg ich die davor?
Danke und lieben Gruß
albossum
Hallo,
du solltest noch jQuery-Tools installieren, dann klappt das.
http://www.mxperts.de/erweiterungextension-mxperts-jquerytools/
Aber Du slltest mal unter Firefox mit der WebDeveloper Toolbra die Fehler ansehen. Du hast über 20 CSS-Fehler in Deinem Template.
Viele Grüße
Dscho
Danke für den Tipp mit den CSS Fehlern… Muss ich mir mal anschauen…
JQuery-Tools sind allerdings installiert und aktiviert (alles auf “ja”)
Darf man fragen wo du eingestellt hast das anstatt 3, 4 Produkte angezeigt werden?
Hallo,
zunächst ein großes Lob für die tolle Arbeit hier! Ich habe die featured products am Laufen, möchte aber noch einen autoscroll hinzufügen. Leider wirft das autoscroll-Plugin der flowplayer.org-Seite immer einen Fehler aus. Verträgt sich das nicht mit den Scripts hier? Bitte um einen Tipp.
Danke und Gruß
bobbel
“Verträgt sich das nicht mit den Scripts hier?”
Was meinst Du damit, was für Fehlermeldungen sind das? Mit etwas mehr Details kann ich auch mehr dazu sagen/schreiben - zur Zeit haben ich meine Wahrsagerkugel verlegt, sodass ich auf etwas mehr Input angewiesen bin
Viele Grüße
Dscho
Sorry für die magere Auskunft.
Also ich habe von der Seite http://flowplayer.org/tools/download.html das Script tools.scrollable.autoscroll-1.0.0.js heruntergeladen und über den Magento-Admin analog zu easing und mousewheel eingebunden. Anschließend habe ich in der featured.phtml ganz unten den Aufruf jQuery(”div.scrollable”).scrollable… wie folgt abgeändert:
jQuery(function() {
// initialize scrollable
jQuery(”div.scrollable”).scrollable({
size: 3,
clickable: false,
loop: true,
easing: ‘feature’,
speed: 700
}).autoscroll();
});
Nun erhalte ich beim Seitenaufruf via Firebug den Fehler “t is undefined (tools.scrollable.autoscroll-1.0.0.js, Zeile 17)”
Der Fehler tritt auch ohne Änderung des obigen Funktionsaufrufs auf, also lediglich mit Einbindung des Autoscroll-Plugins. Daher hatte ich meine erste Anfrage recht allgemein formuliert. Tausend dank für die schnelle Unterstützung!
Viele Grüße
bobbel
Hi, erst mal vielen Dank für die Beschreibung klappt bestens… Nun ich würde es auch begrüßen wenn mir einer ein Tip geben könnte wie man Feature Slider anschubsen könnte damit er automatisch scrollt…
Weiterhin kann man die Produkte irgendwie Random anzeigen lassen sieht sonst so statisch aus…
Gruß
Taiwi
Heute haben wir jQuery-Tools v.1.1.1 in unsere Extension integriert. Schau mal auf http://www.flowplayer.org - es gibt viele neue schön Features
Gruß
Johannes Teitge
Sehr schön, die neue Version! Mousewheel, Autoscroll, Circular - alles integriert! Damit hat sich mein Problem von oben dann fast von selbst gelöst
Ihr seid die Besten!!!
ich habe mich grade wie blöde gewundert, weil das net ging! lösung war recht simple! in der featured.phtml habt ihr einen kleinen fehler drinn.
// custom easing called “custom”
jQuery.easing.feature = function (x, t, b, c, d) {
var s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
jQuery(function() {
// initialize scrollable
jQuery(”div.scrollable”).scrollable({
size: 3,
clickable: false,
loop: true,
easing: ‘feature’,
speed: 700
});
});
feature <– das müsste zu featured
Ich sehe vor lauter Bäumen den Wald nicht…
Ich bekomme es einfach nicht hin das Ding automatisch zu starten also beim Load der Homepage soll die Leiste scrollen.
Könnt Ihr mir vielleicht einen Tip geben was ich ändern muß? Weiterhin gibt es eine Lösung um die Produkte Random anzeigen zu lassen?
Vielen Dank…
Taiwi
Hallo,
ohne Detailangaben oder einem Link zum Shop kann ich leider auf die Ferne keine Hilfestellung geben.
Um die Produktauswahl/ein Array zu “Würfeln” gibt es in php den Befehl shuffle.
Viele Grüße
Johannes Teitge
Vielen Dank, habe eher ein viel größeres Problem.
Betreibe ein Multi Store (selbe wie Magento Demo) unter 3 verschiedenen Subdomains.
Habe ein
- beverage store
- food store
- xxl store
wenn ich nun den feature Slider einsetze werden im beverage store auch die Feature Produkte vom Food Store angezeigt. Die Links ort funktionieren natürlich nicht.
Jetzt weiß ich nicht genau wie ich die Produktabfrage nur im store view halte in dem ich mich gerade befinde…
beispiel unter http://www.suzhoushopping.com
Gruß
Taiwi
OK habe es selber lösen können. Habe eine Abfrage eingebaut in welchen Store view man sich befindet. Weiterhin habe ich die Funktion ein wenig umgebaut das ich eine Katalogseite angezeigt bekomme. Diese verwende ich nun als Startseite..
Trotzdem vielen Dank…
Gruß
Taiwi
Wieso ist das extra Mousewheel Plugin überhaupt möglich? Kann man das nicht über die für scrollable verfügbare mousewheel exension lösen?
Also hab mich damit mal selbst befasst, mein Ziel war es die neuste Version von scrollable mit allen extensions (also auf http://flowplayer.org/tools/download.html unter scrollable alle Unterpunkte markieren) und “minimzed”, sowie ohne extra mousewheel.js zu verwenden. Es muss nur die featured.phtml am Ende angepasst werden: http://dotnet-snippets.de/dns/jquery-scrollable-SID1233.aspx
Hallo,
danke für die Modifikation, leider bin ich im Moment noch nicht dazu gekommen. Duch die neuen jQuery-Tools muss man leider verwendete jQuery-Tools Scripte überprüfen.
Grüße
Johannes Teitge
Hallo Johannes;
hmh mal alles auf den neusten Stand gebracht, will aber nicht so richtig funktionieren….
Könntest Du evtl. mal alles Updaten und die Verwirrung entwirren
das wäre sehr nett….
Übrigens:
jQuery.easing.feature = function (x, t, b, c, d) {
var s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
jQuery(function() {
// initialize scrollable
jQuery(”div.scrollable”).scrollable({
size: 3,
clickable: false,
loop: false,
easing: ”feature”,
speed: 700
}).navigator().circular().mousewheel();
});
SOLL hier nun aus dem
feature EIN featured gemacht werden JA oder Nein???
Weil so funktioniert es auch nicht keine Mousewheel Funktion…
LG
…hmh also angezeigt wird alles… aber mausrad scroll funktioniert einfach nicht…
…auch mal in einer frischen 1.3.2.4 Version probiert!
Wäre einfach toll das Tutorial zu überarbeiten
bin gerade sehr verwirrt….
Aber by the way - keinen Stress, das Scrollen kann ja noch ein wenig verschmerzt werden…
Ich denke wenn wir das überarbeiten, dann gleich als Widget für die 1.4.0.0 - deshalb lieber noch etwas warten…
Ok… Danke für das Feedback…
Das Update auf die 1.4er ist ja auch Abhängig von den installierten bzw. genutzen Extensions; diese sollten ja dann auch mit einer 1.4er funktionieren
oder?
Hi, erst mal Danke für Eure Seite!
Warum zieht Ihr die Produkte aus der Category zu Produkt Relation und nicht aus der Produktabelle selbs?.
also $resource->getTableName(’catalog/category_product’);
anstatt $resource->getTableName(’catalog/product’);
Hallo,
kann man machen, ich persönlich hatte zum Teil Beschränkungen auf die categoriy_id mit drin.
Zum Beispiel: addCategoryFilter(Mage::getModel(’catalog/category’)
->load($cat_id))
Viele Grüße
Dscho
Hallo Johannes,
sag mal bitte wie die addCategoryFilter eingebaut hast?
Ich würde auch gerne nur die besteller eine Kategorie + Unterkategorien anzeigen lassen.
Thanks,
Daniel
Hallo,
ich habe folgendes Problem, die featured produkte werden angezeigt jedoch kann ich gar nicht scrollen.
Weder mir dem mausrad oder mir dem button.
Was habe ich falsch gemacht? jquery tools etc ist installiert.
Hier mal der link zur seite:
http://tinyurl.com/yzqgugh
ich sag schonmal vielen dank.
viele grüße
sven
Ich habe genau das gleiche Problem wie Sven, jquery tools und co. sind installiert. Leider kann ich den Link nicht öffentlich posten. Könnt ihr Kontakt zu mir auufnehmen oder mir eine E-Mail Adresse nennen an die ich mich wenden kann?
Meine E-Mail: kontakt@mohdesign.de
Hat sich erledigt, aber vielleicht hilft das ja anderen weiter. Ich hatte vergessen die Imagefiles hochzuladen. Super peinlich.
Gruß, moh
Hallo Leute,
kann mir jemand sagen wo man einstellen kann wie viele in der Startposition angezeigt werden?
Danke!
Gruß Ralf
Hab ich da was übersehen? Was soll denn in die jquery.featured.css so alles rein? Gibt es einen download?
Eure jQuery Einbindung ist der hammer!!!
Hallo,
kann mir jemand einen Tipp geben, wie ich Featured Products in einem Magento-Shop mit 2 Domains (2 Websites mit je einem Srore und einem StroeView) einsetzen kann.
Ich habe das Problem, dass Produkte, die als featured gekennzeichnet sind, auf den Startseiten beider Shops gelistet werden.
In der Tabelle catalog_product_website finde ich zwar die entsprechende website_id zur jeweiligen product_id, leider reicht mein mysql-Wissen aber nicht aus, um diese Abfrage noch unter zu bringen.. :-/
Gruß, Ralf