ECShop H5微商城
ECShop APP商城
ECshop4.0商业授权
ECShop源码全能套餐
ECMall全能套餐(含主机)
ECMall3.0功能定制
ECShop商城小程序
ECShop二开定制
ECShop授权套餐
ECShop装修市场
ECMall基础套餐(PC+H5)
ECMall3.0商业授权
返回列表 发帖

[共享] 仿京东 左侧帮助中心

看到有人要 就弄了一下
其实把帮助做到左侧其实也很不错
现在就分享给大家
第一步 建立一个
help_left.lbi
代码

  1. <!--{if $helps}-->
  2. <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  3. <div class="left_qiji">
  4.     <h2>帮助中心</h2>
  5.     <div class="help_side">
  6.         <!-- {foreach from=$helps item=help_cat} -->
  7.         <h4>{$help_cat.cat_name}</h4>
  8.         <ul>
  9.             <!-- {foreach from=$help_cat.article item=item} -->
  10.             <li><a href="{$item.url}">{$item.short_title}</a></li>
  11.             <!-- {/foreach} -->
  12.         </ul>
  13.         <!-- {/foreach} -->
  14.     </div>
  15. </div>
  16. <!--{/if}-->
复制代码

第二步
加入以下css代码到你的style.css文件任意位置
注意图片我难得上传了就直接用的京东的 可以自己下载

  1. .left_qiji{width:165px;overflow:hidden;margin-right:10px;float:left; background:url(http://www.360buy.com/help/images/helpcenter_01.gif) no-repeat 0 100%;padding-bottom:5px}
  2. .left_qiji h2{ background:#f60 url(http://www.360buy.com/help/images/helpcenter.jpg) no-repeat;height:29px;line-height:300px;overflow:hidden}
  3. .help_side{border-left:1px solid #959595;border-right:1px solid #959595}
  4. .help_side h4{ background:#faf4d1;border-bottom:1px solid #d6d0b1;height:26px;line-height:26px;padding-left:25px;color:#4a4a4a}
  5. .help_side ul{padding-top:15px;padding-bottom:15px}
  6. .help_side ul li{ background:url(http://www.360buy.com/help/images/helpcenter_icon.gif) no-repeat 20px 5px;padding-left:32px;height:20px;line-height:20px;overflow:hidden}
复制代码


第四步
在需要显示的地方加入
<!-- #BeginLibraryItem "/library/help_left.lbi" --><!-- #EndLibraryItem -->

由于各个模板中 左侧宽度不一样 所以请自行修改
.left_qiji{width:165px;
以适应你的模板!
ECShop下载                             ECShop4.0商业授权

又有好心人,正需要,试试!

TOP

不错,好样的!

TOP

我也要这个,可实现不了呀
ECShop下载                             ECShop4.0商业授权

TOP

我用在2.72为什么不显示?
ECShop下载                             ECShop4.0商业授权

TOP

看我的!
www.5i5net.cn
flyhome 发表于 2010-1-24 22:38


这位老兄的帮助中心 才是大家想要的

TOP

呵呵,不错,多谢共享

TOP

楼主,象4楼这样加在这个页面:http://www.5i5net.cn/help-16.html,应该在什么文件的哪个位置加<!-- #BeginLibraryItem "/library/help_left.lbi" --><!-- #EndLibraryItem -->,我在article.dwt内试了很多都不行,望指教。

TOP

不错 你知道怎么调用帮助中心吗?????????????
ECShop下载                             ECShop4.0商业授权

TOP

谁可以帮帮我呀~

TOP

本帖最后由 leiyunjn 于 2010-3-5 02:52 编辑

非常感谢楼主的分享,我照着做了一个。可是出现一个问题:
我的帮助中心列表中多出了好多的空格,撑大了版面,非常难看,请问这些空格是从什么地方出来的?
我换了默认模板以及另外几个模板试过,结果都一样的。

A1.jpg
2010-3-5 02:47
      
A2.jpg
2010-3-5 02:47

A.jpg
2010-3-5 02:47


下方横向的帮助中心是正常的

A3.jpg
2010-3-5 02:52
ECShop下载                             ECShop4.0商业授权

TOP

加一个帮助中心的分类树是不难 难的有两点 一个是分类输做的漂亮 第二是帮助文章内容和其他文章内容的页面不一样 一个新闻的文章内容左边也来个帮助分类树 你觉得尴尬不、?
muyixin 发表于 2010-1-26 23:39

我说的是在需要的地方加入

这个很适合在 购物流程页面加入

按照你的理论 默认还是所有页面都显示了帮助文档额!!

TOP

本帖最后由 muyixin 于 2010-1-26 23:40 编辑

加一个帮助中心的分类树是不难 难的有两点 一个是分类输做的漂亮 第二是帮助文章内容和其他文章内容的页面不一样 一个新闻的文章内容左边也来个帮助分类树 你觉得尴尬不、?
ECShop下载                             ECShop4.0商业授权

TOP

收藏。。。。。。

TOP

楼主写的很详细了。可是我想问一下如何加在底部呀?你的第四步代码加在什么地方呀?我不是很懂?
3rdshop 发表于 2010-1-25 12:35

加在模板文件.dwt里面
ECShop下载                             ECShop4.0商业授权

TOP

返回列表