Процент скидки в любых блоках с товарами

   <!--https://dsgnmax.ru/useful/discount-product--> <style>
:root{
    --bdmBgDiscount: #ff5f00; /*Фоновый цвет*/
    --bdmColorDiscount: #ffffff; /*Цвет текста*/
    --bdmFontFamilyDiscount: sans-serif; /*Семейстов шрифтов, здесь можете указать, например так: "Onest", sans-serif*/
    --bdmFontSizeDiscount: 14px; /*Размер текста*/
    --bdmPaddingDiscount: 4px 6px; /*Отступы внутри плашки*/
    --bdmMarginLeftDiscount: 15px; /*Отступ слева от старой цены*/
    --bdmBorderRadiusDiscount: 4px; /*Скругление углов*/
}

.dbm-wrapper-discount {
    display: inline-block;
    position: relative;
    font-family: var(--bdmFontFamilyDiscount);
    font-size: var(--bdmFontSizeDiscount);
    padding: var(--bdmPaddingDiscount);
    border-radius: var(--bdmBorderRadiusDiscount);
    background-color: var(--bdmBgDiscount);
    color: var(--bdmColorDiscount);
    line-height: 100%;
    margin-left: var(--bdmMarginLeftDiscount);
}

.dbm-wrapper-discount:before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    left: -3px;
    background-color: var(--bdmBgDiscount);
    border-radius: 2px;
    rotate: -45deg;
    top: 50%;
    translate: 0 -50%;
}
</style> <script>
function initPriceDiscounts() {
  var productElements = document.querySelectorAll('.js-product');
  if (!productElements || productElements.length === 0) {
    return;
  }
  if (window.discountObservers && window.discountObservers.length > 0) {
    window.disconnectDiscountObservers();
  }
  window.discountObservers = [];
  Array.prototype.forEach.call(productElements, function (product) {
    var oldPriceEl = product.querySelector('.js-store-prod-price-old-val');
    var currentPriceEl = product.querySelector('.js-store-prod-price-val');
    var priceWrapper = product.querySelector('.js-store-price-wrapper');
    
    if (!oldPriceEl || !currentPriceEl || !priceWrapper) {
      return;
    }
    function updateDiscount() {
      var oldPriceText = oldPriceEl.textContent.trim();
      var currentPriceText = currentPriceEl.textContent.trim();
      
      var existingDiscount = priceWrapper.querySelector('.dbm-wrapper-discount');
      
      if (!oldPriceText) {
        if (existingDiscount) {
          existingDiscount.remove();
        }
        return;
      }
      var oldPriceNum = parseFloat(oldPriceText.replace(/[^\d.,]/g, '').replace(',', '.'));
      var currentPriceNum = parseFloat(currentPriceText.replace(/[^\d.,]/g, '').replace(',', '.'));
      
      if (isNaN(oldPriceNum) || isNaN(currentPriceNum)) {
        if (existingDiscount) {
          existingDiscount.remove();
        }
        return;
      }
      if (oldPriceNum <= currentPriceNum) {
        if (existingDiscount) {
          existingDiscount.remove();
        }
        return;
      }
      var discount = Math.round(((oldPriceNum - currentPriceNum) / oldPriceNum) * 100);
      if (!existingDiscount) {
        existingDiscount = document.createElement('div');
        existingDiscount.className = 'dbm-wrapper-discount';
        priceWrapper.appendChild(existingDiscount);
      }
      existingDiscount.textContent = '-' + discount + '%';
    }
    
    updateDiscount();
    
    var observerConfig = { 
      characterData: true, 
      childList: true, 
      subtree: true 
    };
    
    function setupObserver(element) {
      var observer = new MutationObserver(function() {
        updateDiscount();
      });
      observer.observe(element, observerConfig);
      window.discountObservers.push(observer);
    }
    
    setupObserver(oldPriceEl);
    setupObserver(currentPriceEl);
  });
}

window.disconnectDiscountObservers = function() {
  if (window.discountObservers) {
    window.discountObservers.forEach(function(observer) {
      observer.disconnect();
    });
    window.discountObservers = [];
  }
};

document.addEventListener('tStoreRendered', function() {
  initPriceDiscounts();
});
document.addEventListener('DOMContentLoaded', function() {
  initPriceDiscounts();
});

function handleStoreUpdate(event) {
  if (event && event.detail && event.detail.productsUpdated) {
    setTimeout(initPriceDiscounts, 100);
  }
}
document.addEventListener('t-store:products-updated', handleStoreUpdate);
window.initProductDiscounts = initPriceDiscounts;
</script>