<!--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>