Add calculations on basket

Gruntfile.js

@@ -17,6 +17,7 @@ var jsCompat = [
 var jsSite = [
 	jsBase,
 	jsBootstrap,
+	'node_modules/currency.js/dist/currency.min.js',
 	'build/js/site.js',
 ]
 
@@ -437,6 +438,12 @@ module.exports = function(grunt) {
 						src: ['**'],
 						dest: 'public/assets/plugins/moment',
 					},
+					{
+						expand: true,
+						cwd: 'node_modules/currency.js/dist/',
+						src: ['**'],
+						dest: 'public/assets/plugins/currency',
+					},
 					{
 						expand: true,
 						cwd: 'node_modules/bootstrap-fileinput/css/',

package.json

@@ -47,6 +47,7 @@
         "bootstrap4-duallistbox": "^4.0.2",
         "bootstrap4-toggle": "^3.6.1",
         "chart.js": "^3.3.2",
+        "currency.js": "^2.0.4",
         "datatables.net-bs4": "1.10.18",
         "datatables.net-buttons-bs4": "^1.7.1",
         "datatables.net-colreorder-bs4": "^1.5.4",

resources/views/Shop/Baskets/basket.blade.php

@@ -23,12 +23,44 @@
 							@foreach ($items as $item)
 								@include('Shop.Baskets.partials.article')
 							@endforeach
+						</div>
 					</div>
 				@endforeach		
 			</div>
 			<div class="col-4">
 				@component('components.card')
-				Tarif appliqué :	
+				<div class="row mb-3">
+					<div class="col-6 text-uppercase">
+						Tarif appliqué
+					</div>
+					<div class="col-6">
+					</div>
+				</div>
+				<div class="row m-3">
+					<div class="col-6">
+						<span id="basket-count"></span> ARTICLES
+					</div>
+					<div class="col-6 text-right">
+						<span id="basket-total"></span> €
+					</div>
+				</div>
+				<div class="row m-3">
+					<div class="col-6">
+						LIVRAISON
+					</div>
+					<div class="col-6 text-right">
+						<span id="shipping">5</span> €
+					</div>
+				</div>
+				<hr>
+				<div class="row m-3"  style="font-size: 1.6em; font-weight: 600;">
+					<div class="col-6">
+						TOTAL TTC
+					</div>
+					<div class="col-6 text-right">
+						<span id="basket-total-shipped"></span> €
+					</div>
+				</div>
 				@endcomponent
 			</div>
 		</div>
@@ -37,13 +69,61 @@
 
 @push('js')
 	<script>
-		$('.basket-quantity').change(function() {
+		function handleBasket() {
-			var offer_id = $(this).parent('row');
+			calculateTotal();
-			console.log(offer_id);
+
-		});
+			$('.basket-quantity').change(function() {
-		$('.basket-delete').change(function() {
+				calculatePrice($(this).parents('.basket-row'));
-			var offer_id = $(this).data('id');
+			});
-			console.log(offer_id);
+
-		});
+			$('.basket-delete').click(function() {
+				var offer_id = $(this).data('id');
+				var data = {offer_id: offer_id, quantity: 0};
+				$.post("{{ route('Shop.Basket.addBasket') }}", data, function() {
+					$('#basket_offer-' + offer_id).remove();
+					calculateTotal();
+				});
+			});
+		}
+
+		function calculatePrice($that) {
+			var quantity = $that.find('.basket-quantity').val();
+			var price = $that.find('.basket-price').text();
+			var total_price = fixNumber(quantity * price);
+			$that.find('.basket-total-row').html(total_price);
+			calculateTotal();
+			return total_price;
+		}
+
+		function calculateTotal() {
+			countBasket();
+			var total = 0;
+			$('.basket-total-row').each(function() {
+				total += parseFloat($(this).text());
+			});
+			$('#basket-total').html(fixNumber(total));
+			calculateTotalShipped();
+			return total;
+		}
+
+		function countBasket() {
+			var count = 0;
+			$('.basket-quantity').each(function() {
+				count += parseInt($(this).val());
+			});
+			$('#basket-count').html(count);
+			return count;
+		}
+
+		function calculateTotalShipped() {
+			var total_shipped = parseFloat($('#basket-total').html()) + 5;
+			$('#basket-total-shipped').html(fixNumber(total_shipped));
+		}
+
+		function fixNumber(value) {
+			return parseFloat(value).toFixed(2);
+		}
+
+		handleBasket();
 	</script>
 @endpush

resources/views/Shop/Baskets/partials/article.blade.php

@@ -1,4 +1,4 @@
-<div class="row mb-3" id="basket_offer-{{ $item['id'] }}">
+<div class="row mb-3 basket-row" id="basket_offer-{{ $item['id'] }}" data-id={{ $item['id'] }}>
     <div class="col-2 text-center">
         <img src="{{ $item['image'] }}" class="img-fluid">
     </div>
@@ -7,7 +7,7 @@
         {{ $item['variation'] }}<br/>
         <div class="row">
             <div class="col-6">
-                {{ $item['price'] }} € / unité
+                <span class="basket-price">{{ $item['price'] }}</span> € / unité
             </div>
             <div class="col-2">
                 @include('components.form.inputs.number', [
@@ -17,10 +17,10 @@
                 ])
             </div>
             <div class="col-2 text-right" style="font-size: 2em;" id="basket_total-{{ $item['id'] }}">
-                {{ $item['quantity'] * $item['price'] }} €
+                <span class="basket-total-row">{{ $item['quantity'] * $item['price'] }}</span> €
             </div>
-            <div class="col-2" style="font-size: 2em;">
+            <div class="col-2">
-                <i class="fa fa-fw fa-trash basket-delete" data-id={{ $item['id'] }}></i>
+                <i class="btn fa fa-fw fa-trash basket-delete"  style="font-size: 1.6em;" data-id={{ $item['id'] }}></i>
             </div>
         </div>
     </div>

resources/views/Shop/layout/partials/header-basket.blade.php

@@ -1,13 +1,15 @@
 <div class="row">
-	<div class="col-6">
+	<div class="col-6 d-none">
 		<div id="header-favorite" class="text-light" data-refresh-url="/favorite">
 			<i class="fa fa-3x fa-heart"></i>
 		</div>
 	</div>
 
-	<div class="col-6">
+	<div class="col-6 text-center">
 		<div id="header-basket" class="text-light mr-3" data-refresh-url="/basket">
-			<i class="fa fa-3x fa-shopping-basket"></i>
+			<a href="{{ route('Shop.Basket.basket') }}" style="color: white;">
+				<i class="fa fa-3x fa-shopping-basket"></i>
+			</a>
 		</div>
 	</div>
 </div>