186 lines
5.7 KiB
JavaScript
186 lines
5.7 KiB
JavaScript
/**
|
|
* Vvveb
|
|
*
|
|
* Copyright (C) 2021 Ziadin Givan
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*
|
|
*/
|
|
|
|
let template =
|
|
`
|
|
<div class="mini-cart" data-v-component-cart>
|
|
|
|
<a class="cart-info nav-link " href role="button" id="cart-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-v-url="cart/cart/index">
|
|
<i class="la la-lg la-shopping-bag"></i>
|
|
<strong class="text-top text-bold" data-v-total_items data-v-if="cart.total_items > 0"></strong>
|
|
</a>
|
|
|
|
|
|
<div class="cart-box" aria-labelledby="cart-dropdown">
|
|
|
|
<div>
|
|
<div class="table-responsive">
|
|
<table class="table cart-table align-middle mb-0">
|
|
<tbody>
|
|
|
|
|
|
<tr data-v-cart-product>
|
|
<td class="text-center">
|
|
<a href="#40" data-v-cart-product-url>
|
|
<img src="img/demo/product.jpg" alt="iPhone" class="img-rounded" data-v-cart-product-image width=50>
|
|
</a>
|
|
</td>
|
|
<td class="text-start">
|
|
<a href="#40" class="d-block" data-v-cart-product-url data-v-cart-product-name>
|
|
iPhone 5
|
|
</a>
|
|
|
|
<span data-v-cart-product-quantity>1</span>
|
|
<i class="la la-times text-muted"></i>
|
|
<span data-v-cart-product-price_tax_formatted>$123.20</span>
|
|
</td>
|
|
<td class="text-end">
|
|
<a type="button" class="btn btn-outline-secondary btn-sm border-0" data-v-vvveb-action="removeFromCart" data-v-cart-product-remove-url>
|
|
<i class="la la-times"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr data-v-cart-product>
|
|
<td class="text-center">
|
|
<a href="#40" data-v-cart-product-url>
|
|
<img src="img/demo/product.jpg" alt="iPhone" class="img-rounded" data-v-cart-product-image width=50>
|
|
</a>
|
|
</td>
|
|
<td class="text-start">
|
|
<a href="#40" class="d-block" data-v-cart-product-url data-v-cart-product-name>
|
|
iPhone 5
|
|
</a>
|
|
|
|
<span data-v-cart-product-quantity>1</span>
|
|
<i class="la la-times text-muted"></i>
|
|
<span data-v-cart-product-price_tax_formatted>$123.20</span>
|
|
</td>
|
|
<td class="text-end">
|
|
<a type="button" class="btn btn-outline-secondary btn-sm border-0" data-v-vvveb-action="removeFromCart" data-v-cart-product-remove-url>
|
|
<i class="la la-times"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr data-v-if-not="cart.total_items">
|
|
<td colspan="100">
|
|
<div class="d-flex p-2">
|
|
<div class="text-center p-2 opacity-75">
|
|
<!-- <img src="img/bag.svg" width="20" alt> -->
|
|
<i class="la la-2x la-shopping-bag"></i>
|
|
</div>
|
|
<div class="p-2">
|
|
<strong>Empty cart</strong><br>
|
|
<span class="text-muted">No products added yet!</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
</table>
|
|
</div>
|
|
|
|
<div class="p-3 pt-0 border-top" data-v-if="cart.total_items">
|
|
<div class="table-responsive mb-2" data-v-cart-totals>
|
|
<table class="table mb-0 cart-table cart-total" cellspacing="0">
|
|
<tfoot>
|
|
<tr data-v-cart-total>
|
|
<td colspan="5" class="text-end"><small data-v-cart-total-title>Sub-Total</small>:</td>
|
|
<td class="text-end">
|
|
<span data-v-cart-total-text data-v-if="total.text"> - </span>
|
|
<span data-v-cart-total-value_formatted data-v-if="total.value > 0">$101.00</span>
|
|
</td>
|
|
</tr>
|
|
<tr data-v-cart-total>
|
|
<td colspan="5" class="text-end"><small>Eco Tax (2.00):</small></td>
|
|
<td class="text-end">$2.00</td>
|
|
</tr>
|
|
<tr data-v-cart-total>
|
|
<td colspan="5" class="text-end"><small>VAT (19%):</small></td>
|
|
<td class="text-end">$20.20</td>
|
|
</tr>
|
|
<tr data-v-cart-total>
|
|
<td colspan="5" class="text-end"><small>Total:</small></td>
|
|
<td class="text-end">$123.20</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="5" class="text-end">Total:</td>
|
|
<td class="text-end" data-v-grand-total_formatted>$0</td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row mt-2 g-2 px-3 pb-2" data-v-if="cart.total_items">
|
|
<div class="col-6">
|
|
<a href="" class="btn btn-light btn-sm border w-100" data-v-url="cart/cart/index">
|
|
<i class="la la-shopping-cart la-lg"></i><span>View cart</span>
|
|
</a>
|
|
</div>
|
|
<div class="col-6">
|
|
<a href="" class="btn btn-primary btn-sm w-100" data-v-url="checkout/checkout/index">
|
|
<span>Checkout</span><i class="la la-arrow-right la-lg"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
`;
|
|
|
|
class CartComponent {
|
|
constructor ()
|
|
{
|
|
this.name = "Cart";
|
|
this.attributes = ["data-v-component-cart"],
|
|
|
|
this.image ="icons/cart.svg";
|
|
this.html = template;
|
|
|
|
this.properties = [];
|
|
}
|
|
|
|
init(node)
|
|
{
|
|
document.querySelectorAll('.mb-2[data-group]').forEach((el, i) => {
|
|
el.classList.add("d-none");
|
|
});
|
|
|
|
let source = node.dataset.vSource;
|
|
if (!source) {
|
|
source = "automatic";
|
|
}
|
|
|
|
document.querySelectorAll('.mb-2[data-group="' + source + '"]').forEach(e => e.classList.remove("d-none"));
|
|
}
|
|
}
|
|
|
|
let cartComponent = new CartComponent;
|
|
|
|
export {
|
|
cartComponent
|
|
};
|