在magento产品内页添加tab

使用tab标签，可以使页面保持美观。如果页面表示了几项分类的信息，比如说商品描述，附加信息，推荐产品。这样的话，将会使页面的内容变得冗长。使用 tab就能很好的解决这个问题。可能大家都使用过magento modern theme 。在它的产品描述页中，就使用的Tab。我们可以在网上先查看一下modern theme 的演示效果：http://mdemo.abuilder.net/electronics/cell-phones/nokia-2610- phone.html也可通过mdemo.abuilder.net来查看其他的主题的关于产品显示的信息。

下面我们来按步骤实现这一功能，给default demo增加tab；
在我们进行修改时，请一定要先给我们要进行修改的文件或文件夹进行备份，如果出错可以进行恢复。
1。先定位到view.phtml文件：按照路径：app/design/frontend/default/default/template/catalog/product/view.phtml。在最后一个<div>标签中加入：
<?php echo $this->getChildHtml('info_tabs') ?>
然后，将在这个文件中的以下内容删除掉：
<div class="product-collateral">
    <?php if ($_description = $this->getChildHtml('description')):?>
        <div class="collateral-box">
            <div class="head">
                <h4><?php echo $this->__('Product Description') ?></h4>
            </div>
            <?php echo $_description ?>
        </div>
    <?php endif;?>
    <?php if ($_additional = $this->getChildHtml('additional')):?>
        <div class="collateral-box">
            <div class="head">
                <h4><?php echo $this->__('Additional Information') ?></h4>
            </div>
            <?php echo $_additional ?>
        </div>
    <?php endif;?>
    <?php echo $this->getChildHtml('upsell_products') ?>
    <?php echo $this->getChildHtml('product_additional_data') ?>
</div>

2。备份app/design/frontend/default/default/template/catalog/product/view 文件夹及里面的文件。
将该文件夹删除。然后，从modern主题中将所需对应的文件夹拷贝过来。目录是：app/design/frontend/default/modern/template/catalog/product/view

3。把下列代码复制到catalog.xml文件中。位置在：app/design/frontend/default/default/layout/catalog.xml。放在<catalog_product_view> 标签中，复制到<block type="catalog/product_view" name="product.info.addtocart" as="addtocart" template="catalog/product/view/addtocart.phtml"/>   语句之下。
<block type="catalog/product_view_tabs" name="product.info.tabs" as="info_tabs" template="catalog/product/view/tabs.phtml" >
    <action method="addTab" translate="title" module="catalog"><alias>description</alias><title>Product Description</title><block>catalog/product_view_description</block><template>catalog/product/view/description.phtml</template></action>
    <action method="addTab" translate="title" module="catalog"><alias>upsell_products</alias><title>We Also Recommend</title><block>catalog/product_list_upsell</block><template>catalog/product/list/upsell.phtml</template></action>
    <action method="addTab" translate="title" module="catalog"><alias>additional</alias><title>Additional Information</title><block>catalog/product_view_attributes</block><template>catalog/product/view/attributes.phtml</template></action>
</block>

4。定位到tag.xml 。在app/design/frontend/default/default/layout/tag.xml将下列代码
<reference name="product.info.tabs">
    <action method="addTab" translate="title" module="tag"><alias>tags</alias><title>Product
Tags</title><block>tag/product_list</block><template>tag/list.phtml</template></action>
</reference>

放置在：<catalog_product_view> 标签里的：

<reference name="product.info.additional">
    <block type="tag/product_list" name="product_tag_list" before="-" template="tag/list.phtml"></block>
</reference>
下面。

5。添加CSS：
将下列代码放置在boxes.css
/********************** Tabs */
.tabs                   { margin-bottom:15px; border-bottom:1px solid #666; background: url(../images/tabs_bg.gif) repeat-x 0 100% #f2f2f2; }
.tabs li                { float:left; border-right:1px solid #a4a4a4; border-left:1px solid #fff; font-size:1.1em; line-height:1em; }
.tabs li.first          { border-left:0; }
.tabs li.last           { border-right:0; }
.tabs a                 { display:block; padding:6px 15px; color:#444; }
.tabs a:hover           { background-color:#ddd; text-decoration:none; color:#444; }
.tabs li.active a,
.tabs li.active a:hover { background-color:#666; font-weight:bold; color:#fff; }

/* Style */
.outline-creator { border:1px solid #bbb; border-bottom-color:#666; background:#fff; }
.col-main .padder{ padding-right:20px; }
.layout-3columns .padder { padding:0; }

6。将图片skin/frontend/default/modern/images/tabs_bg.gif（可从modern 主题中获得）放置在skin/frontend/default/default/images


将以上这些步骤处理完后。刷新缓存，我们就可以在前台查看到显示的效果了。