简单实现IONIC购物车功能


Posted in Javascript onJanuary 10, 2017

本文实例为大家分享了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
 });
});

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

Javascript 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
js下获取div中的数据的原理分析
Apr 07 Javascript
js 函数调用模式小结
Dec 26 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
基于node.js之调试器详解
Aug 22 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 #Javascript
原生js实现水平方向无缝滚动
Jan 10 #Javascript
vue组件实例解析
Jan 10 #Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 #Javascript
React实现点击删除列表中对应项
Jan 10 #Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 #Javascript
微信小程序 slider 详解及实例代码
Jan 10 #Javascript
You might like
typecho插件编写教程(一):Hello World
2015/05/28 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
AngularJS入门之动画
2016/07/27 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python利用装饰器进行运算的实例分析
2015/08/04 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
python实现二分查找算法
2017/09/21 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Django model select的多种用法详解
2019/07/16 Python
python创建学生管理系统
2019/11/22 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
请假条格式范文
2014/04/10 职场文书
保护环境倡议书
2014/04/14 职场文书
计划生育工作汇报
2014/10/28 职场文书
军训通讯稿范文
2015/07/18 职场文书
2016公司新年问候语
2015/11/11 职场文书
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python