页面载入中...
首页 » Tag ‘挂件’

shopex4.85常用挂件教程——搜索框挂件详解

接下来将详细讲解一系列做独立网店需要的常用挂件。今天要讲的是最常用的挂件之一搜索框挂件,也就是搜索商品挂件。在一个独立网店中,搜索是起到很重要的作用,比如我去淘宝买东西,一般来说都是直接搜索商品名来筛选商品的。能够迅速的让客户筛选出自己想要的商品,提高客户的购物体验。

1 挂件路径:./plugins/widgets/search 文件夹下。

2 后台可视化添加挂件路径:添加版块>系统相关>商品搜索。

3 后台挂件选项(如图)

search

版块标题(使用版块边框后显示的标题名字)

版块模板(挂件模板,可以将自己做的模板替换原有的挂件,展现更多多样漂亮的挂件)

版块边框(对于重复性较多的挂件边框可以做挂件边框用于重复调用)

版块ID:(给该挂件最外层div上加上id)

版块className:(给该挂件最外层div上加上class)

搜索是否显示价格区间:(勾选则有价格区间的输入框)

4 用编辑器打开./plugins/widgets/search/default.html 查看代码。

image

当然我们可以做的复杂点,比如替换下输入框的value值这样的效果类似目前的京东搜索框。

当然也可以学习下其他的展示效果,例如讲搜索框的默认值设置为:请输入商品名,点击搜索框,文字(请输入商品名)消失,这种购物体验更加不错。

参考代码如下,可以尝试下学习。靠自己也能打造更漂亮的搜索框。

点击下载

转帖:shopex4.85文章挂件内读取时间的方法

一个朋友总结的关于在shopex4.85文章挂件(比如新闻版块,促销版块)内调用文章发布时间的方法。一句smarty标记,如下:

shopex4.85在首页的新闻部分读取时间标签:<{$article.uptime|userdate}>

详细代码:

<dl>

<{foreach from=$data item=data key=key}>

<dt><{$article.uptime|userdate}></dt>

<dd>

<{if $setting.smallPic==6 }>

<{if $setting.picaddress}>

<img src=”<{$setting.picaddress}>” />

<{/if}>

<{elseif $setting.smallPic}>

<{img src=$setting.smallPic path=”icons”}>

<{/if}>

<a href=”<{link ctl=article act=index arg0=$data.article_id}>” title=”<{$data.title}>”>

<{$data.title|cut:$setting.max_length}>

</a>

</dd>

<{/foreach}>

</dl>

shopex4.85在首页的新闻部分读取时间标签:<{$article.uptime|userdate}>
<dl>    <{foreach from=$data item=data key=key}>       <dt><{$article.uptime|userdate}></dt>        <dd>        <{if $setting.smallPic==6 }>          <{if $setting.picaddress}>          <img src=”<{$setting.picaddress}>” />          <{/if}>        <{elseif $setting.smallPic}>        <{img src=$setting.smallPic path=”icons”}>        <{/if}>            <a href=”<{link ctl=article act=index arg0=$data.article_id}>” title=”<{$data.title}>”>            <{$data.title|cut:$setting.max_length}>            </a>        </dd>    <{/foreach}>  </dl>

实现方法:
第一步:在商城网站的如下目录\plugins\widgets\article,复制“default.html”文件重命名“xg_list.html”

第二步:把如下代码复制并替换“xg_list.html” 里的所有内容
————————————————————————-

<{capture name=titleImg}>

<div class=”titleImg”><a href=”<{if $setting.titleImgHref}><{$setting.titleImgHref}><{else}><{link ctl=artlist act=index arg0=$setting.id}><{/if}>”><img src=”<{$setting.titleImgSrc}>” alt=”<{$setting.titleImgAlt}>”/></a></div>

<{/capture}>

<{capture name=articleCat}>

<{if $setting.showTitle==”on”}>

<h4><{$setting.titleDesc}></h4>

<{/if}>

<{/capture}>

<{capture name=articleLoop}>

<dl>

<{foreach from=$data item=data key=key}>

<dt><{$article.uptime|userdate}></dt>

<dd>

<{if $setting.smallPic==6 }>

<{if $setting.picaddress}>

<img src=”<{$setting.picaddress}>” />

<{/if}>

<{elseif $setting.smallPic}>

<{img src=$setting.smallPic path=”icons”}>

<{/if}>

<a href=”<{link ctl=article act=index arg0=$data.article_id}>” title=”<{$data.title}>”>

<{$data.title|cut:$setting.max_length}>

</a>

</dd>

<{/foreach}>

</dl>

<{if $setting.showMore == “on”}>

<div class=”more clearfix”><a href=”<{link ctl=artlist act=index arg0=$setting.id1}>”>更多…</a></div>

<{/if}>

<{/capture}>

<div class=”ArticleListWrap”>

<{if $setting.showTitleImg==”off”}>

<div class=”ArticleList”>

<{$smarty.capture.articleCat}>

<{$smarty.capture.articleLoop}>

</div>

<{elseif $setting.titleImgPosition==”top”}>

<{$smarty.capture.titleImg}>

<div class=”ArticleList”>

<{$smarty.capture.articleCat}>

<{$smarty.capture.articleLoop}>

</div>

<{elseif $setting.titleImgPosition==”center”}>

<{$smarty.capture.articleCat}>

<{$smarty.capture.titleImg}>

<div class=”ArticleList”>

<{$smarty.capture.articleLoop}>

</div>

<{elseif $setting.titleImgPosition==”bottom”}>

<div class=”ArticleList”>

<{$smarty.capture.articleCat}>

<{$smarty.capture.articleLoop}>

</div>

<{$smarty.capture.titleImg}>

<{elseif $setting.titleImgPosition==”left”}>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td width=”15%”><{$smarty.capture.titleImg}></td>

<td><div class=”ArticleList”>

<{$smarty.capture.articleCat}>

<{$smarty.capture.articleLoop}>

</div>

</td>

</tr>

</table>

<{elseif $setting.titleImgPosition==”right”}>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td><div class=”ArticleList”>

<{$smarty.capture.articleCat}>

<{$smarty.capture.articleLoop}>

</div>

</td>

<td width=”15%”><{$smarty.capture.titleImg}></td>

</tr>

</table>

<{/if}>

</div>

————————————————————————-
第三步:打开商城网站的如下目录\plugins\widgets\article的“widgets.php”文件添加一行代码:’xg_list.html’=>’首页右侧新闻列表-小官’
如下图:注意:在新加的一行代码的上行【’div_list.html’=>’多层’,】后面要加一个英文逗号

第四步:到后台页面管理—模版列表–编辑模版–选择要加新闻列表的页的可视化编辑–添加版块–文章相关–文章列表


转自:小官的博客:http://blog.xiaoguan.net/?p=244

Shopex模板教程-挂件版块边框样式详细介绍

我本来一直反对使用边框样式的,觉得麻烦。后来在实践中发现边框样式还是有其优点的。拿出来分享一下。

什么是shopex模板的挂件边框样式呢?

我个人觉得是给一个版块添加边框,后台可视编辑时方便修改标题的一种方案。举个例子,http://www.51wfz.com/

使用的是shopex4.84系统,可以看下他左侧的挂件版块的边框样式是一致的,后台会非常容易的编辑

如果分别定义样式写起来比较麻烦,如果做成挂件边框,管理和维护起来就方便一些。

好了,我们知道了挂件边框,我们看下如何来制作一个简单的挂件的边框样式。首先要在theme.xml和info.xml中配置下挂件边框样式。

在<borders></borders>中插入要配置代码,如下:

key是给他起个容易识别的名字,方便后台可视编辑的时候选取,tpl是给挂件边框设置模板路径。

484系统曾经有个BUG,不知道485有没有解决,就是配置一个挂件边框的时候,后台可视编辑的时候是不显示的。一定要配置2个或以上才能显示出来。当配置好2个xml文件以后。

那就在borders文件夹建立个html文件,用于存放挂件边框样式的模板。

类似如下代码:

基本就是HTML架构,我们将这个边框样式拆分成3块,头部,中部和底部。最外面还加了个<DIV>标记,它含有个id属性。这个id属性为<{$widgets_id}>,当后台可视编辑挂件时候会看到版块ID,那就是写入这里的

当然不写也没问题。重要的讲下另外2个字段。<{$title}>表示版块标题,<{$body}>就是挂件内容本身了。

版块标题是后台编辑挂件的时候选填的,也就是上图的 “站内搜索” “产品分类”的中文字。

我们来看下挂件编辑时要注意的3个地方。1是版块标题:这里写的是站内搜索。2版块模板,也就是该挂件的模板。是在plugins/widgets下对应的挂件模板。3版块边框就是刚才设置的挂件边框样式。

当我们设置好一个挂件版块边框后,调整样式,就能设置一个重复性很高的边框了。

最后我们需要重新加载下模板,首先备份下xml文件,我在以前的教程中说过,XML文件时第一次模板加载时候读取的,以后再也不会读取xml文件。所以刚才配置的xml文件实际上如果不点恢复模板,是不会加载的。重新加载之前先备份你的模板,写入下xml,不然你以前做的挂件都没用了。备份产生一个theme_bak.xml,应用下,就OK了。

Shopex4.85模板教程-挂件(widgets)初识(下篇)

shopex挂件机制在后台是可视化编辑的,这点与其他的CMS模板编辑是有所区别的,优点是更利于普通操作,即使一个完全没有HTML经验的新手也能完成商品添加,购物车信息条添加的操作。这点优秀的智能化提升后台操作化,也带来了不利于高级个性化操作的困难。比如我要对商品挂件的HTML重新构造,甚至添加些特效变得比较困难。如何修改挂件文件呢?

我们来看下挂件的目录,是放在系统根目录plugins下的widgets文件下,其中每个文件夹代表一个挂件。任意打开一个文件夹,都可以看到一个挂件配置文件widgets.php,用编辑器打开,可以看到其在后台的添加路径和名字。还有挂件模板路径,挂件模板路径是一个数组,所以可以添加多个挂件模板,方便调用。这个有个小技巧,如何快速知道你添加的挂件是那个文件夹,添加这个挂件,在没有设定 版块标题时,出现如图:

widgets可以看到他的标题显示为article,也就是文件夹名为article的文件夹。如需要修改进入该文件夹可以修改配置文件或者模板。

几乎所有的免费模板都不会修改挂件,也就是说只导出.tgz的文件包。没有挂件的修改,挂件只修改了css样式文件。有些特殊需要一定要修改挂件的HTML只能修改挂件模板了。建议修改前先做好备份,是个良好的习惯。

如果所有的挂件都不能满足你的需求,那只有用自定义挂件了,自定义挂件可以添加任意HTML代码,js代码,css代码,比如要插入一个超绚的FLASH焦点图,那用自定义挂件是个明智之举,或者直接写入模板文件内,也是个不错的方法。

Shopex4.85模板教程-挂件(widgets)初识(上篇)

shopex模板挂件初识

shopex系统中的挂件机制是系统的一大亮点,可视化的操作对于一些想经营独立网店的用户操作更加得心应手。

接下来我们认识下shopex挂件(widgets)。

挂件(widgets)是插件的一种,一种封装好功能的版块。就好比shopex是windows,而挂件是一些应用软件(QQ,realplayer)。如果shopex模板想添加系统的一些功能,如要添加注册登录信息条,logo,图片广告等就要把本来做好的功能(挂件)添加到页面上。

如何添加一个挂件,首先要在页面的HTML上添加如下代码<{widgets id=”abc”}>,成为挂件位,是用来后台管理添加挂件所用的。也就是说首先要有挂件位,才能添加挂件。一个挂件位可以添加多个挂件,但是强烈建议一个挂件位放一个挂件。挂件位的id的用处是保存在数据库中版块的位置。举个例子:多个<{widgets}>添加了多个挂件,没有id属性,当删除挂件位后就会出现挂件偏移的现象,因为删除的挂件位后,后面的挂件会自动补上。所以建议添加上id, 他的id是标示,是唯一的。每个挂件位的id都不能相同,相同的id的挂件位,会出现添加一个挂件位,另外一个同id的挂件位同时出现该挂件的现象。

当在页面中添加类似<{widgets id=”cart”}>的挂件位就可以添加挂件了。

打开后台可视化模板编辑状态。就可以看到类似这样的 空挂件位

shopex空挂件位

然后点击顶部左侧的添加版块按钮就可以添加挂件了。

挂件弹出框
添加后保存,然后点击保存修改,就可以刷新页面来观看效果了。