简单实现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 checkbox,radio是否选中的判断代码
Mar 20 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
Express的路由详解
Dec 10 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
vue中添加mp3音频文件的方法
Mar 02 Javascript
iView框架问题整理小结
Oct 16 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
JS实现点击掉落特效
Jan 29 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
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
用于table内容排序
2006/07/21 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JavaScript URL参数读取改进版
2009/01/16 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
python如何基于redis实现ip代理池
2020/01/17 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
信用社实习人员自我鉴定
2013/09/20 职场文书
管理学专业个人求职信范文
2013/09/21 职场文书
自荐信格式范文
2013/10/07 职场文书
步步惊心观后感
2015/06/12 职场文书
小学课改工作总结
2015/08/13 职场文书
《月光曲》教学反思
2016/02/16 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript