Call-back icon  Sales: Call 877.832.5289 (N America)|310.295.4144 (International)

Magento

eCommerce Software for Online Growth

Magento Forum

   
Adapt modern template products tabs to default theme
 
pldtm
Member
 
Avatar
Total Posts:  60
Joined:  2007-09-04
Bordeaux, France
 

HI,

I’m trying to adapt the products tabs from the modern template to the default template.

i compared catalog.xml and made the changes needed.
Then i added tabs.phtml in the default theme, added the tabs css in boxe.css.

The end of view.phtml as been changed .

But it doesn’t work.The tags tab has disappeared, and additional ... is under description.

Please, if someone could tell me if catalog.xml, tabs.phtml, view.phml and boxe.css are the only files to change.

thanks for help

phil

Image Attachments
Capturer2.JPG
 Signature 

PL_DTM cool smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
pldtm
Member
 
Avatar
Total Posts:  60
Joined:  2007-09-04
Bordeaux, France
 

noone tried this?

 Signature 

PL_DTM cool smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
hyteckit
Sr. Member
 
Avatar
Total Posts:  145
Joined:  2008-04-01
Los Angeles, CA
 
pldtm - 05 August 2008 12:52 AM

noone tried this?

I plan to. It’s on my list.

 Signature 

Current Project:
GeekGears.com - Accessories for your iPod, iPhone, MP3 Players, Cell Phone, PDA, GPS Devices, Digital Camera, and more.
Extension: Product Gallery Importer, Enhanced Search

 
Magento Community Magento Community
Magento Community
Magento Community
 
chinesedream
Guru
 
Total Posts:  732
Joined:  2007-08-31
San Francisco, CA
 

if you don’t mind the jQuery version, I can post my code smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
pldtm
Member
 
Avatar
Total Posts:  60
Joined:  2007-09-04
Bordeaux, France
 

@chinesedream

to this point, i don’t mind jquery version. I’d like to see your code.
Is it an adaptation from modern theme or a complete rewrite?

thanks to help me

phil

 Signature 

PL_DTM cool smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
Christian_Norway
Sr. Member
 
Total Posts:  125
Joined:  2008-06-19
 

Im interested in this aswell. However I’d like to decide which attribute should be on which tab. As this will be different from Attribute set to attribute set

 Signature 

Akupunktur, Soneterapi, Massasje Oslo
Draft version of Magento Webshop (Norwegian) - http://helsekost.amedisin.no

 
Magento Community Magento Community
Magento Community
Magento Community
 
pldtm
Member
 
Avatar
Total Posts:  60
Joined:  2007-09-04
Bordeaux, France
 

For me it seems javascript from tabs.phtml is not executed.

i don’t know why?

Another strange thing i don’t understand is why on tabs.phtml there is javascript functions that are already declared in varin/js.js.
Can it be the reason it doesn’t work.

phil

 Signature 

PL_DTM cool smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
chinesedream
Guru
 
Total Posts:  732
Joined:  2007-08-31
San Francisco, CA
 
pldtm - 05 August 2008 03:37 AM

For me it seems javascript from tabs.phtml is not executed.

i don’t know why?

Another strange thing i don’t understand is why on tabs.phtml there is javascript functions that are already declared in varin/js.js.
Can it be the reason it doesn’t work.
l

I only looked at very few files in Modern theme last time, I think it has a tabs.js. Protoype library is causing all sort of problem when other js script is used. I think maybe this is the reason - it should work in Default as it already does in Modern theme, but likely you need to figure where to put the js.

Anyway, this is what I have with my jQuery.

1) Create a ‘jquery’ folder inside the ‘js’, then place these two files (attached) in the jquery folder. You can download the codes from jquery website if you like, but the newer version may stops working.

Side note: there is a thread in the programming forum about creating jquery module, that likely is a better option, but before the author shares the module, you may just stick with mine smile

2) Call the jQuery and tab scripts from the template, do not place it in the page.xml or head.phtml as it will break the Slider in the gallery view, and if have prototype lightbox implement, likely your lightbox will stop working. In my case, I use 2columns-right, so I have these codes placed in the
<head>...</head>

<head>  
    
<?php echo $this->getChildHtml('head'?>      
      
<script type="text/javascript" src="http://74.52.59.43/js/jquery/jquery-1.2.3.pack.js">  </script>   
    
<script type="text/javascript" src="http://74.52.59.43/js/jquery/ui.tabs.pack.js">  </script>
      
<script type="text/javascript">   
        var 
$j jQuery.noConflict();
     
$j(document).ready(function(){
         $j
('#tab > ul').tabs({ fx{ opacity'toggle' } });
      
});   
        
      
      
</script>
</head>

3. Place these code in the ‘view.phtml’. Look for ‘ <!-- starts jquery tabs-->’ and ‘ <!-- end jquery tabs-->’ comments, and only copy everything inside them.  I inlcuded extra codes show that you know where to place the code to in your file.

<script type="text/javascript">
            var 
productAddToCartForm = new VarienForm('product_addtocart_form');
            
productAddToCartForm.submit = function(){
                    
if (this.validator.validate()) {
                            this
.form.submit();
                    
}
            }
.bind(productAddToCartForm);
    
</script>
    
</div> <!-- /product-essential-->  

 
 <!-- 
starts jquery tabs-->  
    <
div id="tab" class="product-collateral">             
      <
ul>   <li><a href="#fragment-1"><span><?php echo $this->__('We Recommend'?></span></a></li>     
            <
li><a href="#fragment-2"><span><?php echo $this->__('Product Description'?></span></a></li>    
             <
li><a href="#fragment-3"><span><?php echo $this->__('Additional Information'?></span></a></li
             </
ul>
        
<?php if ($_description $this->getChildHtml('description')):?>
         
<div id="fragment-1" class="collateral-box">
                
<?php echo $this->getChildHtml('upsell_products'?></div>          
            <
div id="fragment-2" class="collateral-box">
                
<?php echo $_description ?>
            
</div>  
         
<?php endif;?>
        <?php 
if ($_additional $this->getChildHtml('additional')):?>
            
<div id="fragment-3" class="collateral-box">
                 
<?php echo $_additional ?>
            
</div>
        
<?php endif;?>  
  
        <?php 
echo $this->getChildHtml('product_additional_data'?>
    
</div
 <!-- 
end jquery tabs--> 

  
</
div><!-- /product-info-box -->   
<!-- /
end view.pthml-->

File Attachments
jquery-1.2.3.pack.js  (File Size: 30KB - Downloads: 27)
 
Magento Community Magento Community
Magento Community
Magento Community
 
chinesedream
Guru
 
Total Posts:  732
Joined:  2007-08-31
San Francisco, CA
 

4. Copy this style sheet directly to your box.css or create a new file, name it whatever you like.

http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.tabs.css

Example of jQuery tabs: http://docs.jquery.com/UI/Tabs#Example

and here is the example in the site, where, I have jquery lightbox, tabs and a simple modified accordion toggle for shipping rate.

File Attachments
ui.tabs.pack.js  (File Size: 7KB - Downloads: 23)
 
Magento Community Magento Community
Magento Community
Magento Community
 
chinesedream
Guru
 
Total Posts:  732
Joined:  2007-08-31
San Francisco, CA
 

also, if you want to use jquery lightbox for the same page, just follow this thread, and download the jquery lightbox js
http://www.magentocommerce.com/boards/viewthread/9607/

 
Magento Community Magento Community
Magento Community
Magento Community
 
pldtm
Member
 
Avatar
Total Posts:  60
Joined:  2007-09-04
Bordeaux, France
 

thanks a lot, it’s perfect. I’ll give lightbox a try later.
My next step is a mootools slideshow from a wordpress theme on the home page or as static bloc for categories..

Again, thanks a lot for your help

phil cool smile

 Signature 

PL_DTM cool smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
hyteckit
Sr. Member
 
Avatar
Total Posts:  145
Joined:  2008-04-01
Los Angeles, CA
 

I just realize you wanted to tabs in the default theme.

I just go around to removing the tabs from the modern theme.  LOL

 Signature 

Current Project:
GeekGears.com - Accessories for your iPod, iPhone, MP3 Players, Cell Phone, PDA, GPS Devices, Digital Camera, and more.
Extension: Product Gallery Importer, Enhanced Search

 
Magento Community Magento Community
Magento Community
Magento Community
 
vesvello
Member
 
Total Posts:  32
Joined:  2007-12-01
 
chinesedream - 06 August 2008 12:47 AM

3. Place these code in the ‘view.phtml’. Look for ‘ <!-- starts jquery tabs-->’ and ‘ <!-- end jquery tabs-->’ comments, and only copy everything inside them.

which view.phtml?

 
Magento Community Magento Community
Magento Community
Magento Community
 
pldtm
Member
 
Avatar
Total Posts:  60
Joined:  2007-09-04
Bordeaux, France
 

this one

\app\design\frontend\default\default\template\catalog\product\view.phtml

 Signature 

PL_DTM cool smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
cutemonster
Jr. Member
 
Total Posts:  11
Joined:  2008-07-07
 

hi, I got the javasripts working.
But the css still don’t work, it shows only the text without decoration.

can somebody tell me a bit detail on where to locate css and which css I can download to start with?

thanks,

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top
 
Sales: Call 877.832.5289 (North America) 310.295.4144 (International)
© Copyright 2008 Varien. Magento, eCommerce software, is a trademark of Irubin Consulting Inc. DBA Varien
Privacy Policy|Terms of Service
Magento Community Count
50147 users|555 users currently online|102290 forum posts