Electro - Iconic discount

functions.php

function ec_child_iconic_discount() { ?>
  <script>
	  
	  const actualPriceText = document.querySelector('.iconic-wsb-product-bumps__total-price-amount del').innerText;
      const discountPriceText = document.querySelector('.iconic-wsb-product-bumps__total-price-amount ins').innerText;

      const actualPrice1 = parseFloat(actualPriceText.replace('$', ''));
      const discountPrice1 = parseFloat(discountPriceText.replace('$', ''));

      const discountValue1 = actualPrice1 - discountPrice1;
      const discountPercentage = (discountValue1 / actualPrice1) * 100;

      const integerDisc = Math.floor(discountPercentage);
	  
	  
    document.addEventListener('DOMContentLoaded', () => {
      const accessoriesCheckboxes = document.querySelectorAll('.iconic-wsb-product-bumps__list-item');
		
	  accessoriesCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('click', () => {

          const priceAmountElement = document.querySelector('.iconic-wsb-product-bumps__total-price-amount');

          setTimeout(() => {
            const containerElement = document.querySelector('.iconic-wsb-product-bumps__total-price-amount');

            const getTargetElementValue = () => {
                const delElement = containerElement.querySelector('del');
                const targetElement = delElement ? delElement : containerElement;
                return targetElement.textContent;
            };

            const callback = function(mutationsList, observer) {
                for (let mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        const value = getTargetElementValue();
                        
                    }
                }
            };

            const observer = new MutationObserver(callback);

            const config = { childList: true, subtree: true };

            observer.observe(containerElement, config);

			const str = getTargetElementValue();
            const value = parseFloat(str.replace(/[^0-9.-]+/g, ""));

            let textContent = value;

            let priceWithoutSymbol = textContent;
			let discountValue = priceWithoutSymbol*integerDisc/100;
            let discountfinal = priceWithoutSymbol-discountValue;
            let discountfinal1 = discountfinal.toString();
            let discount = discountfinal1.substring(6,0);
    

            const existingDiscountDiv = document.querySelector('.custom-discount');
            if (existingDiscountDiv) {
              existingDiscountDiv.remove();
            }
            const newDivElement = document.createElement('div');
            newDivElement.className = 'custom-discount';
            newDivElement.innerHTML = `<span class="iconic-wsb-product-bumps__total-price-amount-custom"><ins><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>${discount}</bdi></span></ins> <del><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>${priceWithoutSymbol}</bdi></span></del></span>`;

            priceAmountElement.parentNode.insertBefore(newDivElement, priceAmountElement.nextSibling);
            
          }, 3000);
        });
      });
    });
  
  document.addEventListener("click", function() {
      setTimeout(() => {
          
            const listItems = document.querySelectorAll('.iconic-wsb-product-bumps__list-item');
            const ulElement = document.querySelector('.iconic-wsb-product-bumps__list');

            function checkFadedClass() {
                let allFaded = true;
                for (let i = 1; i < listItems.length; i++) {
                    if (!listItems[i].classList.contains('iconic-wsb-product-bumps__list-item--faded')) {
                        allFaded = false;
                        break;
                    }
                }
                if (allFaded) {
                    ulElement.classList.add('new-class-name');
                } else {
                    ulElement.classList.remove('new-class-name');
                }
            }

            checkFadedClass();
          
      }, 100);
  });    

    const originalPriceElement = document.querySelector('.iconic-wsb-product-bumps__total-price-amount');

    const priceElement1 = document.querySelector('.iconic-wsb-product-bumps__total-price-amount del'); 
    let priceText1 = priceElement1.textContent.trim();
    let priceWithoutSymbol1 = priceText1.slice(1);
    let discountValue = priceWithoutSymbol1*integerDisc/100;
    let discountfinal = priceWithoutSymbol1-discountValue;
    let discountfinal1 = discountfinal.toString();
    let discount = discountfinal1.substring(6,0);

    const newDivElement1 = document.createElement('div');
    newDivElement1.className = 'custom-discount-1';
    newDivElement1.innerHTML = `<span class="iconic-wsb-product-bumps__total-price-amount-custom"><ins><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>${discount}</bdi></span></ins> <del><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>${priceWithoutSymbol1}</bdi></span></del></span>`;

    originalPriceElement.parentNode.insertBefore(newDivElement1, originalPriceElement.nextSibling);

  </script>
<?php }
add_action( 'wp_footer', 'ec_child_iconic_discount', 10 );

// old

function ec_child_iconic_discount() { ?>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const accessoriesCheckboxes = document.querySelectorAll('.iconic-wsb-product-bumps__list-item .iconic-wsb-bump-product__checkbox');
        
        accessoriesCheckboxes.forEach(checkbox => {
          checkbox.addEventListener('click', () => {
            const priceAmountElement = document.querySelector('.iconic-wsb-product-bumps__total-price-amount');

            setTimeout(() => {
              const priceElement = document.querySelector('.iconic-wsb-product-bumps__total-price-amount'); 
              let textContent = priceElement.textContent;
              let priceText = priceElement.textContent.trim();
              let priceWithoutSymbol = priceText.slice(1);
              let discountValue = priceWithoutSymbol*5/100;
              let discountfinal = priceWithoutSymbol-discountValue;
              let discountfinal1 = discountfinal.toString();
              let discount = discountfinal1.substring(6,0);
				
				console.log(discountfinal);

              const existingDiscountDiv = document.querySelector('.custom-discount');
              if (existingDiscountDiv) {
                existingDiscountDiv.remove();
              }
              const newDivElement = document.createElement('div');
              newDivElement.className = 'custom-discount';
              newDivElement.innerHTML = `<span class="iconic-wsb-product-bumps__total-price-amount-custom"><ins><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>${discount}</bdi></span></ins> <del><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>${priceWithoutSymbol}</bdi></span></del></span>`;

              priceAmountElement.parentNode.insertBefore(newDivElement, priceAmountElement.nextSibling);
            }, 3000);
          });
        });
      });
		
		document.addEventListener("click", function() {
        setTimeout(() => {
            // Select all li elements within the iconic-wsb-product-bumps__list class
            const listItems = document.querySelectorAll('.iconic-wsb-product-bumps__list-item');
            const ulElement = document.querySelector('.iconic-wsb-product-bumps__list');

            // Check if the second and third list items have the 'iconic-wsb-product-bumps__list-item--faded' class
            if (
                listItems[1].classList.contains('iconic-wsb-product-bumps__list-item--faded') &&
                listItems[2].classList.contains('iconic-wsb-product-bumps__list-item--faded')
            ) {
                // Do something if both conditions are met
                // For example, add a class to the ul element
                ulElement.classList.add('new-class-name'); // Replace 'new-class-name' with the desired class name
            } else {
                ulElement.classList.remove('new-class-name');
            }
        }, 100); // Adjust the delay time if necessary
    });

      //new default price 

      const originalPriceElement = document.querySelector('.iconic-wsb-product-bumps__total-price-amount');

      const priceElement1 = document.querySelector('.iconic-wsb-product-bumps__total-price-amount'); 
      let priceText1 = priceElement1.textContent.trim();
      let priceWithoutSymbol1 = priceText1.slice(1);
      let discountValue = priceWithoutSymbol1*5/100;
      let discountfinal = priceWithoutSymbol1-discountValue;
      let discountfinal1 = discountfinal.toString();
      let discount = discountfinal1.substring(6,0);

      const newDivElement1 = document.createElement('div');
      newDivElement1.className = 'custom-discount-1';
      newDivElement1.innerHTML = `<span class="iconic-wsb-product-bumps__total-price-amount-custom"><ins><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>${discount}</bdi></span></ins> <del><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>${priceWithoutSymbol1}</bdi></span></del></span>`;

      originalPriceElement.parentNode.insertBefore(newDivElement1, originalPriceElement.nextSibling);
  
    </script>
<?php }
add_action( 'wp_footer', 'ec_child_iconic_discount', 10 );

style.css

.custom-discount-1,
.custom-discount {
    display: flex;
    flex-direction: column;
}

.iconic-wsb-product-bumps__discount-message {
	 width: max-content;
}

.iconic-wsb-product-bumps__discount-message,
ul.iconic-wsb-product-bumps__list.new-class-name+div> div > span.iconic-wsb-product-bumps__total-price-amount+div,
.iconic-wsb-product-bumps__total-price-amount,
.custom-discount+.custom-discount-1 {
	display:none;
}

ul.iconic-wsb-product-bumps__list.new-class-name+div> div > span.iconic-wsb-product-bumps__total-price-amount {
	display: block;
}

.single-product .iconic-wsb-product-bumps__total-price {  
    align-items: baseline;
}