phone number + country

This commit is contained in:
Priec
2026-06-17 18:02:46 +02:00
parent cd7a756a54
commit d18bdeaf6e
13 changed files with 96 additions and 6 deletions

View File

@@ -51,6 +51,7 @@
<p class="text-xs uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="order-customer", lang=lang | default(value='sk')) }}</p>
<p class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ order.customer_name }}</p>
<p class="text-on-surface/80 dark:text-on-surface-dark/80">{{ order.email }}</p>
{% if order.phone %}<p class="text-on-surface/80 dark:text-on-surface-dark/80">{{ order.phone }}</p>{% endif %}
</div>
<div>
<p class="text-xs uppercase tracking-wide text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="checkout-shipping", lang=lang | default(value='sk')) }}</p>

View File

@@ -43,6 +43,25 @@
<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>
<div class="space-y-1.5">
<label for="phone" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-phone", lang=lang | default(value='sk')) }}</label>
<div class="flex gap-2">
<select id="phone_prefix" name="phone_prefix" aria-label="{{ t(key='checkout-phone', lang=lang | default(value='sk')) }}"
class="w-32 shrink-0 rounded-radius border border-outline bg-surface px-2 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">
<option value="+421">🇸🇰 +421</option>
<option value="+420">🇨🇿 +420</option>
<option value="+43">🇦🇹 +43</option>
<option value="+49">🇩🇪 +49</option>
<option value="+48">🇵🇱 +48</option>
<option value="+36">🇭🇺 +36</option>
<option value="+44">🇬🇧 +44</option>
<option value="+39">🇮🇹 +39</option>
<option value="+33">🇫🇷 +33</option>
</select>
<input id="phone" name="phone" type="tel" required autocomplete="tel" inputmode="tel" placeholder="900 000 000"
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>
</fieldset>
<!-- shipping address -->
@@ -66,8 +85,15 @@
</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 value="Slovensko"
<select id="country" name="country" 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">
<option value="Slovensko" selected>🇸🇰 {{ t(key="country-sk", lang=lang | default(value='sk')) }}</option>
<option value="Česko">🇨🇿 {{ t(key="country-cz", lang=lang | default(value='sk')) }}</option>
<option value="Rakúsko">🇦🇹 {{ t(key="country-at", lang=lang | default(value='sk')) }}</option>
<option value="Nemecko">🇩🇪 {{ t(key="country-de", lang=lang | default(value='sk')) }}</option>
<option value="Poľsko">🇵🇱 {{ t(key="country-pl", lang=lang | default(value='sk')) }}</option>
<option value="Maďarsko">🇭🇺 {{ t(key="country-hu", lang=lang | default(value='sk')) }}</option>
</select>
</div>
</div>
</fieldset>