jQuery添加到购物车的互动

所属分类:其他,输入-独立的部件,杂项,自动完成

 32948  411  查看评论 (11)
分享到微信朋友圈
X
jQuery添加到购物车的互动 ie兼容10

"添加到购物车"的过程,我们习惯于不同的模式。这种模式背后的基本思想是以通知用户,项目已添加到购物车,并为他/她提供一个链接来结帐。

我们已经尝试过使用默认情况下,隐藏购物车和显示它当用户单击"添加到购物车"按钮的想法。这样,用户可以检查购物车和结帐或继续购物。购物车将坚持到页面底部的随时可以访问。

创建结构

CartHTML体系组成的两个主要元素a.cd-cart-trigger,车触发器和购物车总计a.cd-cartfor 购物车内容。

.cd - cart - trigger,
.cd - cart {
    position: fixed;
    bottom: 20px;
    right: 5 % ;
    transition: transform.2s;
}.empty.cd - cart - trigger,
.empty.cd - cart {
    /* hide cart */
    transform: translateY(150px);
}

至于购物车动画我们分配一个固定的高度和宽度对 thediv.wrapperelement (相同的 thea.cd-cart-trigger);打开购物车时,我们使用 the.cart-openclass 显示购物车内容。

.cd - cart.wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    z - index: 2;
    overflow: hidden;
    height: 72px;
    width: 72px;
    border - radius: 6px;
    transition: height.4s.1s,
    width.4s.1s,
    box - shadow.3s;
    transition - timing -
    function: cubic - bezier(0.67, 0.17, 0.32, 0.95);
    background: #ffffff;
    box - shadow: 04px30pxrgba(0, 0, 0, 0.17);
}.cart - open.cd - cart.wrapper {
    height: 100 % ;
    width: 100 % ;
    transition - delay: 0s;
}

the.deletedclass用于从购物车中删除一个项目:删除的元素有一个绝对的位置,thecd-item-slide-outanimation用于创建幻灯片效果。

.cd - cart.body li.deleted {
    /* this class is added to an item when it is removed form the cart */
    position: absolute;
    left: 1.4em;
    width: calc(100 % -2.8em);
    opacity: 0;
    animation: cd - item - slide - out.3sforwards;
}@keyframes cd - item - slide - out {
    0 % {
        transform: translateX(0);
        opacity: 1;
    }
    100 % {
        transform: translateX(80px);
        opacity: 0;
    }
}

事件处理

当用户点击 the.cd-add-to-cartbutton时, theaddProduct()函数用来插入一个新的列表项内 the.body > ulelement。使用产品详情,应改为实际的商品信息的占位符:

functionaddProduct() {
    //this is just a product placeholder
    varproductAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="img/product-preview.png" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">Product Name</a></h3><span class="price">$25.99</span><div class="actions"><a href="#0" class="delete-item">Delete</a><div class="quantity"><label for="cd-product-' + productId + '">Qty</label><span class="select"><select id="cd-product-' + productId + '" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
    cartList.prepend(productAdded);
}

附加功能,如theupdatecartcount()orupdatecarttotal(),已经确定的商品数和总共更新产品信息时添加/删除或当一个产品添加到购物车的数量变化。


相关插件-独立的部件,杂项,自动完成

html5手势解锁插件H5lock.js

html5手势解锁插件H5lock.js详细注释
  独立的部件
 28890  279

操作浏览器标题栏插件Title.js

Title.js是一个javascript库用来操作浏览器标题栏,没有依赖性。 这里有用法示例:添加前缀,加后缀,改变预定义的标题,招牌效果、打字机效果。
  独立的部件
 35148  271

二维码解析器

利用qrcode.js制作的二维码解析器,可以用该插件制作长按识别二维码功能!
  独立的部件
 42719  276

可自定义轻量侧边悬浮插件

可以自定义悬浮.邮箱、QQ、电话、二维码等....
  独立的部件
 33202  488

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ben5473 0
    2017/6/12 11:27:56

    连点商品购物车的数字会比点击的要少

    回复
    Hello me 0
    2017/6/9 19:01:13

    我下了一个和这个一样的,那个不是session的,不知道这个是不是,如果是就好了

    回复
    Seven Love 0
    2017/4/2 9:24:48

    请问添加购物车后,添加的是占位符,怎么将实际产品信息:名称、价格,拼配?

    回复
    LeoHuang 0
    2017/2/24 9:26:32

    请问那个价钱设置是要字符串还是浮点数

    回复
    LeoHuang 0
    2017/2/23 10:18:20
    SiriBen 0
    2017/1/6 15:01:00

    这个效果确实好,流畅,而且适应手机端,收藏了先

    回复
    海之殇 0
    2016/10/14 11:10:01
    商品多的时候滚动条有问题
        野有蔓草。??0
        2016/11/11 17:11:33
        嗯嗯
    回复
    唯美 0
    2016/10/8 19:10:02
    blingblingl 0
    2016/9/1 14:09:19
    hexuanr 0
    2016/7/5 16:07:23
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复