页面载入中...
首页 » Shopex模板教程

Shopex模板教程文章集合列表[置顶]

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模板技巧-做一个精美的购物车

首先 前台显示的购物车版块 是一个功能板块,可以用挂件来实现,添加挂件前首先要在html页面上添加一个挂件位。可以参考我以前写的挂件知识,<{widgets id=”cart”}>一般添加在头部文件,那就在所有页面都会显示购物车版块了。类似下面的购物车版块。

这个购物车挂件的首先需要做个背景图片,也就是去掉文字和去处理按钮的背景。然后用编辑器打开./plugins/widgets/cart/default.html 很简单的1段代码。当然其中有个页面微小BUG,也就是数字的右边距会多出一些空白,初步分析是js这样的输出方式导致的。如果你要求对你的购物车的代码非常要求高,左右2边间距完全一致,2边要求没有间距,那么建议把其中的js删掉自己写一段。

参考代码如下:

提供下载测试:点击右键另存为

最后说下那个按钮的链接地址为./?cart.html,都是链接到购物车页面,大功告成。

shopex后台模板设置详细介绍

shopex模板后台管理是在页面管理菜单下模板列表中,使用的模板会显示如下图。

shopex_houtai

模板文件管理指的是该套模板(./themes/该模板路径)下所有的文件,不包括挂件文件。如一些图片,各个页面的架构HTML和定义CSS基本都在这里。可以进行简单的修改,如果要大量的添加和修改建议使用编辑器直接打开./themes/该模板路径下的文件进行修改更好。

点击编辑模板按钮,shopex_houtai2

下载模板可以生成一个.tgz的模板压缩包,方便上传。

模板文件管理和上面说的完全一样。

恢复默认是直接读取模板文件下theme.xml文件,恢复成这个模板最初始的样子,一般用于恢复模板初始状态使用。

功能板块管理是用于一些底层模板页面的修改。这里不多讲。可以适当看下。

shopex_houtai3

在创建新页面中可以添加页面,用于展示各个不同页面模板。比如商品列表页,商品详细页的布局不同。就可以创建不同的新页面,来调整他们的布局和挂件。在shopex4.85中不同分类的商品可以绑定不同的商品列表页和商品详细页。

设置一个页面为默认页面后,系统就会读取这个页面作为该页面的模板。

shopex模板后台设置注意事项

当我们使用一套模板后需要在后台设置一些必要的属性,来更好的展示模板,接下来我们看下需要设置哪些属性,来配合模板。

1.商品图片设置(商店配置>商品图片设置)

这个属性一般在做好模板后首先需要配置的,对三种图片大小的配置,可以在商品版块批量生成图片大小。

shopex

尽量配置将图片的宽高比例设置一致,这样不会失真图片,当然在商品编辑的时候,我们给列表页单独上传图片,这样可以更多样化的展示图片,但是较为麻烦。

2.商品列表默认展示方式(商店配置>购物显示设置)

shopex1

对于列表页的商品展示的方式,默认为图文混排,一般对于观赏性较好的商品,建议用橱窗形式。

3.站点栏目(页面管理>站点栏目)

一般商店导航栏用的就是站点栏目中的栏目,可自行调整需要显示和不显示的栏目,更可以添加外部链接,比如论坛。当然商品顶级分类也是可以选择的。大家可以研究下这个站点栏目的作用,还有文章分类也是这里添加的,有的朋友可能找半天也不知道文章分类添加的地方,就在站点栏目中,好好看下。

shopex2

4.网页底部信息(页面管理>网页底部信息)

这里一般我都是全部删掉的,默认的确实不怎么好看。这里可以自定义下必要的内容,放备案号个人感觉不错。

Shopex4.8模板制作零基础教程系列-HTML语言重新认知

百度百科中的解释:HTML(HyperText Mark-up Language)即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。

有的朋友认为HTML简单易学,没有必要重点讲解。其实是个误区,HTML是一切前端页面表现的基础。也是WEB标准化(表现层,结构层,行为层)中的结构层。如果你觉得他简单,那么先看下最简单的这个例子:<DIV>&nbsp;他说:”SEO”。</DIV>这句最简单的HTML语言有什么问题。给你5分钟的考虑时间。能够找出其中问题来吗。

首先标记大写问题,在标准的XHTML中标记都要小写,<div></div>这样的写法才是合理的。

其次,空格符(&nbsp;)我不止一次的在shopex的挂件中发现这种空格符,他有2个问题,1是增加了页面的输出,空格符是占字节的。2是兼容性问题,空格符在多种浏览器中解析不同,很难控制其占据的空间。

还有呢,他说的这句话是一句引用,引用有专门的引用标记,例如<q></q>标记,短引用标记,但是他对浏览器兼容性有一定的问题,那么还有个<blockquote>标记也是引用的标记。

最后SEO是一个缩略词,是Search engine optimization的首字母缩写。他也有专门的标记。<acronym></acronym>。

最后的写法:<div>他说:<blockquote>”<acronym>SEO</acronym>”</blockquote></div>

有的朋友说那不是自找麻烦么,那么首先要知道HTML除了解析的作用之外还有什么作用。每个HTML标记都有其含义,他的含义是给搜索引擎来看的。搜索引擎不知道你什么地方时重点,什么地方时引用,什么地方时缩写。他只能靠标记来识别。

所以最后说一句,请重视HTML语言,你学的还远远不够。

Shopex4.85模板教程-商品展示挂件的添加(goods_show)

Shopex系统丰富的挂件造就了其模板的多样化,今天来讲下shopex4.85网店系统使用频率最高的挂件之一商品挂件(后台商品相关->商品展示)。

商品展示挂件是shopex4.85的一个新挂件,是从shopex4.84商品挂件分离出的一个添加简单商品类型的一个挂件。它的优点是简单化,容易操作。可以很方便的添加筛选以后的商品。但也去掉了一些功能,比如购买区域被去掉了,shopex4.84的商品挂件现在叫多功能商品展示(后台商品相关->多功能商品展示)。我们首先去后台添加下这个挂件。可视模板编辑中添加挂件,在商品相关->商品展示添加挂件。

goods_show,shopex商品展示挂件

在弹出的框内,可以选择挂件的模板(版块模板)。可以添加版块的边框,idclass也能设置。然后可以对商品进行多方面的筛选,直到筛选你需要的商品为止,多方面的筛选条件可以更方便的选择商品。排列方式设置可以设置商品数量和排序方式。最后可以对商品的显示方式进行设置,最后保存。就可以添加简单的商品展示挂件了。

OK,现在开始讲重点。这个商品展示挂件的是表格布局的,有其局限性。也就是说要把他调整成XHTML+CSS的布局方式。我个人比较喜欢改成<ul><li>的布局方式。首先打开./plugins/widgets/goods_show/widgets.php配置文件。在数组中添加一个模板选项 ‘default2.html’=>’新模板注意之前要加英文半角逗号。然后复制该目录下的default.html改名成default2.html然后用编辑器打开该模板。如果你的xhtml+css功底比较纯熟,那么把这个挂件内的table布局改掉。我经常将他改成<ul><li>布局,然后用js控制,添加划入划出的效果。我想如果用table的话就比较困难吧。最后在后台改掉版块模板,选择新模板。保存后看下效果吧。

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了。

Shopex模板之争——收费模板 VS 免费免费

我们先看下免费模板与收费模板的各自优势与缺点:

免费模板的优点:

1 免费,成为免费模板最大的优点。

2 丰富的选择面,由于有大量的免费模板选择,可以选了套,先试用下,不喜欢的话,还可以换其他的。

3 成为学习模板的途径之一,学习别人的模板制作对自己提高很有帮助。

免费模板的缺点:

1 设计质量普遍较低,免费么,当然不可能尽全力花1个月精心制作一套免费模板。

2 代码抒写普遍混乱,一些免费多为练手的习作,不考虑扩展与维护等众多因素。代码冗余自然是免不了的

3 木马等危险代码的可能性,天下没有免费午餐,免费的往往是最昂贵的。

4 重复代码对SEO的影响。大量相类似的网站代码对搜索引擎不太友好,搜索引擎会考虑是不是重复网站。导致收录等排名问题。直接导致流量问题。

收费模板的优点:

1 设计质量较好,既然是收费模板,自然要看看质量,挑选更好的模板作为自己网店的选择,一般收费模板的设计质量都比较好。

2 重复网站的概率相对小很多,对搜索引擎更为友好。

收费模板的缺点:

1 价格昂贵,一般的收费模板从100至上千都有。定制模板甚至可达几万元的价格。

2 良莠不齐的制作,由于代码的复杂性,一般使用者无法了解,模板的扩展性,维护性,代码规范性及SEO也是重要因素,基本上模板需要考虑非常多的因素,所以做一套好的模板非常不易。

3 售后服务,也是重中之重,一般在模板商买之前都会态度非常好,购买以后态度大变的不乏其数。我接触的到不少朋友这样。花了500元的模板不能用,问模板商的时候已经完全没有反应了。

使用免费模板还是收费模板?

主要根据自身网站的需求,如果要长期发展,资金充足的情况下,建议使用收费模板,甚至是定制模板来提升自身网站的形象。如果只是学习阶段,建议使用免费模板,这样投入不会太多。

标签: