diff options
| -rw-r--r-- | html/css/product.css | 51 | ||||
| -rw-r--r-- | pages/ord/basket.html | 121 |
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 --> |