Im Forum wird immer wieder danach gefragt, wie man die Anzahl der Spalten im Grid-Mode für das Produktlisting anpassen kann. Bisher gibt es keine schnelle Lösung – denn schnell ist diese Anpassung auch nicht gemacht.

Es müssen Änderungen im Layout, Template sund dem Skin vorgenommen werden, wobei die XML-Anpassungen im Layout nicht dokumentiert sind. Viele können nicht verstehen dass man nicht über das Backend die Spaltenanzahl verändern kann. Zur Zeit geht das leider nicht, da man Einstellungen an zu vielen Stellen vornehmen muss. Es wäre machbar, indem man Inner-CSS benutzt und Systemfunktionen von Magento ignoriert. Wir stehen nicht für solche “Basteleien” und möchten erreichen, dass unser Shop für spätere Updates von Magento kompatibel bleibt. Wer allerdings für verschiedene Artikelgruppen, verschiedene Spaltenlayouts benötigt kommt an einer größeren Anpassung nicht vorbei.

Zur Umsetzung

Ich benutze in diesen Tutorial immer “Default” für das Interface und Theme. Passen Sie das Ihrer Shopkonfiguration an.

1. Layout
Als erstes müssen wir die Datei app/design/frontend/default/default/layout/catalog.xml anpassen. Suchen Sie nach allen Vorkommen von:

<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">

und fügen Sie folgende Zeile hinzu:

<action method="setColumnCount"><columns>5</columns></action>

Die 5 passen Sie Ihrer gewünschten Spaltenanzahl an.

Damit liefert uns die Funktion $this->getColumnCount(); die richtige Spaltenanzahl.

2. Template
Öffnen Sie nun die Datei app/design/frontend/default/default/templates/catalog/product/list.phtml. Für uns wird es ab ca. Zeile 88 (<?php // Grid Mode ?>) interessant.

Anhand der zugewiesenen Klassen wie listing-type-grid catalog-listing und item, wissen wir schon, welche Einstellungn im Skin/CSS angepasst werden müssen.

Für dieses Tutorial ändern ich das Default Theme auf eine Spaltenanzahl von 5 Produkten ab.
Demo: http://www.demo-store.de/electronics/computers.html?mode=grid
Sie müssen das natürlich Ihren Vorstellungen entsprechend anpassen.

Da ich mich im 3-Spalten Layout befindet, wird es mit 5 Produkt-Spalten sehr eng. D.h. Ausser Bild, Name und Preis kommentiere ist alles weitere aus. Die Produktbilder sollen mit einer Größe von 80px dargestellt werden. Deshalb muss man das IMG-Tag anpassen wie folgt anpassen.

...
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(80, 80); ?>" width="80" height="80" ...

Mein gesamter PHP-Code sieht wie folgt aus:

[/php]
<?php // Grid Mode ?>
<div class="listing-type-grid catalog-listing">
<?php $_collectionSize = $_productCollection->count() ?>
    <?php $_columnCount = $this->getColumnCount(); ?>
    <?php $i=0; foreach ($_productCollection as $_product): ?>
        <?php if($i++%$_columnCount==0): ?>
        <ol class="grid-row">
        <?php endif; ?>
            <li class="item">
                <p class="product-image">
                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(80, 80); ?>" width="80" height="80" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
                    </a>
                </p>
                <h5><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h5>
<!--
                <?php if($_product->getRatingSummary()): ?>
                <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                <?php endif; ?>
-->
                <?php echo $this->getPriceHtml($_product, true) ?>
                <!--
                <?php if($_product->isSaleable()): ?>
                    <button type="button" class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart') ?></span></button>
                <?php else: ?>
                <div class="out-of-stock"><?php echo $this->__('Out of stock') ?></div>
                <?php endif; ?>
                -->
                    <!--
                <p class="add-to">
                    <?php if ($this->helper('wishlist')->isAllow()) : ?>
                    <a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-cart"><?php echo $this->__('Add to Wishlist') ?></a>
                    <?php endif; ?>

                    <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?><br/>
                    <a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a>
                    <?php endif; ?>

                </p>
                -->
1

3. SKIN
Öffnen Sie die Datei skin/frontend/default/default/css/boxes.php und suchen Sie nach /********************** Catalog Listing */, ca. Zeile 800. Weiter unten bei .listing-type-grid finden Sie den Hintergund für die Spaltenaufteilung. Diesen habe ich mir angepasst und als bkg_products-grid5.gif in das Verzeichnis skin/frontend/default/default/images kopiert.

Download: bkg_products-grid5.zip

Weil bei 5 Spalten die Schrift zu groß wirkt, füge ich folgende Zeile ein:

.listing-type-grid li.item h5 a { font-size: 0.9em; line-height: 0.3em; }

In der Klasse .listing-type-grid li.item passe ich noch die Breite an. So sieht mein komplettes CSS wie folgt aus:

/* Grid Type */
.listing-type-grid { background:url(../images/bkg_products-grid5.gif) 0 0 repeat; }
.listing-type-grid .grid-row { border-bottom:1px solid #d9dde3; }
.listing-type-grid li.item { float:left; width:75px; padding:12px 10px; line-height:1.6em; overflow:hidden; }
.listing-type-grid li.item h5 a { font-size: 0.9em; line-height: 0.3em; }
...

Sie können auch ein alternatives Layout anlegen. Zum Beispiel .col-5-layout und diesen in Ihrem Template eintragen. Ich muss gestehen, diese Idee kam mir erst jeztzt nachdem ich schon fast das ganze Tutorial geschrieben hatte

Nachdem Sie alle Dateien auf Ihren Webserver kopiert haben, war es das auch schon. Sie werden mit den Breitenangaben und dem Hintergrundbild noch etwas “experimentieren” müssen, bis es in Ihr Erscheungsbild passt.
Bei Kauf-Templates kann es sein, dass Sie die Spaltenanzahl manuell eingeben müssen, oder die Klassenbezeichnungen nicht stimmen. Falls Sie Probleme mit Ihren Kauf-Templates haben, müssen Sie sich an den Verkäufer oder Ersteller des Templates wenden.

Viele Grüße
Johannes Teitge