filipriec/kompress_eshop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

hardcoded toast

Browse Source
This commit is contained in:
Priec
2026-06-17 20:12:31 +02:00
parent 7601fc704d
commit 67fd364761
6 changed files with 46 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
assets/views/base.html
View File

@@ -47,6 +47,10 @@
if (!v) return 0;
return v.split(',').reduce(function (s, e) { return s + (parseInt(e.split(':')[1]) || 0) }, 0);
}
// Show a floating toast notification. Usage: toast('Saved').
function toast(message) {
window.dispatchEvent(new CustomEvent('toast', { detail: message }));
}
</script>
<link href="/static/css/app.css?v=2026-06-16" rel="stylesheet" type="text/css">
<script src="/static/vendor/htmx/htmx-1.9.12.min.js"></script>
@@ -93,7 +97,7 @@
<!-- cart with live item-count badge read from the `cart` cookie -->
<a href="/cart" data-nav="/cart"
x-data="{ count: 0 }"
x-init="count = cartCount(); window.addEventListener('htmx:afterSwap', function () { count = cartCount() })"
x-init="count = cartCount(); ['htmx:afterSwap', 'htmx:afterRequest'].forEach(function (e) { window.addEventListener(e, function () { count = cartCount() }) })"
aria-label="{{ t(key='cart-title', lang=lang | default(value='sk')) }}"
title="{{ t(key='cart-title', lang=lang | default(value='sk')) }}"
class="relative inline-flex size-9 items-center justify-center rounded-radius text-on-surface transition hover:bg-surface-alt dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">
@@ -205,5 +209,20 @@
{% block content %}{% endblock content %}
</main>
</div>
<!-- toast notifications: fire from anywhere with toast('message') -->
<div x-data="{ toasts: [] }"
@toast.window="const id = Date.now() + Math.random(); toasts.push({ id, msg: $event.detail }); setTimeout(() => { toasts = toasts.filter(t => t.id !== id) }, 3000)"
class="pointer-events-none fixed bottom-4 right-4 z-50 flex flex-col gap-2">
<template x-for="t in toasts" :key="t.id">
<div x-transition.opacity.duration.300ms
class="pointer-events-auto flex items-center gap-2 rounded-radius border border-outline bg-surface px-4 py-3 text-sm font-medium text-on-surface shadow-lg dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 text-success">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
</svg>
<span x-text="t.msg"></span>
</div>
</template>
</div>
</body>
</html>

3
assets/views/shop/_card.html
View File

@@ -14,7 +14,8 @@
<div class="flex flex-col gap-2 px-4 pb-4">
{% if product.stock > 0 %}
<p class="text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="in-stock", lang=lang | default(value='sk')) }}: {{ product.stock }}</p>
<form method="post" action="/cart/add" hx-boost="false">
<form method="post" action="/cart/add" hx-post="/cart/add" hx-swap="none"
hx-on::after-request="if (event.detail.successful) toast('{{ t(key='cart-added', lang=lang | default(value='sk')) }}')">
<input type="hidden" name="product_id" value="{{ product.id }}">
<input type="hidden" name="quantity" value="1">
<button type="submit"

3
assets/views/shop/show.html
View File

@@ -39,7 +39,8 @@
{% endif %}
{% if product.stock > 0 %}
<form method="post" action="/cart/add" hx-boost="false" class="flex flex-wrap items-end gap-3">
<form method="post" action="/cart/add" hx-post="/cart/add" hx-swap="none" class="flex flex-wrap items-end gap-3"
hx-on::after-request="if (event.detail.successful) toast('{{ t(key='cart-added', lang=lang | default(value='sk')) }}')">
<input type="hidden" name="product_id" value="{{ product.id }}">
<div class="space-y-1.5">
<label for="quantity" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="quantity", lang=lang | default(value='sk')) }}</label>