73 lines
4.2 KiB
HTML
73 lines
4.2 KiB
HTML
{# Cart contents, swapped in via htmx on quantity change / removal so the page
|
|
never does a full reload. Rendered inside <div id="cart-body"> in cart.html
|
|
and returned on its own by /cart/update and /cart/remove. #}
|
|
{% import "macros/ui.html" as ui %}
|
|
{% if items | length > 0 %}
|
|
<div class="{{ ui::table_wrap_cls() }}">
|
|
<table class="{{ ui::table_cls() }}">
|
|
<thead class="{{ ui::thead_cls() }}">
|
|
<tr>
|
|
{{ ui::th(label=t(key="product", lang=lang | default(value='sk'))) }}
|
|
{{ ui::th(label=t(key="price", lang=lang | default(value='sk'))) }}
|
|
{{ ui::th(label=t(key="quantity", lang=lang | default(value='sk'))) }}
|
|
{{ ui::th(label=t(key="cart-total", lang=lang | default(value='sk')), align="text-right") }}
|
|
{{ ui::th(label="") }}
|
|
</tr>
|
|
</thead>
|
|
<tbody class="{{ ui::tbody_cls() }}">
|
|
{% for item in items %}
|
|
<tr>
|
|
<td class="px-4 py-3">
|
|
<a href="/shop/{{ item.slug }}" class="font-medium text-on-surface-strong hover:text-primary dark:text-on-surface-dark-strong dark:hover:text-primary-dark">{{ item.name }}</a>
|
|
</td>
|
|
<td class="px-4 py-3 tabular-nums">{{ item.price }} {{ item.currency }}</td>
|
|
<td class="px-4 py-3">
|
|
{# Changing the quantity posts via htmx (custom `cartchange` event) and
|
|
swaps only #cart-body. Dropping to 0 asks for confirmation first,
|
|
reverting to the previous quantity if the customer cancels. #}
|
|
<form method="post" action="/cart/update"
|
|
hx-post="/cart/update" hx-trigger="cartchange" hx-target="#cart-body" hx-swap="innerHTML">
|
|
<input type="hidden" name="product_id" value="{{ item.id }}">
|
|
<input type="number" name="quantity" min="0" max="{{ item.stock }}" value="{{ item.quantity }}"
|
|
@change="
|
|
if (parseInt($el.value || '0') <= 0 && !window.confirm('{{ t(key='cart-remove-confirm', lang=lang | default(value='sk')) }}')) {
|
|
$el.value = '{{ item.quantity }}';
|
|
} else {
|
|
$el.dispatchEvent(new Event('cartchange', { bubbles: true }));
|
|
}
|
|
"
|
|
class="w-20 rounded-radius border border-outline bg-surface-alt px-2 py-1 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark">
|
|
</form>
|
|
</td>
|
|
<td class="px-4 py-3 text-right font-medium tabular-nums">{{ item.line_total }} {{ item.currency }}</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<form method="post" action="/cart/remove"
|
|
hx-post="/cart/remove" hx-target="#cart-body" hx-swap="innerHTML">
|
|
<input type="hidden" name="product_id" value="{{ item.id }}">
|
|
{{ ui::button(variant="ghost-danger", label=t(key="cart-remove", lang=lang | default(value='sk')), type="submit", size="px-2 py-1 text-xs") }}
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
<tfoot class="{{ ui::tfoot_cls() }}">
|
|
<tr>
|
|
<td colspan="3" class="px-4 py-3 text-right font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="cart-total", lang=lang | default(value='sk')) }}</td>
|
|
<td class="px-4 py-3 text-right text-lg font-bold tabular-nums text-primary dark:text-primary-dark">{{ total }} {{ currency }}</td>
|
|
<td></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-6 flex flex-wrap justify-between gap-3">
|
|
{{ ui::button(variant="outline-secondary", label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop") }}
|
|
{{ ui::button(label=t(key="cart-checkout", lang=lang | default(value='sk')), href="/checkout", size="px-5 py-2 text-sm", attrs='hx-boost="false"') }}
|
|
</div>
|
|
{% else %}
|
|
<div class="rounded-radius border border-outline px-6 py-16 text-center dark:border-outline-dark">
|
|
<p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="cart-empty", lang=lang | default(value='sk')) }}</p>
|
|
{{ ui::button(label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop", extra="mt-4") }}
|
|
</div>
|
|
{% endif %}
|