浮动的jQuery加入购物车效果,可以删除、撤消等操作

浮动的jQuery加入购物车效果,可以删除、撤消等操作

简介

一款浮动的jQuery加入购物车效果插件,可以删除商品,撤消删除,选择商品数量,总价格会随商品数而增加减少。

HTML结构

<div class="cd-cart-container empty">
    <a href="#0" class="cd-cart-trigger">
        Cart
        <ul class="count">
            <!-- cart items count -->
            <li>
                0
            </li>
            <li>
                0
            </li>
        </ul>
        <!-- .count -->
    </a>
    <div class="cd-cart">
        <div class="wrapper">
            <header>
                <h2>
                    Cart
                </h2>
                <span class="undo">
                    Item removed.
                    <a href="#0">
                        Undo
                    </a>
                </span>
            </header>
            <div class="body">
                <ul>
                    <!-- products added to the cart will be inserted here using JavaScript
                    -->
                </ul>
            </div>
            <footer>
                <a href="#0" class="checkout btn">
                    <em>
                        Checkout - $
                        <span>
                            0
                        </span>
                    </em>
                </a>
            </footer>
        </div>
    </div>
    <!-- .cd-cart -->
</div>
<!-- cd-cart-container -->
<div class="body">
    <ul>
        <li class="product">
            <div class="product-image">
                <a href="#0">
                    <img src="img/thumb.jpg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" 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>
                                <!-- ... -->
                            </select>
                        </span>
                    </div>
                </div>
            </div>
        </li>
        <!-- other products added to the cart -->
    </ul>
</div>

CSS样式

.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);
}

.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: 0 4px 30px rgba(0, 0, 0, 0.17);
}
 
.cart-open .cd-cart .wrapper {
  height: 100%;
  width: 100%;
  transition-delay: 0s;
}

.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 .3s forwards;
}
 
@keyframes cd-item-slide-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(80px);
    opacity: 0;
  }
}

jQuery脚本

function addProduct() {
  //this is just a product placeholder
  var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="img/product-preview.png?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" 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);
}
打赏
下载 在线预览 积分 (-2) 吐槽 (6)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽