如果你不满意你的现状，要么开始改变，要么就闭嘴。这年头一点都不缺爱情，缺的是把爱情当真的人。
本文实例为大家分享了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://cdnss.haodaima.top/uploadfile/2023/0903/20230903011718184.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购物车功能就介绍到这了。人生坎坎坷坷，跌跌撞撞那是在所难免。但是，不论跌了多少次，你都要坚强地再次站起来。任何时候，无论你面临着生命的何等困惑，抑或经受着多少挫折，无论道路如何的艰难，无论希望变得如何渺茫，请你不要绝望，再试一次，成功一定属于你！更多相关简单实现IONIC购物车功能内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
