<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/chakgoub/pen/ZOkbKN?depth=everything&order=popularity&page=15&q=panier&show_forks=false" />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<style class="cp-pen-styles">html {
height: 100%;
}
.container {
width: 100%;
height: 100%;
}
.c-container {
display: flex;
padding: 20px;
}
.c-container .c-products {
flex-grow: 2;
}
.c-container .c-products .c-panel:hover {
cursor: pointer;
border: 1px solid #000;
transition: 0.3s;
}
.c-container .c-products .c-panel h3 {
color: #333;
}
.c-container .c-cart {
flex-grow: 1;
}
.c-container .c-cart .c-delete {
cursor: pointer;
padding-top: 55px;
}
.c-container .c-cart .c-delete:hover {
color: #333;
}
.form-group.c-input-quantity {
padding-top: 35px;
}
</style></head><body>
<html>
<body>
<div ng-app="App" class="container">
<div ng-controller="appController as vm " class="c-container">
<div class="c-products">
<div ng-repeat="product in vm.products" class="col-lg-3">
<div class="panel panel-default c-panel">
<div class="panel-body text-center">
<img width=200 src="{{product.image}}" />
<h3>{{product.libelle}}</h3>
<h3><span class="label label-default ">{{product.price | currency:'€ '}}</span></h3>
<button ng-if="!product.done" type="button" ng-click="vm.addCart(product)" class="btn btn-default">Ajouter</button>
<p ng-if="product.done" class="bg-success"><i class="fa fa-check" aria-hidden="true"></i> Le Produit a été ajouté au panier</p>
</div>
</div>
</div>
</div>
<div class="c-cart">
<div ng-if="vm.client.cart.length >0" class="">
<h2 class=""><i class="fa fa-shopping-cart" aria-hidden="true"></i> Total : <span class="">{{ vm.client.total | currency:'€ ' }}</span></h2> <br>
<ul class="list-group">
<li ng-repeat="cart in vm.client.cart track by $index" class="list-group-item c-item">
<div class="row">
<div class="col-lg-7">
<span>{{ cart.libelle}}</span> <br>
<img width=100 src="{{cart.image}}" />
<span class="">Prix: {{ cart.price | currency:'€ '}} </span>
</div>
<!--/ cart info -->
<div class="col-lg-3">
<div class="form-group c-input-quantity">
<label for="pwd">Modifier Qté</label>
<input type="number" ng-model="cart.quantity" value="{{ cart.quantity}}" min=1 max=5 class="form-control" />
</div>
</div>
<!--/ cart input quantity -->
<div class="col-lg-2">
<div class="c-delete text-center">
<button ng-click="vm.deleteProductCart(cart, $index)" type="button" class="btn btn-danger"> <i class="fa fa-trash fa-2x" aria-hidden="true"> </i></button>
</div>
<!--/ cart delete -->
</div>
</div>
<!--/ row -->
</li>
</ul>
</div>
<div ng-if="vm.client.cart.length <=0" class="well text-center">
<h3>Votre panier est vide <i class="fa fa-shopping-basket" aria-hidden="true"></i> </h3>
</div>
</div>
</div>
</div>
<body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script >angular.module('App', [])
angular.module('App')
.controller('appController', appController)
appController.$inject = ['ProductService', '$scope'];
///
function appController(ProductService, $scope) {
var vm = this;
vm.addCart = addCart;
vm.deleteProductCart = deleteProductCart;
vm.client = {
name: "",
cart: [],
total: 0
}
// Watch data cart for change
$scope.$watch('vm.client.cart', calculateTotalCart, true)
activate();
function activate() {
vm.products = ProductService.getProducts();
}
///
/* Add cart product */
function addCart(product) {
if (vm.client.cart.indexOf(product) === -1) {
product.quantity = 1;
product.done = true;
vm.client.cart.push(product);
}
}
/* Delete cart product */
function deleteProductCart(product, index) {
vm.client.cart.splice(index, 1)
product.done = false;
}
function calculateTotalCart(oldValue, newValue) {
vm.client.total = 0;
// Re-calculate cart total
vm.client.cart.forEach(function(dataCart) {
vm.client.total += dataCart.price * dataCart.quantity
})
}
}
/* Service data provider */
angular.module('App')
.service('ProductService', ProductService)
ProductService.$inject = [];
function ProductService() {
var vm = this;
vm.getProducts = getProducts;
function getProducts() {
return [{
libelle: "Imprimante D ",
image: "http://web.maxiburo.fr/media/Images_Basse_Definition/Zoom/79/47/79475.jpg",
price: 496.95,
done: false
}, {
libelle: "Imprimante C",
image: "http://web.maxiburo.fr/media/Images_Basse_Definition/Zoom/79/48/79481.jpg",
price: 256.95,
done: false
}, {
libelle: "Imprimante B ",
image: "http://web.maxiburo.fr/media/Images_Basse_Definition/Zoom/12/78/12781.jpg",
price: 389.95,
done: false
}, {
libelle: "Imprimante A ",
image: "http://web.maxiburo.fr/media/Images_Basse_Definition/Zoom/48/80/48809.jpg",
price: 168.95,
done: false
}]
}
}
//# sourceURL=pen.js
</script>
</body></html>
