Türchen 17: Ein passendes Karussell erstellen

Karussells sind bei Webseiten und Web-Shops gleichermaßen beliebt und werden häufig eingesetzt. So lassen sich mehrere Informationen an einer presenten Stelle, meist komplett above the fold, unterbringen. Die meisten Themes liefern ein Karussell gleich mit, in den meisten Fällen kann dies nur sehr umständlich und mit HTML-Kenntnissen gepflegt werden. Bei einem so wichtigen Element ist natürlich nicht wünschenswert und hat war der Anlass, eine eigene Extension zu erstellen.

Der Erfolg einer gelungenen Extension liegt in der Konzeption. Folgende Anforderungen sollte das Karussell erfüllen:

  • Hohe Usability für den Redakteur
  • Flexibilität
  • Erweiterbar

Aus diesen Anforderungen lassen sich schnell die benötigen Elemente der Extension ableiten:

  • Eigene Tabelle
  • Grid
  • Flexibles Formular

Am Anfang aller Extensions steht die Konfigurationsdatei  in etc/modules, in diesem Fall Webguys_Carousel.xml.

<?xml version="1.0"?>
<config>
    <modules>
        <Webguys_Carousel>
            <active>true</active>
            <codePool>community</codePool>
        </Webguys_Carousel>
    </modules>
</config>

Die Struktur der vollständigen Extension ist dieser Grafik zu entnehmen:

webguys-carousel-struktur2

Der Hauptteil der Extension besteht aus dem Backend, dies in der Tiefe zu erklären, würde den Rahmen hier jedoch sprengen. Das Formular und das Grid wird von den Magento-Standard-Klassen abgeleitet und stellt dieselben Funktionen bereit, wie man von der Oberfläche kennt und gewohnt sind. Einen ausführlichen Artikel über die Erstellung und Erweiterung von Formularen und Grids von Ben Robbie findet man hier.

Über ein Setup-Skript:

...
        <resources>
            <carousel_setup>
                <setup>
                    <module>Webguys_Carousel</module>
                </setup>
                <connection>
                    <use>core_setup</use>
                </connection>
            </carousel_setup>
            <carousel_write>
                <connection>
                    <use>core_write</use>
                </connection>
            </carousel_write>
            <carousel_read>
                <connection>
                    <use>core_read</use>
                </connection>
            </carousel_read>
        </resources>
...

wird die Datenbank erstellt. Die Struktur kann später über upgrade-Skripte auf die eigenen Bedürfnisse angepasst werden.

<?php
$installer = $this;
$installer->startSetup();
$installer->run("
CREATE TABLE IF NOT EXISTS {$this->getTable('carousel')} (
  `carousel_id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `store_id` int(11) NOT NULL DEFAULT '0',
  `sortnr` int(11) NOT NULL,
  `title` varchar(255) NOT NULL DEFAULT '',
  `text` text NOT NULL,
  `bildklein` varchar(255) NOT NULL,
  `bildgross` varchar(255) NOT NULL,
  `link` varchar(255) NOT NULL,
  `link_caption` varchar(255) NOT NULL,
  `loggedIn` tinyint(1) NOT NULL DEFAULT '0',
  `status` smallint(6) NOT NULL DEFAULT '0',
  `created_time` datetime DEFAULT NULL,
  `update_time` datetime DEFAULT NULL,
  PRIMARY KEY (`carousel_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
");
$installer->endSetup();

Un ist die Basis fertig und es geht an die Ausgabe. An dieser Stelle gibt es mehrere Möglichkeiten, vor allem steht die Entscheidung, welches JS-Framework genutzt werden soll. Persönlich finde ich Prototype gar nicht so schlecht, jedoch arbeite ich mit JQuery um Längen lieber, weshalb ich JQuery über ein Layout-Handle einbinde, um das Karussell darzustellen. Es gibt zahlreiche fertige Karussells auf Basis von JQuery, mein Favorit ist jcarousel von Jan Sorgalla. Diese Erweiterung auf Basis von JQuery bietet ein flexibles Karussell mit ein paar schönen Funktionen, sowie komplett anpassbaren CSS via Skins. So kann man schnell das Layout anpassen, ohne das Rad immer neu erfinden zu müssen.

Das mitgelieferte Layout-Update fügt das Template und die benötigten Javascript-Dateien hinzu und kann mittels

<?php echo $this->getChildHtml('carousel') ?>

an der benötigen Stelle dargestellt werden.

Das nötige HTML stellt das Template carousel.phtml zur Verfügung, dort wird über die Collection die verfügbaren Slides mithilfe der Konfigurationsoptionen gesammelt und in der notwenigen Syntax ausgegeben. Das Minimal-Beispiel stellt die Funktionsweise dar:

<?php
	$_items = $this->getCarouselItems(Mage::app()->getStore()->getId());
	$_media = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);
?>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#carousel').jcarousel({
            wrap: 'circular'
        });
    });
</script>

<ul id="carousel" class="jcarousel-skin-tango">
    <?php foreach ($_items AS $_item) : ?>
        <li>
            <a href="<?php echo $_item->getLink(); ?>">
                <img src="<?php echo $_media . $_item->getBildgross(); ?>" alt="<?php echo $_item->getTitle(); ?>" />
            </a>
        </li>
    <?php endforeach; ?>
</ul>

Der Vorteil mit diesem System liegt in der modularen Verwendung. So ist es beispielsweise auch möglich, diese Extension mit minimalem Aufwand so einzusetzen, dass es das Karussell eines gekauften Themes bedienbar macht. Die fertige Extension könnt ihr euch hier herunterladen. Über Feedback freue ich mich natürlich.



Ein Beitrag von Ingo Hillebrand
Ingo's avatar

Ingo Hillebrand lebt in Soest und arbeitet als Anwendungsentwickler bei der Paderborner Firma code-x. Dort beschäftigt sich der studierte Wirtschaftsinformatiker (Bachelor of Science) seit 2010 mit Magento. Sie erreichen ihn per e-Mail an ingo@webguys.de oder über Xing.

Alle Beiträge von Ingo

Kommentare
Ralph Kopschek am

Hi,

ich sehe die Einträge unter "Katalog" und unter "Konfiguration". Aber ich bekomme das Karusell nicht im CMS eingebunden :( Ebenso kann ich keine Artikel dem Karusell hinzufügen :(

VG Ralph

Ingo Hillebrand am

Wo genau hakt es denn?

Ralph Kopschek am

Hallo,

ich bin über Tante google auf dieses Script gestossen. Es scheint meinen Wünschen recht nahe zu kommen. Die Installation auf meinen 1.7.1 ging per FTP. Aber ich bekomme es nicht eingebunden. Bin noch recht Frisch im Bereich Magento. Kann mir jemand ein paar ausführliche Tipps für die Nutzung/Einbindung geben?

Vielen Dank!!

Viele Grüße Ralph

Ingo Hillebrand am

Hallo Marc, stimmt, Magento 2 setzt auf JQuery, bis es jedoch soweit ist, sollte man versuchen, Magento möglichst performant zu halten und die Anzahl und die Datenmenge der zu ladenden Dateien auf ein Mindestmaß zu reduzieren. In vielen Themes werden jedoch schon beide Frameworks parallel verwendet, dadurch macht man die ganze Sache wenigstens nicht schlimmer.

Ingo Hillebrand am

Hallo Vinai, vielen Dank für den Hinweis, das macht die config.xml deutlich schlanker und vor allem übersichtlicher.

Marc am

Sehr schöne Extension! Die Anmerkung bezüglich Prototyp ist natürlich nachzuvollziehen. Andererseits hat sich Magento soweit ich weiß für Version 2 ja auch schon in Richtung jQuery orientiert, so dass längerfristig gesehen immer weniger für Prototype sprechen wird, oder?

Vinai am

Klasse Post, vielen Dank! Noch eine kleine Notiz am Rande: In der global/resources Konfiguration brauch man seit Magento 1.4 nicht mehr die Referenzen auf die core read, write und setup resource knoten. Alles was man benötigt ist die setup resource:


            
                
                    Webguys_Carousel
                
            
        

Wenn man keine Rückwärts-Kompatibilität mit ganz alten Installationen braucht kann man so die eh schon große config.xml etwas übersichtlicher halten... Sollten andere DB-Resourcen als die defaults tatsächlich gebraucht werden lassen sich die natürlich immer noch genau so anlegen (nur braucht man das ja meiner Erfahrung nach für die wenigsten Module).

Ingo Hillebrand am

Hallo Cyrill, ich gebe Dir Recht, DDL hat wirklich Vorteile, damit wollte ich mich schon länger mal beschäftigen. Aber vor dem Artikel wurde die Zeit etwas knapp. :)

Cyrill Schumacher am

Super Artikel! Aber beim Installer Skript vermisse ich die "neue" DDL Syntax...

Ingo Hillebrand am

Hallo Simon, die Extension kommt bald auf GitHub :). Natürlich kann man das Karussell auch mit Prototype umsetzen, einige Plugins gibt es dafür ja auch. Nehmen könnte man z.B. dies hier: http://code.google.com/p/prototype-carousel/, diese bietet auch rudimentäre Hooks für das Karussel. Damit umgeht man auf jeden Fall einen möglichen Konfikt. :)

Simon am

Danke für den Artikel und die Extension!

Als Erstes fände ich es natürlich schön, wenn es die Extension auf GitHub gibt :-) Außerdem bin ich mit der Wahl des Frameworks nicht ganz einverstanden. Ich mag jQuery auch unendlich-mal lieber als Prototype, aber ich versuche dennoch in Magento Shops auf jQuery zu verzichten. Zwei Frameworks ist einfach doof und man hat immer wieder das Problem, dass mehrere Extensions jQuery einbinden und sich das dann beißt etc... Siehst du eine Möglichkeit, das Ganze mit Prototype umzusetzen? Ich habe das mal für einen Shop umgesetzt, allerdings nicht wirklich schön und flexibel - hatte mir dann im Prinzip einen eigenen Slider gebaut...

Dein Kommentar