频道导航

简单实现IONIC购物车功能

2019-01-06 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了简单实现IONIC购物车功能，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

HTML

<div class="l-header">
<div class="l-cart">
<div class="l-cart-count" ng-click="showCart = !showCart">{{ calculateTotalProducts() }}

<div class="l-cart-item-subtotal"&gt;{{ item.quantity * item.product.price | currency }}</div>
<div class="remove-item"&gt;
<p class="pic_center"><img src="https://cdn3.iconfinder.com/data/icons/cleaning-icons/512/Trash_Can-512.png" ng-click="removeFromCart(item)"&gt;
</div></p>

<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 class="l-product-price">{{ product.price | currency }}

CSS:

<div class="jb51code">
<pre class="brush: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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/js/42674.html

购物车购物车