add .cart classes and cart item on basket

2 files changed, 171 insertions, 1 deletions

diff --git a/html/css/product.css b/html/css/product.css
index ee0d69c..fbd709c 100644
--- a/html/css/product.css
+++ b/html/css/product.css
@@ -83,4 +83,53 @@
   }
 }
 
-.overflow-hidden { overflow: hidden; }
\ No newline at end of file
+.overflow-hidden { overflow: hidden; }
+
+/*
+ * Cart
+ */
+
+.cart-header {
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  font-weight: bold;
+  padding: 1.2rem 2rem;
+  background: #f8f9fa
+}
+
+.cart-body {
+  padding: 0 2rem
+}
+
+.cart-footer {
+  background: #f8f9fa;
+  padding: 0 2rem
+}
+
+.cart-footer .cart-item {
+  padding-top: 1rem;
+  padding-bottom: 1rem
+}
+
+.cart-item {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid #e9ecef
+}
+
+.cart-item:last-of-type {
+  border-bottom: none
+}
+
+.cart-item-img {
+  max-width: 80px
+}
+
+.cart-title {
+  margin-left: 1rem
+}
+
+.cart-remove {
+  color: #495057;
+  font-size: .7875rem
+}
\ No newline at end of file
diff --git a/pages/ord/basket.html b/pages/ord/basket.html
index 189711f..be0168f 100644
--- a/pages/ord/basket.html
+++ b/pages/ord/basket.html
@@ -17,6 +17,127 @@
 		<!-- End of cart subheading -->
 	</div>
 	<!-- End of Hero section -->
+	<!-- Shopping Cart Section-->
+	<div class="container">
+		<div class="container">
+			<div class="row">
+				<div class="col-lg-8">
+					[edisplay]
+
+					[calc]
+						my $cname = $Config->{CookieName} || 'MV_SESSION_ID';
+						$Scratch->{have_cookie} = $Tag->read_cookie($cname)
+							and delete $Scratch->{tried};
+						return;
+					[/calc]
+					[if scratch have_cookie]
+					[elsif scratch tried]
+							[L CART_MSG1]You must have cookies set to leave the basket. Check out now or forever lose your shopping cart.[/L]
+					[/elsif]
+					[else]
+						[set tried]1[/set]
+						[bounce href="[area ord/basket]"]
+					[/else]
+					[/if]
+					<form action="[process secure=1]" method=POST name="basket" class="form-horizontal" id="form">
+						[form-session-id]
+						<input type="hidden" name="mv_doit" value="refresh">
+						<input type="hidden" name="mv_orderpage" value="ord/basket">
+						<input type="hidden" name="mv_nextpage" value="index">
+						<input type="hidden" name="mv_nlines" value="[nitems lines=1]">
+						<div class="cart">
+							<div class="cart-header text-center">
+								<div class="row">
+									<div class="col-md-5">[L]Description[/L]</div>
+									<div class="col-md-7 d-none d-md-block">
+										<div class="row">
+										 <div class="col-md-3">[L]Price[/L]</div>
+										 <div class="col-md-4">[L]Quantity[/L]</div>
+										 <div class="col-md-3">[L]Total[/L]</div>
+										 <div class="col-md-2"></div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="cart-body">
+								[if items]
+								[then]
+								[item-list]
+
+								[item-calc]
+								#Log("Checking master item $master");
+									$row_class = ++$count % 2 ?  'cartnorm' : 'cartalt';
+									my $item = '[item-increment]';
+									my $up = q{[item-data merchandising upsell_to]};
+									my $cr = q{[item-data merchandising cross_sell]};
+									$upsell_remove{'[item-code]'} = 1;
+									$cross_remove{'[item-code]'} = 1;
+									my %seen = ( '' => 1 );
+
+									$Scratch->{upsell} .= " $up" if $up;
+									$Scratch->{cross_codes} .= " $cr" if $cr;
+									my @up = split /\s+/, $Scratch->{upsell};
+									my @cr = split /\s+/, $Scratch->{cross_codes};
+									@up = grep  ( (!$seen{$_}++ && ! $upsell_remove{$_}), @up);
+									@cr = grep  ( (!$seen{$_}++ && ! $cross_remove{$_}), @cr);
+									$Scratch->{upsell} = join " ", @up;
+									$Scratch->{cross_codes} = join " ", @cr;
+									return;
+								[/item-calc]
+								<!-- Cart item -->
+								
+								<div class="cart-item">
+									<div class="row d-flex align-items-center text-left text-md-center">
+										<div class="col-12 col-md-5"><a class="cart-remove close mt-3 d-md-none" href="#"><i class="fa fa-times"></i></a>
+											<div class="d-flex align-items-center"><a href="[area href="[item-sku]"]">[image src="[item-field image]" imagesubdir=items makesize="80x80" extra='class="cart-item-img" alt=""']</a>
+												<div class="cart-title text-left"><a href="[area href="[item-sku]"]"><strong>[item-description]</strong></a><br><span class="text-muted text-sm">Size: Large</span><br><span class="text-muted text-sm">Colour: Green</span>
+												</div>
+											</div>
+										</div>
+										<div class="col-12 col-md-7 mt-4 mt-md-0">
+											<div class="row align-items-center">
+												<div class="col-md-3">
+													<div class="row">
+														<div class="col-6 d-md-none text-muted">[L]Price[/L]</div>
+														<div class="col-6 col-md-12 text-right text-md-center">[item-discount-price]</div>
+													</div>
+												</div>
+												<div class="col-md-4">
+													<div class="row align-items-center">
+														<div class="d-md-none col-7 col-sm-9 text-muted">[L]Quantity[/L]</div>
+														<div class="col-5 col-sm-3 col-md-12">
+															<div class="d-flex align-items-center">
+																<div class="btn btn-items btn-items-decrease" onclick="document.getElementById('[item-quantity-name]').value--; document.getElementById('form').submit()">-</div>
+																<input class="form-control text-center border-0 border-md input-items" type="text" value="[item-quantity]" name="[item-quantity-name]" id="[item-quantity-name]" onchange="this.form.submit()">
+																<div class="btn btn-items btn-items-increase" onclick="document.getElementById('[item-quantity-name]').value++; document.getElementById('form').submit()">+</div>
+															</div>
+														</div>
+													</div>
+												</div>
+												<div class="col-md-3"> 
+													<div class="row">
+														<div class="col-6 d-md-none text-muted">[L]Total price[/L]</div>
+														<div class="col-6 col-md-12 text-right text-md-center">[subtotal]</div>
+													</div>
+												</div>
+												<div class="col-2 d-none d-md-block text-center"><a class="cart-remove" href="#" onclick="document.getElementById('[item-quantity-name]').value = 0; document.getElementById('form').submit()"> <i class="delete fa fa-times"></i></a></div>
+											</div>
+										</div>
+									</div>
+								</div>
+								[/item-list]
+								[/then]
+								[/if]
+								<!-- End of Cart item -->
+							</div>
+						</div>
+					</form>
+
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- End of Shopping cart section -->
 
 </div>
 <!-- END CONTENT -->