首先需要搞清楚什么是
Sidebox
,
Sidebox
是一个显示在左侧或者右侧的内容区域,当然你也可以将
Sidebox
的单栏状态打开,使其显示在网页的任何位置。你可以通过进入后台的
Tools/Layout Boxes
Controller
来进行
Sidebox
的设置。注意的是如果开启了单栏
Sidebox
的话,你必须通过一句代码手动将其显示到模板中去,否则你是看不到任何效果的。
zen-cart
中自带了很多
Sidebox,
例如显示产品分类的
Sidebox,
显示最新产品的
Sidebox,
选择语言的
Sidebox
等等。
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的基本步骤,有了这些基础,你可以开发出更多复杂的应用。
分享到:
相关推荐
Zen-Cart是一款开源的电子商务购物车系统,专为在线商家设计,提供强大的商品管理、订单处理和店面定制功能。这份“史上最详细ZEN-CART模板修改文档”将深入讲解如何自定义和优化Zen-Cart的界面,以满足不同商家的...
在给定的资源"SideBox.rar"中,包含了创建这样一个控件所需的源代码及相关图形资源。 【源代码】是程序员用编程语言编写的原始指令,它是程序的核心部分,定义了控件的功能、行为和交互逻辑。在这个压缩包里,...
在这个场景中,我们讨论的是"zencart jscroller_sidebox商品上下滚动插件",这是一个专为Zencart设计的增强展示功能的插件。 该插件的主要目标是改善产品展示的方式,尤其是在有限的空间内。传统的网页布局可能无法...
代码的清晰结构和详尽注释,也使得即使是初学者也能快速掌握前端开发的核心技术。无论是面对课程设计、毕业设计的挑战,还是希望在专业领域展现自我,这份源代码文件都能成为您的得力伙伴。它的高效、实用和易用性,...
5. **布局设置**:`Configuration` -> `Layout Settings`允许你调整侧边栏(sidebox)的大小、状态(如开启或关闭购物车)以及主页的布局元素,如面包屑导航。 6. **产品管理**:`Catalog` -> `Categories/Products...
.mainbox, .sidebox { padding: 0 5px; margin-bottom: -9999px; padding-bottom: 9999px; } ``` 在上面的代码中,我们使用 `margin-bottom` 和 `padding-bottom` 属性来实现等高效果。 使用 border 实现等高 ...
<div class="sidebox"> <div id="navigation"> <!-- Navigation begins here --> <div class="sidenav"><!-- Sidenav --> <%--<div class="navhead_blank"><span><a href="#" title="">Dashboard...
<div class="sidebox"> <h3 class="title"><div class="r_option">(event, this.id, 99999, '', -1)">申请友情连接</a></div> 友情连接((event, this.id, 99999, '', -1)">申请) <ul style="margin-top:5px; padding...
其中的container区域又包含mainBox(主要内容区域)和sideBox(侧边栏)。 6.2.2 三列布局样式 三列布局样式是指页面被分为三个部分,即左侧栏、中间栏和右侧栏。这种布局方式可以使页面看起来更加简洁和美观。 ...
$('.sidebox ul li').hover(function(e){clearTimeout(intvaltime);var imgid=$(this).attr('rel');$('#picbox img').hide();$('#pic_'+imgid).fadeIn();$('.sidebox ul li').removeClass('this');$(this).addClass...
- **示例2**:使用`<h4>`替代`<div class="sidebox">`。 ```html 文章标题 这是一段文章内容。 ``` #### 三、使用有语义的标签 1. **概念介绍**:有语义的标签是指那些具有明确含义和用途的HTML标签,如`...
#### Sidebox()要使用它,您需要在您选择的图层上调用sideBox()方法(如果它不是图形图层)。 yourLayer . sideBox ( ) ; 使用此事件时,您需要/可以在多边形的element对象中传递以下数据: element: { '...
2. **jscroller_sidebox_v20.zip**:这是一个滚动侧边栏模块的更新版本,可能包含了 JavaScript 和 CSS 文件,用于在商店页面的侧边栏创建动态滚动效果。这样的模块可以用来展示新品、促销信息或者热门产品,增加...