62 lines
3.0 KiB
JavaScript
62 lines
3.0 KiB
JavaScript
import * as Cart from './modules/cart.js';
|
|
import { url } from './utils.js';
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
let productId = document.querySelector('meta[name="product-id"]').getAttribute('content');
|
|
if (productId != undefined) {
|
|
|
|
let products = await Cart.getItems();
|
|
|
|
let objProduct = products.find(obj => obj.id == productId);
|
|
if (objProduct == undefined) {
|
|
document.querySelector('#btn-add-to-bag').style.display = "block";
|
|
document.querySelector('#btn-show-bag').style.display = "none";
|
|
if (Cart.getItems().length > 0) document.querySelector('#btn-check-out').parentElement.style.display = "none";
|
|
else document.querySelector('#btn-check-out').parentElement.display = "block";
|
|
}
|
|
else {
|
|
document.querySelector('#btn-add-to-bag').style.display = "none";
|
|
document.querySelector('#btn-show-bag').style.display = "block";
|
|
document.querySelector('#btn-check-out').parentElement.style.display = "none";
|
|
document.querySelector('#count-items-in-bag').innerHTML = objProduct.quantity + `<svg style="fill: white; width: 12px; margin-left: 3px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>`;
|
|
}
|
|
}
|
|
|
|
let btnCheckOut = document.querySelector('#btn-check-out');
|
|
|
|
btnCheckOut.addEventListener("click", () => {
|
|
let productId = btnCheckOut.getAttribute("data-id");
|
|
Cart.addItem(productId);
|
|
window.location.replace(url("/checkout"));
|
|
});
|
|
|
|
let btnAddToBag = document.querySelector('#btn-add-to-bag');
|
|
|
|
btnAddToBag.addEventListener("click", async () => {
|
|
let productId = btnAddToBag.getAttribute("data-id");
|
|
let quantity = await Cart.getQuantity();
|
|
document.querySelectorAll('.js-product-counter').forEach(element => {
|
|
element.innerText = quantity;
|
|
|
|
if (quantity > 0) element.style.display = "block";
|
|
else element.style.display = "none";
|
|
});
|
|
|
|
/* let copyElemetn = document.querySelector('#count-products-in-bag').clone();
|
|
copyElemetn.setAttribute('id', '');
|
|
copyElemetn.appendTo(parentElement);
|
|
document.querySelector('#count-products-in-bag').classList.add('animate__animated', 'animate__backInUp');
|
|
document.querySelector('#count-products-in-bag').addEventListener('animationend', function () {
|
|
|
|
document.querySelector('#count-products-in-bag').classList.remove('animate__animated', 'animate__backInUp');
|
|
copyElemetn.remove();
|
|
|
|
}); */
|
|
|
|
document.querySelector('#btn-add-to-bag').style.display = "none";
|
|
document.querySelector('#btn-show-bag').style.display = "block";
|
|
document.querySelector('#btn-check-out').parentElement.style.display = "none";
|
|
|
|
Cart.addItem(productId);
|
|
});
|
|
}); |