Додаемо напис Акція та відображення мінусу в ціні котру отримують кленти

[qwertyman]

На сторінці продукту де виводиться фото товару 

Додаємо 

        <div class="col-sm-6">
              {{ block_image }}
                 {% if special %}
               <!-- це те що додаеться - Додаємо елемент для слова "Акція" -->
    <span class="promo-label">Акція</span>
    <!-- Додаємо елемент для різниці в ціні -->
    <span class="price-difference"></span>
            {% endif %}
            </div>

 

Далі перед footer додаємо 

 

<script>
    // Обчислення різниці в ціні
    document.addEventListener('DOMContentLoaded', function() {
        const oldPrice = parseFloat(document.querySelector('.price-old').textContent.replace(' грн.', '')); // 360.00
        const newPrice = parseFloat(document.querySelector('.price-special').textContent.replace(' грн.', '')); // 300.00
        const difference = oldPrice - newPrice; // 60.00

        // Додаємо різницю в ціні до елемента
        const priceDifferenceElement = document.querySelector('.price-difference');
        priceDifferenceElement.textContent = `-${difference.toFixed(2)} грн.`;
    });
</script>

 

Далі у файл стилі додаємо 

.promo-label {
        position: absolute;
        top: 10px;
        left: 10px;
        background-color: red;
        color: white;
        padding: 5px 10px;
        font-size: 16px;
        font-weight: bold;
        border-radius: 5px;
        z-index: 1000;
    }

    /* Стилі для різниці в ціні */
    .price-difference {
        position: absolute;
    top: 50px;
     left: 10px;
        background-color: #333;
        color: white;
        padding: 5px 10px;
        font-size: 14px;
        font-weight: bold;
        border-radius: 5px;
        z-index: 1000;
    }

 

У категоріях та модулях основний перший код буде виглядати скоріш за все так

<div class="product-list__item...........>

          {% if product.special %}
               <!-- Додаємо елемент для слова "Акція" -->
    <span class="promo-label">Акція</span>
    <!-- Додаємо елемент для різниці в ціні -->
    <span class="price-difference"></span>
            {% endif %}

  </div>

Далі <script> теж треба вставити та стилі будуть вже ті самі 

 

Можливо треба зробити так

 

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Знаходимо всі товари з акцією
    const products = document.querySelectorAll('.product-list__item');

    products.forEach(product => {
        // Перевіряємо, чи є акція (наявність .price-old і .price-new)
        const oldPriceElement = product.querySelector('.price-old');
        const newPriceElement = product.querySelector('.price-new');
        const priceDifferenceElement = product.querySelector('.price-difference');

        if (oldPriceElement && newPriceElement && priceDifferenceElement) {
            // Отримуємо значення цін
            const oldPrice = parseFloat(oldPriceElement.textContent.replace(' грн.', '').replace(',', '.'));
            const newPrice = parseFloat(newPriceElement.textContent.replace(' грн.', '').replace(',', '.'));
            const difference = oldPrice - newPrice;

            // Встановлюємо різницю в ціні
            priceDifferenceElement.textContent = `-${difference.toFixed(2)} грн.`;
        }
    });
});
</script>

 

Для featured працює так

 

Все зроблено за допомогою ШІ