I have 3 tab sections in my product page as below.
| Description | Additional Info | Customer Review |
Right now Description tab is default active tab but i want to set 3rd Customer Review tab as default active tab.
So how can I do this? Any help is appreciated.
Unfortunately, Magento is not providing such feature out of box. However you can make this work without creating a module actually. I will show you one of such method here.
local.xml to update detailed_info child groupsExplanation : You may be wondering now, what the hell is this detailed_info child group ! Well it is a long story, the key point that you need to understand here is, those tabs that you are viewing in product view page in default Magento 1.9.* are actually children of detailed_info group. In short, you can create such block groups and set it with a parent block. Later you can collect those block group from the parent block and do whatever you want with them. In case of product view page, Mage_Catalog_Block_Product_View block holds such a child group whose name is detailed_info (refer : app/design/frontend/rwd/default/layout/catalog.xml) and then use this child group to create the tabs (refer : app/design/frontend/rwd/default/template/catalog/product/view.phtml)
This is the theory and now why we need to update this child group ? Good question. Well, we are now going to set a new property active_tab (using magic methods) in the children blocks of the group detailed_info so that we can later use this to determine, which is the active block (or tab) which need to be activated by default.
File : app/design/frontend/rwd/default/layout/local.xml
<layout>
<catalog_product_view>
<reference name="product.description">
<action method="setActiveTab"><active_tab>0</active_tab></action>
</reference>
<reference name="product.attributes">
<action method="setActiveTab"><active_tab>1</active_tab></action>
</reference>
<reference name="product.reviews">
<action method="setActiveTab"><active_tab>1</active_tab></action>
</reference>
<reference name="product.info">
<block type="core/template" name="product.view.activetab" as="active_tab" template="custom/catalog/product/view/activetab.phtml"></block>
</reference>
</catalog_product_view>
</layout>
Here two points to note.
Point 1: We are updating default child blocks of the group detailed_info with <action method="setActiveTab"><active_tab>0 | 1</active_tab></action>. As you can see, review block holds 1 as its value.
Point 2 : You can also see a new block inclusion inside the layout update. The block which is included in the layout has name product.view.activetab and which is a children of product.info block (block which holds detailed_info blocks group). This block is going to hold the default active tab logic.
Explanation : So we defined a new block via layout update. We need to call our new block manually in view.phtml file so that, our block get used while generating the product view page content. Let us do that.
File : app/design/frontend/rwd/default/template/catalog/product/view.phtml
<div class="product-collateral toggle-content tabs">
<?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info', 'getChildHtml')):?>
<dl id="collateral-tabs" class="collateral-tabs">
<?php foreach ($detailedInfoGroup as $alias => $html):?>
<dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt>
<dd class="tab-container">
<div class="tab-content"><?php echo $html ?></div>
</dd>
<?php endforeach;?>
</dl>
<?php endif; ?>
<? /** calling our block here **/ ?>
<?php echo $this->getChildHtml('active_tab') ?>
</div>
I have shown you where should we call our new block. All the above codes except the part <?php echo $this->getChildHtml('active_tab') ?> is present in view.phtml.
Explanation : Now our block is included in the product view page. It is the time to define our new block template, in order to do the "magic".
File : app/design/frontend/rwd/default/template/custom/catalog/product/view/activetab.phtml
<?php if ($detailedInfoGroup = $this->getParentBlock()->getChildGroup('detailed_info')) : ?>
<?php $count = 0; ?>
<?php foreach ($detailedInfoGroup as $alias => $info) : ?>
<?php echo $count ?>
<?php if ($info->getActiveTab() == 1) : ?>
<script type="text/javascript">
//<![CDATA[
$j(document).ready(function() {
var titleLists = $j('.toggle-content ul > li');
var DTs = $j('.toggle-content dl > dt');
var DDs = $j('.toggle-content dl > dd');
var indexNum = parseInt(<?php echo (int)$count; ?>);
titleLists.removeClass('current');
DTs.removeClass('current');
DDs.removeClass('current');
titleLists.eq(indexNum).addClass('current');
DTs.eq(indexNum).addClass('current');
DDs.eq(indexNum).addClass('current');
});
//]]>
</script>
<?php break; ?>
<?php elseif ($info->getActiveTab() == null) : ?>
<?php $count-- ?>
<?php endif ?>
<?php $count++ ?>
<?php endforeach ?>
<?php endif ?>
What we are doing here is, we will collect the detailed_info group, loop through the children blocks, find the active tab block and then set that tab as active by inserting a <script />. That's it.
Now clear the cache and load the page again. You will see the magic.
Note : Please use my Gist for reference.
You can doing this using xml and magento have managing using before and after topositioning of block type phtml
step1: goto review.xml at app/design/frontend/rwd(yourpackage)/default(yourtemplate)/layout/
Step2: find product layout handler catalog_product_view and then find after="additional" remove that add this
before="-" .
see more layout tag http://www.magentocommerce.com/design_guide/articles/intro-to-layouts#head-anatomy-of-a-layout
