webshop/static/js/cart.js

"use strict";

async function updateCart(form) {
  // make formData object with data from form
  // and send it to backend endpoint to be processed.
  // received updated dictionary to use for
  // updating DOM.

  const formData = new FormData(form);

  const res = await fetch("/checkout?js=true", {
    method: "POST",
    body: formData
  });

  if (res.ok) {
    return res.json();
  } else {
    return {status: res.status, error: res.statusText};
  }
}

function updateCartIcon(data) {
  const cart_icon = document.querySelector('.cart-icon');

  if (cart_icon.length !== null) {

    // update cart amount value
    let cart_icon_amount_list = cart_icon.querySelector(".cart-icon--amount");
    if (cart_icon_amount_list.length !== null) {
      cart_icon_amount_list.innerText = data.cart_breakdown.item_amount;
    }

    // -- show visual feedback for the cart icon action
    cart_icon.dataset.status = 'busy';
    cart_icon.style.color = '#FF7070';
    cart_icon.style.textDecorationColor = '#FF7070';

    setTimeout(() => {
      cart_icon.dataset.status = 'free';
      cart_icon.style.color = '#fff';
      cart_icon.style.textDecorationColor = '#fff';
    }, '2000');
  }
}

function updateItemRow(item_row, cart_items, item_amount) {
  // map over each item in the DOM and check if 
  // it exists in the cart. update its quantity and total price.
  // if item quantity goes down to 0, remove it
  // from the DOM.

  // Getting the proper item to update on the car page
  let item = null;

  for (let i = 0; i < cart_items.length; i++) {
    if (cart_items[i].product_id == item_row.id) {
      if (!cart_items[i].options.product_variation_id || (cart_items[i].options.product_variation_id == item_row.querySelector("#product_id").value)) {
        item = cart_items[i];
        break;
      }
    }
  }

  if (item) {

    // update quantity value for input field quantity_manual
    item_row.querySelector("#quantity_manual").value = item.quantity;

    // check if item has been overbooked and disable + button
    // if on the other side, the item quantity has decreased below
    // the inventory amount, re-enable the + button
    let buttonPlus = item_row.querySelector('#button-plus');
    if (!item.is_selectable) {
      buttonPlus.setAttribute('disabled', 'disabled');
      buttonPlus.classList.add('cura');
    } else {
      buttonPlus.removeAttribute('disabled');
      buttonPlus.classList.remove('cura');
    }

    // update total
    let total = item_row.querySelector('.item-total');
    total.querySelector('.item-total--text').textContent = `${item.total}`;
    total.querySelector('#price').value = item.total;

  } else {
    // if item in DOM does not exists in the cart, remove it
    item_row.remove();
  }
}

function updateBreakdown(cart_breakdown) {
  // update checkout's breakdown price
  // subtotal + shipping + total

  let subtotal_amount = Array.from(document.querySelectorAll('.subtotal--amount > .amount'));
  subtotal_amount.forEach(subtotal => {
    subtotal.textContent = `${cart_breakdown.subtotal}`;
  });

  let shipping = document.querySelectorAll('.subtotal--shipping > .amount');
  shipping.forEach(shipping => {
    shipping.textContent = `${cart_breakdown.shipping.toFixed(1)}`;
  });

  let subtotal_total = document.querySelector('.subtotal--total > .amount');
  if (subtotal_total) {
    subtotal_total.textContent = `${cart_breakdown.total.toFixed(1)}`;
  };

  let weight = document.getElementById("weight");
  weight.value = `${cart_breakdown.total_weight}`;

}

function removeCheckoutTable() {
  // remove DOM elements that lay out the
  // checkout table.

  document.querySelector(".checkout-table-header").remove();
  document.querySelector(".checkout-shipping-info").remove();
  document.querySelector(".checkout-empty-message").classList.remove("dn");
}

function updateTable(cart_items, cart_item_rows, cart_breakdown) {
  // map over cart item in the DOM and update them
  // update breakdown price if cart item is not empty
  // else remove checkout table

  cart_item_rows.map(item_row => {
    updateItemRow(item_row, cart_items, cart_breakdown['item_amount']);
  });

  if (cart_items.length > 0) {
    updateBreakdown(cart_breakdown);

  } else {
    removeCheckoutTable();

  }

}

function displayProductSelectable(btnSubmit, isProductSelectable, isProductAvailable) {
  if (!btnSubmit) {
    return;
  }

  // reset button styles
  btnSubmit.classList.remove('btn-product-available',
			     'btn-product-available',
			     'btn-product-unselectable');

  if (!isProductAvailable) {
    
    btnSubmit.setAttribute('disabled', 'disabled');
    btnSubmit.classList.add('btn-product-soldout');
    btnSubmit.value = "sold out";
    
  } else if (!isProductSelectable) {

    btnSubmit.setAttribute('disabled', 'disabled');
    btnSubmit.classList.add('btn-product-unselectable');
    btnSubmit.value = "add to cart";

  } else  {

    btnSubmit.removeAttribute('disabled');
    btnSubmit.classList.add('btn-product-available');
    btnSubmit.value = "add to cart";

  }
}

function updateProductURL(product_selected) {
  if ('URLSearchParams' in window) {
    const searchParams = new URLSearchParams(product_selected);
    history.pushState(null, '', `?${searchParams.toString()}`);
  }
}


export { updateCart, updateCartIcon, updateTable, updateProductURL, displayProductSelectable, updateBreakdown };