zen cart 如何添加sidebox

本文将指导您如何在Zencart中添加侧边栏,利用侧边栏拼合的独特功能,为您的网站增添个性化元素。通过在sidebox文件夹建立新程序,登录后台进行配置,Zencart会自动检测并提示操作。掌握如何通过源码创建、调用和自定义sidebox,实现网站内容的灵活展示。
zen cart 如何添加sidebox


zen cart的左右边栏很有特色,由一块一块的sidebox拼合起来的,在模板的sidebox文件夹建立一个sidebox程序,登陆管理后台后,选择外 观控制,系统会自动检测到新增加的sidebox程序,并提醒你操作。并把所有的sidebox配置信息存储在layout_boxes的表格中。


程序调用边栏是通过includes/modules 目录下的column_left.php,和column_right.php 控制。分析下源码也非常简单
写新文章

深圳zencart首页查询layout_boxes数据表,检索出在左栏和或右栏显示的所有sidebox,再直接require 进来 layout_box_name 字段标记的sidebox名称。随便打开一个sidebox的源代码,如系统自带的includes/modules/sideboxes /banner_box.php,banner_box.php只要用来获取sidebox显示所要的数据,再通过 require($template->get_template_dir(’tpl_banner_box.php’,DIR_WS_TEMPLATE, $current_page_base,’sideboxes’),载入显示这个sidebox的模板,其实这个所谓的模板就是生成一个$content 的字符串,然后再require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,’common’) . ‘/’ . $column_box_default) 再用一个显示sidebox的公共模板,在$column_box_default中打印出$content的内容,这样一个sidebox就显示完成 了!


如何添加一个自己的sidebox?其实很简单,在includes/modules/sideboxes/{模板目录}/ 建立一个文件,就是一个sidebox了,可以在后台控制是否显示在默认的左右边栏和排序 。在这个文件中就输出任何内容了,当然可以按照标准的模式,再在includes/templates/{模板目录}/sideboxes 下建立一个模板文件require进来,尽量做到 M/V的分离,这样以后修改也会比较方便!
下面给出可直接编译运行的微信小程序最小可运行版本(单页面版),按前述锁定流程实现: ① 项目结构 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值