ECSHOP商品页,加入购物车弹出浮动层,仿淘宝效果-站长杂谈下载

登录/ 注册
站长工具
 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
返回列表 发新帖

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

来自版块: 站长杂谈发表于: 2015-8-8 23:29:20
48333
0
如本资源下载地址失效,请点击此处进行反馈
开通本站Svip会员，全站资源免费下
在ECSHOP商品详情页点“加入购物车”，直接在当前页弹出一个漂亮的小窗口，
/ h3 a- ?# v2 v, y效果如下图：9 A; t! T) y$ O* J

! W( Z) Y3 h; u- t( y$ s 11081617171068750324wlsm.jpg
  |4 A+ @# u$ O+ ?' F
( [" h: [. O8 G* B. c  w. y此方法超级简单，不需要修改php程序，也不需要在ECSHOP模板页预设隐藏层，主要是修改 JS 文件
. F4 F- B5 p- k% j  a
8 I6 h) z2 e6 Z% y; V5 ]; C6 k4 x$ c0 ?3 T# u3 t! |' [
1）2 ]7 r9 Y' v1 a" X! H
; V; c( U2 ]* N2 C6 F; P
首先将下面四个图片下载到你网站的 /data/images/  下面，7 a4 D* ?8 _. a* W, @
注意，保存图片的时候不要重命名，要用我原来的名字直接保存% F& \* T. ?; _* u4 z. s# \- B
# t" `# w3 s) Z: h" Z( f7 m; O
110816003336671877tlwgz3.jpg
' b4 j$ O( C7 r# V3 K 110816003401671877k29bjo.jpg
2 t! z1 L/ `: y- X  N) }% ]& G! j. N) o8 L6 C% ]  y
11081600341856250263bx3j.jpg 7 m' H. O" _, i0 m+ z3 Y* t3 i0 L

4 b: M8 S2 u8 i- X, U4 o 11081600343746875270rjg6.jpg " @* g5 X' ?0 A/ K, n0 P

$ L3 B: J3 i$ W1 B2 ]2）
5 I, P2 C& o1 C3 G. b" J8 _2 K1 z
以下修改以官方默认模板为例，打开 ECSHOP模板文件 /themes/default/goods.dwt
4 O4 r% k7 D+ a3 \  A' z2 X) B6 h" A) F
" W* U) p# G  g5 P将' j* g- v7 P, `: Y5 A

  }8 B: V0 e# ~/ h0 m<li class="padd">9 P7 I! h. Y: x+ f0 T6 l6 `, l
      <a href="javascript:addToCart({$goods.goods_id})"><img src="images/bnt_cat.gif" /></a>
( C4 u; ]: r4 \4 F$ b; i0 |' r  Q0 J: f% g$ i/ R
6 I% [" Y: O0 Z! ~6 w
修改为
  e. [2 I" c% B, e8 G. d8 j$ D6 X, v; R1 ?7 o) a6 _1 z9 h
<li class="padd" style="position:relative;" id="gwc">
7 ^% B: F: k- Z& W8 w  F+ z- D      <a href="javascript:addToCart({$goods.goods_id})"><img src="images/bnt_cat.gif" /></a> ! |! M* z$ i, x9 e( @+ l1 _

& T6 O5 X% o* }' p6 X) k! V3）
5 C# f9 Q# K6 _0 g( e- b
% L" c, R  V3 g0 g9 A5 P下面修改ECSHOP语言包文件，打开 /languages/zh_cn/common.php
+ o5 b4 H- N7 F9 t5 |' j, t* a3 j. }# A: ^% [& \
找到' [  i& E- G2 [6 v: L2 V
% b0 A% x% |) y' U
$_LANG['cart_info']0 s7 e, [, G0 L! [- Y% D& y
/ ~+ N# j3 K/ e# v5 }8 [1 T
将它的值修改为 7 x; Q1 }% Z" _

2 ]& ^9 B1 M. U% Q
  1. 购物车共 %d 件商品，总计 %s
复制代码
修改后是这个样子
# z3 J, {5 @9 p( h1 |/ b
2 G* ~" ]2 E* Q5 N
  1. $_LANG['cart_info'] = '购物车共 %d 件商品，总计 %s';
复制代码
4）
7 i& E- p4 t; i8 C* o) O. C8 S, |5 Z8 _0 t
打开 /js/common.js ( |3 X* b( z2 x3 S6 ~

( H' p6 G4 t' {* K5 \找到 下图所示代码3 t* B( H- b8 X, x

& Z* I% h* B( g; V9 z 110816011738187503j8a2z1.jpg
9 d% Z7 ^- ^3 X+ e+ `6 I3 `3 I
' j# Q* \& m4 q2 X并修改为
, x9 v: H0 Y9 k* |& i* f0 b 110816012309531253vvhsvy.jpg
( E+ `4 `' y) W. _, W- Q6 ^) A/ w# ]" z% h5 f) i5 N
5）0 k7 l: D7 W( g7 `
+ |" f% y0 }  e( Q5 A
继续修改 /js/common.js 文件， 在文件的最末尾增加如下两段代码
* m- |- k1 p! ~% d* w; A
" f7 }7 P) t0 \3 o" z) m+ w 110816144824046878pn8g1o.jpg
  1. /* *& B7 T& f- D" T4 S+ }6 o
  2. * 点击购物后弹出提示层
    6 J+ O. r4 `0 X8 w
  3. * 参数 cartinfo：购物车信息 + e0 n& l8 c5 k: }0 ?! Z7 u
  4. */* x! n( R: N0 L6 l
  5. function openDiv_ecshop120(cartinfo)
    ) b  L7 [  H- Q
  6. {
    ! q/ Q! D3 ]( i! y
  7.   var _id = "speDiv";
    : T- V* W% i# f* D7 d9 f% `
  8.   var m = "mask";/ S; D7 ~0 u9 G2 T4 }: S' I
  9.   if (docEle(_id)) document.removeChild(docEle(_id));
    * H; |! m6 W% H
  10.   if (docEle(m)) document.removeChild(docEle(m));
    2 x' |$ c& U/ T2 M3 W
  11.   //计算上卷元素值
    + \5 z* o, Y& M1 s
  12.   var scrollPos; / u* F' _$ j6 F3 p0 n3 U( a4 |
  13.   if (typeof window.pageYOffset != 'undefined') : G6 n% y/ w; v3 \; y& E$ |
  14.   { 7 g& a3 s3 Y  P0 Z' C- u
  15.     scrollPos = window.pageYOffset;
    0 y6 ]3 c! V1 x! U! w# V$ i
  16.   }
    1 {5 N0 A2 ?* u8 m
  17.   else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
    ; @/ p1 _5 D5 ]$ P4 ~; y
  18.   {
    . e3 W3 E$ T# O" L
  19.     scrollPos = document.documentElement.scrollTop; & F" I& W+ }9 p- k
  20.   } 7 I( k& e6 w7 z3 o$ ^
  21.   else if (typeof document.body != 'undefined')
    0 |' V* P4 @0 f+ T
  22.   {
    % i/ s, s; K) e4 x
  23.     scrollPos = document.body.scrollTop;
    3 w$ Y& I2 }6 T
  24.   }
    9 a: V+ T2 B" B! D/ y$ [5 L1 o  v
  25.   var i = 0;
    3 b/ @( W! ~0 t) g3 z2 r
  26.   var sel_obj = document.getElementsByTagName('select');
    4 T1 D7 S. L8 G. J. _
  27.   while (sel_obj[i])
    ' K! R( k2 b! g1 v# Q# u
  28.   {
    $ u! _" O) t& `
  29.     sel_obj[i].style.visibility = "hidden";8 G% q4 N: e. k2 l( |5 x1 |
  30.     i++;. y, E: u/ e5 t7 m8 y2 [8 g
  31.   }+ Q4 z: I& C  N* G1 R! b$ c
  32.   // 新激活图层
    ; y8 s6 q7 |# ?4 _# S
  33.   var newDiv = document.createElement("div");) u8 ]1 r2 R% \- Y3 G
  34.   newDiv.id = _id;9 o) @% @4 J6 V9 C$ j0 L
  35.   newDiv.style.position = "absolute";
    * A- y" v! O/ A
  36.   newDiv.style.zIndex = "10000";) E& Z( ^' B- u% _
  37.   newDiv.style.width = "289px";
    % g8 j. v( I1 U6 T4 f! `( x2 c" x
  38.   newDiv.style.height = "120px";
    1 V/ Q9 f. l+ I& a' ], R4 e& ?
  39.   newDiv.style.top = "-120px";
    4 _8 ~& F5 p/ v5 M
  40.   newDiv.style.left = "1px"; 5 M" G' w8 h6 o
  41.   newDiv.style.overflow = "hidden"; 8 a& @- _" V3 n7 n8 ^
  42.   newDiv.style.background = "#FFF";$ N4 ^) _2 _% s+ |
  43.   newDiv.style.border = "0px solid #59B0FF";5 w" j  o- z9 p) D9 K9 d3 P
  44.   newDiv.style.padding = "0px";
    # r# X- {3 w9 `: x2 z
  45.   //生成层内内容0 h: j& K( e" ^6 B9 {
  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>';! f# G4 ^. V, e
  47.   newDiv.innerHTML += '<tr><td align=center></td></tr></table></div>';  
    $ \  P  n' A9 ~
  48.   document.getElementById('gwc').appendChild(newDiv);
    ; v! \7 {% x  d/ |* S
  49. ! t2 W2 q$ T! Y, U( }# B3 _2 P0 i
  50.   
    + v. L9 T3 }1 d0 \. n6 t
  51. }
复制代码
淘宝，购物车

举报

全部评论 0

期待你的评论哦~

教程 / CSS+DIV素材

  • Discuz教程
  • CSS+DIV素材

所属版块

返回版块

您需要登录后才可以回帖 立即登录
登录
0
0
0

©2015-2022 tuyuanma.com 版权所有 Sitemap.xml

本站内容皆来自网络分享，如有侵权请联系我们处理。

赣公网安备36112102000036号 赣ICP备17001544号-10

联系邮箱：tuyuanma@qq.com 联系QQ：3197813386

返回顶部