使用magento创建产品页面选项卡

时间:2014-06-27 18:39:34

标签: magento tags product

有没有人可以帮助我?

我正在制作一个使用magento的网站,但我真的很擅长创建自定义产品标签。 我尝试使用一些扩展程序,例如Easy标签,但无法使其正常工作。

我也尝试过这个http://www.joomlart.com/documentation/magento-faqs/magento-add-custom-tabs-to-product教程,但没有运气,因为我的view.phtml中缺少一些代码。

有没有人可以就此话题给我详细解释?

1 个答案:

答案 0 :(得分:1)

这是一个复杂的方法。

首先需要创建或更新local.xml文件如果没有local.xml文件,可以在

中创建一个

app-> frontend-> [包名称] - > [主题名称] - > layout-> local.xml

创建此内容后,您可以将此帖中的内容完全复制到该文件中,以便开始使用该文件。

通过LOCAL.XML文件进行所有更新,而不是通过page.xml catalog.xml,checkout.xml等!这将使得后来的升级变得更加容易。此外,您还可以在一个文件中快速查看对网站所做的所有更改。

在local.xml文件中

我评论了你在代码中要做的事情/希望这能让你更容易理解你在做什么。

<?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 that need to be created their contents are referenced below -->
            <!-- Create a 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 a 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() as $_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() as $_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 / This will list of all 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 as $_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 to attributes.phtml  -->


<!-- alternative contents of attributes.phtml use this to only display one specific attribute -->
<!-- Replace InstructorBio with your attribute value -->
<!-- If your attribute code is product_tab   then  getInstructorBio would become getProductTab   instructor_bio would be 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; ?>

现在进行最后一步:你必须在你希望它们显示的地方调用你的标签因为我使用了“as”这个名字作为info_tabs这是你在view.phtml文件中调用时引用的名称

在view.phtml中插入此代码,您现在将拥有标签

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