eshop

assets/views/shop/_card.html

@@ -0,0 +1,12 @@
+<a href="/shop/{{ product.slug }}"
+  class="group flex flex-col overflow-hidden rounded-radius border border-outline bg-surface transition hover:border-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:hover:border-primary-dark">
+  <div class="aspect-square overflow-hidden bg-surface-alt dark:bg-surface-dark">
+    {% if product.image %}
+    <img src="/images/{{ product.image }}" alt="{{ product.name }}" class="size-full object-cover transition group-hover:scale-105">
+    {% endif %}
+  </div>
+  <div class="flex flex-1 flex-col gap-1 p-4">
+    <h3 class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h3>
+    <p class="mt-auto pt-2 font-semibold text-primary dark:text-primary-dark">{{ product.price }} {{ product.currency }}</p>
+  </div>
+</a>

assets/views/shop/cart.html

@@ -0,0 +1,67 @@
+{% extends "base.html" %}
+
+{% block title %}{{ t(key="cart-title", lang=lang | default(value='sk')) }}{% endblock title %}
+
+{% block content %}
+<div class="space-y-6">
+  <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="cart-title", lang=lang | default(value='sk')) }}</h1>
+
+  {% if items | length > 0 %}
+  <div class="overflow-hidden rounded-radius border border-outline dark:border-outline-dark">
+    <table class="w-full text-left text-sm">
+      <thead class="border-b border-outline bg-surface-alt text-xs uppercase tracking-wide text-on-surface/70 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark/70">
+        <tr>
+          <th class="px-4 py-3 font-semibold">{{ t(key="product", lang=lang | default(value='sk')) }}</th>
+          <th class="px-4 py-3 font-semibold">{{ t(key="price", lang=lang | default(value='sk')) }}</th>
+          <th class="px-4 py-3 font-semibold">{{ t(key="quantity", lang=lang | default(value='sk')) }}</th>
+          <th class="px-4 py-3 text-right font-semibold">{{ t(key="cart-total", lang=lang | default(value='sk')) }}</th>
+          <th class="px-4 py-3"></th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-outline dark:divide-outline-dark">
+        {% 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">
+            <form method="post" action="/cart/update" hx-boost="false" class="flex items-center gap-2">
+              <input type="hidden" name="product_id" value="{{ item.id }}">
+              <input type="number" name="quantity" min="0" max="{{ item.stock }}" value="{{ item.quantity }}"
+                class="w-20 rounded-radius border border-outline bg-surface px-2 py-1 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+              <button type="submit" class="rounded-radius border border-outline px-2 py-1 text-xs font-medium text-on-surface transition hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">{{ t(key="cart-update", lang=lang | default(value='sk')) }}</button>
+            </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-boost="false">
+              <input type="hidden" name="product_id" value="{{ item.id }}">
+              <button type="submit" class="text-xs font-medium text-danger hover:underline">{{ t(key="cart-remove", lang=lang | default(value='sk')) }}</button>
+            </form>
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+      <tfoot class="border-t border-outline dark:border-outline-dark">
+        <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="flex flex-wrap justify-between gap-3">
+    <a href="/shop" class="inline-flex items-center rounded-radius border border-outline px-4 py-2 text-sm font-medium text-on-surface transition hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">{{ t(key="cart-continue", lang=lang | default(value='sk')) }}</a>
+    <a href="/checkout" class="inline-flex items-center justify-center rounded-radius bg-primary px-5 py-2 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark">{{ t(key="cart-checkout", lang=lang | default(value='sk')) }}</a>
+  </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>
+    <a href="/shop" class="mt-4 inline-flex items-center justify-center rounded-radius bg-primary px-4 py-2 text-sm font-medium text-on-primary transition hover:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark">{{ t(key="cart-continue", lang=lang | default(value='sk')) }}</a>
+  </div>
+  {% endif %}
+</div>
+{% endblock content %}

assets/views/shop/category.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+
+{% block title %}{{ category.name }}{% endblock title %}
+
+{% block content %}
+<div class="space-y-8">
+  <header class="space-y-2">
+    <nav class="text-sm text-on-surface/60 dark:text-on-surface-dark/60">
+      <a href="/shop" class="hover:text-primary dark:hover:text-primary-dark">{{ t(key="nav-shop", lang=lang | default(value='sk')) }}</a>
+      <span class="px-1">/</span>
+      <span>{{ category.name }}</span>
+    </nav>
+    <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ category.name }}</h1>
+    {% if category.description %}<p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ category.description }}</p>{% endif %}
+  </header>
+
+  {% if products | length > 0 %}
+  <div class="grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-4">
+    {% for product in products %}
+    {% include "shop/_card.html" %}
+    {% endfor %}
+  </div>
+  {% else %}
+  <div class="rounded-radius border border-outline px-6 py-16 text-center text-on-surface/70 dark:border-outline-dark dark:text-on-surface-dark/70">
+    {{ t(key="shop-empty", lang=lang | default(value='sk')) }}
+  </div>
+  {% endif %}
+</div>
+{% endblock content %}

assets/views/shop/checkout.html

@@ -0,0 +1,77 @@
+{% extends "base.html" %}
+
+{% block title %}{{ t(key="checkout-title", lang=lang | default(value='sk')) }}{% endblock title %}
+
+{% block content %}
+<h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-title", lang=lang | default(value='sk')) }}</h1>
+
+<div class="mt-6 grid gap-8 lg:grid-cols-3">
+  <form method="post" action="/checkout" hx-boost="false" class="space-y-6 lg:col-span-2">
+    <fieldset class="space-y-4 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
+      <legend class="px-1 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-contact", lang=lang | default(value='sk')) }}</legend>
+      <div class="space-y-1.5">
+        <label for="email" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-email", lang=lang | default(value='sk')) }}</label>
+        <input id="email" name="email" type="email" required
+          class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      </div>
+      <div class="space-y-1.5">
+        <label for="customer_name" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-name", lang=lang | default(value='sk')) }}</label>
+        <input id="customer_name" name="customer_name" type="text" required
+          class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      </div>
+    </fieldset>
+
+    <fieldset class="space-y-4 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
+      <legend class="px-1 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-shipping", lang=lang | default(value='sk')) }}</legend>
+      <div class="space-y-1.5">
+        <label for="address" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-address", lang=lang | default(value='sk')) }}</label>
+        <input id="address" name="address" type="text" required
+          class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      </div>
+      <div class="grid gap-4 sm:grid-cols-3">
+        <div class="space-y-1.5">
+          <label for="city" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-city", lang=lang | default(value='sk')) }}</label>
+          <input id="city" name="city" type="text" required
+            class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+        </div>
+        <div class="space-y-1.5">
+          <label for="zip" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-zip", lang=lang | default(value='sk')) }}</label>
+          <input id="zip" name="zip" type="text" required
+            class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+        </div>
+        <div class="space-y-1.5">
+          <label for="country" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-country", lang=lang | default(value='sk')) }}</label>
+          <input id="country" name="country" type="text" required
+            class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+        </div>
+      </div>
+      <div class="space-y-1.5">
+        <label for="note" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-note", lang=lang | default(value='sk')) }}</label>
+        <textarea id="note" name="note" rows="3"
+          class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark"></textarea>
+      </div>
+    </fieldset>
+
+    <button type="submit"
+      class="inline-flex items-center justify-center rounded-radius bg-primary px-6 py-2.5 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark">
+      {{ t(key="checkout-place-order", lang=lang | default(value='sk')) }}
+    </button>
+  </form>
+
+  <aside class="h-fit space-y-4 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
+    <h2 class="text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-summary", lang=lang | default(value='sk')) }}</h2>
+    <ul class="space-y-2 text-sm">
+      {% for item in items %}
+      <li class="flex justify-between gap-2">
+        <span class="text-on-surface/80 dark:text-on-surface-dark/80">{{ item.name }} × {{ item.quantity }}</span>
+        <span class="tabular-nums">{{ item.line_total }} {{ item.currency }}</span>
+      </li>
+      {% endfor %}
+    </ul>
+    <div class="flex justify-between border-t border-outline pt-3 text-base font-bold dark:border-outline-dark">
+      <span>{{ t(key="cart-total", lang=lang | default(value='sk')) }}</span>
+      <span class="tabular-nums text-primary dark:text-primary-dark">{{ total }} {{ currency }}</span>
+    </div>
+  </aside>
+</div>
+{% endblock content %}

assets/views/shop/index.html

@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+
+{% block title %}{{ t(key="nav-shop", lang=lang | default(value='sk')) }}{% endblock title %}
+
+{% block content %}
+<div class="space-y-8">
+  <header class="space-y-2">
+    <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=lang | default(value='sk')) }}</h1>
+    <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-subtitle", lang=lang | default(value='sk')) }}</p>
+  </header>
+
+  {% if categories | length > 0 %}
+  <div class="flex flex-wrap gap-2">
+    {% for category in categories %}
+    <a href="/category/{{ category.slug }}"
+      class="rounded-full border border-outline px-3 py-1 text-sm font-medium text-on-surface transition hover:border-primary hover:text-primary dark:border-outline-dark dark:text-on-surface-dark dark:hover:border-primary-dark dark:hover:text-primary-dark">{{ category.name }}</a>
+    {% endfor %}
+  </div>
+  {% endif %}
+
+  {% if products | length > 0 %}
+  <div class="grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-4">
+    {% for product in products %}
+    {% include "shop/_card.html" %}
+    {% endfor %}
+  </div>
+  {% else %}
+  <div class="rounded-radius border border-outline px-6 py-16 text-center text-on-surface/70 dark:border-outline-dark dark:text-on-surface-dark/70">
+    {{ t(key="shop-empty", lang=lang | default(value='sk')) }}
+  </div>
+  {% endif %}
+</div>
+{% endblock content %}

assets/views/shop/order_confirmed.html

@@ -0,0 +1,38 @@
+{% extends "base.html" %}
+
+{% block title %}{{ t(key="order-confirmed-title", lang=lang | default(value='sk')) }}{% endblock title %}
+
+{% block content %}
+<div class="mx-auto max-w-2xl space-y-6 text-center">
+  <div class="mx-auto flex size-14 items-center justify-center rounded-full bg-success/15 text-success">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-7">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+    </svg>
+  </div>
+  <div>
+    <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="order-confirmed-title", lang=lang | default(value='sk')) }}</h1>
+    <p class="mt-1 text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="order-confirmed-sub", lang=lang | default(value='sk')) }}</p>
+  </div>
+
+  <div class="rounded-radius border border-outline bg-surface p-6 text-left dark:border-outline-dark dark:bg-surface-dark-alt">
+    <div class="flex flex-wrap justify-between gap-2 border-b border-outline pb-3 dark:border-outline-dark">
+      <span class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="order-number", lang=lang | default(value='sk')) }}</span>
+      <span class="font-mono font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ order.order_number }}</span>
+    </div>
+    <ul class="space-y-2 py-3 text-sm">
+      {% for item in items %}
+      <li class="flex justify-between gap-2">
+        <span class="text-on-surface/80 dark:text-on-surface-dark/80">{{ item.product_name }} × {{ item.quantity }}</span>
+        <span class="tabular-nums">{{ item.line_total }} {{ order.currency }}</span>
+      </li>
+      {% endfor %}
+    </ul>
+    <div class="flex justify-between border-t border-outline pt-3 font-bold dark:border-outline-dark">
+      <span>{{ t(key="order-total", lang=lang | default(value='sk')) }}</span>
+      <span class="tabular-nums text-primary dark:text-primary-dark">{{ order.total }} {{ order.currency }}</span>
+    </div>
+  </div>
+
+  <a href="/shop" class="inline-flex items-center justify-center rounded-radius border border-outline px-5 py-2 text-sm font-medium text-on-surface transition hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">{{ t(key="cart-continue", lang=lang | default(value='sk')) }}</a>
+</div>
+{% endblock content %}

assets/views/shop/show.html

@@ -0,0 +1,60 @@
+{% extends "base.html" %}
+
+{% block title %}{{ product.name }}{% endblock title %}
+
+{% block content %}
+<div class="grid gap-10 lg:grid-cols-2">
+  <!-- gallery -->
+  <div x-data="{ active: 0 }" class="space-y-4">
+    <div class="aspect-square overflow-hidden rounded-radius border border-outline bg-surface-alt dark:border-outline-dark dark:bg-surface-dark-alt">
+      {% if images | length > 0 %}
+      {% for image in images %}
+      <img x-show="active === {{ loop.index0 }}" src="/images/{{ image }}" alt="{{ product.name }}" class="size-full object-cover">
+      {% endfor %}
+      {% endif %}
+    </div>
+    {% if images | length > 1 %}
+    <div class="flex flex-wrap gap-2">
+      {% for image in images %}
+      <button type="button" @click="active = {{ loop.index0 }}"
+        :class="active === {{ loop.index0 }} ? 'border-primary dark:border-primary-dark' : 'border-outline dark:border-outline-dark'"
+        class="size-16 overflow-hidden rounded-radius border">
+        <img src="/images/{{ image }}" alt="" class="size-full object-cover">
+      </button>
+      {% endfor %}
+    </div>
+    {% endif %}
+  </div>
+
+  <!-- details -->
+  <div class="space-y-6">
+    {% if category %}
+    <a href="/category/{{ category.slug }}" class="text-sm font-medium text-primary dark:text-primary-dark">{{ category.name }}</a>
+    {% endif %}
+    <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h1>
+    <p class="text-2xl font-semibold text-primary dark:text-primary-dark">{{ product.price }} {{ product.currency }}</p>
+
+    {% if product.description %}
+    <div class="whitespace-pre-line leading-relaxed text-on-surface/80 dark:text-on-surface-dark/80">{{ product.description }}</div>
+    {% endif %}
+
+    {% if product.stock > 0 %}
+    <form method="post" action="/cart/add" hx-boost="false" class="flex flex-wrap items-end gap-3">
+      <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>
+        <input id="quantity" name="quantity" type="number" min="1" max="{{ product.stock }}" value="1"
+          class="w-24 rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      </div>
+      <button type="submit"
+        class="inline-flex items-center justify-center rounded-radius bg-primary px-5 py-2 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark">
+        {{ t(key="add-to-cart", lang=lang | default(value='sk')) }}
+      </button>
+    </form>
+    <p class="text-sm text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="in-stock", lang=lang | default(value='sk')) }}: {{ product.stock }}</p>
+    {% else %}
+    <p class="inline-flex rounded-radius bg-danger/10 px-3 py-2 text-sm font-medium text-danger">{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}</p>
+    {% endif %}
+  </div>
+</div>
+{% endblock content %}