mall商铺首页挂件实现及类淘宝分类首页自定义

mall商铺首页挂件实现及类淘宝分类首页自定义（9\21更新挂件实现精美店铺首页）
   摘自：http://ecmall.shopex.cn/bbs/viewthread.php?tid=1082041&extra=&page=1
   首先你需要先在本地安装一个环境，并且把ecmall2.0安装上，再执行安装包里的initdata以初始化数据，免得我们去添加实验数据，（千万不要在已有站点执行initdata，会删除你原先所有数据的。）当然，如果你没有本地的环境，在服务器上安装一个测试的ecmll也是可以的。我用的是utf版的ecmall。用zendstudio6.12开发。

这篇文章会讲具体的实现，最后会提供文件下载，不过不建议直接覆盖你现有的正常动作的网站，因为文章所产生的任何问题与我无关，你实验成功再迁移是最好的。

经过观察发现，ecmall实现首页的可视化编辑主要是导入了一些javascript脚本然后再ajax方式访问服务器端的挂件目录实现，我先大体的讲解一下实现流程

一、我们在后台点编辑时，传递了当前编辑页（参数index、gcategory）给后台template
（app）的edit （act）。
二、edit则获取index对应的（SITE_URL. '/index.php'）页面或者gcategory对应的（'gcategory'=> SITE_URL . '/index.php?app=category'）然后执行_make_editable函数插入能可视化编辑页面的javascript代码。
三、现在页面被发送到浏览器端，刚插入的javascript代码就ajax访问服务端把可视化编辑页面顶部的那些挂件拿回来放好。下面的编辑工作完成后，当你点保存后，会再一次ajax把参数提交服务器保存。

好了，原理讲解完成。接下来我们进行具体开发工作。同样先讲步骤：

一、在我们的用户中心添加一个类似我们管理员后台（就是网站的总管理员登陆）编辑页面的链接。
二、实现可视化编辑功能。
需要注意的是，这样简单实现可视化编辑后所有的商铺首页是一个样子的。

在用户中心添加链接并显示可编辑的页面：

一、在app目录下my_store.app.php文件的128行有一个function _get_member_submenu()在里面添加如下内容
array(

'name' => 'my_store_moban',//这是显示的名字
my_store_moban是语言文件里的一个对应项

'url'
=>'index.php?app=my_store&act=moban',//链接

),
这个函数就是用户中心的三级菜单，现在我们已经添加好了，现在访问用户中心的店铺设置已经可以看到右边多了一个链接但显示的是
my_store_moban
这几个字，这是因为我们没有在相应的语言文件里添加对应的中文。我们可以到languages\sc-utf-8\common.lang.php
添加（'my_store_moban'=>'模板设置',）不带括号。这时你再刷新一下用户中心，可以看到已经正常显示模板设置了。

二、点击“模板编辑”后显示的页面。
a)在app/my_store.app.php的112行附近，也就是function index()结束的地方添加如下代码，
function moban() //这是上面链接act里指定的如需修改，需要两处同时必。

{

        $this->assign('pages',$this->_get_editable_pages());//这里有一个从管理员后台复制来的函数，获取可以编辑的页面，像管理员后台是有首页和分类页可以可视化编辑，就是由这个函数设置。（现在还未添加）

        $this->_curlocal(LANG::get('member_center'),'index.php?app=member', Lang::get('my_store_moban'));//这里是去语言文件获取汉字并且设置我们的用户中心的“当前位置”。

$this->_curitem('my_store');//设置左侧激活的项目这里是“店铺设置”，同样是获取语言文件里的汉字。

/* 当前所处子菜单 */

$this->_curmenu('my_store_moban');//这里是设置右侧的三级菜单的激活项。

$this->display('my_store.moban.html');//调用我们自建的一个模板文件显示。（模板文件还未创建）

}

b)建立模板文件my_store.moban.html
这个文件大部分是从管理员后台复制过来的，也就是我们看到的有两个页面可以点击编辑的那个页面。注意里面有一个地方（$lang.store_index）是调用语言文件的，不过ecmall现有的里面有这一项，如果不能正常显示，自行添加。将些文件放在themes/mall/default/目录下，注意文件的编码，如果是GBK编码并且文件里面有中文可能会乱码（因为我是用的utf编码），所以你要结合
你自己的情况。
文件内容如下：
 
   {include file=member.header.html}
  
   <div class="content">
  
     {include file=member.menu.html}
     <div id="right">
     {include file=member.submenu.html}
       <div class="wrap">
     <div id="rightTop">
     <p>
        
     </p>
    
     </div>
     <ul id="rightCon">
         <!--{foreach from=$pages item=page_url key=page}-->
         <li>
             <div class="page_item">
                 <h3>{$lang.store_index}</h3>
                 <div>
                     <form action="admin/index.php" target="_blank">
                     <input type="hidden" name="app" value="template" />
                     <input type="hidden" name="act" value="edit" />
                     <input type="hidden" name="page" value="{$page}" />
                     <input type="submit" value="{$lang.edit}" />
                     </form>
                 </div>
             </div>
         </li>
         <!--{/foreach}-->
     </ul>
     <div style="clear:both"></div>
  
        </div>
  
       </div>
       <div class="clear"></div>
   </div>
{include file=footer.html}
 
 
到这里你点击店铺设置---模板设置时还会出错，因为我们还有几个方法没添加。

c)添加方法
在上面提到的app/my_store.app.php文件的最后一个“}”之前（我希望你懂添加函数，哈哈。）添加如下代码。
function _get_editable_pages()
    {
        return array(
'store_index'=>'store_id_index',
        );
    }
到此，用户中心的内容已经可以显示了但你发现，并不和管理员后台一样，那是因为有一部分CSS没有导入，并且 你已经可以点击编辑了，怎么？点了后要管理员登陆？是的，因为那部分代码还没有独立出来怕讲多了大家一下子看不过来，你先管理员登陆后再点一次编辑试一下，我们先看效果，后面再去完善。什么？说没指定页面？哈哈，是的，还得再加点东西。
我们找到admin/app/template.app.php这个文件的末尾，看到function _get_editable_pages()了没？在里面添加('store_index'=>SITE_URL.'/index.php?app=store&id=2',)不包括号。是面的id=2是演示店铺。你可以改成其它的。添加这个后，你就可以点编辑打开页面了，但是却发现跟正常打开没有什么区别。这是因为我们没有加入一个可可视化编辑的“暗号”。

在themes/store/default/header.html文件里面</head>之前添加这个暗号"<!--<editmode></editmode>-->"(不包双引号)，再刷新一下那个点编辑后打开的页面吧，这下有挂件了吧，不过只有三个，这时其实所有的mall的挂件都已经在了，不过由于CSS被隐藏起来了。再打开admin/templates/template.pannel.html文件，找到<ul id="widget_list_ul"></ul>改成<ul id="widget_list_ul" style="width:auto;"></ul>。这时再刷新一下就可以看到全部挂件了。现在添加挂件是没有反应的，因为我们还没有添加放挂件的地方。打开themes/store/default/store.index.html文件，在<div id="right">后面添加
<div class="left" area="top_left" widget_type="area">
                <!--{widgets page=store_index area=top_left}-->
</div>
这里的page=store_index是指我们之前添加的，也是在data/page_config下面生成的保存挂件配置的文件名，area处可以随便改，但是两处要相同。刷新一下吧，页面右边出现了可以放东西的地方了，而且也可以保存，拖一个轮播图片出来看一下，除了样子不好看（没有导入CSS）外，功能都可以用。而且你正常浏览页面，也都可以看到你添加的挂件了。

那么，现在聪明的你应该知道添加一个像淘宝一样的分类的首页了吧。另外，如果有朋友可以把那些挂件的CSS单独提取出来那应该更加方便。好的今天先到这里，后面我们再一步步完善。
下面有全部修改过的文件，直接覆盖我们的测试项目体验。记住，如果你没看上文可能会一下成功不了。另外，这些代码还不可以使用，只能是测试，因为太丑了。最后给大家上一个完成的图。如果需要在线测试请访问http://tc35.org/test 其中http://tc35.org/  有另外两个添加的功能。在线测试的管理员admin 123456 用户 seller 123456