欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

简单实现IONIC购物车功能

程序员文章站 2022-06-29 22:16:53
本文实例为大家分享了ionic购物车的具体代码,供大家参考,具体内容如下 html

本文实例为大家分享了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://cdn3.iconfinder.com/data/icons/cleaning-icons/512/trash_can-512.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
 });
});

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