t1meshift
/
expressCart
mirror of https://github.com/t1meshift/expressCart.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Cart dIsplay fixes for desktop and mobile

master
Mark Moffat 2020-01-04 21:34:42 +10:30
parent d374d42375
commit 0fcbfdcc33
3 changed files with 61 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
public/javascripts/expressCart.js
View File

@ -517,36 +517,38 @@ function updateCartDiv(){
// Setup the product html // Setup the product html
productHtml += ` productHtml += `
<div class="d-flex flex-row bottom-pad-15"> <div class="d-flex flex-row bottom-pad-15">
<div class="col-4 col-md-3"> <div class="p-2">
${productImage}
</div>
<div class="col-12 col-md-7">
<div class="row h-200"> <div class="row h-200">
<div class="col-sm-12 text-left no-pad-left"> <div class="col-4 col-md-3 no-pad-left">
<h6><a href="/product/${item.link}">${item.title}</a></h6> ${productImage}
</div> </div>
<div class="col-sm-12 text-left no-pad-left"> <div class="col-8 col-md-9">
${optionsHtml} <div class="row">
</div> <div class="col-12 no-pad-left mt-md-4">
<div class="col-md-8 no-pad-left"> <h6><a href="/product/${item.link}">${item.title}</a></h6>
<div class="input-group"> ${optionsHtml}
<div class="input-group-prepend">
<button class="btn btn-outline-primary btn-qty-minus" type="button">-</button>
</div> </div>
<input type="number" class="form-control cart-product-quantity text-center" id="${productId}-qty" data-id="${productId}" maxlength="2" value="${item.quantity}"> <div class="col-12 col-md-6 no-pad-left mb-2">
<div class="input-group-append"> <div class="input-group">
<button class="btn btn-outline-primary btn-qty-add" type="button">+</button> <div class="input-group-prepend">
<button class="btn btn-outline-primary btn-qty-minus" type="button">-</button>
</div>
<input type="number" class="form-control cart-product-quantity text-center" id="${productId}-qty" data-id="${productId}" maxlength="2" value="${item.quantity}">
<div class="input-group-append">
<button class="btn btn-outline-primary btn-qty-add" type="button">+</button>
</div>
</div>
</div>
<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 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>
<div class="col-md-4 text-right">
<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> </div>
<div class="col-12 col-md-2 align-self-center text-right no-pad-right">
<strong class="my-auto">${result.currencySymbol}${productTotalAmount}</strong>
</div>
</div>`; </div>`;
}); });

2
public/javascripts/expressCart.min.js vendored
View File

File diff suppressed because one or more lines are too long

68
views/themes/Cloth/cart.hbs
View File

@ -4,46 +4,50 @@
<div class="cartBodyWrapper"> <div class="cartBodyWrapper">
{{#each @root.session.cart}} {{#each @root.session.cart}}
<div class="d-flex flex-row bottom-pad-15"> <div class="d-flex flex-row bottom-pad-15">
<div class="col-4 col-md-3"> <div class="p-2">
{{#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="row h-200"> <div class="row h-200">
<div class="col-sm-12 text-left no-pad-left"> <div class="col-4 col-md-3 no-pad-left">
<h6><a href="/product/{{this.link}}">{{this.title}}</a></h6> {{#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>
<div class="col-sm-12 text-left no-pad-left"> <div class="col-8 col-md-9">
{{#each this.options}} <div class="row">
{{#if @last}} <div class="col-12 no-pad-left mt-md-4">
<strong>{{#upperFirst this.name}}{{/upperFirst}}</strong>: {{this.value}} <h6><a href="/product/{{this.link}}">{{this.title}}</a></h6>
{{else}} {{#each this.options}}
<strong>{{#upperFirst this.name}}{{/upperFirst}}:</strong> {{this.value}} / {{#if @last}}
{{/if}} <strong>{{#upperFirst this.name}}{{/upperFirst}}</strong>: {{this.value}}
{{/each}} {{else}}
</div> <strong>{{#upperFirst this.name}}{{/upperFirst}}:</strong> {{this.value}} /
{{#ifCond @root.cartReadOnly '!=' true}} {{/if}}
<div class="col-md-8 no-pad-left"> {{/each}}
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-primary btn-qty-minus" type="button">-</button>
</div> </div>
<input type="number" class="form-control cart-product-quantity text-center" id="{{../this.productId}}-qty" data-id="{{../this.productId}}" maxlength="2" value="{{../this.quantity}}"> {{#ifCond @root.cartReadOnly '!=' true}}
<div class="input-group-append"> <div class="col-12 col-md-6 no-pad-left mb-2">
<button class="btn btn-outline-primary btn-qty-add" type="button">+</button> <div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-primary btn-qty-minus" type="button">-</button>
</div>
<input type="number" class="form-control cart-product-quantity text-center" id="{{../this.productId}}-qty" data-id="{{../this.productId}}" maxlength="2" value="{{../this.quantity}}">
<div class="input-group-append">
<button class="btn btn-outline-primary btn-qty-add" type="button">+</button>
</div>
</div>
</div>
<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 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>
<div class="col-md-4 text-right">
<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> </div>
<div class="col-12 col-md-2 align-self-center text-right no-pad-right">
<strong class="my-auto">{{currencySymbol @root.config.currencySymbol}}{{formatAmount this.totalItemPrice}}</strong>
</div>
</div> </div>
{{/each}} {{/each}}
</div> </div>