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.

featured_switzerland
Liveshop: http://www.switzerlandshop.com/shop.html

Dieses Tutorial setzt die Installation von jQuery-Tools voraus!

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:

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.
featured2_screen01

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.
f_attr01 f_attr02

Weisen Sie nun Ihren Attributsets das Attribut featured zu. Beim Bearbeiten der Produkte können Sie dann das Attribut auf Ja oder Nein stellen.
f_edit_product

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:
featured_cms



Das Ergebnis sollte wie in unserem Demoshop www.mxperts-shop.de sein.