zoukankan      html  css  js  c++  java
  • Magento给商品页面的tabs添加tab

    Magento的modern模板的商品详情页面有个Tabs,既然是原生的,那拿到别的模板去用就很方便,那么如何向这个tab中添加新的tab项目呢,如上图。

    我来演示下我的添加步骤的,大家照猫画虎即可,添加多少个也木有关系。

    第一步:修改模板layout/catalog.xml文件,代码片段如下

    1
    2
    3
    4
    5
    <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>new</alias><title>New tab</title><block>catalog/product_view_new</block><template>catalog/product/view/new.phtml</template></action>
    </block>

    最后一行我添加了名字为 new 的新tab。

    第二步:创建文件路径appcodelocalMageCatalogBlockProductView,在此路径新建文件New.php ,文件内容为

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?php
    class Mage_Catalog_Block_Product_View_new extends Mage_Core_Block_Template
    {
        protected $_product = null;
     
        function getProduct()
        {
            if (!$this->_product) {
                $this->_product = Mage::registry('product');
            }
            return $this->_product;
        }
    }

    注意class的名称是Mage_Catalog_Block_Product_View_new,最后是new结尾。

    第三步:在模板文件路径templatecatalogproductview 下新建 new.phtml文件,文件内容为tab的内容

    1
    <h1>这个是新加的内容</h1>

    结果如本文开始处的图片,这样添加一个tab的过程就完成了。

    小白们注意啦!你们首先要保证你在用modern模板或者其它的模板中有modern中的找个tabs才行,不然本文对你用处不大。至于如何将modern模板中的tabs引入你的自己的模板中google下吧,教程也很多的。

  • 相关阅读:
    基于android studio的快捷开发(将持续更新)
    安卓Design包之AppBar和Toolbar的联用
    安卓Design包之超强控件CoordinatorLayout与SnackBar的简单使用
    安卓Design之NavigationView的使用
    安卓Design包之TabLayout控件的简单使用
    使用ViewPager实现自动轮播
    高仿QQ顶部控件之IOS SegmentView
    强大的图片加载框架Fresco的使用
    安卓第一次启动引导页使用ViewPager实现
    android官方下拉刷新控件SwipeRefreshLayout的使用
  • 原文地址:https://www.cnblogs.com/freeze89/p/6406828.html
Copyright © 2011-2022 走看看