问个很炫的 AJAX购物车是怎么实现的

用于收藏精华贴子、网友共享的资料等。可以回复,不能发新贴。

版主: Jack

版面规则
本版面不能发新贴,可以回复

问个很炫的 AJAX购物车是怎么实现的

帖子matteowang02 » 2009-07-16 22:10

大家好,
最近在网上乱逛,看到一个ZEN CART模板,当然是要付钱的,其中有个很眩的AJAX购物车,当客人往购物车里增加商品后,吧鼠标移到右上角的 SHOPPING CART上就会自动列出购物车中的商品(带小图的),真的很漂亮,好喜欢,所以想问问各位大哥,有什么模快或代码可以实现的,希望大家多多讨论看是怎么可以实现。小弟代表和我一样不懂的人先谢谢各位大侠了 :D

演示网址

http://demo.algozone.com/zencart/ZC03C00320/index.php?main_page=shopping_cart&products_id=31
matteowang02
VIP会员
VIP会员
 
帖子: 310
注册: 2007-07-14 4:51

Re: 问个很炫的 AJAX购物车是怎么实现的

帖子shengsheng » 2009-07-17 20:27

楼主解决了,也给我个
营销软件10元团购啦,还等什么,拍了再说。官方网址www.ytwww.net
shengsheng
普通会员
普通会员
 
帖子: 27
注册: 2009-06-18 18:55

Re: 问个很炫的 AJAX购物车是怎么实现的

帖子matteowang02 » 2009-07-20 1:42

顶一下,看看有谁会 :D
matteowang02
VIP会员
VIP会员
 
帖子: 310
注册: 2007-07-14 4:51

Re: 问个很炫的 AJAX购物车是怎么实现的

帖子daimadaquan » 2009-07-20 9:50

效果的确不赖,大家一起找找,如果发现了,一起共享一下。
人在凡尘里,焉能返自然?
头像
daimadaquan
VIP会员
VIP会员
 
帖子: 512
注册: 2009-03-09 17:34
地址: 江苏 南京

Re: 问个很炫的 AJAX购物车是怎么实现的

帖子beibuwan » 2009-07-20 17:00

很简单 也很普通的一个脚本特效
beibuwan
普通会员
普通会员
 
帖子: 42
注册: 2008-10-20 13:44

Re: 问个很炫的 AJAX购物车是怎么实现的

帖子matteowang02 » 2009-07-20 23:26

老大,详细说说来,和大家一起分享一下啦 ;)
matteowang02
VIP会员
VIP会员
 
帖子: 310
注册: 2007-07-14 4:51

Re: 问个很炫的 AJAX购物车是怎么实现的

帖子chenxin_IT » 2009-07-21 10:35

是呀,这么炫的效果太棒了,说说详情,共同学习学习嘛...
chenxin_IT
 
帖子: 1
注册: 2009-06-24 10:16

Re: 问个很炫的 AJAX购物车是怎么实现的

帖子wangfan234 » 2009-07-23 17:23

你好!
wangfan234
新手上路
新手上路
 
帖子: 18
注册: 2009-07-22 7:30
地址: 北京

Re: 问个很炫的 AJAX购物车是怎么实现的

帖子matteowang02 » 2009-07-23 22:31

老大,我看过了,而且还查了点资料,没你说的那么简单啊。AJAX是用Java script 的客户端和服务器端的特点,吧数据库中的数据反映的网页的一个部分中,而不需要刷新整个页面。上面说的那个特效,是当,鼠标移动到购物车附近时触发了一个事件,这个事件吧消息通过JAVA SCPRIT传递给服务器端的JAVA SCRIPT,服务器端的JAVA SCRIPT在通过PHP代码向数据库发出查询,吧查询结果在通过服务器端的JAVA SCPRIT转会客户端,客户端同过DOM改变页面的局部代码 用来显示购物车内的货物,这个说起来简单,但做起来是要点功力的,光看客户端的HTML是不可能搞懂的。所以还需要超级杀手级的人物出来指教一二啦,JACK!!!!!你在哪里啊!!!快出来指教一二吧!!! :D ;)
matteowang02
VIP会员
VIP会员
 
帖子: 310
注册: 2007-07-14 4:51

Re: 问个很炫的 AJAX购物车是怎么实现的

帖子mymyhope » 2009-07-28 15:59

HTML For The Product’s Wrapper:
代码: 全选
01.<div class="productWrap">
02.    <div class="productImageWrap">
03.        <img src="images/product1.jpg" alt="Product1" />
04.    </div>
05.    <div class="productNameWrap">
06.        Krups Coffee Maker
07.    </div>
08.    <div class="productPriceWrap">
09.        <div class="productPriceWrapLeft">
10.            $95
11.        </div>
12.        <div class="productPriceWrapRight">
13.            <a href="inc/functions.php?action=addToBasket&productID=1" onClick="return false;">
14.                <img src="images/add-to-basket.gif" alt="Add To Basket" width="111" height="32" id="featuredProduct_1" />
15.            </a>
16.        </div>
17.    </div>
18.</div>


HTML For The Basket:
代码: 全选
01.<div id="basketWrap">
02.    <div id="basketTitleWrap">
03.        Your Basket <span id="notificationsLoader"></span>
04.    </div>
05.    <div id="basketItemsWrap">
06.        <ul>
07.        <li></li>
08.        <?php getBasket(); ?>
09.        </ul>
10.    </div>
11.</div>


The JavaScript (jQuery)
代码: 全选
$(".productPriceWrapRight a img").click(function() {
02.    var productIDValSplitter    = (this.id).split("_");
03.    var productIDVal            = productIDValSplitter[1];
04.
05.    $("#notificationsLoader").html('<img src="images/loader.gif">');
06.
07.    $.ajax({
08.    type: "POST",
09.    url: "inc/functions.php",
10.    data: { productID: productIDVal, action: "addToBasket"},
11.    success: function(theResponse) {
12.
13.        if( $("#productID_" + productIDVal).length > 0){
14.            $("#productID_" + productIDVal).animate({ opacity: 0 }, 500, function() {
15.                $("#productID_" + productIDVal).before(theResponse).remove();
16.            });
17.            $("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
18.            $("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
19.            $("#notificationsLoader").empty();
20.        } else {
21.            $("#basketItemsWrap li:first").before(theResponse);
22.            $("#basketItemsWrap li:first").hide();
23.            $("#basketItemsWrap li:first").show("slow");
24.            $("#notificationsLoader").empty();
25.        }
26.
27.    }
28.    });
29.
30.});
头像
mymyhope
高级会员
高级会员
 
帖子: 116
注册: 2007-01-08 16:18
地址: 上海浦东

下一页

  • 相关话题
    回复总数
    阅读次数
    最新文章

回到 精华共享



在线用户

正在浏览此版面的用户:Yahoo [Bot] 和 2 位游客