checkout
This commit is contained in:
Priec
@@ -350,6 +350,10 @@ cart-remove-confirm = Remove this item from the cart?
|
||||
cart-update = Update
|
||||
cart-continue = Continue shopping
|
||||
checkout-title = Checkout
|
||||
checkout-step-basket = Basket
|
||||
checkout-step-info = Info
|
||||
checkout-step-payment = Payment & transport
|
||||
checkout-step-transport = Transport
|
||||
checkout-contact = Contact details
|
||||
checkout-shipping = Delivery address
|
||||
checkout-residence-address = Residence address
|
||||
@@ -380,6 +384,8 @@ company-dic = Tax ID (DIČ)
|
||||
company-icdph = VAT ID (IČ DPH)
|
||||
field-optional = optional
|
||||
checkout-place-order = Place order
|
||||
checkout-continue-payment = Continue
|
||||
checkout-back-info = Back to details
|
||||
checkout-summary = Order summary
|
||||
profile-title = My profile
|
||||
profile-intro = We'll use these details to prefill checkout.
|
||||
|
||||
@@ -350,6 +350,10 @@ cart-remove-confirm = Odstrániť túto položku z košíka?
|
||||
cart-update = Aktualizovať
|
||||
cart-continue = Pokračovať v nákupe
|
||||
checkout-title = Pokladňa
|
||||
checkout-step-basket = Košík
|
||||
checkout-step-info = Údaje
|
||||
checkout-step-payment = Doprava a platba
|
||||
checkout-step-transport = Doprava
|
||||
checkout-contact = Kontaktné údaje
|
||||
checkout-shipping = Dodacia adresa
|
||||
checkout-residence-address = Adresa bydliska
|
||||
@@ -380,6 +384,8 @@ company-dic = DIČ
|
||||
company-icdph = IČ DPH
|
||||
field-optional = nepovinné
|
||||
checkout-place-order = Odoslať objednávku
|
||||
checkout-continue-payment = Pokračovať
|
||||
checkout-back-info = Späť na údaje
|
||||
checkout-summary = Súhrn objednávky
|
||||
profile-title = Môj profil
|
||||
profile-intro = Tieto údaje použijeme na predvyplnenie pokladne.
|
||||
|
||||
@@ -292,6 +292,25 @@ border-t border-outline dark:border-outline-dark
|
||||
<li class="font-semibold text-on-surface-strong dark:text-on-surface-dark-strong" aria-current="page">{{ label }}</li>
|
||||
{%- endmacro crumb_current %}
|
||||
|
||||
{# Checkout step indicator: Basket › Info › Payment & transport, with chevrons
|
||||
only *between* steps (no dangling trailing chevron) and the active step bold.
|
||||
`active` is one of "info" | "payment"; the basket is always a link to /cart. #}
|
||||
{% macro checkout_steps(active, lang) -%}
|
||||
<nav aria-label="breadcrumb" class="mb-5 text-sm">
|
||||
<ol class="flex flex-wrap items-center gap-1.5 text-on-surface/60 dark:text-on-surface-dark/60">
|
||||
<li><a href="/cart" class="transition hover:text-primary dark:hover:text-primary-dark">{{ t(key="checkout-step-basket", lang=lang) }}</a></li>
|
||||
<li class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-3.5 shrink-0 text-on-surface/30 dark:text-on-surface-dark/30" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
|
||||
{% if active == "info" %}<span class="font-semibold text-on-surface-strong dark:text-on-surface-dark-strong" aria-current="page">{{ t(key="checkout-step-info", lang=lang) }}</span>
|
||||
{% else %}<a href="/checkout/info" class="transition hover:text-primary dark:hover:text-primary-dark">{{ t(key="checkout-step-info", lang=lang) }}</a>{% endif %}
|
||||
</li>
|
||||
<li class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-3.5 shrink-0 text-on-surface/30 dark:text-on-surface-dark/30" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
|
||||
{% if active == "payment" %}<span class="font-semibold text-on-surface-strong dark:text-on-surface-dark-strong" aria-current="page">{{ t(key="checkout-step-payment", lang=lang) }}</span>
|
||||
{% else %}<span>{{ t(key="checkout-step-payment", lang=lang) }}</span>{% endif %}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
{%- endmacro checkout_steps %}
|
||||
|
||||
{# Title for the static info pages (controllers/pages.rs → pages/info.html),
|
||||
resolved from the `page` slug. Lives in a macro because a child template's
|
||||
top-level {% set %} isn't visible inside its {% block %}s under `extends`;
|
||||
|
||||
@@ -3,32 +3,17 @@
|
||||
|
||||
{% block title %}{{ t(key="checkout-title", lang=lang | default(value='sk')) }}{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
{% if packeta_api_key %}<script src="https://widget.packeta.com/v6/www/js/library.js"></script>{% endif %}
|
||||
{% block breadcrumbs %}
|
||||
{{ ui::checkout_steps(active="info", lang=lang | default(value='sk')) }}
|
||||
{% endblock breadcrumbs %}
|
||||
|
||||
{% 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>
|
||||
|
||||
<form method="post" action="/checkout" hx-boost="false"
|
||||
<form method="post" action="/checkout/info" hx-boost="false"
|
||||
x-data="{
|
||||
paymentMethod: '',
|
||||
accountType: '{{ prefill_account_type | default(value='personal') }}',
|
||||
deliverySame: false,
|
||||
carrier: '',
|
||||
carrierPrice: 0,
|
||||
requiresPoint: false,
|
||||
pointId: '',
|
||||
pointName: '',
|
||||
subtotal: {{ subtotal_cents }},
|
||||
packetaKey: '{{ packeta_api_key }}',
|
||||
fmt(c) { return (c / 100).toFixed(2) },
|
||||
pickPoint() {
|
||||
Packeta.Widget.pick(this.packetaKey, (point) => {
|
||||
if (point) { this.pointId = String(point.id); this.pointName = point.formatedValue || point.name }
|
||||
})
|
||||
},
|
||||
get canSubmit() {
|
||||
return this.paymentMethod && this.carrier && (!this.requiresPoint || this.pointId)
|
||||
}
|
||||
deliverySame: {{ prefill_delivery_same | default(value='false') }}
|
||||
}"
|
||||
class="mt-6 grid gap-8 lg:grid-cols-3">
|
||||
{{ ui::csrf_field() }}
|
||||
@@ -184,21 +169,21 @@
|
||||
<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')) }}{{ ui::req() }}</label>
|
||||
{{ ui::input(name="address", id="address", autocomplete="shipping street-address", attrs=':required="!deliverySame"') }}
|
||||
{{ ui::input(name="address", id="address", value=prefill_delivery_address | default(value=''), autocomplete="shipping street-address", attrs=':required="!deliverySame"') }}
|
||||
</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')) }}{{ ui::req() }}</label>
|
||||
{{ ui::input(name="city", id="city", autocomplete="shipping address-level2", attrs=':required="!deliverySame"') }}
|
||||
{{ ui::input(name="city", id="city", value=prefill_delivery_city | default(value=''), autocomplete="shipping address-level2", attrs=':required="!deliverySame"') }}
|
||||
</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')) }}{{ ui::req() }}</label>
|
||||
{{ ui::input(name="zip", id="zip", autocomplete="shipping postal-code", attrs=':required="!deliverySame"') }}
|
||||
{{ ui::input(name="zip", id="zip", value=prefill_delivery_zip | default(value=''), autocomplete="shipping postal-code", attrs=':required="!deliverySame"') }}
|
||||
</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')) }}{{ ui::req() }}</label>
|
||||
<div class="relative" @click.outside="countryOpen = false"
|
||||
x-data="{ countryOpen: false, country: '{{ t(key='country-sk', lang=lang | default(value='sk')) }}', opts: [
|
||||
x-data="{ countryOpen: false, country: '{{ prefill_delivery_country | default(value=t(key='country-sk', lang=lang | default(value='sk'))) }}', opts: [
|
||||
{ v: '{{ t(key='country-sk', lang=lang | default(value='sk')) }}', l: '🇸🇰 {{ t(key='country-sk', lang=lang | default(value='sk')) }}' },
|
||||
{ v: '{{ t(key='country-cz', lang=lang | default(value='sk')) }}', l: '🇨🇿 {{ t(key='country-cz', lang=lang | default(value='sk')) }}' },
|
||||
{ v: '{{ t(key='country-at', lang=lang | default(value='sk')) }}', l: '🇦🇹 {{ t(key='country-at', lang=lang | default(value='sk')) }}' },
|
||||
@@ -226,76 +211,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- carrier -->
|
||||
<fieldset class="space-y-3 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-carrier", lang=lang | default(value='sk')) }}{{ ui::req() }}</legend>
|
||||
{% for m in shipping_methods %}
|
||||
<label class="flex cursor-pointer items-center justify-between gap-3 rounded-radius border border-outline px-4 py-3 transition has-[:checked]:border-primary dark:border-outline-dark dark:has-[:checked]:border-primary-dark">
|
||||
<span class="flex items-center gap-3">
|
||||
<!-- Penguin radio dot inline (the @change mixes nested single+double quotes, can't pass through a Tera macro arg) -->
|
||||
<input type="radio" name="carrier_code" value="{{ m.code }}" required
|
||||
@change="carrier='{{ m.code }}'; carrierPrice={{ m.price_cents }}; requiresPoint={{ m.requires_pickup_point }}; pointId=''; pointName=''"
|
||||
class="before:content[''] relative h-4 w-4 appearance-none rounded-full border border-outline bg-surface before:invisible before:absolute before:left-1/2 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-on-primary checked:border-primary checked:bg-primary checked:before:visible focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark dark:before:bg-on-primary-dark dark:checked:border-primary-dark dark:checked:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark">
|
||||
<span class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ m.name }}</span>
|
||||
</span>
|
||||
<span class="tabular-nums text-on-surface/80 dark:text-on-surface-dark/80">{{ m.price }} €</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
|
||||
<!-- pickup point (carriers that need one, e.g. Packeta) -->
|
||||
<div x-show="requiresPoint" x-cloak class="space-y-2 pt-1">
|
||||
<input type="hidden" name="pickup_point_id" x-model="pointId">
|
||||
<input type="hidden" name="pickup_point_name" x-model="pointName">
|
||||
{% if packeta_api_key %}
|
||||
<button type="button" @click="pickPoint()"
|
||||
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="checkout-pick-point", lang=lang | default(value='sk')) }}
|
||||
</button>
|
||||
<p x-show="pointName" x-cloak class="text-sm text-on-surface/80 dark:text-on-surface-dark/80">
|
||||
<span class="font-medium">{{ t(key="checkout-chosen-point", lang=lang | default(value='sk')) }}:</span> <span x-text="pointName"></span>
|
||||
</p>
|
||||
{% else %}
|
||||
<label class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-pickup-point", lang=lang | default(value='sk')) }}</label>
|
||||
<input type="text" x-model="pointName" @input="pointId = pointName"
|
||||
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">
|
||||
{% endif %}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- payment -->
|
||||
<fieldset class="space-y-3 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-payment", lang=lang | default(value='sk')) }}{{ ui::req() }}</legend>
|
||||
{% if payment_methods | length > 0 %}
|
||||
{% for method in payment_methods %}
|
||||
<label class="flex cursor-pointer items-center gap-3 rounded-radius border border-outline px-4 py-3 transition has-[:checked]:border-primary dark:border-outline-dark dark:has-[:checked]:border-primary-dark">
|
||||
{{ ui::radio(name="payment_method", value=method.code, attrs='required x-model="paymentMethod"') }}
|
||||
<span class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key=method.label_key, lang=lang | default(value='sk')) }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="payment-none", lang=lang | default(value='sk')) }}</p>
|
||||
{% endif %}
|
||||
</fieldset>
|
||||
|
||||
<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>
|
||||
{{ ui::textarea(name="note", id="note", rows="3") }}
|
||||
</div>
|
||||
|
||||
{% if logged_in_customer and not profile_filled %}
|
||||
<!-- offered only when the profile has no saved address yet; if it was filled
|
||||
in advance we leave it untouched -->
|
||||
{{ ui::checkbox(name="save_profile", id="save_profile", label=t(key="checkout-save-profile", lang=lang | default(value='sk'))) }}
|
||||
{% endif %}
|
||||
|
||||
{% if can_create_account %}
|
||||
<!-- guests may turn this order into an account (typed by their choice above) -->
|
||||
<div class="space-y-1.5 rounded-radius border border-outline bg-surface p-4 dark:border-outline-dark dark:bg-surface-dark-alt">
|
||||
{{ ui::checkbox(name="create_account", id="create_account", label=t(key="checkout-create-account", lang=lang | default(value='sk'))) }}
|
||||
<p class="pl-6 text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="checkout-create-account-hint", lang=lang | default(value='sk')) }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- summary -->
|
||||
@@ -309,21 +224,11 @@
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="space-y-1 border-t border-outline pt-3 text-sm dark:border-outline-dark">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="checkout-subtotal", lang=lang | default(value='sk')) }}</span>
|
||||
<span class="tabular-nums">{{ subtotal }} €</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="checkout-shipping-cost", lang=lang | default(value='sk')) }}</span>
|
||||
<span class="tabular-nums" x-text="fmt(carrierPrice) + ' €'"></span>
|
||||
</div>
|
||||
</div>
|
||||
<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" x-text="fmt(subtotal + carrierPrice) + ' €'"></span>
|
||||
<span>{{ t(key="checkout-subtotal", lang=lang | default(value='sk')) }}</span>
|
||||
<span class="tabular-nums text-primary dark:text-primary-dark">{{ subtotal }} €</span>
|
||||
</div>
|
||||
{{ ui::button(label=t(key="checkout-place-order", lang=lang | default(value='sk')), type="submit", attrs=':disabled="!canSubmit"', extra="w-full", size="px-6 py-2.5 text-sm") }}
|
||||
{{ ui::button(label=t(key="checkout-continue-payment", lang=lang | default(value='sk')), type="submit", extra="w-full", size="px-6 py-2.5 text-sm") }}
|
||||
</aside>
|
||||
</form>
|
||||
{% endblock content %}
|
||||
143
assets/views/shop/checkout_payment.html
Normal file
143
assets/views/shop/checkout_payment.html
Normal file
@@ -0,0 +1,143 @@
|
||||
{% extends "base.html" %}
|
||||
{% import "macros/ui.html" as ui %}
|
||||
|
||||
{% block title %}{{ t(key="checkout-title", lang=lang | default(value='sk')) }}{% endblock title %}
|
||||
|
||||
{% block breadcrumbs %}
|
||||
{{ ui::checkout_steps(active="payment", lang=lang | default(value='sk')) }}
|
||||
{% endblock breadcrumbs %}
|
||||
|
||||
{% block content %}
|
||||
{% if packeta_api_key %}<script src="https://widget.packeta.com/v6/www/js/library.js"></script>{% endif %}
|
||||
|
||||
<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>
|
||||
|
||||
<form method="post" action="/checkout/payment" hx-boost="false"
|
||||
x-data="{
|
||||
paymentMethod: '',
|
||||
carrier: '',
|
||||
carrierPrice: 0,
|
||||
requiresPoint: false,
|
||||
pointId: '',
|
||||
pointName: '',
|
||||
subtotal: {{ subtotal_cents }},
|
||||
packetaKey: '{{ packeta_api_key }}',
|
||||
fmt(c) { return (c / 100).toFixed(2) },
|
||||
pickPoint() {
|
||||
Packeta.Widget.pick(this.packetaKey, (point) => {
|
||||
if (point) { this.pointId = String(point.id); this.pointName = point.formatedValue || point.name }
|
||||
})
|
||||
},
|
||||
get canSubmit() {
|
||||
return this.paymentMethod && this.carrier && (!this.requiresPoint || this.pointId)
|
||||
}
|
||||
}"
|
||||
class="mt-6 grid gap-8 lg:grid-cols-3">
|
||||
{{ ui::csrf_field() }}
|
||||
|
||||
<div class="space-y-6 lg:col-span-2">
|
||||
<!-- carrier -->
|
||||
<fieldset class="space-y-3 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-carrier", lang=lang | default(value='sk')) }}{{ ui::req() }}</legend>
|
||||
{% for m in shipping_methods %}
|
||||
<label class="flex cursor-pointer items-center justify-between gap-3 rounded-radius border border-outline px-4 py-3 transition has-[:checked]:border-primary dark:border-outline-dark dark:has-[:checked]:border-primary-dark">
|
||||
<span class="flex items-center gap-3">
|
||||
<!-- Penguin radio dot inline (the @change mixes nested single+double quotes, can't pass through a Tera macro arg) -->
|
||||
<input type="radio" name="carrier_code" value="{{ m.code }}" required
|
||||
@change="carrier='{{ m.code }}'; carrierPrice={{ m.price_cents }}; requiresPoint={{ m.requires_pickup_point }}; pointId=''; pointName=''"
|
||||
class="before:content[''] relative h-4 w-4 appearance-none rounded-full border border-outline bg-surface before:invisible before:absolute before:left-1/2 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-on-primary checked:border-primary checked:bg-primary checked:before:visible focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark dark:before:bg-on-primary-dark dark:checked:border-primary-dark dark:checked:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark">
|
||||
<span class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ m.name }}</span>
|
||||
</span>
|
||||
<span class="tabular-nums text-on-surface/80 dark:text-on-surface-dark/80">{{ m.price }} €</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
|
||||
<!-- pickup point (carriers that need one, e.g. Packeta) -->
|
||||
<div x-show="requiresPoint" x-cloak class="space-y-2 pt-1">
|
||||
<input type="hidden" name="pickup_point_id" x-model="pointId">
|
||||
<input type="hidden" name="pickup_point_name" x-model="pointName">
|
||||
{% if packeta_api_key %}
|
||||
<button type="button" @click="pickPoint()"
|
||||
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="checkout-pick-point", lang=lang | default(value='sk')) }}
|
||||
</button>
|
||||
<p x-show="pointName" x-cloak class="text-sm text-on-surface/80 dark:text-on-surface-dark/80">
|
||||
<span class="font-medium">{{ t(key="checkout-chosen-point", lang=lang | default(value='sk')) }}:</span> <span x-text="pointName"></span>
|
||||
</p>
|
||||
{% else %}
|
||||
<label class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-pickup-point", lang=lang | default(value='sk')) }}</label>
|
||||
<input type="text" x-model="pointName" @input="pointId = pointName"
|
||||
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">
|
||||
{% endif %}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- payment -->
|
||||
<fieldset class="space-y-3 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-payment", lang=lang | default(value='sk')) }}{{ ui::req() }}</legend>
|
||||
{% if payment_methods | length > 0 %}
|
||||
{% for method in payment_methods %}
|
||||
<label class="flex cursor-pointer items-center gap-3 rounded-radius border border-outline px-4 py-3 transition has-[:checked]:border-primary dark:border-outline-dark dark:has-[:checked]:border-primary-dark">
|
||||
{{ ui::radio(name="payment_method", value=method.code, attrs='required x-model="paymentMethod"') }}
|
||||
<span class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key=method.label_key, lang=lang | default(value='sk')) }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="payment-none", lang=lang | default(value='sk')) }}</p>
|
||||
{% endif %}
|
||||
</fieldset>
|
||||
|
||||
<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>
|
||||
{{ ui::textarea(name="note", id="note", rows="3") }}
|
||||
</div>
|
||||
|
||||
{% if logged_in_customer and not profile_filled %}
|
||||
<!-- offered only when the profile has no saved address yet; if it was filled
|
||||
in advance we leave it untouched -->
|
||||
{{ ui::checkbox(name="save_profile", id="save_profile", label=t(key="checkout-save-profile", lang=lang | default(value='sk'))) }}
|
||||
{% endif %}
|
||||
|
||||
{% if can_create_account %}
|
||||
<!-- guests may turn this order into an account (typed by their choice in step 1) -->
|
||||
<div class="space-y-1.5 rounded-radius border border-outline bg-surface p-4 dark:border-outline-dark dark:bg-surface-dark-alt">
|
||||
{{ ui::checkbox(name="create_account", id="create_account", label=t(key="checkout-create-account", lang=lang | default(value='sk'))) }}
|
||||
<p class="pl-6 text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="checkout-create-account-hint", lang=lang | default(value='sk')) }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<a href="/checkout/info" class="inline-flex items-center gap-1.5 text-sm text-on-surface/70 transition hover:text-primary dark:text-on-surface-dark/70 dark:hover:text-primary-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" /></svg>
|
||||
{{ t(key="checkout-back-info", lang=lang | default(value='sk')) }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- summary -->
|
||||
<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 }} €</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="space-y-1 border-t border-outline pt-3 text-sm dark:border-outline-dark">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="checkout-subtotal", lang=lang | default(value='sk')) }}</span>
|
||||
<span class="tabular-nums">{{ subtotal }} €</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="checkout-shipping-cost", lang=lang | default(value='sk')) }}</span>
|
||||
<span class="tabular-nums" x-text="fmt(carrierPrice) + ' €'"></span>
|
||||
</div>
|
||||
</div>
|
||||
<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" x-text="fmt(subtotal + carrierPrice) + ' €'"></span>
|
||||
</div>
|
||||
{{ ui::button(label=t(key="checkout-place-order", lang=lang | default(value='sk')), type="submit", attrs=':disabled="!canSubmit"', extra="w-full", size="px-6 py-2.5 text-sm") }}
|
||||
</aside>
|
||||
</form>
|
||||
{% endblock content %}
|
||||
Reference in New Issue
Block a user