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 <input
type="hidden" type="hidden"
name="count" name="count"
value="{{ item.quantity - 1 }}" value="{{ [item.quantity - 1, 0] | max }}"
> >
<button <button
type="submit" type="submit"
@@ -209,7 +209,7 @@
- -
</button> </button>
</form> </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 }} {{ item.quantity }}
</span> </span>
<form <form
@@ -232,6 +232,33 @@
+ +
</button> </button>
</form> </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>
<div class="flex items-center justify-between sm:justify-end gap-3"> <div class="flex items-center justify-between sm:justify-end gap-3">