页面载入中...
首页 » Tag ‘shopex4.85’

转帖: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

shopex4.85模板-女性化妆品等行业适用001-模板文档说明

一个模板制作完成必然要写一些文档,让使用者,或者将要使用的朋友他的一些说明性的文档。这套模板(原创高品质shopex4.85模板-女性化妆品等行业适用(2010.9.11))开发周期为2个星期左右。适用于shopex4.85系统,浏览器兼容性的支持非常的好。设计上简洁大方,突出产品,而非喧宾夺主的渲染设计。

当然模板做好后,需要一系列的设置来最终达成和设计稿的同步一致,并且达到比较好的购物体验效果。

首先需要设置下商品图片大小,该模板的建议图片为正方形图片。后台设置为下图

pic

也就是说你的商品大图至少要400px*400px的正方形图。这样是显示效果最好的。

其次我们来看下这套模板的后台挂件机制。首页基本上可视部分皆可在后台进行修改,为挂件部分。flash焦点图更加优化,显示效果更好。和http://www.topshoes.cn/一样的flash焦点图。

最后模板对每个用户都个性化的设计了QQ,淘宝旺旺和电话的修改方案,更加突出模板的个性化,模板是服务于个人的。

QQ代码的获取:http://wp.qq.com

淘宝旺旺代码获取:http://www.taobao.com/wangwang/tese/index.php

获取代码后我会将代码插入模板,以后即时通讯更加方便。

告知电话号码后可修改电话插入模板。

如对模板进行修改,可参考我其他模板制作和修改教程。

博客搜索引擎收录良好,关键字排名不错

由于只简单的SEO了下博客,最近终于流量上涨了。

基本上关于shopex的关键字都排名不错,做独立网店推广以SEO为重,不仅推广费用低而且长久稳定。

一部分shopex有关的关键字,排名百度,google都占到的前2页。

标签:

Shopex4.85商店顶部导航终极详解(一)

我们先来看下简单版本的顶部导航效果,点击看大图

鼠标移动上去有高亮效果,但是有的朋友说能不能做,当前页面高亮效果,我只能说部分可以,由于shopex系统只支持伪静态,通过javascript很难定位当前页面的子页面。下面会详细讨论下,我们先看下这个效果。

首先要在photoshop中切出黑色导航背景,高亮图的背景,这部分就不说了。

顶部导航一般放在header.html中,所以在header.html放上一个<div>标记,然后在这个<div>添加一个挂件位,如:

<div id=”menu”>

<{widgets id=”menu”}>

</div>

然后去商店后台添加挂件。添加版块 > 导航相关 > 商店导航菜单

版块边框选择无边框。导航数量决定了顶部导航的版块数量,如写上6,代表超过6个版块将显示下面的文字。一般显示文字我填成空。超过的就隐藏了。但是这里有个诡异的问题,就是即使是隐藏了也会在页面写有一个<li>的代码段。最好的解决方法是在后台的页面管理 > 站点栏目 只显示必要的栏目。

我们可以保存后看下效果,这时的效果文字是竖排的,如下图:

现在我们用firebug插件看下HTML代码,然后用css来修饰导航,让他变成我们想要的效果。

对于初学者来说,尽量不要修改挂件的HTML代码。当然修改HTML代码带来的好处有很多。比如精简代码。

css代码如下

*{margin:0;padding:0;}
#menu{background:url(nav.gif) no-repeat;padding:15px 30px;height:44px;}
#menu ul li{float:left;}#menu ul li a{color:#fff;padding:0 25px;height:44px;
line-height:44px;display:block;float:left;}/*float:left;是兼容IE6*/
#menu ul li a:hover{background:url(a_bg.gif) repeat-x;color:#333;}

那么一个简单的商店顶部导航就做好了,它的管理是在 页面管理 > 站点栏目 中,当然简单的商品分类也能这样添加。

下次讲的是商品分类多层的商店导航。

Shopex4.85模板教程-制作一个首页-实例(三)

头部文件header.html和底部文件footer.html编辑完成后,打开index.html文件,开始编辑首页中部内容区。

index.html必要的包括2句话

<{require file=”block/header.html”}> 调用头部文件

<{require file=”block/footer.html”}> 调用底部文件

接着布局网页架构,如下图

在每个版块添加相应的挂件位。

附上各个挂件位要添加的挂件路径

商品分类:添加版块>商品相关>商品分类

滚动广告:添加版块>广告相关>多功能轮播广告

商店公告:添加版块>文章相关>文章列表

最新商品:添加版块>商品相关>商品展示/多功能商品展示

推荐商品:添加版块>商品相关>商品展示/多功能商品展示

广告:添加版块>广告相关>图片广告

至此:首页基本功能全部添加完毕,应用CSS调整整个页面就可以做出一个完整的首页了

Shopex4.85模板教程-制作一个首页-实例(二)

接上篇,需要补充的是css路径和图片路径,打开block/header.html文件,在<head></head>标记中调用你的模板css文件。

例如:<link rel=”stylesheet” href=”images/css.css” type=”text/css” /> 路径尽量用相对路径。

接下来打开block/footer.html文件,想要模范下京东商城的底部信息,如下图(点击放大)

首先需要布局成5块,然后添加不同的挂件位,如下html代码

<ul>

<li><{widgets id=”siteinfo1″}></li>

<li><{widgets id=”siteinfo2″}></li>

<li><{widgets id=”siteinfo3″}></li>

<li><{widgets id=”siteinfo4″}></li>

<li><{widgets id=”siteinfo5″}></li>

</ul>

设置li的CSS样式浮动float:left,ul的CSS 为overflow:hidden(清除浮动)。并添加5个挂件位。

进入后台可视化编辑模板,添加版块>导航相关>站点目录树。这些信息是后台>页面管理>站点栏目中信息,可自行添加修改。

确保底部footer.html中含有<{footer}>代码。完成footer.html文件编辑。

布局HTML 详解 参考下图

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

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

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

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

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

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

Shopex4.85模板教程-模板文件详解

接下来我们继续来看下purple(紫气东来)文件夹。

打开文件夹。看到3个文件夹和2个XML文件和若干html文件。xml配置文件已经在前2天说过了,如果还有朋友不知道的话,可以看下。

Shopex4.85模板教程-模板XML文件(theme.xml与info.xml)详解

接下说下3个文件夹,block文件夹,放着公共的部分的html模板,比如一个网站的头部,紫气东来模板里为header.html和底部信息footer.html,由于所有页面都调用这2个文件,所以独立出来。方便调用。

我们可以使用编辑器打开下header.html文件,在<head></head>标记内有个<{header}> ,切忌所有头部调用这个标记,他包含了一系列的Javascript,mootools框架。如果没有调用,会出现很多问题,购物车肯定是加不进了。切忌。

还要在<head></head>内调用自己的css,建议写相对路径。

当然底部文件footer.html 中也要有<{footer}>标记,包含着shopex的版权。去版权可是官方收费的,如果不放<{footer}>,页面肯定出问题。这是毫无疑问的。

然后看下borders文件夹,放着是挂件的边框样式(挂件会以后详细讲一下),挂件的边框样式有什么作用呢?就是后台添加挂件的时候可以选择不同样式,比如添加多个相似挂件时候,风格类似,写框架可以节约很多时间。不过我不习惯写,呵呵。

images文件夹放着模板所用图片,css,javascript文件。调用的时候写相对路径就OK了。

除了3个文件夹还有很多的html文件。这些就是所说的页面模板。index.html就是首页模板,当然shopex4.85可以给首页起不同的名字。shopex4.85可以给所有页面起不同的名字,例如列表页,商品详细页都可以有很多个页面。

在后台新建立个列表页,名字可以随便起,然后就可以在文件夹中发现你新建的一个.html文件了。就是你刚才新建的文件。用编辑器打开,一般顶部和尾部会有调用头部信息和底部信息的代码。

<{require file=”block/header.html”}>和<{require file=”block/footer.html”}>

这样就调用到了公共头部和底部。4.85可以建立非常多的页面进行调整模板。

首页-index.html

商品列表页-gallery.html

商品详细页-product.html

商品评论/咨询页-comment.html

文章列表页-artical.html

赠品页-gift.html

捆绑商品页-package.html

品牌列表页-brandlist.html

品牌展示页-cart.html

购物车页-search.html

高级搜索页-passport.html

注册/登录页-passport.html

会员中心页-member.html

站点栏目单独页-page.html

订单详细页-order_detail.html

默认页-default.html

订单确认页-order_index.html

每个页面可以定义多个页面用来备份。4.85还有分类可以绑定不同的列表页和商品详细页。功能以后再提。

Shopex4.85原创免费模板-春天气息-免费下载(4月18日)

shopex4.85系统免费模板-春天气息 缩略图见下图。

shopex4.85原创模板-春天气息

shopex4.85原创模板-春天气息

下载地址:shopex4.85原创模板-春天气息

说明:解压后 有2个文件夹,请先备份原系统的plugins/widgets 文件夹 然后在覆盖原系统文件。

如有BUG 请留言,谢谢。

Shopex4.85模板详细教程-工具篇

工欲善其事,必先利其器。

马克思说:人类区别与其他动物的最根本的区别是制作和使用工具。当然马克思说的很多话不能相信。。。HOHO。。

这句话还是可以听一下的。

要做好shopex4.8系统的模板也要好工具来帮忙,接下来看下有哪些工具,可以使你做事事半功倍。

1 photoshop cs3版本。要做好效果图,这个工具必不可少。CS4版本比较考验机器性能,装个CS3版本,基本功能一个都不少,修修改改的用起来很顺手。

2 dreamweaver cs4版本,同样是ADOBE公司的一款工具,写前端代码非常方便,且可以设施2个浏览器进行调试。代码提示等诸多方便的功能。

3 FireFox浏览器,如果你作为一个前端开发人员,不装Firefox浏览器都不好意思和别人打招呼。基本完全符合W3C制定的规范运行的浏览器。并且配合FIREBUG等诸多插件,使你调试页面非常方便快速。

4 IETESTER 软件。是不是觉得对诸多IE版本调试起来非常痛苦。使用这个软件可以一次性调试IE5~IE8所有的版本。事半功倍的利器。

5 红蜻蜓截图软件。我个人用的截图软件,方便快速。