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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user