update background when updating quantity

This commit is contained in:
Gabriel Augendre 2023-04-29 22:18:45 +02:00
parent 0fd0a8ac5d
commit 4b3d1d913a
5 changed files with 29 additions and 5 deletions

View file

@ -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()

View file

@ -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();

View file

@ -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 %}

View file

@ -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 %}

View file

@ -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")