Product Tab and Lightbox

Hello guy!

Now, i give you the solution to integrate the tabs and the modal box in the product detail page:
A) Add The Tabs
1) Please get the ja.script.js from the ja lime package, you ‘ll replace your ja.script.js file by this file.
Or you copy codes:

HTML Code:

/**
	 * ja tabs plugin
	 */
	(function($) { 
				$.fn.jaContentTabs = function (_options){
					return this.each( function() {		
						var container = $( this );
						new $.jaContentTabs().setup( this, container );
					} );
				}
				 $.jaContentTabs = function() { 
					var self = this;
					this.lastTab = null;
					this.nextTab=null;
					this.setup=function( obj, o ){
						var contentTabs = o.children( 'div.ja-tab-content' );
						var nav = o.children( 'ul.ja-tab-navigator' );
						contentTabs.children('div').hide();
						nav.children('li:first').addClass('first').addClass( 'active' );	
						contentTabs.children('div:first').show();
						
						nav.children('li').children('a').click( function() {
							self.lastTab = 	nav.children('li.active').children('a').attr('href');										
							nav.children('li.active').removeClass('active')											
							$(this).parent().addClass('active');
							var currentTab = $(this).attr('href'); 
							self.tabActive( contentTabs, currentTab );		
							return false;
						});	
					};
					this.tabActive=function( contentTabs,  currentTab ){
						if(  this.lastTab != currentTab ){
							contentTabs.children( this.lastTab ).hide();	
						}
						contentTabs.children( currentTab ).show();
					};
				};
			})(jQuery);

and add them into the ja.script.js.

2) Add those css codes in to the layout.css file:

HTML Code:

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

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;
}

Note: you get "v-line.gif" from the ja lime template, put it into the skin/frontend/default/jm_lead/images folder.

3) replace source codes of the \app\design\frontend\default\jm_limetemplate\cata log\product\view.phtml file by those codes:

PHP 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_default

 * @package    Mage

 * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)

 * @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)

 */

<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-tabitem-additional"><?php echo $this->__('Additional Information') ?></a></li>

      <?php endif; ?>

      <?php if($this->getChildHtml('upsell_products')): ?>

           <li><a href="#ja-tabitem-upsell"><?php echo $this->__('Upsell Products') ?></a></li>

      <?php endif; ?>

      <?php if($this->getChildHtml('product_additional_data')): ?>

           <li><a href="#ja-tabitem-tags"><?php echo $this->__('Product Tags') ?></a></li>

      <?php endif; ?>

      <?php if($this->getChildHtml('product_reviews')): ?>

           <li><a href="#ja-tabitem-reviews"><?php echo $this->__('Product Reviews') ?></a></li>

      <?php endif; ?>    

      <?php if($this->getChildHtml('review_form')): ?>

           <li><a href="#ja-tabitem-reviewform"><?php echo $this->__('Write Your Own Review') ?></a></li>

      <?php endif; ?>

    </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($this->getChildHtml('upsell_products')): ?>

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

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

                </div>

                <?php endif;?>

                

                <?php if($this->getChildHtml('product_additional_data')): ?>

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

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

                </div>

                <?php endif;?>

                

                <?php if($this->getChildHtml('product_reviews')): ?>

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

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

                </div>

                <?php endif;?>

                

                <?php if($this->getChildHtml('review_form')): ?>

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

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

                </div>

                <?php endif;?>

                

    </div>

</div>

3) You open the file: \app\design\frontend\default\defaulttemplatetag\ list.phtml and remove:

PHP Code:

<div class="head">

    <h4><?php echo $this->__('Product Tags') ?></h4>

</div>

4) Open the file: \app\design\frontend\default\jm_lead\layout\catalo g.xml and try to find codes at line 184

HTML Code:

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

=> replace

HTML Code:

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

Hello guy!

B) Add the modal box:

1) you copy file jquery.js from the jm lime package, you upgrade your jquery.js in the \skin\frontend\default\jm_lead\js\jquery folder.
2) Create a folder inside the skin\frontend\default\jm_lead\js\jquery\plugins folder, named is "colorbox". You get jquery.colorbox.js and put this file into the colorbox foder.
3) You get colorbox.css from the jm lime package and put this into the \skin\frontend\default\jm_lead\css folder

4) add these codes into the app\design\frontend\default\jm_leadtemplate\page\ html\head.phtml file:

PHP Code:

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/jquery/jquery.dimensions.js') ?>"></script>
<link rel="stylesheet" href="<?php echo $this->getSkinUrl('css/colorbox.css') ?>" type="text/css" />

5) create a file in \app\design\frontend\default\jm_leadtemplate\cata log\product\view folder, named is media.phtml. And put these codes into the file:

PHP 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_default
 * @package    Mage
 * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

<?php else: ?>
    <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($_product->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image')
    ?>
<?php endif; ?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <h4><?php echo $this->__('More Views') ?></h4>
    <ul>
    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>
            <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="ja-colorbox" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>">
                <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
        </li>
    <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>


Good luck

Attachment 6779

Put these images into the \skin\frontend\default\jm_lead\images\ folder