expressCart/views/themes/Cloth/product.hbs

155 lines
8.0 KiB
Handlebars

{{> themes/Cloth/front-menu}}
<div class="product-layout col-sm-8 offset-sm-2">
<div class="row">
<div class="col-sm-12 col-md-6 mr-auto">
{{#if result.productImage}}
<div class="title-image-container">
<div class="image-prev image-button"> {{{feather 'chevron-left'}}}</div>
<img src="{{result.productImage}}" id="product-title-image" class="product-title-image img-fluid" alt="...">
<div class="image-next image-button"> {{{feather 'chevron-right'}}}</div>
</div>
{{else}}
<div class="title-image-container">
<img src="/uploads/placeholder.png" id="product-title-image" class="product-title-image img-fluid" alt="...">
</div>
{{/if}}
{{#ifCond @root.images.length '>' 1}}
<div class="row">
{{#each @root.images}}
<div class="vertical-center top-pad-20 col-6">
<img src="{{this.path}}" class="thumbnail-image img-fluid">
</div>
{{/each}}
</div>
{{/ifCond}}
</div>
<div class="col-sm-12 col-md-6 ml-auto">
<div class="row">
<h1 class="col-md-10 product-title text-truncate">{{result.productTitle}}</h1>
<h4 class="col-md-10 product-price mp-0">{{currencySymbol config.currencySymbol}}{{result.productPrice}}</h4>
{{#if productOptions}}
<h4 class="col-md-10 product-option">{{ @root.__ "Options" }}</h4>
<div class="col-md-10">
{{#each productOptions}}
{{#ifCond this.optType '==' "select"}}
<strong>{{../this.optLabel}}</strong>
<select name="{{../this.optName}}" data-label="{{../this.optLabel}}" class="form-control product-opt">
{{#each ../this.optOptions}}
<option value="{{this}}">{{this}}</option>
{{/each}}
</select>
{{/ifCond}}
{{#ifCond this.optType '==' "radio"}}
<strong>{{../this.optLabel}}</strong>
{{#each ../this.optOptions}}
<div class="radio">
<label>
<input type="radio" class="product-opt" data-label="{{../../this.optLabel}}" name="{{../../this.optName}}" value="{{this}}">
<span class="left-pad-10">{{this}}</span>
</label>
</div>
{{/each}}
{{/ifCond}}
{{#ifCond this.optType '==' "checkbox"}}
<div class="checkbox">
<label>
<input type="checkbox" class="product-opt" data-label="{{../this.optLabel}}" name="{{../this.optName}}" value="{{../this.optName}}">
<span class="left-pad-10">{{../this.optLabel}}</span>
</label>
</div>
{{/ifCond}}
{{/each}}
</div>
{{/if}}
{{#if config.trackStock}}
{{#ifCond result.productStock '==' 0}}
<div class="col-md-10">
<h4 class="text-danger text-center">
Out of stock
</h4>
</div>
{{/ifCond}}
{{/if}}
<div class="col-md-10 productOptions">
<p class="product-option-text">{{ @root.__ "Quantity" }}</p>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-primary qty-btn-minus" type="button">-</button>
</div>
<input type="number" class="form-control add-color text-center" id="product_quantity" maxlength="3" value="1">
<div class="input-group-append">
<button class="btn btn-primary qty-btn-plus" type="button">+</button>
</div>
</div>
</div>
{{#if result.productComment}}
<div class="col-md-10">
{{ @root.__ "Leave a comment?" }}
<textarea class="form-control" id="product_comment"></textarea>
</div>
{{/if}}
<div class="col-md-10 btnAddToCart">
<button class="btn btn-primary btn-block product-add-to-cart" type="button">{{ @root.__ "Add to cart" }}</button>
</div>
<div class="col-md-10 body_text">
{{{fixTags result.productDescription}}}
</div>
</div>
</div>
</div>
{{#if config.showRelatedProducts}}
{{#if relatedProducts}}
<div class="col-sm-12 mt-5">
<h4>Related products</h4>
<div class="row">
{{#each relatedProducts}}
<div class="col-md-3">
<div>
{{#if productPermalink}}
<div class="product-wrapper">
<a href="/product/{{this.productPermalink}}">
<div class="vertical-center img-thumbnail">
{{#if productImage}}
<img class="img-fluid" src="{{this.productImage}}" alt="...">
{{else}}
<img class="img-fluid" src="/uploads/placeholder.png" alt="...">
{{/if}}
</div>
<h3 class="product-title product-title-home top-pad-10">
{{this.productTitle}}
</h3>
</a>
</div>
{{else}}
<a href="/product/{{this._id}}">
<div class="vertical-center img-thumbnail">
{{#if productImage}}
<img class="img-fluid" src="{{this.productImage}}" alt="...">
{{else}}
<img class="img-fluid" src="/uploads/placeholder.png" alt="...">
{{/if}}
</div>
<h3 class="product-title product-title-home top-pad-10">
{{this.productTitle}}
</h3>
</a>
{{/if}}
<h3 class="product-price mp-0 text-center">
{{currencySymbol ../config.currencySymbol}}{{formatAmount productPrice}}
</h3>
<p class="text-center">
{{#if productPermalink}}
<a class="btn btn-primary" href="/product/{{this.productPermalink}}">{{ @root.__ "View" }}</a>
{{else}}
<a class="btn btn-primary" href="/product/{{this._id}}">{{ @root.__ "View" }}</a>
{{/if}}
</p>
</div>
</div>
{{/each}}
</div>
</div>
{{/if}}
{{/if}}
</div>
<input type="hidden" id="productId" value="{{result._id}}">