zen cart左边栏中 sidebox 的添加方法

本文详细介绍了如何在Zen Cart中通过模块化设计实现销售排行功能的步骤,包括建立模块文件、模板文件及后台配置。教程涵盖了从创建模块到调整布局的全过程,适合想要扩展Zen Cart功能的开发者。
注意:这个方法不仅仅适用于左边栏,甚至头部文件中的导航菜单和搜索条,登陆条等,都可以通过这个方法来设置。
设置方法 [a,b,c如下]
a, 建立一个模块文件,比如我要添加一个销售排行 selling_rank。 那么你应该建立一个文件 selling_rank.php放在D:\htdocs\zen-cart\includes\modules\sideboxes\selling_rank.php 里. 此模块的所有程序和SQL语句,操作等均写在这个文件中。并且将模板中将要用到的标签变量都赋好值。
b, 建立模板文件,注意命名需要和模块文件格式相同,tpl_selling_rank.php,放在D:\htdocs\zen-cart\includes\templates\digital_china\sideboxes 里,其中digital_china是我的整个网站第二套模板的文件夹,你可以按你自己的情况修改.
tpl_selling_rank.php相对来说简单许多了。你需要做的第一步是 $content = ”; 初始化,然后将模板嵌套上程序,并生成所有的HTML代码赋值给 $content;即可。
c, 这时候很多朋友可能会问:“那我模板的位置通过什么来控制呢?”,好了,这时候打开后台,如果a,b两步你都正确完成,并且程序没有错误的话,你会在[后台->工具->外观控制]看到一个新的模块名:sideboxes/selling_rank.php ,下面我们编辑他的属性,
左/右 栏目状态: 这里表示的是,如果此模块被你当做左边栏或右边栏的一个元素时,是否开启。
位置: (单栏忽略该设置): 这里设置此模块是左边栏,还是右边栏。
左/右 栏目排序: 当此模块为左/右 边栏模块的时候,其现实顺序(数值小的,优先显示)
单栏排序: 这里需要说明一下,对于任意模块,都有左右边栏属性,所以,当头文件中出现你添加的模块时,这里就起到作用了。一般来说用的不是很多。
单栏状态: 同左/右栏目状态类似,只是功能只对应单栏。

好,举例说明吧:
我的selling_rank模块是个左边栏,所以我把他的属性设置为:
——————————-
左/右 栏目状态:开
位置:左
左/右 栏目排序:10
单栏排序: 随便写,不影响
单栏状态: 随便写,不影响
——————————-

好了,打开首页,刷新一下,你会发现你的selling_rank模块已经在页面的头尾之间的左边显示了。

小窍门:第一次设置模块的时候,模块程序文件可以只写2句话:
require($template->get_template_dir(’tpl_模块名.php’,DIR_WS_TEMPLATE, $current_page_base,’sideboxes’). ‘/tpl_模块名.php’); //指定模板文件

require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,’common’) . ‘/’ . $column_box_default); // 加载显示
下面给出可直接编译运行的微信小程序最小可运行版本(单页面版),按前述锁定流程实现: ① 项目结构 guandan-score/ ├── app.js ├── app.json ├── app.wxss ├── pages/ │ └── score/ │ ├── score.wxml │ ├── score.wxss │ └── score.js └── utils/ └── util.js // 可选,本例省略 ② app.json { "pages": ["pages/score/score"], "window": { "navigationBarTitleText": "掼蛋记分器", "orientation": "landscape" }, "style": "v2" } ③ app.wxss /* 全局暗色 */ page, body { background-color: #1b1b1b; color: #ccc; font-family: -apple-system-font, Helvetica, sans-serif; } ④ app.js App({ onLaunch() { // 清理过期缓存(如需要) } }) ⑤ pages/score/score.wxml <view class="header"> <text class="title">掼蛋记分器</text> <button class="endBtn" bindtap="onEndGame">结束整局</button> </view> <view class="scoreBar"> <!-- 红方 A --> <view class="sideBox red" bindtap="onSingleTap" data-side="red" binddbltap="onDoubleTap" data-side="red"> <view class="userBlock a"> <image class="avatar" src="{{aAvatar}}" wx:if="{{aAvatar}}"/> <text class="uname">{{aName}}</text> </view> <view class="level">{{redLevel}}</view> <view class="userBlock c"> <text class="uname">{{cName}}</text> </view> </view> <!-- 中间把数 & 规则 --> <view class="center"> <picker bindchange="onRuleChange" value="{{ruleIndex}}" range="{{rules}}" disabled="{{locked}}"> <view class="rulePicker">{{rules[ruleIndex]}}</view> </picker> <text class="count">把数 {{redWins + blueWins}}</text> </view> <!-- 蓝方 B --> <view class="sideBox blue" bindtap="onSingleTap" data-side="blue" binddbltap="onDoubleTap" data-side="blue"> <view class="userBlock b"> <text class="uname">{{bName}}</text> </view> <view class="level">{{blueLevel}}</view> <view class="userBlock d"> <text class="uname">{{dName}}</text> </view> </view> </view> ⑥ pages/score/score.wxss .header { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 40rpx; } .endBtn { background: #ff9c19; color: #fff; font-size: 28rpx; border-radius: 8rpx; padding: 0 20rpx; line-height: 64rpx; height: 64rpx; } .scoreBar { display: flex; align-items: center; justify-content: center; height: 70vh; } .sideBox { width: 320rpx; border-radius: 16rpx; padding: 20rpx; display: flex; flex-direction: column; align-items: center; } .sideBox.red { background: #d7000f; color: #fff; } .sideBox.blue { background: #005dff; color: #fff; } .userBlock { width: 100%; background: rgba(0, 0, 0, 0.2); border-radius: 12rpx; padding: 10rpx; margin: 8rpx 0; text-align: center; } .userBlock.a { background: #3e1515; } .userBlock.c { background: #4b1f1f; } .userBlock.b { background: #142c4c; } .userBlock.d { background: #1e3a5f; } .avatar { width: 40rpx; height: 40rpx; border-radius: 50%; vertical-align: middle; margin-right: 8rpx; } .level { font-size: 56rpx; font-weight: bold; margin: 20rpx 0; } .center { width: 200rpx; text-align: center; } .rulePicker { font-size: 28rpx; color: #ccc; padding: 10rpx; border: 1rpx solid #666; border-radius: 8rpx; margin-bottom: 20rpx; } .count { font-size: 32rpx; } ⑦ pages/score/score.js const RULES = ['越A制', '把数制10把', '把数制15把'] const LEVELS = ['2','3','4','5','6','7','8','9','10','J','Q','K','A'] Page({ data: { aName: '阿红', aAvatar: '', bName: '小蓝', cName: '大红', dName: '老蓝', redLevel: 2, blueLevel: 2, redWins: 0, blueWins: 0, ruleIndex: 0, locked: false, history: [] // 最近5把 }, onLoad() { wx.getUserProfile({ desc: '显示头像昵称', success: (res) => { this.setData({ aName: res.userInfo.nickName, aAvatar: res.userInfo.avatarUrl }) } }) const setting = wx.getStorageSync('setting') || {} const curr = wx.getStorageSync('current') || {} this.setData({ ruleIndex: setting.ruleIndex || 0, ...curr }) }, onSingleTap(e) { const side = e.currentTarget.dataset.side const add = side === 'red' ? {redLevel: Math.min(12, this.data.redLevel + 1)} : {blueLevel: Math.min(12, this.data.blueLevel + 1)} const winAdd = side === 'red' ? {redWins: this.data.redWins + 1} : {blueWins: this.data.blueWins + 1} this.setData({...add, ...winAdd, locked: true}) this.save() }, onDoubleTap(e) { const side = e.currentTarget.dataset.side wx.showActionSheet({ itemList: ['双上(1+2)', '1&3游', '1&4游'], success: (res) => { const delta = [3,2,1][res.tapIndex] const levelKey = side==='red'?'redLevel':'blueLevel' const winKey = side==='red'?'redWins':'blueWins' const newLevel = Math.min(12, this.data[levelKey] + delta) this.setData({ [levelKey]: newLevel, [winKey]: this.data[winKey] + 1, locked: true }) this.save() } }) }, onRuleChange(e) { this.setData({ruleIndex: e.detail.value}) wx.setStorageSync('setting', {ruleIndex: this.data.ruleIndex}) }, onEndGame() { wx.showModal({ title: '结束整局', content: '级数、把数将清空,昵称保留', success: (res) => { if (res.confirm) { this.setData({ redLevel: 2, blueLevel: 2, redWins: 0, blueWins: 0, history: [], locked: false }) this.save() } } }) }, save() { const current = { redLevel: this.data.redLevel, blueLevel: this.data.blueLevel, redWins: this.data.redWins, blueWins: this.data.blueWins, history: this.data.history } wx.setStorageSync('current', current) } })
09-07
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值