Tab-nested view in product description

I keep getting this in my email.

Your forum post Tab-nested view in product description has been alerted to our support team, a reply will be posted in the next 24 hours.
Please be patient, it may take longer in weeken & during holidays

Regards,
JoomlArt Customer Services

But nothing is happening in terms of anyone looking at this post. Anyone out there?

Dear florinel. I’m so sorry for the late reply.

To show the Tab-nested view in product description, pls follow the instructions:
1. Extract ja.script.zip then copy ja.script.js to skin\frontend\default\jm_fabian\js
2. Extract view.zip then copy view.phtml to app\design\frontend\default\jm_fabiantemplate\cat alog\product
3. Open skin\frontend\default\jm_fabian\csstheme.css

then copy to at very end

Code:

/*PRODUCT TABS */
#ja-tab-products {
	margin: 0 -15px;
}

ul.ja-tab-navigator {
	background: url(../images/v-line.gif) repeat-x left bottom #F2F2F2 ;
	border: 1px solid #E0E0E0;
	border-bottom: none;
}

ul.ja-tab-navigator li{
	float: left;
	line-height: 30px;
	padding: 0 10px;
}

ul.ja-tab-navigator li.first {
	margin-left: 15px;
}

ul.ja-tab-navigator li.active {
	background: #FFF;
	border-left: 1px solid #E0E0E0;
	border-right: 1px solid #E0E0E0;
}

.ja-tab-content {
	padding: 15px;
	background: #FFF;
}

ul.ja-tab-navigator li a{
	text-decoration: none;
	text-transform: uppercase;
	color: #353535;
	font-weight: bold;
}

ul.ja-tab-navigator li a:hover,
ul.ja-tab-navigator li a:focus,
ul.ja-tab-navigator li a:active,
ul.ja-tab-navigator li.active a {
	color: #990000;
}

.ja-tabitem-producttags h5 {
	margin-top: 0;
}

Let’s me know if still problem.
Wish you success.

Thanks so much. Followed instructions and I do show tabs for Description and product tags. How do I add more tabs there?

Hi florinel.

In JM Fabian, product detail page can show 6 tabs:
1. Product Description
2. Additional Information
3. Upsell Products
4. Product Tags
5. Product Reviews
6. Write Your Own Review
pls see app\design\frontend\default\jm_fabiantemplate\cat alog\product\view.phtml for detail.

These tabs will display depending on configurations and pages

You can also add more tabs by manual.

Do I need a new attribute setup if I want to add a new tab?

For example, I want a Warranty tab, so do I modify view.phtml to get that in? Do I need to setup what displays in that tab elsewhere? Sorry, a little new to Magento, but I’d really appreciate some help with these. Thanks.

Yes, you need to modify view.phtml if you want adding a tab.

Below is content of app\design\frontend\default\jm_morganitetemplate\ catalog\product\view.phtml in JM Morganite

Code:

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2009 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/**
 * Product view template
 *
 * @see Mage_Catalog_Block_Product_View
 * @see Mage_Review_Block_Product_View
 */
?>
<?php
    $_helper = $this->helper('catalog/output');
    $_product = $this->getProduct()
?>
<script type="text/javascript">
    var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
    if( jQuery ){
	    jQuery( "#ja-tab-products" ).ready( function($) {
	    	$( "#ja-tab-products" ).jaContentTabs();							  
	    } );
    }
</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-info-box">
    <div class="product-essential">
    <form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>

        <div class="product-img-box">
            <?php echo $this->getChildHtml('media') ?>
        </div>
        
        <div class="no-display">
            <input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
            <input type="hidden" name="related_product" id="related-products-field" value="" />
        </div>

        <div class="product-shop">
            <h3 class="product-name">
                <?php echo $_helper->productAttribute($_product, $this->htmlEscape($_product->getName()), 'name') ?>
            </h3>

            <?php if ($this->canEmailToFriend()): ?>
                <a class="link-mail" href="<?php echo $this->helper('catalog/product')->getEmailToFriendUrl($_product) ?>"><?php echo $this->__('Email to a Friend') ?></a>
            <?php endif; ?>

            <?php echo $this->getReviewsSummaryHtml($_product, false, true)?>

            <fieldset class="no-display">
              <input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
              <input type="hidden" name="related_product" id="related-products-field" value="" />
            </fieldset>

            <?php echo $this->getChildHtml('alert_urls') ?>
            <?php echo $this->getChildHtml('product_type_data') ?>
            <?php echo $this->getTierPriceHtml() ?>

            <?php if (!$this->hasOptions()):?>
                <div class="add-to-holder">
                    <?php if($_product->isSaleable()): ?>
                        <?php echo $this->getChildHtml('addtocart') ?>
                        <?php if( $this->helper('wishlist')->isAllow() || $_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product)): ?>
                            <span class="add-or"><?php echo $this->__('OR') ?></span>
                        <?php endif; ?>
                    <?php endif; ?>
                    <?php echo $this->getChildHtml('addto') ?>
                </div>
            <?php else:?>
                <?php echo $this->getChildHtml('addto') ?>
            <?php endif; ?>

            <div class="divider"></div>

            <?php if ($_product->getShortDescription()):?>
                <div class="short-description">
                    <h2><?php echo $this->__('Quick Overview') ?></h2>
                    <div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
                </div>
            <?php endif;?>

            <?php echo $this->getChildHtml('other');?>

            <?php if ($_product->isSaleable() && $this->hasOptions()):?>
                <?php echo $this->getChildChildHtml('container1', '', true, true) ?>
            <?php endif;?>

        </div>

        <div class="clear"></div>
        <?php if ($_product->isSaleable() && $this->hasOptions()):?>
            <?php echo $this->getChildChildHtml('container2', '', true, true) ?>
        <?php endif;?>
    </form>
    <script type="text/javascript">
        //<![CDATA[
            var productAddToCartForm = new VarienForm('product_addtocart_form');
            productAddToCartForm.submit = function(){
                    if (this.validator.validate()) {
                            this.form.submit();
                    }
            }.bind(productAddToCartForm);
        //]]>
    </script>
    </div>
</div>

<div id="ja-tab-products" class="product-collateral">
	<ul class="ja-tab-navigator clearfix">
		 	<?php if ($_description = $this->getChildHtml('description')):?>
    		<li><a href="#ja-tab-decription"><?php echo $this->__('Product Description') ?></a></li>
    	<?php endif; ?>
    	<?php if ($_additional = $this->getChildHtml('additional')):?>
        <li><a href="#ja-tab-additional"><?php echo $this->__('Additional Information') ?></a></li>
      <?php endif; ?>
      <?php if($upsell_products = $this->getChildHtml('upsell_products')): ?>
       	<li><a href="#ja-tabitem-upsell"><?php echo $this->__('Upsell Products') ?></a></li>
      <?php endif; ?>
      <?php if($product_additional_data = $this->getChildHtml('product_additional_data')): ?>
       	<li><a href="#ja-tabitem-tags"><?php echo $this->__('Product Tags') ?></a></li>
      <?php endif; ?>
      <?php if($product_reviews = $this->getChildHtml('product_reviews')): ?>
       	<li><a href="#ja-tabitem-reviews"><?php echo $this->__('Product Reviews') ?></a></li>
      <?php endif; ?>    
      <?php if($review_form = $this->getChildHtml('review_form')): ?>
       	<li><a href="#ja-tabitem-reviewform"><?php echo $this->__('Write Your Own Review') ?></a></li>
      <?php endif; ?>
	    <li><a href="#ja-tabitem-warranty"><?php echo $this->__('Warranty') ?></a></li>
    </ul>
    <div class="ja-tab-content">
  	   <?php if ( $_description ):?>
	    	<div id="ja-tab-decription">
	            <div class="collateral-box">
	                <?php echo $_description ?>
	            </div>
				</div>
				<?php endif;?>
				
		 		<?php if ( $_additional ) : ?>
	    	<div id="ja-tab-additional">
	            <div class="collateral-box">
	                <?php echo $_additional ?>
	            </div>
				</div>
				<?php endif;?>
				
				<?php if( $upsell_products ): ?>
      			  <div id="ja-tabitem-upsell">
			 		<?php echo $upsell_products; ?>
				</div>
				<?php endif;?>
				
				<?php if( $product_additional_data ): ?>
				<div id="ja-tabitem-tags">
					<?php echo $product_additional_data; ?>
				</div>
				<?php endif;?>
				
				<?php if($product_reviews): ?>
				<div id="ja-tabitem-reviews">
					<?php echo $product_reviews ?>
				</div>
				<?php endif;?>
				
				<?php if($review_form): ?>
				<div id="ja-tabitem-reviewform">
					<?php echo $review_form; ?>
				</div>
				<?php endif;?>
				
				<div id="ja-tabitem-warranty">
					<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('about-us')->toHtml() ?>
				</div>
				
    </div>
</div>

Look at red lines carefully. about-us is identifier which defined in CMS->Static Blocks

1. How do I modify code if Warranty is an attribute (Cosidering your above example).

2. If I want related products in place of upsells, what should I do

3. Can I modify title of the tab ie "Upsell products" to "Installation Guide"

Hi florinel.

In JM Fabian, product detail page can show 6 tabs:
1. Product Description
2. Additional Information
3. Upsell Products
4. Product Tags
5. Product Reviews
6. Write Your Own Review
pls see app\design\frontend\default\jm_fabiantemplate\cat alog\product\view.phtml for detail.

These tabs will display depending on configurations and pages

You can also add more tabs by manual.

I have tried to do for Morganite but am not able to see Upsell, Product reviews, Write your own review. But I was able to get "Warrnty" as explained by you. How do I get Upsell, Product reviews, Write your own review.

Dear joomlagt.
To show Upsell tab in product detail pages you need to set Upsell Products for those products, you can watch this video for how to setup http://www.magentocommerce.com/media…s/upsells/view

To show Product reviews & Write your own review you try to check in app\design\frontend\default\jm_morganite\layout\ca talog.xml file, search below code:

Code:

<block type="review/form" name="product.review.form" as="review_form" />
<block type="review/product_view_list" name="product.info.product_additional_data"  
as="product_reviews" template="review/product/view/list.phtml" />

If there isn’t this code, you will have to add it at very above of

Code:

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

I want to show related products in place of Upsells. What modifications are required?

1. Open app\design\frontend\default\jm_fabian\layout\catal og.xml file and add this code

Code:

<block type="catalog/product_list_related" name="product.info.related" as="related_products" template="catalog/product/list/related.phtml">
	<action method="setColumnCount"><columns>4</columns></action>
	<action method="setItemLimit"><type>upsell</type><limit>4</limit></action>
</block>

at very below of

Code:

<block type="catalog/product_list_upsell" name="product.info.upsell" as="upsell_products" template="catalog/product/list/upsell.phtml">
	<action method="setColumnCount"><columns>4</columns></action>
	<action method="setItemLimit"><type>upsell</type><limit>4</limit></action>
</block>

2. Copy app\design\frontend\base\defaulttemplate\catalog\ product\view.phtml file to app\design\frontend\default\jm_fabiantemplate\cat alog\product folder

3. Open app\design\frontend\default\jm_fabiantemplate\cat alog\product\view.phtml file and add this code

PHP Code:

<?php echo $this->getChildHtml('related_products') ?>



Will the same logic hold true for Morganite template. I tried doing it by adding the codes as mentioned by you.
But it did not work. Please find the complete view.phtml file below and see the line marked in red:

/**
* Product view template
*
* @see Mage_Catalog_Block_Product_View
* @see Mage_Review_Block_Product_View
*/
?>
<?php
$_helper = $this->helper(‘catalog/output’);
$_product = $this->getProduct()
?>
<script type="text/javascript">
var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
if( jQuery ){
jQuery( "#ja-tab-products" ).ready( function($) {
$( "#ja-tab-products" ).jaContentTabs();
} );
}
</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-info-box">
<div class="product-essential">
<form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>

<div class="product-img-box">
<?php echo $this->getChildHtml(‘media’) ?>
</div>

<div class="no-display">
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
</div>

<div class="product-shop">
<h3 class="product-name">
<?php echo $_helper->productAttribute($_product, $this->htmlEscape($_product->getName()), ‘name’) ?>
</h3>

<?php if ($this->canEmailToFriend()): ?>
<a class="link-mail" href="<?php echo $this->helper(‘catalog/product’)->getEmailToFriendUrl($_product) ?>"><?php echo $this->__(‘Email to a Friend’) ?></a>
<?php endif; ?>

<?php echo $this->getReviewsSummaryHtml($_product, false, true)?>

<fieldset class="no-display">
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
</fieldset>

<?php echo $this->getChildHtml(‘alert_urls’) ?>
<?php echo $this->getChildHtml(‘product_type_data’) ?>
<?php echo $this->getTierPriceHtml() ?>

<?php if (!$this->hasOptions()):?>
<div class="add-to-holder">
<?php if($_product->isSaleable()): ?>
<?php echo $this->getChildHtml(‘addtocart’) ?>
<?php if( $this->helper(‘wishlist’)->isAllow() || $_compareUrl=$this->helper(‘catalog/product_compare’)->getAddUrl($_product)): ?>
<span class="add-or"><?php echo $this->__(‘OR’) ?></span>
<?php endif; ?>
<?php endif; ?>
<?php echo $this->getChildHtml(‘addto’) ?>
</div>
<?php else:?>
<?php echo $this->getChildHtml(‘addto’) ?>
<?php endif; ?>

<div class="divider"></div>

<?php if ($_product->getShortDescription()):?>
<div class="short-description">
<h2><?php echo $this->__(‘Quick Overview’) ?></h2>
<div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), ‘short_description’) ?></div>
</div>
<?php endif;?>

<?php echo $this->getChildHtml(‘other’);?>

<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml(‘container1’, ”, true, true) ?>
<?php endif;?>

</div>

<div class="clear"></div>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml(‘container2’, ”, true, true) ?>
<?php endif;?>
</form>
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm(‘product_addtocart_form’);
productAddToCartForm.submit = function(){
if (this.validator.validate()) {
this.form.submit();
}
}.bind(productAddToCartForm);
//]]>
</script>
</div>
</div>

<div id="ja-tab-products" class="product-collateral">
<ul class="ja-tab-navigator clearfix">
<?php if ($_description = $this->getChildHtml(‘description’)):?>
<li><a href="#ja-tab-decription"><?php echo $this->__(‘Product Description’) ?></a></li>
<?php endif; ?>
<?php if ($_additional = $this->getChildHtml(‘additional’)):?>
<li><a href="#ja-tab-additional"><?php echo $this->__(‘Additional Information’) ?></a></li>
<?php endif; ?>
<?php if($upsell_products = $this->getChildHtml(‘upsell_products’)): ?>
<li><a href="#ja-tabitem-upsell"><?php echo $this->__(‘Upsell Products’) ?></a></li>
<?php endif; ?>
<?php if($product_additional_data = $this->getChildHtml(‘product_additional_data’)): ?>
<li><a href="#ja-tabitem-tags"><?php echo $this->__(‘Product Tags’) ?></a></li>
<?php endif; ?>
<?php if($product_reviews = $this->getChildHtml(‘product_reviews’)): ?>
<li><a href="#ja-tabitem-reviews"><?php echo $this->__(‘Product Reviews’) ?></a></li>
<?php endif; ?>
<?php if($review_form = $this->getChildHtml(‘review_form’)): ?>
<li><a href="#ja-tabitem-reviewform"><?php echo $this->__(‘Write Your Own Review’) ?></a></li>
<?php endif; ?>
<li><a href="#ja-tabitem-warranty"><?php echo $this->__(‘Warranty’) ?></a></li>
</ul>
<div class="ja-tab-content">
<?php if ( $_description ):?>
<div id="ja-tab-decription">
<div class="collateral-box">
<?php echo $_description ?>
</div>
</div>
<?php endif;?>

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

<?php if( $upsell_products ): ?>
<div id="ja-tabitem-upsell">
<?php echo $upsell_products; ?>
</div>
<?php endif;?>

<?php if( $product_additional_data ): ?>
<div id="ja-tabitem-tags">
<?php echo $product_additional_data; ?>
</div>
<?php endif;?>

<?php if($product_reviews): ?>
<div id="ja-tabitem-reviews">
<?php echo $product_reviews ?>
</div>
<?php endif;?>

<?php if($review_form): ?>
<div id="ja-tabitem-reviewform">
<?php echo $review_form; ?>
</div>
<?php endif;?>
<div id="ja-tabitem-warranty">
<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘warranty’)->toHtml() ?>
</div>
<?php echo $this->getChildHtml(‘related_products’) ?>
</div>
</div>

Did you complete step one?

1. Open app\design\frontend\default\jm_fabian\layout\catal og.xml file and add this code
Code:

<block type="catalog/product_list_related" name="product.info.related" as="related_products" template="catalog/product/list/related.phtml">
<action method="setColumnCount"><columns>4</columns></action>
<action method="setItemLimit"><type>upsell</type><limit>4</limit></action>
</block>

at very below
Code:

<block type="catalog/product_list_upsell" name="product.info.upsell" as="upsell_products" template="catalog/product/list/upsell.phtml">
<action method="setColumnCount"><columns>4</columns></action>
<action method="setItemLimit"><type>upsell</type><limit>4</limit></action>
</block>

You have to add

PHP Code:

<?php echo $this->getChildHtml('related_products') ?>


in the middle

Code:

<div id="ja-tabitem-warranty">

</div>

Below is correct.

Code:

<div id="ja-tabitem-warranty">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('warranty')->toHtml() ?>
<?php echo $this->getChildHtml('related_products') ?>
</div>

Pls try again. If still problem, send me link of your site.

Did you add Related Products?
I need to add in Admin -> Catalog -> Manage Product, click the product which you want to add Related Products. Click Related Products tab, filter, select and Save.
Don’t forget delete Cache.

Yes I have added related products for one of the product -- Dongles by Type/Jaf/Jaf Box.
You will find the product at below url:

http://mobilespares.in/index.php/unl…s/jaf-box.html