兔源码网 - 专注DZ模版分享、DZ插件分享!

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)皆为提供免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需充值兔币购买会员组方可下载),用户仅需手动前往【申请下载权限】申请用户组下载权限即可,如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

ECSHOP商品页,加入购物车弹出浮动层,仿淘宝效果

[复制链接]
tuzi 发表于 2015-8-8 23:29:20 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


在ECSHOP商品详情页点“加入购物车”,直接在当前页弹出一个漂亮的小窗口,$ q8 }0 e( p/ A7 m- n, l# O2 ^+ }. d
效果如下图:
% `% X+ y% R8 a6 e( O' \7 k' {" h" a5 C7 v$ l* P0 Y+ |/ L4 {6 C
11081617171068750324wlsm.jpg 5 c7 [) L! B8 J! D

  s. {7 D* y0 \, f此方法超级简单,不需要修改php程序,也不需要在ECSHOP模板页预设隐藏层,主要是修改 JS 文件 / O0 b1 t9 i) N2 m

- ]( ~' e+ X1 ]. L+ Z" h9 Y( I
7 W! r8 Y3 c; P& m1)3 T, `: }1 x, ~

5 [7 c" Y6 z1 L+ x" j, i( K; E首先将下面四个图片下载到你网站的 /data/images/  下面,
! N6 @# }8 o+ X0 I: C* d, [注意,保存图片的时候不要重命名,要用我原来的名字直接保存
% S2 p# o, k7 V8 V% Y0 y* C$ f9 C6 a7 A8 T' D- A
110816003336671877tlwgz3.jpg
! a- R1 x9 N8 |+ U6 P+ Y* h 110816003401671877k29bjo.jpg
2 p. W- ?- F4 D0 V# c: W! v( A6 ]4 Y; O
11081600341856250263bx3j.jpg " q5 i" Z7 l; L" E$ R/ n
2 [! Y1 D2 P! y/ {
11081600343746875270rjg6.jpg
  C3 v, r/ c6 I/ o9 O" V
! v. `' K  I  `) o/ G4 T7 [" u2)
$ Q* o) L) i. M$ [' b+ ^, z: L; J. t' |
以下修改以官方默认模板为例,打开 ECSHOP模板文件 /themes/default/goods.dwt
# V# ?% H7 i" Z3 c/ n" M8 O* ^1 `, R8 C) L- p1 D

7 V# n4 k' Q7 E' ?6 M: W; B9 r' n$ c% C
<li class="padd">
. ]: Y6 B  x( y4 w) O      <a href="javascript:addToCart({$goods.goods_id})"><img src="images/bnt_cat.gif" /></a>0 o. d; l5 c1 L/ R$ S' f

& F$ M5 M% O5 r, O, u
) \$ z8 M# N* `/ u修改为; P" B+ x. Z! |: R' {* ]

5 o7 h/ _( I4 [- P) n! F1 V6 c<li class="padd" style="position:relative;" id="gwc">2 Q2 j8 B! @9 b) \! h9 [# z& q
      <a href="javascript:addToCart({$goods.goods_id})"><img src="images/bnt_cat.gif" /></a> $ l- t7 G. W+ @/ i9 z9 f3 ^% E3 ]& t( X

+ c5 O; U/ ?8 Z, w3)
) n9 a9 M' ?/ h4 n7 R
: N# y& z1 J3 ?下面修改ECSHOP语言包文件,打开 /languages/zh_cn/common.php / t5 v9 R- @. A3 n2 G

  z( Y+ ?+ h- H7 {/ [找到, Q6 g, R, L9 x0 u$ {0 }

$ R+ h$ I$ p& A9 q& T* \3 i3 V. c$_LANG['cart_info']' l* |( `! R7 z& K/ K0 @; V1 c
  F  P, [2 I4 s4 t
将它的值修改为 9 _/ u4 K; t2 Z6 g& T
7 H$ w7 f. k, |, o, j/ Q2 U  G
  1. 购物车共 %d 件商品,总计 %s
复制代码
修改后是这个样子
' k! ^+ S' m; \, X1 C3 P
2 K/ m+ Y: V/ Q
  1. $_LANG['cart_info'] = '购物车共 %d 件商品,总计 %s';
复制代码
4)

- ^1 {) h. b+ n, b$ w1 k: V
, R4 o# {& H& z+ X: e( F7 T0 ^打开 /js/common.js
  i9 x: z7 h7 B& e1 q$ }8 g
( p; p. k7 y  K+ \$ ^# l/ o9 F* ~找到 下图所示代码0 E+ Y# k0 H" c& u# f' N

+ e8 a' x# X! f! l3 A, c. L 110816011738187503j8a2z1.jpg # q! Z0 l/ K; v6 h6 H5 G

' K* f+ q7 l8 a并修改为
1 @4 d3 F0 S! ^8 p" r( j) P% A 110816012309531253vvhsvy.jpg 9 n7 \# d- e) R+ m5 E, D" Z

* J! c3 s' |3 ^9 S) X  h2 S 5)
, I: ^: W: G) d8 A; a; y9 U  Z% t* i7 w4 z/ ]
继续修改 /js/common.js 文件, 在文件的最末尾增加如下两段代码& d8 Y0 L8 ~8 |" n+ E* N6 C) T! A# t1 t

: n6 @8 I# Q2 u7 S 110816144824046878pn8g1o.jpg
  1. /* *
    1 q, Y! H' |$ @6 Y; Z* U5 e
  2. * 点击购物后弹出提示层
    . w0 q+ O" w3 L
  3. * 参数 cartinfo:购物车信息 ) y1 y& a( {+ A/ w
  4. */
    7 P) @0 N8 _0 K
  5. function openDiv_ecshop120(cartinfo)
    " E: ^" f" M6 |* Y
  6. {
    8 _- H. f* v5 E+ J% V* A
  7.   var _id = "speDiv";
    8 g' p+ b* a. p2 f
  8.   var m = "mask";& r4 i) O3 [$ W* P8 Z7 C* c
  9.   if (docEle(_id)) document.removeChild(docEle(_id));
    / |; e, _& C: R( ]: _0 t, Q
  10.   if (docEle(m)) document.removeChild(docEle(m));
    $ V/ \) w6 L# A4 s4 Y; f. q. B9 K
  11.   //计算上卷元素值
    + ?# |8 O8 q  y' i
  12.   var scrollPos;
    ! }" c- [0 H+ D$ X2 u: P
  13.   if (typeof window.pageYOffset != 'undefined') & i. e0 ?: i) L
  14.   {
    5 j; z: W0 a) O  v
  15.     scrollPos = window.pageYOffset;
    & N( q, \, \) m' k# E* {
  16.   }
    $ M! I* {1 j' {6 m
  17.   else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
    0 z6 R3 D/ E) Y& |2 X
  18.   {
    $ [, B$ K5 d% v1 I
  19.     scrollPos = document.documentElement.scrollTop; 9 S% V5 H) k! U0 C
  20.   } 3 t2 P' g/ }8 p4 W6 A
  21.   else if (typeof document.body != 'undefined')
    # Z" B, X5 T! z, w% @6 P
  22.   { + a5 x% X: `0 Y$ ~: _: J
  23.     scrollPos = document.body.scrollTop;
    * \3 G! W6 u" V
  24.   }: ^% o9 N4 @% Z# h! v2 l4 e
  25.   var i = 0;) t1 c( t2 E3 x7 w6 D2 ?
  26.   var sel_obj = document.getElementsByTagName('select');7 _0 i8 m; z: t4 `, ]# B. U6 \
  27.   while (sel_obj[i])
    . w3 i$ s2 f) M
  28.   {" M, s/ Z: E5 Z& {7 |
  29.     sel_obj[i].style.visibility = "hidden";
    7 L5 [+ L3 q* k; O
  30.     i++;
    + B0 b  ~7 i) X: w
  31.   }
    9 m/ {, I& j! V1 T
  32.   // 新激活图层
    , Q) L7 C! R0 D1 D+ b- {$ Z* H
  33.   var newDiv = document.createElement("div");
    : O/ d. `& c+ c) G( A
  34.   newDiv.id = _id;( [1 [9 H* P+ Q9 `5 w$ g- X6 o
  35.   newDiv.style.position = "absolute";! k( C) u4 [) D$ F' k5 D- O
  36.   newDiv.style.zIndex = "10000";4 j, n! e5 n" Q: Z) r
  37.   newDiv.style.width = "289px";
    ( T2 g% |3 z% ^3 [
  38.   newDiv.style.height = "120px";$ o+ v4 p3 }% L2 y  r$ D
  39.   newDiv.style.top = "-120px";
    3 y: f  D! b- T, t+ K
  40.   newDiv.style.left = "1px"; $ [) \$ m/ v( N  L: H. \. N
  41.   newDiv.style.overflow = "hidden";
    $ r7 ^5 w% |  J, a; m+ [
  42.   newDiv.style.background = "#FFF";7 v; Y  x1 n4 w, h9 o
  43.   newDiv.style.border = "0px solid #59B0FF";
    ! F3 \& W9 r2 }2 r: g5 |' Q
  44.   newDiv.style.padding = "0px";/ Q  K, x' n0 J1 D
  45.   //生成层内内容
    $ _5 l( P+ ?6 I  k& c7 L* {
  46.         newDiv.innerHTML = '<div style="text-align:center;height:120px;line-height:25px;width:289px;background:url(/data/images/div_bg.gif) no-repeat 0 0;overflow:hidden;"><table width="280px" cellpading=0 cellspacing=0 align=center ><th style="height:30px;line-height:30px;text-align:right;"><a href="javascript:cancel_div_ecshop120()" ><img src="/data/images/div_close.gif" style="margin:5px 10px;"></a></th><tr><td align=center ><img src="/data/images/div_hs.gif" align=absmiddle> <font style="font-size:15px;font-weight:bold;">该商品已成功放入购物车</font><br>'+cartinfo +'<br><a href="javascript:cancel_div_ecshop120()"><<继续购物</a> <a  href="flow.php"> <img src="/data/images/div_gwc.gif" align=absmiddle></a></td></tr>';
    1 F, p; K  h7 x: r5 P# E
  47.   newDiv.innerHTML += '<tr><td align=center></td></tr></table></div>';  ) Z# @2 f0 l1 x4 G3 S# J! L
  48.   document.getElementById('gwc').appendChild(newDiv);
    ! @: l: G3 t6 K1 ^+ @! p

  49. 9 @! c1 i" u+ O9 ]2 I5 }8 Y1 F
  50.   
    / X: m+ m: X% j
  51. }
复制代码

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告

兔源码网 ( 赣ICP备17001544号 公网安备36112102000036号 )

兔源码 QQ交流群:493651246  GMT+8, 2019-9-21 13:31
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

     
快速回复 返回顶部 返回列表