28 November

Adding your own product tab in our framework’s themes

: 0 Comments
aa

Hi there!, in addition to our tutorial for “creating your own product tab“, we want to complement your knowledge with this quick #Magento tutorial for adding your own tabs in product-view pages of our framework’s themes.

The procedure is basically the same like any other #Magento theme, however the code you’ll add in template/catalog/product/view.phtml file will be a bit different:

1) Open up template/catalog/product/view.phtml  Take a look at this lines:

<ul>
<li><a href=”#tabs-1″><?php echo $this->__(‘Product Details’) ?></a></li>
<?php //if($_additional = $this->getAdditionalData()): ?><li><a href=”#tabs-2″><?php echo $this->__(‘Adicional Information’) ?></a></li><?php //endif; ?>
<?php if($enable_upsell) : ?>
<li><a href=”#tabs-3″><?php echo $this->__(‘Up-sells’) ?></a></li>
<?php endif; ?>
<li><a href=”#tabs-4″><?php echo $this->__(‘Tags’) ?></a></li>
<li><a href=”#tabs-5″><?php echo $this->__(‘Reviews’) ?></a></li>
</ul>

You set the tab title there, eg:

<li><a href=”#tabs-5″><?php echo $this->__(‘My Tab’) ?></a></li>

Add the line into the <ul> list, like:

<ul>
<li><a href=”#tabs-1″><?php echo $this->__(‘Product Details’) ?></a></li>
<?php //if($_additional = $this->getAdditionalData()): ?><li><a href=”#tabs-2″><?php echo $this->__(‘Adicional Information’) ?></a></li><?php //endif; ?>
<?php if($enable_upsell) : ?>
<li><a href=”#tabs-3″><?php echo $this->__(‘Up-sells’) ?></a></li>
<?php endif; ?>
<li><a href=”#tabs-4″><?php echo $this->__(‘Tags’) ?></a></li>
<li><a href=”#tabs-5″><?php echo $this->__(‘Reviews’) ?></a></li>
<li><a href=”#tabs-6″><?php echo $this->__(‘My Tab’) ?></a></li>
</ul>

2) In this same file, you’ll see this lines at the bottom:
<?php //if($_additional = $this->getAdditionalData()): ?>
<div id=”tabs-2″> <!– Adicional Information –>
<?php echo $this->getChildHtml(‘additional’) ?>
</div>
<?php //endif; ?>

<?php if($enable_upsell) : ?>
<div id=”tabs-3″>
<?php echo $this->getChildHtml(‘upsell_products’); ?>
</div>
<?php endif; ?>
<div id=”tabs-4″> <!– Tags –>
<?php echo $this->getChildHtml(‘tags_list’) ?>
</div>
<div id=”tabs-5″> <!– Reviews –>
<?php echo $this->getChildHtml(‘custom.review’) ?>
</div>

You have to add your tab call here too, eg:

<div id=”tabs-6″>
<?php echo $this->getChildHtml(‘mytab’) ?>
</div>

So:

<?php //if($_additional = $this->getAdditionalData()): ?>
<div id=”tabs-2″> <!– Adicional Information –>
<?php echo $this->getChildHtml(‘additional’) ?>
</div>
<?php //endif; ?>
<?php if($enable_upsell) : ?>
<div id=”tabs-3″>
<?php echo $this->getChildHtml(‘upsell_products’); ?>
</div>
<?php endif; ?>
<div id=”tabs-4″> <!– Tags –>
<?php echo $this->getChildHtml(‘tags_list’) ?>
</div>
<div id=”tabs-5″> <!– Reviews –>
<?php echo $this->getChildHtml(‘custom.review’) ?>
</div>
                <div id=”tabs-6″>
                    <?php echo $this->getChildHtml(‘mytab’) ?>
                </div>

Why getChildHtml(‘mytab’) ?, because ‘mytab’ is how you’ll call the tab .phtml file in catalog.xml We’ll see this next:

3)  Now open up layout/catalog.xml file, under <!–Product view–> section find this line:

<block type=”catalog/product_view” name=”product.info” template=”catalog/product/view.phtml”>

Then add the line to call your tab .phtml file (where the content of the tab will reside) like this:

<block type=”catalog/product_view” name=”mytab” as=”mytab” template=”catalog/product/view/mytab.phtml” />

4) Navigate to:  template/catalog/product/view directory, then add mytab.phtml file there.

5) Add the content in mytab.phtml you want to display in the tab. Save. Refresh cache.

That’s it! ;)

 

Back to Top