async function attachHandles() {

  document.querySelectorAll('.btn-to-cart')
    .forEach(btn => btn.addEventListener('click', handleClickToCart));

  document.querySelectorAll('.btn-to-cart-inc')
    .forEach(btn => btn.addEventListener('click', handleClickToCart));

  document.querySelectorAll('.btn-to-cart-dec')
    .forEach(btn => btn.addEventListener('click', handleClickToCart));

  document.querySelectorAll('.btn-to-cart-del')
    .forEach(btn => btn.addEventListener('click', handleClickToCart));

  document.querySelectorAll('.btn-in-cart')
    .forEach(btn => btn.addEventListener('click', handleClickGoToCart));
}

async function handleClickGoToCart(event) {

  event.preventDefault();

  window.open('/shop/test/cart');
}

async function handleClickToCart(event) {

  event.preventDefault();

  const btn = event.currentTarget;
  const tid = btn.id;

  const toCart = btn.closest('.to-cart');

  const forProductCard = toCart.classList.contains('for-product-card');
  const forProductRef = toCart.classList.contains('for-product-ref');
  const forProductCart = toCart.classList.contains('for-cart');
  const forSource = forProductCard ? 'card' : forProductRef ? 'ref' : 'cart';

  const orIncDecDel = btn.classList.contains("btn-to-cart") || btn.classList.contains("btn-to-cart-inc") ? 'inc' : btn.classList.contains("btn-to-cart-dec") ? 'dec' : 'del';

  try {
    const response = await axios.post(`/website/test/cart/${tid}/${orIncDecDel}/${forSource}`);
    const data = response.data;

    const container = document.querySelector(`#${tid}.to-cart`);
    if (container) {
      container.outerHTML = `${data}`;
      attachHandles();
    }
  } catch (err) {
    const container = document.querySelector(`#${tid}.to-cart`);
    if (container) {
      container.outerHTML = `Ошибка: ${err.message}`;
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  attachHandles();
});