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

[共享] ECshop两个自动收缩浮动在线客服代码,QQ客服、在线MSN、旺旺,兼容IE、 FF

本帖最后由 bjecshop 于 2009-8-8 22:09 编辑



由北京OK模板之家 www.ok-moban.com 整理修改

--------------------------------------------------------------------------------
更新:增加客服2红色皮肤
修正:FF3显示不隐藏问题
--------------------------------------------------------------------------------
文件夹OKQQ 或 QQkefu 直接放在商城网站根目录
调用例子:

UTF 调用
  1. <link href="OKQQ/images/qq.css" rel="stylesheet" type="text/css" />
  2. <script language='javascript' src='OKQQ/ServiceQQ.js' type='text/javascript' charset='utf-8'></script>
复制代码
  1. <link href="QQkefu/images/qq.css" rel="stylesheet" type="text/css" />
  2. <script language='javascript' src='QQkefu/ServiceQQ.js' type='text/javascript' charset='utf-8'></script>
复制代码
========================================
ECshop专用下载:

客服1左侧显示下载:
客服1_GBK_UTF版本.rar (28.63 KB)
----------------------------------------------------------------
客服1右侧显示下载:
客服1_右侧显示_GBK_UTF版本.rar (31.15 KB)
----------------------------------------------------------------
客服2下载:
客服2_UTF_GBK版本.rar (14.67 KB)
----------------------------------------------------------------
客服2红色皮肤下载:
在线客服2红色皮肤插件.rar (20.52 KB)
请先下载客服2,覆盖images文件夹里面的文件
----------------------------------------------------------------
调用说明:
调用说明.rar (285 Bytes)

=========================================


效果如图:
2-1.jpg
2009-7-14 17:47
2-2.jpg
2009-7-14 17:47

1-1.jpg
2009-7-14 17:47
1-2.jpg
2009-7-14 17:47


2.jpg
2009-7-28 14:55
1.jpg
2009-7-28 14:53

================================================
以客服1 utf 在 default 模板应用 为例
操作说明:

1、复制OKQQ目录到商城安装的根目录

2、找到 themes\default\library\page_footer.lbi

在底部加入红色代码


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--底部导航 start-->
<div id="bottomNav" class="box">
<div class="box_1">
  <div class="bNavList clearfix">
   <div class="f_l">
   <!-- {if $navigator_list.bottom} -->
   <!-- {foreach name=nav_bottom_list from=$navigator_list.bottom item=nav} -->
        <a href="{$nav.url}" <!-- {if $nav.opennew eq 1} --> target="_blank" <!-- {/if} -->>{$nav.name}</a>
        <!-- {if !$smarty.foreach.nav_bottom_list.last} -->
           -
        <!-- {/if} -->
      <!-- {/foreach} -->
  <!-- {/if} -->
   </div>
   <div class="f_r">
   <a href="#top"><img src="images/bnt_top.gif" /></a> <a href="../index.php"><img src="images/bnt_home.gif" /></a>
   </div>
  </div>
</div>
</div>
<!--底部导航 end-->
<div class="blank"></div>
<!--版权 start-->
<div id="footer">
<div class="text">
{$copyright}<br />
{$shop_address} {$shop_postcode}
<!-- 客服电话{if $service_phone} -->
      Tel: {$service_phone}
<!-- 结束客服电话{/if} -->
<!-- 邮件{if $service_email} -->
      E-mail: {$service_email}<br />
<!-- 结束邮件{/if} -->
<!-- QQ 号码 {foreach from=$qq item=im} -->
      <!-- {if $im} -->
      <a href="http://wpa.qq.com/msgrd?V=1&Uin={$im}&Site={$shop_name}&Menu=yes" target="_blank"><img src="http://wpa.qq.com/pa?p=1:{$im}:4" height="16" border="0" alt="QQ" /> {$im}</a>
      <!-- {/if} -->
      <!-- {/foreach} 结束QQ号码 -->
      <!-- 淘宝旺旺 {foreach from=$ww item=im} -->
      <!-- {if $im} -->
      <a href="http://amos1.taobao.com/msg.ww?v=2&uid={$im|escape:u8_url}&s=2" target="_blank"><img src="http://amos1.taobao.com/online.ww?v=2&uid={$im|escape:u8_url}&s=2" width="16" height="16" border="0" alt="淘宝旺旺" />{$im}</a>
      <!-- {/if} -->
      <!--{/foreach} 结束淘宝旺旺 -->
      <!-- Yahoo Messenger {foreach from=$ym item=im} -->
      <!-- {if $im} -->
      <a href="http://edit.yahoo.com/config/send_webmesg?.target={$im}n&.src=pg" target="_blank"><img src="../images/yahoo.gif" width="18" height="17" border="0" alt="Yahoo Messenger" /> {$im}</a>
      <!-- {/if} -->
      <!-- {/foreach} 结束Yahoo Messenger -->
      <!-- MSN Messenger {foreach from=$msn item=im} -->
      <!-- {if $im} -->
      <img src="../images/msn.gif" width="18" height="17" border="0" alt="MSN" /> <a href="msnim:chat?contact={$im}">{$im}</a>
      <!-- {/if} -->
      <!-- {/foreach} 结束MSN Messenger -->
      <!-- Skype {foreach from=$skype item=im} -->
      <!-- {if $im} -->
      <img src="http://mystatus.skype.com/smallclassic/{$im|escape:url}" alt="Skype" /><a href="skype:{$im|escape:url}?call">{$im}</a>
      <!-- {/if} -->
  <!-- {/foreach} --><br />
  <!-- ICP 证书{if $icp_number} -->
  {$lang.icp_number}:<a href="http://www.miibeian.gov.cn/" target="_blank">{$icp_number}</a><br />
  <!-- 结束ICP 证书{/if} -->
  {insert name='query_info'}<br />
  {foreach from=$lang.p_y item=pv}{$pv}{/foreach}{$licensed}<br />
    {if $stats_code}
    <div align="left">{$stats_code}</div>
    {/if}
    <div align="left"  id="rss"><a href="{$feed_url}"><img src="../images/xml_rss2.gif" alt="rss" /></a></div>
</div>
</div>
<link href="OKQQ/images/qq.css" rel="stylesheet" type="text/css" />
<script language='javascript' src='OKQQ/ServiceQQ.js' type='text/javascript' charset='utf-8'></script>

================================================
6

评分人数

ECShop下载                             ECShop4.0商业授权

5# koala0216
文件夹OKQQ 或 QQkefu 直接放在商城网站根目录
调用例子:
  1. <link href="QQkefu/images/qq.css" rel="stylesheet" type="text/css" />
  2. <script src="QQkefu/ServiceQQ.js"></script>
复制代码
  1. <link href="OKQQ/images/qq.css" rel="stylesheet" type="text/css" />
  2. <script src="OKQQ/ServiceQQ.js"></script>
复制代码
把对应代码放在模板 底部就行
ECShop下载                             ECShop4.0商业授权

TOP

因为里面CSS有演示的全局控制CSS
所以使布局变乱
稍后我会发布直接模板调用的代码包
包括 GBK 和 UTF 版本

TOP

提示: 该帖被管理员或版主屏蔽
签名被屏蔽

TOP

本帖最后由 bjecshop 于 2009-7-14 22:21 编辑

newred模板 CSS div定位使用的是:
  1. #wrapper { width:950px; background:#fff; margin:0 auto; position:relative }
复制代码
去掉 position:relative 可以浮动不受限制
但是不知道是不是会引起页面错乱
模板制作问题
ECShop下载                             ECShop4.0商业授权

TOP

22# LiveKer
今天晚一些会增加上右侧显示补丁

TOP

24# huiner

右侧显示补丁包稍后发布
请注意关注
ECShop下载                             ECShop4.0商业授权

TOP

客服1右侧显示补丁包已经更新

TOP

30# ou3503
想法不错

你可以试试
直接替换下链接
ECShop下载                             ECShop4.0商业授权

TOP

32# hao9966
拿默认模板为例:

themes\default\library\page_footer.lbi

用记事本直接打开,把调用代码粘贴到底部
ECShop下载                             ECShop4.0商业授权

TOP

本帖最后由 bjecshop 于 2009-7-23 13:27 编辑

36# Rings
你可以修改ServiceQQ.js
找到代码
  1. document.write("<div class='Qlist' id='divOnline' onmouseout='hideMsgBox(event);' style='display :none ;'>");
复制代码
改成:
  1. document.write("<div class='Qlist' id='divOnline' onmouseout='hideMsgBox(event);' style='display :;'>");
复制代码
找到代码
  1. document.write("<div id='divMenu' onmouseover='OnlineOver();'  ><img src='OKQQ/images/qq_1.gif' class='press' alt='在线咨询'></div>");
复制代码
修改为
  1. document.write("<div id='divMenu' onmouseover='OnlineOver();'  style='display :none ;' ><img src='OKQQ/images/qq_1.gif' class='press' alt='在线咨询'></div>");
复制代码

TOP

客服2增加红色皮肤下载
ECShop下载                             ECShop4.0商业授权

TOP

47# xuyuangg

我看了一下是你的css和qq css冲突

请打开style.css删除一下代码:


  1. .QQbox {
  2. Z-INDEX: 99; LEFT: 3px; WIDTH: 170px; POSITION: absolute; TOP: 145px
  3. }
  4. .QQbox .press {
  5. LEFT: 0px; WIDTH: 26px; CURSOR: pointer; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; POSITION: absolute; HEIGHT: 136px; BORDER-BOTTOM-STYLE: none
  6. }
  7. .QQbox .Qlist {
  8. LEFT: 0px; WIDTH: 170px
  9. }
  10. .QQbox .Qlist .b {
  11. FONT-SIZE: 1px; FLOAT: left; WIDTH: 170px; HEIGHT: 6px
  12. }
  13. .QQbox .Qlist .infobox {
  14. PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: 700; BACKGROUND: url(/images/siderIM_infobox.gif) #bdc5cb no-repeat; PADDING-BOTTOM: 5px; COLOR: #000; LINE-HEIGHT: 14px; PADDING-TOP: 5px; TEXT-ALIGN: center
  15. }
  16. .QQbox .Qlist .t {
  17. BACKGROUND: url(/images/siderIM_title.gif); HEIGHT: 34px
  18. }
  19. .QQbox .Qlist .b {
  20. BACKGROUND: url(/images/siderIM_bottom.gif); OVERFLOW: hidden; HEIGHT: 9px
  21. }
  22. .QQbox .Qlist .con {
  23. PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/images/siderIM_bg.gif); PADDING-BOTTOM: 10px; WIDTH: 100%; PADDING-TOP: 10px
  24. }
  25. .QQbox .Qlist .con H2 {
  26. BORDER-RIGHT: #3a708d 1px solid; BORDER-TOP: #3a708d 1px solid; BACKGROUND: url(/images/siderIM_bg.gif) repeat-y -163px 0px; FONT: bold 12px/22px "宋体"; BORDER-LEFT: #3a708d 1px solid; COLOR: #fff; BORDER-BOTTOM: #3a708d 1px solid; HEIGHT: 22px; TEXT-ALIGN: center
  27. }
  28. .QQbox .Qlist .con UL LI {
  29. PADDING-RIGHT: 5px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; PADDING-TOP: 5px
  30. }
复制代码

TOP

本帖最后由 bjecshop 于 2009-8-4 12:14 编辑

52# oifushi
客服1中有msn代码
添加可以参考客服1中代码
ECShop下载                             ECShop4.0商业授权

TOP

52# oifushi

下载文件:
增加MSN.rar (957 Bytes)

请按照里面操作 增加MSN

TOP

返回列表