You have no items in your shopping cart.
Product Page Tabs Instructions
Installation
- Disable Compiler: Go to System > Tools > Compilation in the Magento admin panel and click the Disable button. Once installation is complete, you can re-enable compilation.
- Upload Packages: Go to System > Magento Connect > Magento Connect Manager. Choose and upload the extension packages: Sashas_Producttabs.tgz and Sashas_Baseext.tgz.
Usage:
Your product page template must contain the core Magento block groups for detailed information to make tabs function correctly. You can locate this page in your active theme or base directory at:
- /app/design/frontend/{your_package}/{your_theme}/templates/catalog/product/view.phtml
- /app/design/frontend/base/default/templates/catalog/product/view.phtml
If the file does not exist in your active theme, copy it from the base/default directory to the corresponding folder path inside your custom theme package.
Verify that you have the following code snippet near the end of the file:
<div class="product-collateral"> <?php foreach ($this->getChildGroup('detailed_info', 'getChildHtml') as $alias => $html): ?> <div class="box-collateral <?php echo "box-{$alias}" ?>"> <?php if ($title = $this->getChildData($alias, 'title')): ?>
<?php echo $this->escapeHtml($title); ?>
<?php endif; ?> <?php echo $html; ?> </div> <?php endforeach; ?> <?php echo $this->getChildHtml('upsell_products') ?> <?php echo $this->getChildHtml('product_additional_data') ?> </div>To add a custom tab manually, place a custom collateral block structure inside the <div class="product-collateral"> wrapper. Substitute {tabname} with a unique identifier:
<div class="box-collateral box-{tabname}">
Title of Tab
Tab Content Text
</div>The integrated code with your custom tab will look like this:
<div class="product-collateral"> <?php foreach ($this->getChildGroup('detailed_info', 'getChildHtml') as $alias => $html): ?> <div class="box-collateral <?php echo "box-{$alias}" ?>"> <?php if ($title = $this->getChildData($alias, 'title')): ?>
<?php echo $this->escapeHtml($title); ?>
<?php endif; ?> <?php echo $html; ?> </div> <?php endforeach; ?> <?php echo $this->getChildHtml('upsell_products') ?> <?php echo $this->getChildHtml('product_additional_data') ?> <div class="box-collateral box-{tabname}">Title of Tab
Tab Content Text
</div> </div>To exclude a specific default option from tab generation, simply move its respective template call outside of the <div class="product-collateral"> block wrapper.
JS Options Customization:
Tabs are rendered client-side using Prototype JS. The tab initializer script can be found at: /skin/frontend/base/default/js/producttabs/tabs.js
On line 15 of that file, you will find the configuration call:
new Control.Tabs('product-tabs', { CreateTabs: 1, TitleClass: 'product-tab' });
If you want to hide default tab labels (e.g., "Description" or "Tags"), configure the ShowTitle: 0 property:
new Control.Tabs('product-tabs', { CreateTabs: 1, TitleClass: 'product-tab', ShowTitle: 0 });
Note that the parameters CreateTabs: 1 and TitleClass: 'product-tab' are strictly required. Refer to the LivePipe Plugin Documentation for further properties.
CSS Customization:
The tab stylesheet is located at: /skin/frontend/base/default/css/producttabs/tabs.css
To make stylesheet alterations, copy this file into the corresponding folder structure of your active theme instead of altering the base stylesheet directory. This ensures that future updates to the extension will not override your custom styling.