简单实现IONIC购物车功能

简单实现IONIC购物车功能

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

HTML

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 funcin 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 cdigo 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

});

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。