Add delete button with confirm modal to cart_item, clamp minus at 0

Minus button now floors at 0 instead of going negative. A trash button
with SweetAlert2 confirmation appears when cart_delete_url is defined
(cart app only). Items at quantity 0 remain visible for re-increment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
giles
2026-02-19 09:43:12 +00:00
parent 7b55d78214
commit 6db91cb3c1

View File

@@ -200,7 +200,7 @@
<input
type="hidden"
name="count"
value="{{ item.quantity - 1 }}"
value="{{ [item.quantity - 1, 0] | max }}"
>
<button
type="submit"
@@ -209,7 +209,7 @@
-
</button>
</form>
<span class="inline-flex items-center justify-center px-2 py-1 rounded-full bg-stone-100 text-[0.7rem] sm:text-xs font-medium">
<span class="inline-flex items-center justify-center px-2 py-1 rounded-full bg-stone-100 text-[0.7rem] sm:text-xs font-medium {{ 'text-stone-400' if item.quantity == 0 }}">
{{ item.quantity }}
</span>
<form
@@ -232,6 +232,33 @@
+
</button>
</form>
{% if cart_delete_url is defined %}
<form
action="{{ cart_delete_url(item.product_id) }}"
method="post"
hx-post="{{ cart_delete_url(item.product_id) }}"
hx-trigger="confirmed"
hx-target="#cart-mini"
hx-swap="outerHTML"
>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button
type="button"
data-confirm
data-confirm-title="Remove item?"
data-confirm-text="Remove {{ p.title }} from your cart?"
data-confirm-icon="warning"
data-confirm-confirm-text="Yes, remove"
data-confirm-cancel-text="Cancel"
data-confirm-event="confirmed"
class="inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-red-300 text-red-600 hover:bg-red-50"
title="Remove from cart"
>
<i class="fa-solid fa-trash-can text-xs" aria-hidden="true"></i>
</button>
</form>
{% endif %}
</div>
<div class="flex items-center justify-between sm:justify-end gap-3">