sforkowany z mtyton/comfy
143 wiersze
5.0 KiB
JavaScript
143 wiersze
5.0 KiB
JavaScript
|
|
$(document).on('click', '.add-to-cart-button', function(event) {
|
|
|
|
event.preventDefault();
|
|
const button = $(this);
|
|
const formData = new FormData();
|
|
const productID = parseInt($(this).data('product-id'));
|
|
const quantity = parseInt($('#quantity'+productID).val());
|
|
const addToCartURL = $(this).data('add-to-cart-url');
|
|
const csrfToken = $(this).data('csrf-token');
|
|
console.log(productID);
|
|
formData.append('product_id', productID);
|
|
formData.append('quantity', 1); // Serialize the form data correctly
|
|
button.prop('disabled', true);
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: addToCartURL,
|
|
data: formData, // Use the serialized form data
|
|
headers: { 'X-CSRFToken': csrfToken },
|
|
dataType: 'json',
|
|
processData: false, // Prevent jQuery from processing the data
|
|
contentType: false, // Let the browser set the content type
|
|
success: function(data) {
|
|
// Show the options block
|
|
|
|
//$('#addToCartModal').show();
|
|
//createShadedOverlay()
|
|
button.prop('disabled', false);
|
|
},
|
|
error: function() {
|
|
button.prop('disabled', false);
|
|
}
|
|
});
|
|
});
|
|
|
|
function createShadedOverlay() {
|
|
const body = document.body;
|
|
const overlay = document.createElement('div');
|
|
overlay.classList.add('shaded-overlay');
|
|
body.appendChild(overlay);
|
|
const optionsdiv = document.getElementById('addToCartModal');
|
|
optionsdiv.classList.add('unshaded-overlay');
|
|
body.appendChild(optionsdiv);
|
|
}
|
|
|
|
function removeShadedOverlay() {
|
|
const overlay = document.querySelector('.shaded-overlay');
|
|
if (overlay) {
|
|
overlay.remove();
|
|
}
|
|
}
|
|
|
|
const cartButton = document.getElementById('cart-button');
|
|
const cartDropdown = document.getElementById('cart-dropdown');
|
|
|
|
|
|
function fetchCartItems(xcsrf_token){
|
|
fetch('/store/cart-action/list-products')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const cartItems = data.cart_items;
|
|
const cartItemsList = document.getElementById('cart-items');
|
|
const csrf_token = xcsrf_token
|
|
cartItemsList.innerHTML = ''; // Clear existing cart items
|
|
|
|
cartItems.forEach(item => {
|
|
const li = document.createElement('li');
|
|
li.textContent = `Product ID: ${item.product_id}, Quantity: `;
|
|
|
|
const quantityInput = document.createElement('input');
|
|
quantityInput.type = 'number';
|
|
quantityInput.classList.add('quantity-input');
|
|
quantityInput.value = item.quantity;
|
|
quantityInput.min = '1';
|
|
quantityInput.step = '1';
|
|
quantityInput.dataset.productId = item.product_id;
|
|
quantityInput.dataset.csrfToken = csrf_token;
|
|
li.appendChild(quantityInput);
|
|
|
|
li.appendChild(document.createTextNode(' '));
|
|
|
|
const removeButton = document.createElement('a');
|
|
removeButton.href = '#';
|
|
removeButton.classList.add('remove-from-cart-button');
|
|
removeButton.dataset.productId = item.product_id;
|
|
removeButton.dataset.csrfToken = csrf_token;
|
|
removeButton.textContent = 'Remove';
|
|
li.appendChild(removeButton);
|
|
|
|
cartItemsList.appendChild(li);
|
|
});
|
|
});
|
|
}
|
|
|
|
$(document).on('click', '.remove-from-cart-button', function(event) {
|
|
event.preventDefault();
|
|
const button = $(this);
|
|
const productId = button.data('product-id');
|
|
const csrfToken = button.data('csrf-token');
|
|
const url = button.data('remove-from-cart-url');
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: url,
|
|
data: {"product_id": productId},
|
|
headers: { 'X-CSRFToken': csrfToken },
|
|
dataType: 'json',
|
|
success: function(data) {
|
|
alert("Item has been removed");
|
|
location.reload();
|
|
},
|
|
error: function() {
|
|
alert("Error occurred while removing the item from the cart.");
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
$(document).on('change', '.quantity-input', function(event) {
|
|
event.preventDefault();
|
|
const input = $(this);
|
|
const formData = new FormData();
|
|
const productID = $(this).data('product-id');
|
|
const newQuantity = input.val();
|
|
const csrfToken = $(this).data('csrf-token');
|
|
const url = $(this).data("update-cart-url")
|
|
formData.append('product_id', productID);
|
|
formData.append('quantity', newQuantity);
|
|
console.log(input.val())
|
|
|
|
$.ajax({
|
|
type: 'PUT',
|
|
url: url,
|
|
data: formData, // Use the serialized form data
|
|
headers: { 'X-CSRFToken': csrfToken },
|
|
dataType: 'json',
|
|
success: function(data) {
|
|
setTimeout(location.reload(), 500)
|
|
},
|
|
processData: false, // Prevent jQuery from processing the data
|
|
contentType: false, // Let the browser set the content type
|
|
});
|
|
});
|