Как сделать, чтобы цена продукта динамически менялась после выбора различных атрибутов товара в Django?

Я использую фреймворк Django. Есть варианты товара, такие как размер, цвет и стекло. Теперь мне нужно, чтобы цена динамически менялась при выборе опций продукта. Цена не меняется при выборе разных вариантов товара, она остается прежней. Ниже html и ajax:

{% for variant in product.variants.all %}
        <p>Size: {{ variant.size.name }}</p>
        <p>Color: {{ variant.color.name }}</p>            
        <p>Glass: {{ variant.glass.name }}</p>
        <p>Price: {{ variant.price }}</p>
    {% endfor %}
    <input type="hidden" id="product-id" value="{{ product.id }}">
    <div class="mb-3">
        <strong><label for="size" class="form-label">Ölçü:</label></strong>
        <div class="dropdown-wrapper" style="width: 120px;">
            <select class="form-select" id="size">
                {% for size in sizes %}
                    <option value="{{ size.id }}">{{ size.name }}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <div class="mb-3">
        <strong><label for="color" class="form-label">Profil Renkleri:</label></strong>
        <div class="dropdown-wrapper" style="width: 120px;">
            <select class="form-select" id="color">
                {% for color in colors %}
                    <option value="{{ color.id }}">{{ color.name }}</option>
                {% endfor %}
            </select>
        </div>    
    </div>

    <div class="mb-3">
        <strong><label for="glass" class="form-label">Cam Renkleri:</label></strong>
        <div class="dropdown-wrapper" style="width: 120px;">
            <select class="form-select" id="glass">
                {% for glass in glasses %}
                    <option value="{{ glass.id }}">{{ glass.name }}</option>
                {% endfor %}
            </select>
        </div>    
    </div>

    <!-- Описание товара -->
    <div class="card-body">
        <strong><p class="card-text">Fiyat:  </strong><span id="sell-price">{{ 
        product.sell_price }}</span> TL</strong></p>
        <h5 class="card-title">{{ product.name }}</h5>
        <p class="card-text">{{ product.description }}</p>
        <a href="{% url "cart:cart_add" %}" class="btn btn-dark add-to-cart"
            data-product-id="{{ product.id }}">
            {% csrf_token %}
            Sepete ekle</a>
    </div>
</div>

<script>
// Update price dynamically based on selected variant
    document.addEventListener('DOMContentLoaded', function () {
        const product_id = document.getElementById('product-id').value; // Assuming you have 
        an element with ID 'product-id'
        const sizeSelect = document.getElementById('size');
        const colorSelect = document.getElementById('color');
        const glassSelect = document.getElementById('glass');
        const priceElement = document.getElementById('sell-price');
    
        sizeSelect.addEventListener('change', updatePrice);
        colorSelect.addEventListener('change', updatePrice);
        glassSelect.addEventListener('change', updatePrice);
    
        function updatePrice() {
        const size_id = sizeSelect.value;
        const color_id = colorSelect.value;
        const glass_id = glassSelect.value;
    
        if (product_id && size_id && color_id && glass_id) {
            calculateUpdatedPrice(product_id, size_id, color_id, glass_id);
        }
        }
    
        function calculateUpdatedPrice(product_id, size_id, color_id, glass_id) {
        fetch(`/get_variant/? 
             product_id=${product_id}&size=${size_id}&color=${color_id}&glass=${glass_id}`)
            .then(response => response.json())
            .then(data => {
            priceElement.textContent = data.price;
            })
            .catch(error => console.error('Error:', error));
        }
    });
</script>

{% endblock %}

 document.addEventListener('DOMContentLoaded', function () {
  const product_id = document.getElementById('product-id').value; // Assuming you have an element with ID 'product-id'
  const sizeSelect = document.getElementById('size');
  const colorSelect = document.getElementById('color');
  const glassSelect = document.getElementById('glass');
  const priceElement = document.getElementById('sell-price');

  sizeSelect.addEventListener('change', updatePrice);
  colorSelect.addEventListener('change', updatePrice);
  glassSelect.addEventListener('change', updatePrice);

  function updatePrice() {
    const size_id = sizeSelect.value;
    const color_id = colorSelect.value;
    const glass_id = glassSelect.value;

    if (product_id && size_id && color_id && glass_id) {
      calculateUpdatedPrice(product_id, size_id, color_id, glass_id);
    }
  }

  function calculateUpdatedPrice(product_id, size_id, color_id, glass_id) {
    fetch(`/get_variant/?product_id=${product_id}&size=${size_id}&color=${color_id}&glass=${glass_id}`)
      .then(response => response.json())
      .then(data => {
        priceElement.textContent = data.price;
      })
      .catch(error => console.error('Error:', error));
  }
});

Вернуться на верх