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

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

QQ登录

只需一步，快速开始

搜索
返回列表 发新帖

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

来自版块: 站长杂谈发表于: 2015-8-8 23:29:20
48361
0
如本资源下载地址失效,请点击此处进行反馈
开通本站Svip会员，全站资源免费下
在ECSHOP商品详情页点“加入购物车”，直接在当前页弹出一个漂亮的小窗口，
. k1 W( r; T8 N效果如下图：
# N  I( v1 A$ t* ]; ]) h; ?5 E
0 @( Q, h6 V( w# L: v 11081617171068750324wlsm.jpg
' E, e8 l3 R. \% \8 k
) W$ k! n' F1 x. v, p此方法超级简单，不需要修改php程序，也不需要在ECSHOP模板页预设隐藏层，主要是修改 JS 文件 2 g, B. \2 N; [, a6 Z
1 K9 P- M, K, l7 [& u3 d% _* M

6 ]* [% I, m' p) y1）
% j3 \/ A" _3 `. Z: y
+ \+ I% e# ]& S. ~. q2 _3 X首先将下面四个图片下载到你网站的 /data/images/  下面，6 J1 V4 i% w/ ]( f3 W- }6 {
注意，保存图片的时候不要重命名，要用我原来的名字直接保存
0 B4 r/ T9 e( G' X8 w+ T
# q3 [& \6 \" ~, R/ F4 N7 v 110816003336671877tlwgz3.jpg . w+ q! C  \0 {, y3 f% y
110816003401671877k29bjo.jpg
6 |) e! e5 |, N
+ Z3 K5 Q% `2 C2 l1 C9 U% H/ E 11081600341856250263bx3j.jpg
; {' L' w$ C8 a. B* b9 P  a4 W3 X! Z) }) _
11081600343746875270rjg6.jpg & K. I' _- R' S$ G) O0 A- ^# d
  N: u  Y$ Z, t2 K7 N
2）/ S- l$ D' G' P3 W

; H3 r9 Z# G3 u0 S$ ]以下修改以官方默认模板为例，打开 ECSHOP模板文件 /themes/default/goods.dwt
! c7 n8 a: W5 ?0 {
  n: j$ ~2 s" ^将0 P9 B2 l' ~. \% n! i$ |8 M* I

2 |# b3 o! p; e. Z6 Z<li class="padd">
0 N' n5 C8 ?" B& Z      <a href="javascript:addToCart({$goods.goods_id})"><img src="images/bnt_cat.gif" /></a>
. I' X9 d# J7 b5 G+ ~" P- r8 o) z2 N5 g% y! J/ E& Z
$ a0 _9 {6 Y7 u" A0 _
修改为4 t2 R8 \/ Z' v0 ~$ h) [. y: h

6 g: Y" ]& J( m' x<li class="padd" style="position:relative;" id="gwc">1 ~: ^! X9 m  a/ s; c/ B; p
      <a href="javascript:addToCart({$goods.goods_id})"><img src="images/bnt_cat.gif" /></a> ) A7 W, P. C8 Y

! k9 |) o6 b2 `' G& A7 t+ u3）
" Q5 C$ L3 f" m( ?1 ^) `( Y, O- [: a+ [) g& V
下面修改ECSHOP语言包文件，打开 /languages/zh_cn/common.php
' F; J( |; ^5 A3 T+ T% C1 f& v( m, G) {8 {) A
找到4 T" \; y4 X2 C/ T$ }' n+ X
+ \4 e1 o2 O9 I& Q( ]
$_LANG['cart_info']3 I7 E+ Z1 _& K1 S  z

2 n' q$ O! ~& a) B将它的值修改为
% v' [- {1 E; i1 |! e/ a
! F  |8 O+ {) j  E/ {) h6 Y
  1. 购物车共 %d 件商品，总计 %s
复制代码
修改后是这个样子
* e7 J5 `6 A' O
: e4 X+ u; F& q$ G
  1. $_LANG['cart_info'] = '购物车共 %d 件商品，总计 %s';
复制代码
4）
, {* {8 C; |2 c7 p) n0 v  U3 ~, O! @3 R) v5 V6 G
打开 /js/common.js
, t( U1 d: N+ J, x$ m: {. G3 r3 `: j+ U( S8 c+ M2 ~+ t
找到 下图所示代码
; M2 t7 e% \% @3 V# T& N* [4 M
110816011738187503j8a2z1.jpg ; S/ e9 J7 L! \) [
1 Z" S" Y) g7 l: z' e& g! s; A8 L
并修改为$ g6 R: ~! d8 j" T
110816012309531253vvhsvy.jpg 2 N' H+ K: _$ j$ B& j* H! `

  ^0 d% {  p. j 5）* q1 W% n+ |* P1 ^# }2 ?4 m4 G$ }

( i, n, k$ E8 p8 [4 Q( V继续修改 /js/common.js 文件， 在文件的最末尾增加如下两段代码
4 D' L: \8 V% V! Z. y7 l5 c% ]' P+ l7 G
110816144824046878pn8g1o.jpg
  1. /* *
    1 r( E( A( D, h6 M) ]( p! e6 A
  2. * 点击购物后弹出提示层
    - M) P- @) E. ?# S' c  X
  3. * 参数 cartinfo：购物车信息
    % G7 E9 F+ G# x5 V" T
  4. */' E8 O! F: ~/ f# t- \+ y/ R
  5. function openDiv_ecshop120(cartinfo) 1 S$ r# W5 K8 K( e
  6. {% m# u  |2 i$ p$ r
  7.   var _id = "speDiv";6 S! J' Z0 D4 t
  8.   var m = "mask";
    / w, _' d- o0 C" G( N3 ^: y! |
  9.   if (docEle(_id)) document.removeChild(docEle(_id));. o! ]2 ?+ H6 F0 O; p
  10.   if (docEle(m)) document.removeChild(docEle(m));" E; v, b- h( U& v1 a; @/ i3 D6 @, w) T
  11.   //计算上卷元素值
    5 X4 p+ u% d, j& k* E/ \1 J8 L
  12.   var scrollPos; / q' E- i& O9 E6 P  y# e
  13.   if (typeof window.pageYOffset != 'undefined')
    4 {8 ^$ A. W9 s! X: k
  14.   {
    2 f' f' M2 {8 m  |+ q  G! i
  15.     scrollPos = window.pageYOffset; $ U! D& y4 d! V# G$ Z
  16.   } ( W/ c- L5 u1 b6 h
  17.   else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') ' Y1 q$ D- f: P. v. ^% U
  18.   { + l3 b- \$ Y$ a' _' _
  19.     scrollPos = document.documentElement.scrollTop;
      C, N5 h. I/ ?/ e
  20.   } & Q" |' X) v* m6 R( m
  21.   else if (typeof document.body != 'undefined') / }) |! \0 A, I8 e/ y# n/ `9 J
  22.   { " O4 l; R5 j' ?  X
  23.     scrollPos = document.body.scrollTop; & C$ V" b! M5 }/ m7 u
  24.   }& g, T0 K) s5 U- O7 s
  25.   var i = 0;% j! ]) q5 A! c# o- K; k4 N( W2 k
  26.   var sel_obj = document.getElementsByTagName('select');
    ) J# i7 y% [; f; C0 \7 h  A( U
  27.   while (sel_obj[i])
    9 J' p6 B, F. r9 K9 m
  28.   {" `- q+ |% [2 K6 U: Y# L  w9 V
  29.     sel_obj[i].style.visibility = "hidden";: }# [- ?  n; d2 e
  30.     i++;
    0 Z: M7 j, a5 o0 g$ x
  31.   }
    + N. P' }  Z2 o2 w4 P$ n
  32.   // 新激活图层
    : G: A9 t7 Z4 k
  33.   var newDiv = document.createElement("div");) U! [. B/ F2 |
  34.   newDiv.id = _id;* D/ Z7 C% \) P3 G& ~  y# D+ s7 P
  35.   newDiv.style.position = "absolute";
    . C/ i+ k+ @+ b$ k
  36.   newDiv.style.zIndex = "10000";9 }8 U, o4 I* E4 P* o
  37.   newDiv.style.width = "289px";
    + P$ x6 ~& M4 y  K( }  I5 z/ z
  38.   newDiv.style.height = "120px";
    ( H9 T4 u) u! E) n3 H
  39.   newDiv.style.top = "-120px";* I3 }3 T2 g7 X/ _
  40.   newDiv.style.left = "1px"; + p1 q3 `& M* [8 w
  41.   newDiv.style.overflow = "hidden"; ) K8 x, D2 t! ^" X  j
  42.   newDiv.style.background = "#FFF";
    ) O5 [; Q9 P" ]" ^) K( b- y
  43.   newDiv.style.border = "0px solid #59B0FF";
    9 }& D" ~, _; _5 n2 ^* a- W) b
  44.   newDiv.style.padding = "0px";6 f+ C7 I' U+ U: s! w  b7 B
  45.   //生成层内内容
      W0 u2 f  ^' X0 c6 h
  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>';
    3 B' b& D8 z- G
  47.   newDiv.innerHTML += '<tr><td align=center></td></tr></table></div>';  
    3 v4 k# v" F' w. ]; y
  48.   document.getElementById('gwc').appendChild(newDiv);$ [1 R1 p) |! Y) I

  49. 6 J7 k, F$ t9 t3 N. n1 i5 W
  50.   # t1 l1 D, V' m4 Z$ B' u
  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

返回顶部