头像

bootstrap加入购物车jQuery特效

来源:http://www.sucaihuo.com/js/940.html 素材火管理员 2016-09-05 06:53浏览(1607) 收藏

刚开始购物车按钮是看不到的,当用户点击加入购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作。用户也可以暂时关闭购物车继续购物。
bootstrap加入购物车jQuery特效
分类:其它特效 > 购物车 难易:初级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 190 下载资源 下载积分: 20 积分

bootstrap响应式购物车商品列表布局

<div class="row">
    <div class="col-md-3 col-xs-6 pro text-center">
        <div class="selectProduct">
            <img src="img/huawei_p9.jpg">
            <h4>华为 P9</h4>
            <a href="#0" class="btn btn-success add-button" data-price="3669.00" data-proid="1" data-proname="华为P9" data-proimg="img/huawei_p9.jpg">添加到购物车</a>
        </div>
    </div>
    <div class="col-md-3 col-xs-6 pro text-center">
        <div class="selectProduct">
            <img src="img/Galaxy_s7.jpg">
            <h4>Galaxy S7</h4>
            <a href="#0" class="btn btn-success add-button" data-price="3559.99" data-proid="2" data-proname="Galaxy S7" data-proimg="img/Galaxy_s7.jpg">添加到购物车</a>
        </div>
    </div>
</div>

添加、更新、删除购物车商品操作

jQuery(document).ready(function($) {
    var cartWrapper = $('.cd-cart-container');
    //product id - you don't need a counter in your real project but you can use your real product id
    var productId = 0;

    if (cartWrapper.length > 0) {
        //store jQuery objects
        var cartBody = cartWrapper.find('.body')
        var cartList = cartBody.find('ul').eq(0);
        var cartTotal = cartWrapper.find('.checkout').find('span');
        var cartTrigger = cartWrapper.children('.cd-cart-trigger');
        var cartCount = cartTrigger.children('.count')
        //var addToCartBtn = $('.cd-add-to-cart');
        var addToCartBtn = $('.add-button');
        var undo = cartWrapper.find('.undo');
        var undoTimeoutId;

        //add product to cart
        addToCartBtn.on('click', function(event) {
            event.preventDefault();
            addToCart($(this));
        });

        //open/close cart
        cartTrigger.on('click', function(event) {
            event.preventDefault();
            toggleCart();
        });

        //close cart when clicking on the .cd-cart-container::before (bg layer)
        cartWrapper.on('click', function(event) {
            if ($(event.target).is($(this)))
                toggleCart(true);
        });

        //delete an item from the cart
        cartList.on('click', '.delete-item', function(event) {
            event.preventDefault();
            removeProduct($(event.target).parents('.product'));
        });

        //update item quantity
        cartList.on('change', 'select', function(event) {
            quickUpdateCart();
        });

        //reinsert item deleted from the cart
        undo.on('click', 'a', function(event) {
            clearInterval(undoTimeoutId);
            event.preventDefault();
            cartList.find('.deleted').addClass('undo-deleted').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
                $(this).off('webkitAnimationEnd oanimationend msAnimationEnd animationend').removeClass('deleted undo-deleted').removeAttr('style');
                quickUpdateCart();
            });
            undo.removeClass('visible');
        });
    }

    function toggleCart(bool) {
        var cartIsOpen = (typeof bool === 'undefined') ? cartWrapper.hasClass('cart-open') : bool;

        if (cartIsOpen) {
            cartWrapper.removeClass('cart-open');
            //reset undo
            clearInterval(undoTimeoutId);
            undo.removeClass('visible');
            cartList.find('.deleted').remove();

            setTimeout(function() {
                cartBody.scrollTop(0);
                //check if cart empty to hide it
                if (Number(cartCount.find('li').eq(0).text()) == 0)
                    cartWrapper.addClass('empty');
            }, 500);
        } else {
            cartWrapper.addClass('cart-open');
        }
    }

    function addToCart(trigger) {
        var cartIsEmpty = cartWrapper.hasClass('empty');
        //update cart product list
        var price = trigger.data('price'),
                proname = trigger.data('proname'),
                proid = trigger.data('proid'),
                proimg = trigger.data('proimg');
        addProduct(proname, proid, price, proimg);
        //console.log();

        //update number of items 
        updateCartCount(cartIsEmpty);
        //update total price
        updateCartTotal(trigger.data('price'), true);
        //show cart
        cartWrapper.removeClass('empty');
    }

    function addProduct(proname, proid, price, proimg) {
        //this is just a product placeholder
        //you should insert an item with the selected product info
        //replace productId, productName, price and url with your real product info
        productId = productId + 1;

        var quantity = $("#cd-product-" + proid).text();
        var select = '', productAdded = '';

        //console.log(Number(quantity));
        //console.log(quantity);

        if (quantity == '') {
            var select = '<span class="select">x<i id="cd-product-' + proid + '">1</i></span>';
            var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="' + proimg + '" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">' + proname + '</a></h3><span class="price">¥' + price + '</span><div class="actions"><a href="#0" class="delete-item">删除</a><div class="quantity"><label for="cd-product-' + proid + '">件数</label>' + select + '</div></div></div></li>');
            cartList.prepend(productAdded);
        } else {
            quantity = parseInt(quantity);
            //var select = '<span class="select">x<i id="cd-product-'+proid+'">'+quantity+'</i></span>';
            $("#cd-product-" + proid).html(quantity + 1);
        }


        //var productAdded = $('<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">'+proname+'</a></h3><span class="price">¥'+price+'</span><div class="actions"><a href="#0" class="delete-item">删除</a><div class="quantity"><label for="cd-product-'+ proid +'">件数x</label><span class="select"><select id="cd-product-'+ proid +'" 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);
    }

    function removeProduct(product) {
        clearInterval(undoTimeoutId);
        cartList.find('.deleted').remove();

        var topPosition = product.offset().top - cartBody.children('ul').offset().top,
                productQuantity = Number(product.find('.quantity').find('.select').find('i').text()),
                productTotPrice = Number(product.find('.price').text().replace('¥', '')) * productQuantity;

        product.css('top', topPosition + 'px').addClass('deleted');

        //update items count + total price
        updateCartTotal(productTotPrice, false);
        updateCartCount(true, -productQuantity);
        undo.addClass('visible');

        //wait 8sec before completely remove the item
        undoTimeoutId = setTimeout(function() {
            undo.removeClass('visible');
            cartList.find('.deleted').remove();
        }, 8000);
    }

    function quickUpdateCart() {
        var quantity = 0;
        var price = 0;

        cartList.children('li:not(.deleted)').each(function() {
            var singleQuantity = Number($(this).find('.select').find('i').text());
            quantity = quantity + singleQuantity;
            price = price + singleQuantity * Number($(this).find('.price').text().replace('¥', ''));
        });

        cartTotal.text(price.toFixed(2));
        cartCount.find('li').eq(0).text(quantity);
        cartCount.find('li').eq(1).text(quantity + 1);
    }

    function updateCartCount(emptyCart, quantity) {
        if (typeof quantity === 'undefined') {
            var actual = Number(cartCount.find('li').eq(0).text()) + 1;
            var next = actual + 1;

            if (emptyCart) {
                cartCount.find('li').eq(0).text(actual);
                cartCount.find('li').eq(1).text(next);
            } else {
                cartCount.addClass('update-count');

                setTimeout(function() {
                    cartCount.find('li').eq(0).text(actual);
                }, 150);

                setTimeout(function() {
                    cartCount.removeClass('update-count');
                }, 200);

                setTimeout(function() {
                    cartCount.find('li').eq(1).text(next);
                }, 230);
            }
        } else {
            var actual = Number(cartCount.find('li').eq(0).text()) + quantity;
            var next = actual + 1;

            cartCount.find('li').eq(0).text(actual);
            cartCount.find('li').eq(1).text(next);
        }
    }

    function updateCartTotal(price, bool) {
        bool ? cartTotal.text((Number(cartTotal.text()) + Number(price)).toFixed(2)) : cartTotal.text((Number(cartTotal.text()) - Number(price)).toFixed(2));
    }
});
评论46
头像

友情提示:垃圾评论一律封号...

  • 头像 45楼
    05-05 14:35
    roaye
    感觉很厉害
  • 头像 44楼
    05-04 09:27
    a51821064
    不错不错 !
  • 头像 43楼
    03-22 14:00
    小码农
    不错不错
  • 头像 42楼
    03-11 18:03
    puitn_wp
    不错不错,收下了
  • 头像 41楼
    03-08 09:14
    765453562
    果断收藏再说
  • 头像 40楼
    03-07 21:58
    sahedev
    不错不错,就是不会用啊!
  • 头像 39楼
    12-28 16:56
    吾问无为谓
    这个真厉害
  • 头像 38楼
    11-15 10:39
    Andy彬
    这个没有特效~不过还是不错了
  • 头像 37楼
    11-08 09:45
    qtteahh
    效果色不错!
  • 头像 36楼
    10-31 21:54
    1122233
    效果挺好啊
1 2