这篇文章主要为大家展示了“如何实现IONIC购物车功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何实现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="https://cache.yisu.com/upload/information/20200622/114/78237.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
JS
/**
* 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购物车功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
