Magento: Zubehör anzeigen in modern Tabs

zubehoer-modern-magento

Manche möchten das Produkt-Zubehör in einen der Tabs vom modern Theme verlegen. Standardmäßig wird das Zubehör in der linken Spalte angezeigt. Dieses Tutorial zeigt wie es funktioniert die Zubehörartikel in einen Tab zu legen und optisch ansprechend anzeigen zu lassen. Die Anzahl der Produkte pro Reihe ist individuell einstellbar.

Folgen Sie den 3  Schritten:

1. Die Anzeige auf der linken Seite ausschalten

2. Zubehör Tab einfügen

3. related.phtml modifizieren


1 + 2:
Die Anzeige auf der linken Seite deaktivieren und einen neuen Tab einfügen erfogt in der catalog.xml.

Im Abschnitt <catalog_product_view> wird zuerst die Zeile bei <reference name=”left”> die Zubehöranzeige
mit <!–   –> auskommentiert (ca. Zeile 248).

<reference name="left">
 <!--<block type="catalog/product_list_related" name="catalog.product.related" before="-" template="catalog/product/list/related.phtml"/>-->
 </reference>

Wir bleiben in der catalog.xml und fügen einen neuen Tab für das Zubehör hinzu.
Der Abschnitt <catalog_product_view> beginnt ca. ab Zeile 176. In diesem Abschnitt sind die Tabs deklariert.
Ein wenig herunterscrollen bis die Zeilen

<action method="addTab" translate="title" module="catalog"><alias>additional</alias><title>Additional Information</title><block>catalog/product_view_attributes</block>
<template>catalog/product/view/attributes.phtml</template></action>

erscheinen (ca. Zeile 200).
Darunter werden diese Zeilen kopiert.

<action method="addTab" translate="title" module="catalog"><alias>related_products</alias><title>Related Products</title><block>catalog/product_list_related</block>
<template>catalog/product/list/related.phtml</template></action>

Dies bewirkt die Ausgabe der realted.pthml (Zubehör) in einem neuen Tab.
Die catalog.xml speichern und schließen.


zubehoer-modern-magento-2zubehoer-modern-magento-3
Schritt 1 hat nun die Zubehör Anzeige links ausgeblendet und Schritt 2 einen neuen Tab mit dem Inhalt Zubehör angelegt.


Wenn man nun auf Zubehör klickt erfolgt die Ausgabe der Zubehörprodukte für diesen Artikel (sofern welche festgelegt wurden).

zubehoer-modern-magento-4

Die Anzeige sieht noch etwas durcheinander aus. Da die css Deklarationen nicht für die Ausgabe in einem breitem Fenster vorgesehen ist sieht die Ausgabe noch etwas durcheinander aus.
Aber das wird noch geändert – und zwar in Schritt 3.

Schritt 3:
Die related.pthml modifizieren.

Die related.pthml ist zuständig für die Ausgabe der Zubehör-Artikel. Diese habe ich im Grundaufbau in eine Tabellenform gebracht. Damit läßt sich die Ausgabe optimal steuern.

Die related.phml mit diesem Code vollständig ersetzen (oder am Ende des Beitrages downloaden).

<?php if($this->getItems()->getSize()): ?>
<?php $maxtd=4; ?><!-- Anzahl der Produkte pro Reihe / product quantity per row -->
<div>
<p><strong><?php echo $this->__('Related Products') ?></strong>&nbsp;<?php echo $this->__('Check items to add to the cart or') ?>&nbsp;<strong><a href="#" onclick="selectAllRelated(this);return false;"><?php echo $this->__('select all') ?></a></strong></p>
<table cellspacing="0">
<?php $tdcount=1; ?>
<?php $stpcount=1; ?>
<?php $tdwidth=100/$maxtd; ?>
<?php if($tdwidth >=21): ?>
<?php $imagewidth=125 ?><!-- Bildbreite bis 4 Produkte pro Reihe / image width up to 4 products per row-->
<?php else: ?>
<?php $imagewidth=100 ?><!-- Bildbreite ab 5 Produkte pro Reihe / image width from 5 products per row-->
<?php endif; ?>
<?php foreach($this->getItems() as $_item): ?>
<?php if($stpcount==1): ?><?php echo "<tr>"; ?><?php endif; ?>
<td style="width: <?php echo  $tdwidth; ?>%; text-align: center; border-bottom-width: 1px; border-left-width: 1px; border-bottom-style: solid; border-left-style: dotted; border-bottom-color: #999999; border-left-color: #999999;    padding: 10px;">
<p><a href="<?php echo $_item->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize( $imagewidth) ?>" alt="<?php echo $this->htmlEscape($_item->getName()) ?>" width="<?php echo $imagewidth; ?>px" /></a></p>
<?php if(!$_item->isComposite() && $_item->isSaleable()): ?>
<?php if (!$_item->getRequiredOptions()): ?>
<p style="margin-bottom: 10px;"><input type="checkbox" id="related-checkbox<?php echo $_item->getId() ?>" name="related_products[]" value="<?php echo $_item->getId() ?>"/><br /></p><?php endif; ?>
<?php endif; ?>
<a href="<?php echo $_item->getProductUrl() ?>"><?php echo $this->htmlEscape($_item->getName()) ?></a>
<?php echo $this->getPriceHtml($_item, true) ?>
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<br /><a href="<?php echo $this->getAddToWishlistUrl($_item) ?>"><?php echo $this->__('Add to Wishlist') ?></a>
<?php endif; ?>
</td>
<?php $tdcount++; ?>
<?php $stpcount++; ?>
<?php if($stpcount==$maxtd+1): ?>
<?php echo "</tr>"; ?>
<?php $stpcount=1; ?>
<?php $tdcount=1; ?>
<?php endif; ?>
<?php endforeach ?>
<br />
<?php if($tdcount==1): ?>
<?php $tdcount=$maxtd+1; ?>
<?php endif; ?>
<?php while($tdcount <> $maxtd+1)
{
echo "<td style=\"border-left-style: dotted; border-left-width: 1px; border-left-color: #999999;\">&nbsp;</td>";
$tdcount++;
}
echo "</tr>";
?>
</table>
</div>
<script type="text/javascript">
//<![CDATA[
$$('.related-checkbox').each(function(elem){
 Event.observe(elem, 'click', addRelatedToProduct)
});
var relatedProductsCheckFlag = false;
function selectAllRelated(txt){
 if (relatedProductsCheckFlag == false) {
 $$('.related-checkbox').each(function(elem){
 elem.checked = true;
 });
 relatedProductsCheckFlag = true;
 txt.innerHTML="<?php echo $this->__('unselect all') ?>";
 } else {
 $$('.related-checkbox').each(function(elem){
 elem.checked = false;
 });
 relatedProductsCheckFlag = false;
 txt.innerHTML="<?php echo $this->__('select all') ?>";
 }
 addRelatedToProduct();
}
function addRelatedToProduct(){
 var checkboxes = $$('.related-checkbox');
 var values = [];
 for(var i=0;i<checkboxes.length;i++){
 if(checkboxes[i].checked) values.push(checkboxes[i].value);
 }
 if($('related-products-field')){
 $('related-products-field').value = values.join(',');
 }
}
//]]>
</script>
<?php endif ?>

und speichern.

Nun sieht es schon übersichtlicher aus.

zubehoer-modern-magento-5

Ohne Änderung in der related.phtml erfogt die Anzeige mit 4 Produkten pro Reihe. Die Anzahl der Reihen erhöht sich automatisch bei mehr Zubehörartikeln.

Möchte man nun mehr als 4 Produkte pro Reihe anzeigen lassen muß einfach nur ein Wert in der related.phtml geändert werden.

<?php $maxtd=4; ?>

Hier einfach den Wert erhöhen oder heruntersetzen.

Zum Beispiel 5 Produkte pro Reihe

<?php $maxtd=5; ?>

zubehoer-modern-magento-6

Nicht vergessen die Caches zu löschen damit die Änderungen auch übernommen werden.

Das war es auch schon – viel Spaß damit.

Stefan Pröhl / robin2160
mageintern.de

related.phtml downloaden (zip)

Ein Gedanke zu „Magento: Zubehör anzeigen in modern Tabs

  1. Hahnefeld

    Sehr hilfreich! Ich konnte sogar zwei Fliegen mit einer Klappe schlagen: einen weiteren Reiter Downloads, denn ich dann auch leicht umsetzen konnte. So schnell wie man Tabs hinzufügen kann, muss man schon fast sagen, dass es unheimlich ist :D!

Kommentare sind geschlossen.