简单实现IONIC购物车功能

Endora ·

更新时间:2024-09-20

· 793 次阅读

本文实例为大家分享了IONIC购物车的具体代码，供大家参考，具体内容如下

HTML


<div ng-app="app">
 <div class="l-header">
 <div class="l-cart">
  <div class="l-cart-count" ng-click="showCart = !showCart">{{ calculateTotalProducts() }}</div>
  <div class="l-cart-items" ng-show="showCart">
  <div ng-show="cart.length">
   <ul>
   <li ng-repeat="item in cart">
    <div class="l-cart-item-name">{{ item.product.name }}</div>
    <div class="l-cart-item-quantity">
    <input type="number" ng-model="item.quantity" ng-change="removeIfZero(item)" />
    </div>
    <div class="l-cart-item-subtotal">{{ item.quantity * item.product.price | currency }}</div>
    <div class="remove-item">
    <img src="http://huoche.7234.cn/images/jb51/xmd0hjwalyz.png" ng-click="removeFromCart(item)">
    </div>
   </li>
   </ul> 
   <div class="l-cart-total">total <b>{{ calculateTotalPrice() | currency }}</b></div>
  </div>
  <div class="l-cart-empty" ng-hide="cart.length">tu carrito está vacío</div>
  </div>
 </div>
 </div>
 <ul class="l-stock">
 <li class="l-product" ng-repeat="product in stock" ng-click="addToCart(product)" ng-class="{'is-on-cart': isProductOnCart(product)}">
  <div class="l-product-name">{{ product.name }}</div>
  <div class="l-product-price">{{ product.price | currency }}</div>
 </li>
 </ul>
</div>

CSS:


body
 color #333
 padding 60px 10px 10px 10px
 font-family Arial, Helvetica, sans-serif
 user-select none
.is-red
 color red !important
.l-header
 display flex
 justify-content flex-end
 align-items center
 position fixed
 top 0
 right 0
 left 0
 height 30px
 padding 10px
 background-color #2c3e50
.l-cart
 position relative
.l-cart-count
 font-size 12px
 font-weight 700
 width 30px
 line-height 30px
 text-align center
 color #ecf0f1
 background-color #27ae60
 border-radius 50%
 cursor pointer
.l-cart-items
 position absolute
 top 100%
 right 0
 width 270px
 margin 10px -10px 0 0
 padding 10px
 font-size 12px
 background-color #ecf0f1
 &:before
 content ""
 position absolute
 bottom 100%
 right 15px
 margin 0 0 -2px 0
 border 10px solid transparent
 border-bottom-color #ecf0f1
 li
 display flex
 align-items center
 padding-bottom 10px
 margin-bottom 10px
.l-cart-item-name
 flex 1
 overflow hidden
 white-space nowrap
 text-overflow ellipsis
.l-cart-item-quantity
 width 30px
 margin 0 10px
 input
 display block
 border none
 padding 5px
 margin 0
 width 100%
 text-align right
 appearance none
 &:focus
  outline none
  background-color #ffc
 &::-webkit-outer-spin-button,
 &::-webkit-inner-spin-button
  -webkit-appearance none
  margin 0
.l-cart-item-subtotal
 color #000
 width 70px
 text-align right
.remove-item img
 width:30px
 height:30px
 margin 0 10px
 text-align center
.l-cart-total
 margin-top 10
 padding-top 10px
 text-align right
 border-top 1px solid #bdc3c7
 b
 font-weight 700
 font-size 1.4em
.l-cart-empty
 text-align center
 font-size 1.4em
 color #95a5a6
.l-stock
 & > li
 float left
 margin 0 10px 10px 0
 &:after
 content ""
 clear both
.l-product
 display flex
 color #fff
 cursor pointer
 & > div
 padding 10px
.l-product-name
 background-color #2980b9
.l-product-price
 background-color #3498db
.is-on-cart
 .l-product-name
 background-color #27ae60
 .l-product-price
 background-color #2ecc71


/**
* Esta función genera productos aleatoriamente
* (http://marak.com/faker.js/)
**/
function fetchStock () {
 var i = 0,
 stock = [],
 total = faker.random.number({min: 10, max: 30});
 for (i = 0; i < total; i++) {
 stock.push({
  name : faker.commerce.productName(),
  price: faker.random.number({min: 1, max: 500})
 });
 }
 return stock;
};
/**
* Aquí empieza nuestro código Angular...
**/
var app = angular.module('app', []);
app.run(function ($rootScope) {
 var cart = [],
 stock = fetchStock();
 var addToCart = function (product) {
 var item = cart.find(function (item) {
  return item.product === product;
 });
 if (item) {
  item.quantity++;
 } else {
  cart.push({
  product : product,
  quantity: 1
  });
 }
 };
 var removeFromCart = function (item) {
 var index = cart.indexOf(item);
 cart.splice(index, 1);
 };
 var removeIfZero = function (item) {
 if (item.quantity < 1) {
 removeFromCart(item);
 }
 };
 var calculateTotalPrice = function () {
 return cart.reduce(function (sum, item) {
 return sum + item.quantity * item.product.price;
 }, 0);
 };
 var calculateTotalProducts = function () {
 return cart.reduce(function (sum, item) {
  return sum + item.quantity;
 }, 0);
 };
 var isProductOnCart = function (product) {
 return cart.some(function (item) {
  return item.product === product;
 });
 };
 angular.extend($rootScope, {
 stock: stock,
 cart: cart,
 addToCart: addToCart,
 removeFromCart: removeFromCart,
 removeIfZero: removeIfZero,
 calculateTotalPrice: calculateTotalPrice,
 calculateTotalProducts: calculateTotalProducts,
 isProductOnCart: isProductOnCart
 });
});

ionic

1024 个赞