How can I add more tabs in products page.

I need to add more tabs in product page for template JM_ores, and we will put some text and picture in tab content area, it is same for all products, does someone tell me how I should do?

thanks in advanced.

4 answers

Profile photo of Sherlock 0.00 $tone December 11, 2012
Public

Hi rogerzhou,

You can put your text/content into a static block and then add that block as a new product tab, to add a static block to the product tabs you can try as following
Assume you have a static block whose id is electronics-landing and you wish to add it to the tabs, open the layout file of
app\design\frontend\default\jm_ores\layout\catalog .xml you look for this block tag

HTML Code:

  <block type="catalog/product_view_additional" name="product.info.additional" as="product_additional_data" />

and adding right below it this tag

HTML Code:

 <block type="cms/block" as="custom" name="landing">
		                <action method="setBlockId"><block_id>electronics-landing</block_id></action>
	      </block>

Then you open the template file of app\design\frontend\default\jm_orestemplate\catal og\product\view.phtml look for this

PHP Code:

  <?php if ($_description $this->getChildHtml('description')):?>
            <li><a href="#ja-tab-decription"><?php echo $this->__('Product Description'?></a></li>
        <?php endif; ?>


add right below it this code

PHP Code:

  <?php if ($_custom $this->getChildHtml('custom')):?>
            <li><a href="#ja-tab-custom"><?php echo $this->__('Product custom'?></a></li>
        <?php endif; ?>


And then look for this code

PHP Code:

  <?php if ( $_description ):?>
            <div id="ja-tab-decription">
                <div class="collateral-box">
                    <?php echo $_description ?>
                </div>
                </div>
                <?php endif;?>


adding right below it this code

PHP Code:

 <?php     if ( $_custom ):?>
                <div id="ja-tab-custom">
                <div class="collateral-box">
                    <?php echo $_custom ?>
                </div>
                </div>
             <?php endif;?>


You now have a new product tab whose title is Product custom that display content from the Electronics Landing static block.

Hope you got the ideal !

#1
Profile photo of Serhiy Korohoda 0.00 $tone September 18, 2013
Public

Advanced dynamic taps for product using product attribute. This maybe useful for anyone requiring to display additional product information in a tab dynamically. Say you sell books and you want to include additional information "About Author" into the tab. This can easily be done as as per Sherlock’s guide. However, if you want to display tabs and information therein dynamically then this might be a problem because creating blocks for each additional information is not the best solution as it takes time and it is not dynamic as you can not hide / show specific blocks for related products.

My solution was to create a product attribute and use it to display it in tab.

Here are the steps to do it and we assume that our item is "Book" and additional information for tab is "About Author".

1. Create Attribute (Catalog -> Attributes -> Manage Attributes)
a) Attribute Code: "about_author" (without the "").
b) Choose "Text Area" for Catalog Input Type for Store Owner and
c) "yes" for Enable WYSIWYG in the Properties tab
d) Give any title (my case is "About Author") for admin and default store view in the Manage Label / Options tabs and save it.
Leave the rest of the options as default or as you require.

2. Assign new attribute, in our case "about_author", to attribute sets (Catalog -> Attributes -> Manage Attributes Sets).
a) Choose Attribute Set
b) Drop "about_author" from Unassigned Attributes into Groups and save it. (I personally dropped the attribute into General area group but you can put it anywhere).

3. As soon as you open your product you will notice a newly created text area, in my case it is called "About Author".
a) Fill in with your content as required. Notice, in Step 1, we chose to display WYSIWYG -- nice feature if you want to style your text!
b) Save product and refresh cache.

4(last step).
Open file view.phtml (app/design/frontend/default/jm_crafts/template/catalog/product) and edit as follows:
a) Find these lines:
<?php foreach ($this->getChildGroup(‘detailed_info’, ‘getChildHtml’) as $alias => $html):?>
<li><a href="<?php echo "#ja-tab-{$alias}"?>"><?php echo $alias; ?></a></li>
<?php endforeach;?>

Place this right after the above statement:
<?php if ($_custom = $options=$_product->getResource()->getAttribute(‘about_author’)->getFrontend()->getValue($_product)):?>
<li><a href="#ja-tab-custom"><?php echo $this->__(‘About Author’) ?></a></li>
<?php endif; ?>

b). Find these lines:
<div class="ja-tab-content">
<?php foreach ($this->getChildGroup(‘detailed_info’, ‘getChildHtml’) as $alias => $html):?>
<div id="<?php echo "ja-tab-{$alias}"?>">
<div class="box-collateral <?php echo "box-{$alias}"?>">
<?php echo $html; ?>
</div>
</div>
<?php endforeach;?>

Place the following right after the above statement:

<?php if ( $_custom ):?>
<div id="ja-tab-custom">
<div class="box-collateral <?php echo "box-{$alias}"?>">
<?php echo $_custom ?>
</div>
</div>
<?php endif;?>

If i wanted to ad another tab, say "About The Book" i’d also create an attribute "about_book" and place the following statements:

<?php if ($_custom_2 = $options=$_product->getResource()->getAttribute(‘about_book’)->getFrontend()->getValue($_product)):?>
<li><a href="#ja-tab-custom-2"><?php echo $this->__(‘About The Book’) ?></a></li>
<?php endif; ?>

and then:

<?php if ( $_custom_2 ):?>
<div id="ja-tab-custom-2">
<div class="box-collateral <?php echo "box-{$alias}"?>">
<?php echo $_custom_2 ?>
</div>
</div>
<?php endif;?>

Note, you can add multiple tabs by inserting more statements. Just make sure to declare it as $_custom_2 / $_custom_3 as well as the class="box-collateral-2" / class="box-collateral-3" and so on.
c). Save the file and clear cache.

Hope you find it useful!

#3

Please login or Register to Submit Answer

Written By

Comments