You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
6.3 KiB
HTML
117 lines
6.3 KiB
HTML
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
|
|
<div class="page" data-name="shop">
|
|
|
|
<div class="navbar">
|
|
<div class="navbar-bg"></div>
|
|
<div class="navbar-inner">
|
|
<div class="left">
|
|
<a class="link back hapticbtn" href="#">
|
|
<i class="icon icon-back"></i>
|
|
<span class="if-not-md">Back</span>
|
|
</a>
|
|
</div>
|
|
<div class="title">Shop</div>
|
|
<div class="right">
|
|
<a href="#" class="link hapticbtn popup-open" data-popup="#shoppingCartPopup">
|
|
<span class="chip"><span class="chip-label" id="shopping-cart-items-chip-label">0</span></span>
|
|
<i class="far fa-shopping-cart"></i>
|
|
<span>Cart</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="page-content noselect">
|
|
<div class="row justify-content-center margin-top">
|
|
<div class="col-100 medium-90 xlarge-75">
|
|
<div class="row justify-content-left">
|
|
<div class="col-100 no-margin" id="addPaymentMethodNag" style="display: none;">
|
|
<div class="card">
|
|
<div class="card-content text-align-center padding-half">
|
|
<i class="fad fa-exclamation-circle fa-2x text-color-orange"></i><br>
|
|
You need an account with a linked credit card to use the shop. <span class="taptext">Tap</span><span class="clicktext">Click</span> the button to update your account.
|
|
<a class="button hapticbtn button-fill margin" href="/account"><i class="fas fa-user-circle"></i> My Account</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{#each items}}
|
|
<div class="col-100">
|
|
<div class="block-title no-margin-bottom margin-half-top">{{category_name}}</div>
|
|
</div>
|
|
{{#each items}}
|
|
<div class="col-100 small-50 large-33 no-margin">
|
|
<div class="card card-expandable card-expandable-animate-width margin-half hapticbtn shop-item-card" id="shop-item-card-{{sku}}" data-sku="{{sku}}">
|
|
<div class="card-content card-content-padding">
|
|
<div class="pointercursor card-close">
|
|
<div class="pointercursor" style="max-width: calc(100% - 2.5em);">{{name}}<br />
|
|
<small style="opacity: 0.7">
|
|
{{#js_if "this.price == '0.00'"}}Free{{else}}${{price}}{{/js_if}}
|
|
{{#if instock}}{{else}} · Out of Stock{{/if}}
|
|
</small>
|
|
</div>
|
|
<a href="#" class="link card-opened-fade-in pointercursor"
|
|
style="position: absolute; right: 2em; top: calc(var(--f7-navbar-height) * 1.5);">
|
|
<i class="fas fa-times"></i>
|
|
</a>
|
|
</div>
|
|
{{#js_if "this.images.length > 0"}}
|
|
<div style="text-align: center;" class="card-opened-fade-out card-opened-display-none">
|
|
<img src="{{js 'this.images[0]'}}" style="max-width: 100%; max-height: 200px;"/>
|
|
</div>
|
|
{{/js_if}}
|
|
<div class="card-opened-fade-in card-closed-display-none">
|
|
{{#if instock}}
|
|
<div class="button button-fill margin-top card-close" onclick="addToCart('{{sku}}', 1)">
|
|
<i class="far fa-cart-plus"></i> Add to Cart
|
|
</div>
|
|
{{else}}
|
|
<div class="button button-fill margin-top color-gray color-theme-gray">
|
|
Out of Stock
|
|
</div>
|
|
{{/if}}
|
|
{{#js_if "this.images.length > 0"}}
|
|
<div class="swiper shop-images-swiper" data-sku="{{sku}}" id="swiper-{{sku}}">
|
|
<div class="swiper-wrapper">
|
|
{{#each images}}
|
|
<div class="swiper-slide" style="display: flex; justify-content: center; align-items: center;">
|
|
<img src="{{this}}" style="max-height: 400px; max-width: 90%;"/>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
<div id="swiper-pagination-{{sku}}" class="swiper-pagination"></div>
|
|
</div>
|
|
<br />
|
|
{{/js_if}}
|
|
{{description}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="popup" id="shoppingCartPopup">
|
|
<div class="navbar">
|
|
<div class="navbar-bg"></div>
|
|
<div class="navbar-inner">
|
|
<div class="left">
|
|
<a class="link popup-close" href="#">
|
|
<i class="icon icon-back"></i>
|
|
<span class="if-not-md">Close</span>
|
|
</a>
|
|
</div>
|
|
<div class="title">Cart</div>
|
|
</div>
|
|
</div>
|
|
<div id="shoppingCartContainer">
|
|
</div>
|
|
</div>
|
|
</div> |