"angular shop card"
Bootstrap 3.0.0 Snippet by evarevirus

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

Related: See More


Questions / Comments: