zen-cart开发教程 - 开发Sidebox

本文详细介绍了如何在zen-cart中开发一个简单的侧边栏插件,包括配置语言、创建模板、设置显示位置等基本步骤。从创建侧边栏到安装、发布,全程指导,适合初学者快速上手。

首先需要搞清楚什么是

Sidebox, Sidebox是一个显示在左侧或者右侧的内容区域,当然你也可以将 Sidebox的单栏状态打开,使其显示在网页的任何位置。你可以通过进入后台的 Tools/Layout Boxes Controller来进行 Sidebox的设置。注意的是如果开启了单栏 Sidebox的话,你必须通过一句代码手动将其显示到模板中去,否则你是看不到任何效果的。 zen-cart中自带了很多 Sidebox, 例如显示产品分类的 Sidebox, 显示最新产品的 Sidebox, 选择语言的 Sidebox等等。

  1. Sidebox相关的文件和目录
输出左侧 sidebox的文件: /includes/modules/column_left.php
输出右侧侧 sidebox的文件: /includes/modules/column_right.php
输出单栏 sidebox的文件: /includes/modules/column_single.php

存储 sidebox的位置: /includes/modules/sideboxes
Sidebox模版位置: /includes/templates/template_default/sideboxes

默认左侧 sidebox模版 /includes/templates/template_default/common/tpl_box_default_left.php
默认右侧 sidebox模版: /includes/templates/template_default/common/tpl_box_default_right.php
默认单栏 sidebox模版: /includes/templates/template_default/common/ tpl_box_default_single.php



实例: hello_sidebox的开发
下面我们来开发一个简单的 sidebox,以说明开发一个 Sidebox的基本步骤,该 sidebox只显示一段文字,并不实现任何功能, 我们将这个 sizebox命名为 hello_sidebox。
1). 设置语言和要在 sidebox中显示的内容
在目录 ” /includes/languages/english/extra_definitions”新建一个 PHP文件,命名为 ” hello_sidebox.php”, 并设置英语环境下 sidebox的 Title和要显示的内容。该文件中定义了两个常量 BOX_HEADING_HELLOW_SIDEBOX(sidebox的标题 ), 'BOX_HEADING_HELLOW_SIDEBOX_CONTENT(显示的内容),代码如下
define (BOX_HEADING_HELLOW_SIDEBOX , " Hello sidebox " );
define (BOX_HEADING_HELLOW_SIDEBOX_CONTENT , " This is a sidebox demo " );

2). 新建 sidebox文件
在目录”/includes/modules/sideboxes”下面新建一个 文件, 命名为” hello_sidebox.php”, 并输入以下代码, 其中第一行加载了hello_sidebox的模板文件, 第二行设置了sidebox的标题, 第三行代码加载了用来输出sidebox的模板文件.

require ( $template -> get_template_dir( ' tpl_wp_cats.php ' , DIR_WS_TEMPLATE , $current_page_base , ' sideboxes ' ) . ' /tpl_hello_sidebox.php ' );
$title = BOX_HEADING_HELLOW_SIDEBOX;
require ( $template -> get_template_dir( $column_box_default , DIR_WS_TEMPLATE , $current_page_base , ' common ' ) . ' / ' . $column_box_default );


3). 新建sidebox模版文件
sidebox模板文件实际上并不会输出任何内容到网页上面, 这里只是构造了要在Sidebox内部显示的内容(变量$content). 这里, 我们的内容仅仅是将常量BOX_HEADING_HELLOW_SIDEBOX_CONTENT的值赋给$content,代码如下.
$content = "" ;
$content .= BOX_HEADING_HELLOW_SIDEBOX_CONTENT;

4). 安装sidebox
进入管理后台 >>Tools>>Layout Boxes Controller, 就可以看到我们刚才开发的 hello_sidebox插件了 , 选中 hello_sidebox, 点击编辑按钮 , 将 Left/Right Column Status设置为 on, 再点击 Update按钮 , 这样安装过程就完成了 . 现在再刷新一下首页 , 是不是就能看到我们的 hello_sidebox盒子了呢 ?
5). 发布sidebox
将刚才的文件按照原始的目录结构进行打包 , 如 下图所示 , 就算发布成功了 . 这样就可以把我们开发好的插件共享给别人使用了 .



怎么样,很简单吧。该示例虽然很简单,却也涵盖了开发Sidebox的基本步骤,有了这些基础,你可以开发出更多复杂的应用。
下面给出可直接编译运行的微信小程序最小可运行版本(单页面版),按前述锁定流程实现: ① 项目结构 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、付费专栏及课程。

余额充值