[tmp page_title]__COMPANY__ -- [L]Shopping Cart[/L][/tmp]

@_TOP_@
<!-- BEGIN CONTENT -->
<div class="container p-4">
	<!-- Hero Section-->
	<div class="py-5">
		<div class="text-start">
			<h1>[L]Shopping Cart[/L]</h1>
		</div>
	</div>
	<!-- End of Hero section -->
	<div class="container g-5">
		<div class="container">
			<div>
				[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="container">
					<div class="container font-weight-bold text-center p-4">
						<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>

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

						<!-- Product-->
						<div class="container pb-4">
							<div class="card p-4">
								<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="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">[item-discount-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()"><span class="material-icons-outlined">close</span>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					[/item-list]
					[/then]
					[/if]
						<!-- End of product -->
					</div>
				</div>
				<div class="card bg-light border-dark">
					<div class="card-header ">
						<h6 class="text-uppercase mb-0">[L]Order Summary[/L]</h6>
					</div>
					<div class="card-body">
						<div class="card-text">
							<span>[L]Subtotal[/L]</span><span class="float-right">[subtotal]</span>
						</div>
					</div>
					<div class="card-footer">
						<strong><span>Total</span><span class="float-right">[total-cost]</span></strong>
					</div>
				</div>
				<div class="mt-4">
					<div class="d-flex justify-content-between flex-column flex-lg-row">
						<a class="btn btn-lg btn-link text-muted" href="[area index]">[L]Continue Shopping[/L]</a>
						<a class="btn btn-lg btn-primary" href="[area ord/checkout]">[L]Proceed to checkout[/L]</a>
					</div>
				</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- END CONTENT -->
@_BOTTOM_@