JSFiddle - React, Tailwind, and code Playground

by Dmitry Morar

JavaScript

var cart = document.querySelector('.pfi-pdp-cart-button .pfi-button');
var amountDecrease = document.querySelector('.pfi-pdp-amount-decrease');
var amountIncrease = document.querySelector('.pfi-pdp-amount-increase');
var amountInput = document.querySelector('.pfi-pdp-amount-input');
var iconNavCart = document.querySelector('.pfi-icon-nav-cart');
var iconNavCartLabel = document.querySelector('.pfi-icon-nav-cart .pfi-icon-nav-badge');
var iconNavCartLabelValue = +iconNavCartLabel.textContent;
var iconNavCartNotifyCount = document.querySelector('.pfi-mini-cart-notification-body-count > span:first-child');
var timeout;

cart.addEventListener('click', function(e) {
  cart.parentNode.classList.add('in-cart');
  amountInput.stepUp();
  checkAmount();
});

amountDecrease.addEventListener('click', function(e) {
  amountInput.stepDown();
  checkAmount();
});

amountIncrease.addEventListener('click', function(e) {
  amountInput.stepUp();
  checkAmount();
});

amountInput.addEventListener('change', checkAmount);
amountInput.addEventListener('input', checkAmount);

function checkAmount() {
  iconNavCartLabel.textContent = +amountInput.value + iconNavCartLabelValue;
  if (amountInput.value <= 0) {
    cart.parentNode.classList.remove('in-cart');
    iconNavCart.classList.remove('notify');
  } else {
    clearTimeout(timeout);
    iconNavCartNotifyCount.textContent = amountInput.value;
    iconNavCart.classList.add('notify');

    timeout = setTimeout(function() {
      iconNavCart.classList.remove('notify');
    }, 3000);
  }
}