Cart dIsplay fixes for desktop and mobile
parent
d374d42375
commit
0fcbfdcc33
|
@ -517,18 +517,18 @@ function updateCartDiv(){
|
|||
// Setup the product html
|
||||
productHtml += `
|
||||
<div class="d-flex flex-row bottom-pad-15">
|
||||
<div class="col-4 col-md-3">
|
||||
<div class="p-2">
|
||||
<div class="row h-200">
|
||||
<div class="col-4 col-md-3 no-pad-left">
|
||||
${productImage}
|
||||
</div>
|
||||
<div class="col-12 col-md-7">
|
||||
<div class="row h-200">
|
||||
<div class="col-sm-12 text-left no-pad-left">
|
||||
<div class="col-8 col-md-9">
|
||||
<div class="row">
|
||||
<div class="col-12 no-pad-left mt-md-4">
|
||||
<h6><a href="/product/${item.link}">${item.title}</a></h6>
|
||||
</div>
|
||||
<div class="col-sm-12 text-left no-pad-left">
|
||||
${optionsHtml}
|
||||
</div>
|
||||
<div class="col-md-8 no-pad-left">
|
||||
<div class="col-12 col-md-6 no-pad-left mb-2">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-primary btn-qty-minus" type="button">-</button>
|
||||
|
@ -539,14 +539,16 @@ function updateCartDiv(){
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 text-right">
|
||||
<div class="col-4 col-md-2 no-pad-left">
|
||||
<button class="btn btn-outline-danger btn-delete-from-cart" data-id="${productId}" type="button"><i class="far fa-trash-alt" data-id="${productId}" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-2 align-self-center text-right no-pad-right">
|
||||
<div class="col-8 col-md-4 align-self-center text-right">
|
||||
<strong class="my-auto">${result.currencySymbol}${productTotalAmount}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -4,17 +4,19 @@
|
|||
<div class="cartBodyWrapper">
|
||||
{{#each @root.session.cart}}
|
||||
<div class="d-flex flex-row bottom-pad-15">
|
||||
<div class="col-4 col-md-3">
|
||||
{{#if productImage}}
|
||||
<img class="img-fluid" src="{{this.productImage}}" alt="{{this.title}} product image"> {{else}}
|
||||
<img class="img-fluid" src="/uploads/placeholder.png" alt="{{this.title}} product image"> {{/if}}
|
||||
</div>
|
||||
<div class="col-12 col-md-7">
|
||||
<div class="p-2">
|
||||
<div class="row h-200">
|
||||
<div class="col-sm-12 text-left no-pad-left">
|
||||
<h6><a href="/product/{{this.link}}">{{this.title}}</a></h6>
|
||||
<div class="col-4 col-md-3 no-pad-left">
|
||||
{{#if productImage}}
|
||||
<img class="img-fluid" src="{{this.productImage}}" alt="{{this.title}} product image">
|
||||
{{else}}
|
||||
<img class="img-fluid" src="/uploads/placeholder.png" alt="{{this.title}} product image">
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="col-sm-12 text-left no-pad-left">
|
||||
<div class="col-8 col-md-9">
|
||||
<div class="row">
|
||||
<div class="col-12 no-pad-left mt-md-4">
|
||||
<h6><a href="/product/{{this.link}}">{{this.title}}</a></h6>
|
||||
{{#each this.options}}
|
||||
{{#if @last}}
|
||||
<strong>{{#upperFirst this.name}}{{/upperFirst}}</strong>: {{this.value}}
|
||||
|
@ -24,7 +26,7 @@
|
|||
{{/each}}
|
||||
</div>
|
||||
{{#ifCond @root.cartReadOnly '!=' true}}
|
||||
<div class="col-md-8 no-pad-left">
|
||||
<div class="col-12 col-md-6 no-pad-left mb-2">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-primary btn-qty-minus" type="button">-</button>
|
||||
|
@ -35,16 +37,18 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 text-right">
|
||||
<div class="col-4 col-md-2 no-pad-left">
|
||||
<button class="btn btn-outline-danger btn-delete-from-cart" data-id="{{../this.productId}}" type="button"><i class="far fa-trash-alt" data-id="{{../this.productId}}" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
{{/ifCond}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-2 align-self-center text-right no-pad-right">
|
||||
<div class="col-8 col-md-4 align-self-center text-right">
|
||||
<strong class="my-auto">{{currencySymbol @root.config.currencySymbol}}{{formatAmount this.totalItemPrice}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="cartTotalsWrapper container-fluid">
|
||||
|
|
Loading…
Reference in New Issue