tags - Creating product page tabs in magento -
is there can me?
i making website using magento, struggeling on creating custom product tabs. tried using couple of extensions such easy tabs , couldn't working.
i tried following http://www.joomlart.com/documentation/magento-faqs/magento-add-custom-tabs-to-product tutorial didn't have luck because of code missing in view.phtml.
is there can give me detailed explanation on topic?
that complicated way this.
first need create or update local.xml file if not have local.xml file can create 1 in
app->frontend->[package name]->[theme name]->layout->local.xml
once created can copy have in post file start of how use one.
do updates through local.xml file not through page.xml catalog.xml, checkout.xml etc!! make upgrades easier later down road. additionally, able see changes have made site in 1 file.
within local.xml file
i commented have within code / makes easier understand doing.
<?xml version="1.0"?> <layout version="0.1.0"> <!-- product detail page --> <catalog_product_view translate="label"> <!-- add tabs --> <reference name="product.info"> <!-- both files need created contents referenced below --> <!-- create file named attributes.phtml in /yourpackage/yourtheme/template/catalog/product/view/tabs.phtml --> <block type="catalog/product_view_tabs" name="product.info.tabs" as="info_tabs" template="catalog/product/view/tabs.phtml" > <!-- create file named attributes.phtml in /yourpackage/yourtheme/template/catalog/product/view/attributes.phtml --> <action method="addtab" translate="title" module="catalog"><alias>additional</alias><title>specifications</title><block>catalog/product_view_attributes</block><template>catalog/product/view/attributes.phtml</template></action> </block> </reference> </catalog_product_view> </layout> <!-- end of local.xml --> <!-- contents of tabs.phtml --> <ul class="product-tabs"> <?php foreach ($this->gettabs() $_index => $_tab): ?> <?php if($this->getchildhtml($_tab['alias'])): ?> <li id="product_tabs_<?php echo $_tab['alias'] ?>" class="<?php echo !$_index?' active first':(($_index==count($this->gettabs())-1)?' last':'')?>"><a href="#"><?php echo $_tab['title']?></a></li> <?php endif; ?> <?php endforeach; ?> </ul> <?php foreach ($this->gettabs() $_index => $_tab): ?> <?php if($this->getchildhtml($_tab['alias'])): ?> <div class="product-tabs-content" id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getchildhtml($_tab['alias']) ?></div> <?php endif; ?> <?php endforeach; ?> <script type="text/javascript"> //<![cdata[ varien.tabs = class.create(); varien.tabs.prototype = { initialize: function(selector) { var self=this; $$(selector+' a').each(this.inittab.bind(this)); }, inittab: function(el) { el.href = 'javascript:void(0)'; if ($(el.parentnode).hasclassname('active')) { this.showcontent(el); } el.observe('click', this.showcontent.bind(this, el)); }, showcontent: function(a) { var li = $(a.parentnode), ul = $(li.parentnode); ul.select('li', 'ol').each(function(el){ var contents = $(el.id+'_contents'); if (el==li) { el.addclassname('active'); contents.show(); } else { el.removeclassname('active'); contents.hide(); } }); }, remotetabs: function(b) { var controlledlink = $$("#"+b+" a")[0]; this.showcontent(controlledlink); } } var producttabs = new varien.tabs('.product-tabs'); //]]> </script> <!-- end of tabs.phtml --> <!-- contents of attributes.phtml / list of attributes --> <?php $_helper = $this->helper('catalog/output'); $_product = $this->getproduct() ?> <?php if($_additional = $this->getadditionaldata()): ?> <h2><?php echo $this->__('additional information') ?></h2> <table class="data-table" id="product-attribute-specs-table"> <col width="25%" /> <col /> <tbody> <?php foreach ($_additional $_data): ?> <tr> <th class="label"><?php echo $this->escapehtml($this->__($_data['label'])) ?></th> <td class="data"><?php echo $_helper->productattribute($_product, $_data['value'], $_data['code']) ?></td> </tr> <?php endforeach; ?> </tbody> </table> <script type="text/javascript">decoratetable('product-attribute-specs-table')</script> <?php endif;?> <!-- end attributes.phtml --> <!-- alternative contents of attributes.phtml use display 1 specific attribute --> <!-- replace instructorbio attribute value --> <!-- if attribute code product_tab getinstructorbio become getproducttab instructor_bio product_tab --> <?php $_helper = $this->helper('catalog/output'); $_product = $this->getproduct() ?> <?php if ($_additional = $_product->getinstructorbio()): ?> <?php echo $this->helper('catalog/output')->productattribute($_product, $_product->getinstructorbio(), 'instructor_bio') ?> <?php endif; ?>
now final step: have call tabs want them display because used "as" name info_tabs name reference when call in view.phtml file
insert code inside view.phtml , have tabs
<?php echo $this->getchildhtml('info_tabs') ?>
Comments
Post a Comment