Product – Adding Custom Tabs to Customized Theme

customproductproduct-attributetabs

I am unable to add custom tabs to my website and I am looking for a bit of help on how to proceed.
The theme controls the tabs within it's own file /template/catalog/product/view/tabs.php so the normal ways seem not to work with it. Can anyone give me a helping hand?

The important part seems to be

    <ul class="meigee-tabs">
        <?php foreach ($this->getTabs() as $_index => $_tab): ?>
            <?php if($this->getChildHtml($_tab['alias'])): ?>
                <li id="product_tabs_<?php echo $_tab['alias'] ?>" class="<?php echo !$_index?' active first':''?>"><a href="#"><?php echo $_tab['title']?></a></li>
            <?php endif; ?>
        <?php endforeach; ?>
    </ul>

    <?php foreach ($this->getTabs() as $_index => $_tab): ?>
        <?php if($this->getChildHtml($_tab['alias'])): ?>
            <div class="meigee-tabs-content" id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
        <?php endif; ?>
    <?php endforeach; ?>

    <?php foreach ($custom_tabs as $key) {
if(!empty($key)):
?>
<div class="meigee-tabs-content" id="<?php echo $key; ?>_contents"><?php echo $this->getLayout()->createBlock('cms/block')->setBlockId(trim($key))->toHtml() ?></div>
<?php endif; } ?>

If I was to add a tab to this with the tab header "Manufacturer" and the content pulled a CMS block <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId($manu)->toHtml() ?>

My plan is define manufacturer attribute as 

<?php $manufacturer = $_product->getAttributeText('manufacturer'); ?>
    <?php $manu = strtolower("manufacturer-" . $manufacturer) ;?>

This is so I can then use it to pull an image and static CMS without issues. I just cannot get by the first hurdle…also when I place in <?php $manufacturer = $_product->getAttributeText('manufacturer'); ?> It gives and error and cuts off the footer.

Best Answer

This is the important part that appear in the given code part.

<?php foreach ($this->getTabs() as $_index => $_tab): ?>
    <?php if($this->getChildHtml($_tab['alias'])): ?>
        <div class="meigee-tabs-content" id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
    <?php endif; ?>
<?php endforeach; ?>

These are my findings. Template gets all the tabs by requesting $this->getTabs() which will return an array that holds information about tabs. My guess is all those tabs are configured through layout XML files. Any ways this method provide an array some what looks like this.

array(
    'index1' => array(
        'alias' => 'alias_1',
        'name'  =>  'name_1',  //not sure
        'title' => 'title_1'
        .....
    ),
    'index2' => array(
        'alias' => 'alias_2',
        'name'  =>  'name_2',  //not sure
        'title' => 'title_2'
        .....
    ),
    .....
)

So you have two options available

1. Inject your tab through Layout Update

You need to inject your block as other tabs included through layout XML. For this you need to find out which block that holds this template. You can see that tab blocks are included as its child block there. You need to put your custom block in the similar way default tabs are included. This will be the cleanest way to do that. But harder one

2. Forcefully inject your block via template file itself

This will be the easiest way to do this. For this you can use this concept.

<?php

//get tab array
$tabs = $this->getTabs();

//create an array for your tab
$my_tab = array(
            'my_tab' => array(
                'alias' => $this->getLayout()->createBlock('cms/block')->setBlockId($manu)->toHtml(),
                'title' => 'Manufacturer'
          ));

//inject your block to tab array
array_merge($tabs, $my_tab);
?>

<!-- need some modification here -->
<ul class="meigee-tabs">
    <?php foreach ($tabs as $_index => $_tab): ?>
        <?php if($_index != 'my_tab') : ?>
            <?php if($this->getChildHtml($_tab['alias'])): ?>
                <li id="product_tabs_<?php echo $_tab['alias'] ?>" class="<?php echo !$_index?' active first':''?>"><a href="#"><?php echo $_tab['title']?></a></li>
            <?php endif; ?>
        <?php else : ?>
            <li id="product_tabs_manufacturer" class="<?php echo !$_index?' active first':''?>"><a href="#"><?php echo $_tab['title']?></a></li>
        <?php endif; ?>
    <?php endforeach; ?>
</ul>

<?php foreach ($tabs as $_index => $_tab): ?>
    <?php if($_index != 'my_tab') : ?>
        <?php if($this->getChildHtml($_tab['alias'])): ?>
            <div class="meigee-tabs-content" id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
        <?php endif; ?>
        <?php else : ?>
            <div class="meigee-tabs-content" id="product_tabs_manufacturer_contents"><?php echo $_tab['alias'] ?></div>
        <?php endif; ?>
<?php endforeach; ?>

First we retrieve tab array and inject my own tab array as element in the parent tab array. Since we put the alias with html of cms block(where as all other blocks holds a string for this alias), we cannot use default way of rendering the name and content of other blocks. So we separate our custom array entry with an if statement logic and changed those part according to our need(you can see those changes above).

Hope you get an idea how to do that. Let me know the result.

Related Topic