update background when updating quantity

src/purchase/forms.py

@@ -19,9 +19,6 @@ class BasketForm(forms.ModelForm):
         fields = ["payment_method"]
         widgets = {"payment_method": forms.RadioSelect}
 
-    class Media:
-        js = ["purchase/js/basket_form.js"]
-
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.helper = FormHelper()

src/purchase/static/purchase/js/basket_form.js

@@ -23,3 +23,28 @@ window.dispatchChanged = function (element) {
     const event = new Event("change", { bubbles: true });
     element.dispatchEvent(event);
 };
+
+window.onUpdateQuantity = function (event) {
+    const { target } = event;
+    const parent = target.closest(".card");
+    const classes = ["bg-success", "text-white"];
+    if (target.value > 0) {
+        parent.classList.add(...classes);
+    } else {
+        parent.classList.remove(...classes);
+    }
+};
+
+window.setupEventsListener = function () {
+    const cards = document.querySelectorAll(".card input");
+    cards.forEach((item) => {
+        item.addEventListener("change", window.onUpdateQuantity);
+        item.addEventListener("keyup", window.onUpdateQuantity);
+    });
+};
+
+document.addEventListener("newUnpriced", function () {
+    window.setupEventsListener();
+});
+
+window.setupEventsListener();

src/purchase/templates/purchase/basket_form.html

@@ -64,4 +64,5 @@
 {% block extrascript %}
     <script src="{% static 'vendor/htmx-1.8.6/htmx.min.js' %}" defer></script>
     {% django_htmx_script %}
+    <script defer type="application/javascript" src="{% static "purchase/js/basket_form.js" %}"></script>
 {% endblock %}

src/purchase/templates/purchase/snippets/basket_unpriced_item.html

@@ -1,6 +1,6 @@
 {% load crispy_forms_field %}
 <div class="col">
-    <div class="card h-100 bg-success text-white" data-product-id="{{ product.pk }}">
+    <div class="card h-100" data-product-id="{{ product.pk }}">
         {% if product.image %}
             <img src="{{ product.image.url }}" class="card-img">
         {% else %}

src/purchase/views/basket.py

@@ -90,11 +90,12 @@ def additional_unpriced_product(request: WSGIRequest) -> HttpResponse:
     value = request.GET.get("value", 0)
     product = get_object_or_404(Product.objects.with_no_fixed_price(), pk=product_id)
     context = {"product": product, "value": value}
-    return render(
+    res = render(
         request,
         "purchase/snippets/basket_unpriced_item.html",
         context,
     )
+    return trigger_client_event(res, "newUnpriced", after="settle")
 
 
 @permission_required("purchase.view_basket")