fix eslint
This commit is contained in:
@ -1,167 +1,55 @@
|
||||
<template>
|
||||
<div ref="dropdownRef">
|
||||
<div @click="openCart = !openCart" class="relative cursor-pointer">
|
||||
<i class="uil uil-shopping-cart text-[31px]"></i>
|
||||
<div v-if="checkoutStore.products && checkoutStore.products.length > 0"
|
||||
class="w-[15px] h-[15px] rounded-full bg-accent-green-light dark:bg-accent-green-light text-white flex items-center justify-center text-[9px] absolute top-1 right-0">
|
||||
{{ checkoutStore.products.length }}</div>
|
||||
</div>
|
||||
<div v-if="openCart" @click.self="openCart = !openCart"
|
||||
class="absolute left-1/2 transform -translate-x-1/2 w-full px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20 right-0 z-50 flex items-center justify-end top-[100px] sm:top-[100px] md:top-[140px]">
|
||||
<div class="xl:w-[55%] md:w-[90%] w-full px-4 md:px-0">
|
||||
<div v-if="checkoutStore.products && checkoutStore.products.length > 0"
|
||||
class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] h-full space-25-55">
|
||||
<div>
|
||||
<div v-for="item in checkoutStore.products"
|
||||
class="py-[13px] sm:py-[25px] first:pt-0 border-b border-block">
|
||||
<div class="flex items-center h-[100px] sm:h-[205px]">
|
||||
<div
|
||||
class="min-w-[100px] sm:min-w-[205px] flex items-center justify-center h-[100px] sm:h-[205px]">
|
||||
<img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
|
||||
class="max-w-full max-h-full object-contain">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<h3
|
||||
class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
|
||||
{{ item.name }}
|
||||
</h3>
|
||||
<i @click="productStore.deleteCartItem(item.cart_item_id)"
|
||||
class="uil uil-trash-alt text-lg sm:text-2xl cursor-pointer"></i>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[10px]">
|
||||
<p
|
||||
class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
||||
{{ menuStore.formatPrice(Number(item.total_price)) }}
|
||||
</p>
|
||||
<div class="flex items-center gap-[2px] sm:gap-2 text-xl">
|
||||
<div
|
||||
class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
|
||||
<i class="uil uil-minus cursor-pointer text-gray dark:text-button-disabled hover:text-gray-200 transition-all"
|
||||
@click="productStore.decrementCartItem(item.cart_item_id)"></i>
|
||||
</div>
|
||||
<div
|
||||
class="w-5 min-h-5 sm:w-10 sm:min-h-11 text-[10px] sm:text-xl border border-button flex items-center justify-center rounded-[4px]">
|
||||
{{ item.quantity }}
|
||||
</div>
|
||||
<div
|
||||
class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
|
||||
<i class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
|
||||
@click="productStore.incrementCartItem(item.product_id)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-inter text-[12px] leading-[150%] font-bold uppercase sm:text-[24px]">{{
|
||||
$t('total_amount') }}</h4>
|
||||
<p
|
||||
class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
||||
{{ menuStore.formatPrice(Number(checkoutStore.fullProductsPrice)) }}
|
||||
</p>
|
||||
</div>
|
||||
<UiButtonArrow @click="() => {
|
||||
if (userStore.isLogged) {
|
||||
menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 12))
|
||||
} else {
|
||||
menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))
|
||||
}
|
||||
openCart = false
|
||||
}" class="w-full" type="fill" :arrow="true" :full="true">{{ userStore.isLogged ?
|
||||
$t('to_checkout') : $t('login') }}
|
||||
</UiButtonArrow>
|
||||
</div>
|
||||
<div v-else
|
||||
class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] flex items-center justify-center">
|
||||
<div
|
||||
class="border border-block inline-flex items-center justify-center h-[140px] sm:h-[200px] text-center rounded-[8px]">
|
||||
<h4
|
||||
class="font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] px-4 sm:px-10 md:text-xl">
|
||||
{{ $t('empty_cart') }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="dropdownRef">
|
||||
<div class="relative cursor-pointer" @click="openCart = !openCart">
|
||||
<i class="uil uil-shopping-cart text-[31px]"></i>
|
||||
<div v-if="checkoutStore.products && checkoutStore.products.length > 0"
|
||||
class="w-[15px] h-[15px] rounded-full bg-accent-green-light dark:bg-accent-green-light text-white flex items-center justify-center text-[9px] absolute top-1 right-0">
|
||||
{{ checkoutStore.products.length }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="openCart"
|
||||
class="absolute left-1/2 transform -translate-x-1/2 w-full px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20 right-0 z-50 flex items-center justify-end top-[100px] sm:top-[100px] md:top-[140px]"
|
||||
@click.self="openCart = !openCart"
|
||||
>
|
||||
<div v-if="openCart"
|
||||
class="absolute left-1/2 transform -translate-x-1/2 w-full px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20 right-0 z-50 flex items-center justify-end top-[100px] sm:top-[100px] md:top-[140px]"
|
||||
@click.self="openCart = !openCart">
|
||||
<div class="xl:w-[55%] md:w-[90%] w-full px-4 md:px-0">
|
||||
<div
|
||||
v-if="
|
||||
productStore.cart.cart_items
|
||||
&& productStore.cart.cart_items.length > 0
|
||||
"
|
||||
class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] h-full space-25-55"
|
||||
>
|
||||
<div v-if="checkoutStore.products && checkoutStore.products.length > 0"
|
||||
class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] h-full space-25-55">
|
||||
<div>
|
||||
<!-- product -->
|
||||
<div
|
||||
v-for="item in productStore.cart.cart_items" :key="item.product_id"
|
||||
class="py-[13px] sm:py-[25px] first:pt-0 border-b border-block"
|
||||
>
|
||||
<div v-for="(item, index) in checkoutStore.products" :key="index"
|
||||
class="py-[13px] sm:py-[25px] first:pt-0 border-b border-block">
|
||||
<div class="flex items-center h-[100px] sm:h-[205px]">
|
||||
<div
|
||||
class="min-w-[100px] sm:min-w-[205px] flex items-center justify-center h-[100px] sm:h-[205px]"
|
||||
>
|
||||
<img
|
||||
:src="`/api/public/file/${item.picture_uuid}.webp`"
|
||||
alt=""
|
||||
class="max-w-full max-h-full object-contain"
|
||||
>
|
||||
<div class="min-w-[100px] sm:min-w-[205px] flex items-center justify-center h-[100px] sm:h-[205px]">
|
||||
<img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
|
||||
class="max-w-full max-h-full object-contain">
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]"
|
||||
>
|
||||
<div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<h3
|
||||
class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]"
|
||||
>
|
||||
class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
|
||||
{{ item.name }}
|
||||
</h3>
|
||||
<i
|
||||
class="uil uil-trash-alt text-lg sm:text-2xl cursor-pointer"
|
||||
@click="productStore.deleteCartItem(item.cart_item_id)"
|
||||
/>
|
||||
<i class="uil uil-trash-alt text-lg sm:text-2xl cursor-pointer"
|
||||
@click="productStore.deleteCartItem(item.cart_item_id)"></i>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[10px]">
|
||||
<p
|
||||
class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold"
|
||||
>
|
||||
{{ item.total_price }}
|
||||
class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
||||
{{ menuStore.formatPrice(Number(item.total_price)) }}
|
||||
</p>
|
||||
<div class="flex items-center gap-[2px] sm:gap-2 text-xl">
|
||||
<div
|
||||
class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center"
|
||||
>
|
||||
<i
|
||||
class="uil uil-minus cursor-pointer text-gray dark:text-button-disabled hover:text-gray-200 transition-all"
|
||||
@click="
|
||||
productStore.decrementCartItem(item.cart_item_id)
|
||||
"
|
||||
/>
|
||||
class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
|
||||
<i class="uil uil-minus cursor-pointer text-gray dark:text-button-disabled hover:text-gray-200 transition-all"
|
||||
@click="productStore.decrementCartItem(item.cart_item_id)"></i>
|
||||
</div>
|
||||
<div
|
||||
class="w-5 min-h-5 sm:w-10 sm:min-h-11 text-[10px] sm:text-xl border border-button flex items-center justify-center rounded-[4px]"
|
||||
>
|
||||
class="w-5 min-h-5 sm:w-10 sm:min-h-11 text-[10px] sm:text-xl border border-button flex items-center justify-center rounded-[4px]">
|
||||
{{ item.quantity }}
|
||||
</div>
|
||||
<div
|
||||
class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center"
|
||||
>
|
||||
<i
|
||||
class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
|
||||
@click="
|
||||
productStore.incrementCartItem(item.product_id)
|
||||
"
|
||||
/>
|
||||
class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
|
||||
<i class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
|
||||
@click="productStore.incrementCartItem(item.product_id)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -170,52 +58,34 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<h4
|
||||
class="font-inter text-[12px] leading-[150%] font-bold uppercase sm:text-[24px]"
|
||||
>
|
||||
{{ $t("total_amount") }}
|
||||
<h4 class="font-inter text-[12px] leading-[150%] font-bold uppercase sm:text-[24px]">
|
||||
{{
|
||||
$t('total_amount') }}
|
||||
</h4>
|
||||
<p
|
||||
class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold"
|
||||
>
|
||||
{{ productStore.cart.total_value }}
|
||||
class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
||||
{{ menuStore.formatPrice(Number(checkoutStore.fullProductsPrice)) }}
|
||||
</p>
|
||||
</div>
|
||||
<UiButtonArrow
|
||||
class="w-full"
|
||||
type="fill"
|
||||
:arrow="true"
|
||||
:full="true"
|
||||
@click="
|
||||
() => {
|
||||
if (userStore.isLogged) {
|
||||
menuStore.navigateToItem(
|
||||
menuStore.menuItems?.find((item) => item.id === 12),
|
||||
);
|
||||
}
|
||||
else {
|
||||
menuStore.navigateToItem(
|
||||
menuStore.menuItems?.find((item) => item.id === 11),
|
||||
);
|
||||
}
|
||||
openCart = false;
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ userStore.isLogged ? $t("to_checkout") : $t("login") }}
|
||||
<UiButtonArrow class="w-full" type="fill" :arrow="true" :full="true" @click="() => {
|
||||
if (userStore.isLogged) {
|
||||
menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 12))
|
||||
}
|
||||
else {
|
||||
menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))
|
||||
}
|
||||
openCart = false
|
||||
}">
|
||||
{{ userStore.isLogged
|
||||
? $t('to_checkout') : $t('login') }}
|
||||
</UiButtonArrow>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] flex items-center justify-center"
|
||||
>
|
||||
<div v-else
|
||||
class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] flex items-center justify-center">
|
||||
<div
|
||||
class="border border-block inline-flex items-center justify-center h-[140px] sm:h-[200px] text-center rounded-[8px]"
|
||||
>
|
||||
<h4
|
||||
class="font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] px-4 sm:px-10 md:text-xl"
|
||||
>
|
||||
{{ $t("empty_cart") }}
|
||||
class="border border-block inline-flex items-center justify-center h-[140px] sm:h-[200px] text-center rounded-[8px]">
|
||||
<h4 class="font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] px-4 sm:px-10 md:text-xl">
|
||||
{{ $t('empty_cart') }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
@ -229,7 +99,7 @@ import { onClickOutside } from '@vueuse/core'
|
||||
|
||||
const productStore = useProductStore()
|
||||
const checkoutStore = useCheckoutStore()
|
||||
const openCart = ref(false);
|
||||
const openCart = ref(false)
|
||||
|
||||
const menuStore = useMenuStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
@ -34,8 +34,8 @@
|
||||
<div class="flex items-center gap-[30px]">
|
||||
<div>
|
||||
<i v-if="!userStore.isLogged"
|
||||
@click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
|
||||
class="uil uil-user text-[31px] cursor-pointer"></i>
|
||||
class="uil uil-user text-[31px] cursor-pointer"
|
||||
@click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"></i>
|
||||
<div v-else class="py-[6px] px-3 border border-block rounded-sm">
|
||||
{{ userStore.user }}
|
||||
</div>
|
||||
@ -375,11 +375,10 @@ import CountryCurrencySelector from './CountryCurrencySelector.vue'
|
||||
import LangSwitcher from './LangSwitcher.vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const productStore = useProductStore()
|
||||
const open = ref(false)
|
||||
const colorMode = useColorMode()
|
||||
const menuStore = useMenuStore();
|
||||
const checkoutStore = useCheckoutStore();
|
||||
const menuStore = useMenuStore()
|
||||
const checkoutStore = useCheckoutStore()
|
||||
|
||||
checkoutStore.getUserCart()
|
||||
|
||||
|
||||
@ -14,35 +14,30 @@
|
||||
{{ component.front_section_lang[0].data.main_subtitle }}
|
||||
</h4>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-2xl h-[340px] sm:h-[380px] md:min-w-[324px] xl:h-[800px] xl:min-w-[740px] m-0 sm:mx-10 md:m-0"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
></div>
|
||||
<div class="rounded-2xl h-[340px] sm:h-[380px] md:min-w-[324px] xl:h-[800px] xl:min-w-[740px] m-0 sm:mx-10 md:m-0"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"></div>
|
||||
</div>
|
||||
<div class="space-25-55-75">
|
||||
<h2 class="h2-bold-bounded">
|
||||
{{ component.front_section_lang[0].data.story_title }}
|
||||
</h2>
|
||||
<div class="flex flex-col-reverse md:flex-row w-full gap-6">
|
||||
<div
|
||||
class="rounded-2xl h-[390px] md:h-auto min-w-[40%] xl:min-w-[60%]"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
></div>
|
||||
<div class="rounded-2xl h-[390px] md:h-auto min-w-[40%] xl:min-w-[60%]" :style="{
|
||||
backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"></div>
|
||||
<div class="flex flex-col">
|
||||
<p v-for="(item, index) in component.front_section_lang[0].data.story_description" :key="index">
|
||||
{{ item }}
|
||||
</p><div v-if="index < component.front_section_lang[0].data.story_description.length - 1">
|
||||
<br>
|
||||
<div v-for="(item, index) in component.front_section_lang[0].data.story_description" :key="index">
|
||||
<p>{{ item }}</p>
|
||||
<div v-if="index < component.front_section_lang[0].data.story_description.length - 1">
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col w-full gap-6">
|
||||
@ -50,14 +45,12 @@
|
||||
{{ component.front_section_lang[0].data.story_subtitle }}
|
||||
</h4>
|
||||
<div class="flex flex-col justify-between xl:max-w-[70%]">
|
||||
<p v-for="(el, indexEl) in component.front_section_lang[0].data.story_sub_description"
|
||||
:key="indexEl"
|
||||
>
|
||||
{{ el }}
|
||||
</p><div v-if="indexEl < component.front_section_lang[0].data.story_sub_description.length - 1">
|
||||
<br>
|
||||
<div v-for="(el, indexEl) in component.front_section_lang[0].data.story_sub_description" :key="indexEl">
|
||||
<p>{{ el }}</p>
|
||||
<div v-if="indexEl < component.front_section_lang[0].data.story_sub_description.length - 1">
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,160 +1,173 @@
|
||||
<template>
|
||||
<UiContainer v-if="checkoutStore.modalMadeOrder">
|
||||
<NuxtLink to="/" class="mt-6 text-blue-500 underline" @click="checkoutStore.modalMadeOrder = false">Go back home
|
||||
</NuxtLink>
|
||||
</UiContainer>
|
||||
|
||||
<UiContainer v-if="checkoutStore.modalMadeOrder">
|
||||
<NuxtLink to="/" class="mt-6 text-blue-500 underline" @click="checkoutStore.modalMadeOrder = false">Go back home
|
||||
</NuxtLink>
|
||||
</UiContainer>
|
||||
|
||||
<UiContainer v-else>
|
||||
<div class="xl:w-[85%] mx-auto space-25-55">
|
||||
<div class="space-25-55">
|
||||
<div class="w-full flex items-center sm:justify-center">
|
||||
<div
|
||||
class="flex items-center justify-between sm:justify-center sm:gap-[25px] text-gray dark:text-button-disabled w-full sm:w-auto">
|
||||
<div class="sm:px-6 sm:py-3 mx-auto">
|
||||
{{ $t("login") }}
|
||||
</div>
|
||||
<div class="sm:px-6 sm:py-3 mx-auto">
|
||||
{{ $t("address") }}
|
||||
</div>
|
||||
<div
|
||||
class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-3 py-1 sm:px-6 sm:py-3">
|
||||
{{ $t("summary") }}
|
||||
</div>
|
||||
<div class="hidden sm:block sm:px-6 sm:py-3 sm:mx-auto">
|
||||
{{ $t("order_placed") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UiContainer v-else>
|
||||
<div class="xl:w-[85%] mx-auto space-25-55">
|
||||
<div class="space-25-55">
|
||||
<div class="w-full flex items-center sm:justify-center">
|
||||
<div
|
||||
class="flex items-center justify-between sm:justify-center sm:gap-[25px] text-gray dark:text-button-disabled w-full sm:w-auto">
|
||||
<div class="sm:px-6 sm:py-3 mx-auto">
|
||||
{{ $t("login") }}
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-[30px]">
|
||||
<div class="col-start-1 col-end-2 sm:col-end-3 space-y-5">
|
||||
<h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.product_list }}</h4>
|
||||
<div class="border-2 border-block rounded-[15px] p-[25px] sm:p-[50px] space-25-55">
|
||||
<div v-for="(item, index) in checkoutStore.products" :key="index">
|
||||
<div class="flex items-center h-[100px] sm:h-[150px]">
|
||||
<div
|
||||
class="min-w-[100px] sm:min-w-[150px] flex items-center justify-center h-[100px] sm:h-[150px]">
|
||||
<img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
|
||||
class="max-w-full max-h-full object-contain">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<h3
|
||||
class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
|
||||
{{ item.name }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex w-full justify-between gap-[10px]">
|
||||
<p
|
||||
class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
||||
{{ item.total_price }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-start-1 col-end-2 sm:col-end-3 xl:col-auto flex flex-col sm:flex-row xl:flex-col items-center gap-[30px]">
|
||||
<div class="space-y-5 w-full">
|
||||
<h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.account_address }}
|
||||
</h4>
|
||||
<div
|
||||
class="border-2 border-block rounded-[8px] px-[25px] py-[15px] flex flex-col gap-1 text-sm sm:text-lg md:text-xl">
|
||||
<span>{{ checkoutStore.defaultAddress?.address.name }} {{
|
||||
checkoutStore.defaultAddress?.address.surname }}</span>
|
||||
<span>{{ checkoutStore.defaultAddress?.address.street }}</span>
|
||||
<span>{{ checkoutStore.defaultAddress?.address.postcode }} {{
|
||||
checkoutStore.defaultAddress?.address.city }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-5 w-full h-full">
|
||||
<h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.note }}</h4>
|
||||
<textarea v-model="checkoutStore.vNote"
|
||||
class="border-2 border-block rounded-[8px] p-[15px] w-full flex-1 resize-none placeholder:text-button"
|
||||
name="rty" id="1" :placeholder="component.front_section_lang[0].data.note"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-start-1 col-end-2 xl:col-end-3 space-y-5">
|
||||
<h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.delivery_type }}</h4>
|
||||
<div
|
||||
class="border-2 border-block rounded-[15px] p-[25px] sm:p-[50px] space-y-[25px] text-sm sm:text-lg md:text-xl">
|
||||
<div @click="checkoutStore.setCurrentDelivery(delivery)"
|
||||
v-for="delivery in checkoutStore.deliveryOption" class="flex flex-col cursor-pointer">
|
||||
<div class="flex items-end justify-between">
|
||||
<div class="flex gap-[15px]">
|
||||
<div class="mt-1 w-4 h-4 border-2 border-button rounded-full">
|
||||
<div v-if="checkoutStore.currentDelivery === delivery"
|
||||
class="w-full h-full border-3 border-bg-light dark:border-bg-dark rounded-full bg-button">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span>{{ delivery.delivery_supplier_name }}</span>
|
||||
<span>{{ delivery.country_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-inter text-lg sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
||||
{{ menuStore.formatPrice(Number(delivery.shippment_price)) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-5 w-full flex flex-col h-full">
|
||||
<h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.payment_method }}</h4>
|
||||
<div
|
||||
class="border-2 border-block rounded-[8px] px-[25px] py-[25px] sm:py-[15px] flex-1 flex flex-col gap-1 text-sm sm:text-xl overflow-auto">
|
||||
<UCarousel :prevIcon="'i-lucide-chevron-left'" :nextIcon="'i-lucide-chevron-right'" :ui="{
|
||||
viewport: 'h-full w-full',
|
||||
container: 'h-full w-full',
|
||||
item: 'h-full w-full pl-7',
|
||||
prev: '-start-8 sm:-start-12 ring-0 text-button disable:text-block p-0 ring-inset ring-accented bg-inherit disabled:bg-inherit',
|
||||
next: '-end-8 sm:-end-12 ring-0 text-button disable:text-block p-0 text-[30px] bg-inherit disabled:bg-inherit',
|
||||
arrows: ''
|
||||
}" :prev="{ size: 'xl' }" :next="{ size: 'xl' }" arrows :items="checkoutStore.paymentMethods"
|
||||
class="relative sm:max-w-full mx-4 sm:mx-10 h-full">
|
||||
<template #default="{ item }">
|
||||
<div
|
||||
class="flex flex-col items-start justify-between h-full leading-[250%] sm:leading-[150%]">
|
||||
<span>{{ item.bank_name }}</span>
|
||||
<span>{{ item.country_name }}</span>
|
||||
<span>{{ item.street_and_number }}</span>
|
||||
<span>{{ item.iban }}</span>
|
||||
<span>{{ item.swift }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</UCarousel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:px-6 sm:py-3 mx-auto">
|
||||
{{ $t("address") }}
|
||||
</div>
|
||||
<div class="w-full border-y-2 border-block p-[25px] flex flex-col gap-[15px]">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm sm:text-xl">{{ component.front_section_lang[0].data.subtotal }}</p>
|
||||
<p class="text-lg sm:text-xl font-medium">{{
|
||||
menuStore.formatPrice(Number(checkoutStore.fullProductsPrice)) }}
|
||||
</p>
|
||||
<div
|
||||
class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-3 py-1 sm:px-6 sm:py-3">
|
||||
{{ $t("summary") }}
|
||||
</div>
|
||||
<div class="hidden sm:block sm:px-6 sm:py-3 sm:mx-auto">
|
||||
{{ $t("order_placed") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-[30px]">
|
||||
<div class="col-start-1 col-end-2 sm:col-end-3 space-y-5">
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.front_section_lang[0].data.product_list }}
|
||||
</h4>
|
||||
<div class="border-2 border-block rounded-[15px] p-[25px] sm:p-[50px] space-25-55">
|
||||
<div v-for="(item, index) in checkoutStore.products" :key="index">
|
||||
<div class="flex items-center h-[100px] sm:h-[150px]">
|
||||
<div class="min-w-[100px] sm:min-w-[150px] flex items-center justify-center h-[100px] sm:h-[150px]">
|
||||
<img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
|
||||
class="max-w-full max-h-full object-contain">
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm sm:text-xl">{{ component.front_section_lang[0].data.shipping_cost }}</p>
|
||||
<p class="text-lg sm:text-xl font-medium">{{
|
||||
menuStore.formatPrice(Number(checkoutStore.shippingPrice)) }}</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between uppercase text-lg sm:text-xl">
|
||||
<p>{{ component.front_section_lang[0].data.total }}</p>
|
||||
|
||||
<div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<h3
|
||||
class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
|
||||
{{ item.name }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex w-full justify-between gap-[10px]">
|
||||
<p
|
||||
class="text-accent-green-light dark:text-accent-green-dark font-inter text-xl sm:text-2xl leading-[150%] font-bold">
|
||||
{{ menuStore.formatPrice(Number(checkoutStore.fullPrice)) }}
|
||||
class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
||||
{{ item.total_price }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between mt-1 gap-[55px]">
|
||||
<div class="flex flex-col gap-1 text-white w-full">
|
||||
<div class="flex gap-3 text-black dark:text-white items-center">
|
||||
<input v-model="checkoutStore.vLegal" type="checkbox" id="first" name="first" />
|
||||
<!-- <label for="first" class="text-sm leading-snug">
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-start-1 col-end-2 sm:col-end-3 xl:col-auto flex flex-col sm:flex-row xl:flex-col items-center gap-[30px]">
|
||||
<div class="space-y-5 w-full">
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.front_section_lang[0].data.account_address }}
|
||||
</h4>
|
||||
<div
|
||||
class="border-2 border-block rounded-[8px] px-[25px] py-[15px] flex flex-col gap-1 text-sm sm:text-lg md:text-xl">
|
||||
<span>{{ checkoutStore.defaultAddress?.address.name }} {{
|
||||
checkoutStore.defaultAddress?.address.surname }}</span>
|
||||
<span>{{ checkoutStore.defaultAddress?.address.street }}</span>
|
||||
<span>{{ checkoutStore.defaultAddress?.address.postcode }} {{
|
||||
checkoutStore.defaultAddress?.address.city }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-5 w-full h-full">
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.front_section_lang[0].data.note }}
|
||||
</h4>
|
||||
<textarea id="1" v-model="checkoutStore.vNote"
|
||||
class="border-2 border-block rounded-[8px] p-[15px] w-full flex-1 resize-none placeholder:text-button"
|
||||
name="rty" :placeholder="component.front_section_lang[0].data.note"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-start-1 col-end-2 xl:col-end-3 space-y-5">
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.front_section_lang[0].data.delivery_type }}
|
||||
</h4>
|
||||
<div
|
||||
class="border-2 border-block rounded-[15px] p-[25px] sm:p-[50px] space-y-[25px] text-sm sm:text-lg md:text-xl">
|
||||
<div v-for="(delivery, index) in checkoutStore.deliveryOption" :key="index"
|
||||
class="flex flex-col cursor-pointer" @click="checkoutStore.setCurrentDelivery(delivery)">
|
||||
<div class="flex items-end justify-between">
|
||||
<div class="flex gap-[15px]">
|
||||
<div class="mt-1 w-4 h-4 border-2 border-button rounded-full">
|
||||
<div v-if="checkoutStore.currentDelivery === delivery"
|
||||
class="w-full h-full border-3 border-bg-light dark:border-bg-dark rounded-full bg-button">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span>{{ delivery.delivery_supplier_name }}</span>
|
||||
<span>{{ delivery.country_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-inter text-lg sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
||||
{{ menuStore.formatPrice(Number(delivery.shippment_price)) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-5 w-full flex flex-col h-full">
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.front_section_lang[0].data.payment_method }}
|
||||
</h4>
|
||||
<div
|
||||
class="border-2 border-block rounded-[8px] px-[25px] py-[25px] sm:py-[15px] flex-1 flex flex-col gap-1 text-sm sm:text-xl overflow-auto">
|
||||
<UCarousel :prev-icon="'i-lucide-chevron-left'" :next-icon="'i-lucide-chevron-right'" :ui="{
|
||||
viewport: 'h-full w-full',
|
||||
container: 'h-full w-full',
|
||||
item: 'h-full w-full pl-7',
|
||||
prev: '-start-8 sm:-start-12 ring-0 text-button disable:text-block p-0 ring-inset ring-accented bg-inherit disabled:bg-inherit',
|
||||
next: '-end-8 sm:-end-12 ring-0 text-button disable:text-block p-0 text-[30px] bg-inherit disabled:bg-inherit',
|
||||
arrows: '',
|
||||
}" :prev="{ size: 'xl' }" :next="{ size: 'xl' }" arrows :items="checkoutStore.paymentMethods"
|
||||
class="relative sm:max-w-full mx-4 sm:mx-10 h-full">
|
||||
<template #default="{ item }">
|
||||
<div class="flex flex-col items-start justify-between h-full leading-[250%] sm:leading-[150%]">
|
||||
<span>{{ item.bank_name }}</span>
|
||||
<span>{{ item.country_name }}</span>
|
||||
<span>{{ item.street_and_number }}</span>
|
||||
<span>{{ item.iban }}</span>
|
||||
<span>{{ item.swift }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</UCarousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full border-y-2 border-block p-[25px] flex flex-col gap-[15px]">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm sm:text-xl">
|
||||
{{ component.front_section_lang[0].data.subtotal }}
|
||||
</p>
|
||||
<p class="text-lg sm:text-xl font-medium">
|
||||
{{
|
||||
menuStore.formatPrice(Number(checkoutStore.fullProductsPrice)) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm sm:text-xl">
|
||||
{{ component.front_section_lang[0].data.shipping_cost }}
|
||||
</p>
|
||||
<p class="text-lg sm:text-xl font-medium">
|
||||
{{
|
||||
menuStore.formatPrice(Number(checkoutStore.shippingPrice)) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between uppercase text-lg sm:text-xl">
|
||||
<p>{{ component.front_section_lang[0].data.total }}</p>
|
||||
<p
|
||||
class="text-accent-green-light dark:text-accent-green-dark font-inter text-xl sm:text-2xl leading-[150%] font-bold">
|
||||
{{ menuStore.formatPrice(Number(checkoutStore.fullPrice)) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between mt-1 gap-[55px]">
|
||||
<div class="flex flex-col gap-1 text-white w-full">
|
||||
<div class="flex gap-3 text-black dark:text-white items-center">
|
||||
<input id="first" v-model="checkoutStore.vLegal" type="checkbox" name="first" />
|
||||
<!-- <label for="first" class="text-sm leading-snug">
|
||||
{{ $t("I accept ") }}
|
||||
<NuxtLink target="_blank"
|
||||
:to="{ name: 'lang-info-name', params: { lang: menuStore.selectedLanguage.iso_code, name: 'legal_statement.html' } }"
|
||||
@ -162,15 +175,17 @@
|
||||
{{ $t("the legal statement*") }}
|
||||
</NuxtLink>
|
||||
</label> -->
|
||||
<p class="text-sm sm:text-lg"> {{ $t("I accept ") }} {{ $t("the legal statement*") }}</p>
|
||||
</div>
|
||||
<span v-if="checkoutStore.legalValidation" class="text-xs text-red-600 ml-6">
|
||||
{{ $t("You need to accept this") }}
|
||||
</span>
|
||||
<p class="text-sm sm:text-lg">
|
||||
{{ $t("I accept ") }} {{ $t("the legal statement*") }}
|
||||
</p>
|
||||
</div>
|
||||
<span v-if="checkoutStore.legalValidation" class="text-xs text-red-600 ml-6">
|
||||
{{ $t("You need to accept this") }}
|
||||
</span>
|
||||
|
||||
<div class="flex gap-3 text-black dark:text-white items-center mt-2">
|
||||
<input v-model="checkoutStore.vTerms" type="checkbox" id="second" name="second" />
|
||||
<!-- <label for="second" class="text-sm leading-snug">
|
||||
<div class="flex gap-3 text-black dark:text-white items-center mt-2">
|
||||
<input id="second" v-model="checkoutStore.vTerms" type="checkbox" name="second" />
|
||||
<!-- <label for="second" class="text-sm leading-snug">
|
||||
{{ $t("I accept ") }}
|
||||
<NuxtLink target="_blank"
|
||||
:to="{ name: 'lang-info-name', params: { lang: menuStore.selectedLanguage.iso_code, name: 'general_terms_and_conditions.html' } }"
|
||||
@ -178,83 +193,27 @@
|
||||
{{ $t("general terms and conditions*") }}
|
||||
</NuxtLink>
|
||||
</label> -->
|
||||
<p class="text-sm sm:text-lg"> {{ $t("I accept ") }} {{ $t("general terms and conditions*") }}
|
||||
</p>
|
||||
</div>
|
||||
<span v-if="checkoutStore.termsValidation" class="text-xs text-red-600 ml-6">
|
||||
{{ $t("You need to accept this") }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm sm:text-lg">
|
||||
{{ $t("I accept ") }} {{ $t("general terms and conditions*") }}
|
||||
</p>
|
||||
</div>
|
||||
<span v-if="checkoutStore.termsValidation" class="text-xs text-red-600 ml-6">
|
||||
{{ $t("You need to accept this") }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<UiButtonArrow @click="checkoutStore.sendSummaryForm" type="fill" :arrow="true">
|
||||
{{ $t("Buy") }}
|
||||
</UiButtonArrow>
|
||||
</div>
|
||||
<div
|
||||
class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-3 py-1 sm:px-6 sm:py-3">
|
||||
{{ $t("summary") }}
|
||||
</div>
|
||||
<div class="hidden sm:block sm:px-6 sm:py-3 sm:mx-auto">
|
||||
{{ $t("order_placed") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-[30px]">
|
||||
<div class="col-start-1 col-end-3 space-y-5">
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
Seznam produktů
|
||||
</h4>
|
||||
<div class="border-2 border-block rounded-2xl p-[50px] space-25-55">
|
||||
<div v-for="(item, index) in checkoutStore.products" :key="index">
|
||||
<div class="flex items-center h-[150px]">
|
||||
<div class="min-w-[150px] flex items-center justify-center h-[150px]">
|
||||
<img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
|
||||
class="max-w-full max-h-full object-contain">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<h3
|
||||
class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
|
||||
{{ item.name }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex w-full justify-between gap-[10px]">
|
||||
<p
|
||||
class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
||||
{{ item.total_price }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="space-y-5">
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
Adresa účtu
|
||||
</h4>
|
||||
<div class="border-2 border-block rounded-2xl px-2 py-3 flex flex-col gap-1">
|
||||
<span>{{ checkoutStore.defaultAddress?.address.name }}
|
||||
{{ checkoutStore.defaultAddress?.address.surname }}</span>
|
||||
<span>{{ checkoutStore.defaultAddress?.address.street }}</span>
|
||||
<span>{{ checkoutStore.defaultAddress?.address.postcode }}
|
||||
{{ checkoutStore.defaultAddress?.address.city }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UiContainer>
|
||||
<UiButtonArrow type="fill" :arrow="true" @click="checkoutStore.sendSummaryForm">
|
||||
{{ $t("Buy") }}
|
||||
</UiButtonArrow>
|
||||
</div>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { UCarousel } from '#components';
|
||||
import { UCarousel } from '#components'
|
||||
|
||||
const checkoutStore = useCheckoutStore();
|
||||
const productStore = useProductStore()
|
||||
const checkoutStore = useCheckoutStore()
|
||||
const menuStore = useMenuStore()
|
||||
|
||||
checkoutStore.getOrder()
|
||||
@ -264,30 +223,30 @@ checkoutStore.getDeliveryOptions()
|
||||
checkoutStore.getDefAddress()
|
||||
|
||||
defineProps<{
|
||||
component: {
|
||||
id: number
|
||||
name: string
|
||||
img: string[]
|
||||
component_name: string
|
||||
is_no_lang: boolean
|
||||
page_name: string
|
||||
front_section_lang: {
|
||||
data: {
|
||||
product_list: string
|
||||
account_address: string
|
||||
note: string
|
||||
delivery_type: string
|
||||
payment_method: string
|
||||
subtotal: string
|
||||
shipping_cost: string
|
||||
total: string
|
||||
accept: string
|
||||
legal: string
|
||||
terms: string
|
||||
}
|
||||
id_front_section: number
|
||||
id_lang: number
|
||||
}[]
|
||||
}
|
||||
}>();
|
||||
component: {
|
||||
id: number
|
||||
name: string
|
||||
img: string[]
|
||||
component_name: string
|
||||
is_no_lang: boolean
|
||||
page_name: string
|
||||
front_section_lang: {
|
||||
data: {
|
||||
product_list: string
|
||||
account_address: string
|
||||
note: string
|
||||
delivery_type: string
|
||||
payment_method: string
|
||||
subtotal: string
|
||||
shipping_cost: string
|
||||
total: string
|
||||
accept: string
|
||||
legal: string
|
||||
terms: string
|
||||
}
|
||||
id_front_section: number
|
||||
id_lang: number
|
||||
}[]
|
||||
}
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@ -1,15 +1,10 @@
|
||||
<template>
|
||||
<UiContainer v-if="!userStore.vCodeVerify"
|
||||
class="flex py-20 sm:py-14"
|
||||
>
|
||||
<div
|
||||
class="hidden xl:block rounded-2xl min-w-[60%] h-[830px]"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
/>
|
||||
<UiContainer v-if="!userStore.vCodeVerify" class="flex py-20 sm:py-14">
|
||||
<div class="hidden xl:block rounded-2xl min-w-[60%] h-[830px]" :style="{
|
||||
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}" />
|
||||
<div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12">
|
||||
<div class="space-25-55">
|
||||
<div class="flex flex-wrap-reverse gap-y-4 justify-between">
|
||||
@ -18,8 +13,7 @@
|
||||
</h2>
|
||||
<button
|
||||
class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer"
|
||||
@click="menuStore.navigateToItem()"
|
||||
>
|
||||
@click="menuStore.navigateToItem()">
|
||||
{{ $t("back_to_home") }}
|
||||
</button>
|
||||
</div>
|
||||
@ -27,37 +21,22 @@
|
||||
<p class="pl-6">
|
||||
{{ $t("email") }}
|
||||
</p>
|
||||
<input
|
||||
v-model="userStore.email"
|
||||
:placeholder="$t('email')"
|
||||
type="text"
|
||||
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
|
||||
>
|
||||
<input v-model="userStore.email" :placeholder="$t('email')" type="text"
|
||||
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2">
|
||||
</div>
|
||||
<div class="space-y-[15px]">
|
||||
<p class="pl-6">
|
||||
{{ $t("password") }}
|
||||
</p>
|
||||
<input
|
||||
v-model="userStore.password"
|
||||
:placeholder="$t('placeholder_password')"
|
||||
type="text"
|
||||
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
|
||||
>
|
||||
<input v-model="userStore.password" :placeholder="$t('placeholder_password')" type="text"
|
||||
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2">
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
class="text-button hover:text-button-hover transition-all font-medium mt-[30px] cursor-pointer"
|
||||
>
|
||||
<p class="text-button hover:text-button-hover transition-all font-medium mt-[30px] cursor-pointer">
|
||||
{{ $t("forgot_password_question") }}
|
||||
</p>
|
||||
<div
|
||||
class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full"
|
||||
>
|
||||
<UiButtonArrow type="fill"
|
||||
:arrow="true"
|
||||
@click="userStore.logIn()"
|
||||
>
|
||||
<div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
|
||||
<UiButtonArrow type="fill" :arrow="true" @click="userStore.logIn()">
|
||||
{{
|
||||
$t("login")
|
||||
}}
|
||||
@ -74,17 +53,12 @@
|
||||
</div>
|
||||
</UiContainer>
|
||||
|
||||
<UiContainer v-if="userStore.vCodeVerify"
|
||||
class="flex py-20 sm:py-14"
|
||||
>
|
||||
<div
|
||||
class="hidden xl:block rounded-2xl min-w-[60%] h-[830px]"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
/>
|
||||
<UiContainer v-if="userStore.vCodeVerify" class="flex py-20 sm:py-14">
|
||||
<div class="hidden xl:block rounded-2xl min-w-[60%] h-[830px]" :style="{
|
||||
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}" />
|
||||
<div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12">
|
||||
<div class="space-25-55">
|
||||
<div class="flex flex-wrap-reverse gap-y-4 justify-between">
|
||||
@ -93,8 +67,7 @@
|
||||
</h2>
|
||||
<button
|
||||
class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer"
|
||||
@click="menuStore.navigateToItem()"
|
||||
>
|
||||
@click="menuStore.navigateToItem()">
|
||||
{{ $t("back_to_home") }}
|
||||
</button>
|
||||
</div>
|
||||
@ -108,21 +81,13 @@
|
||||
<p class="pl-6">
|
||||
{{ $t("code") }}
|
||||
</p>
|
||||
<input
|
||||
v-model="userStore.vCode"
|
||||
:placeholder="$t('code')"
|
||||
type="text"
|
||||
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
|
||||
>
|
||||
<input v-model="userStore.vCode" :placeholder="$t('code')" type="text"
|
||||
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-[25px] sm:py-12 flex justify-center w-full">
|
||||
<UiButtonArrow
|
||||
type="fill"
|
||||
:arrow="true"
|
||||
@click="userStore.sendFormCode(true)"
|
||||
>
|
||||
<UiButtonArrow type="fill" :arrow="true" @click="userStore.sendFormCode(true)">
|
||||
{{ $t("confirm") }}
|
||||
</UiButtonArrow>
|
||||
</div>
|
||||
@ -140,7 +105,6 @@ defineProps<{
|
||||
is_no_lang: boolean
|
||||
page_name: string
|
||||
front_section_lang: {
|
||||
data: {}
|
||||
id_front_section: number
|
||||
id_lang: number
|
||||
}[]
|
||||
|
||||
@ -1,54 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<nuxt-link
|
||||
:to="{
|
||||
name: `id-slug___${$i18n.locale}`,
|
||||
params: {
|
||||
id: menuStore.getProductMenu()?.id,
|
||||
slug: menuStore.getProductMenu()?.front_menu_lang.at(0)?.link_rewrite,
|
||||
},
|
||||
query: {
|
||||
prod_id: props.product?.id,
|
||||
name: props.product?.link_rewrite,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<nuxt-link :to="{
|
||||
name: `id-slug___${$i18n.locale}`,
|
||||
params: {
|
||||
id: menuStore.getProductMenu()?.id,
|
||||
slug: menuStore.getProductMenu()?.front_menu_lang.at(0)?.link_rewrite,
|
||||
},
|
||||
query: {
|
||||
prod_id: product.id,
|
||||
name: product.link_rewrite,
|
||||
},
|
||||
}">
|
||||
<div
|
||||
class="w-[150px] sm:w-[260px] md:w-[330px] px-2 py-3 sm:py-5 sm:px-[15px] bg-block rounded-2xl flex flex-col items-center gap-[15px] sm:gap-[50px]"
|
||||
>
|
||||
<img
|
||||
:src="`/api/public/file/${props.product?.cover_picture_uuid}.webp`"
|
||||
alt="Product Image"
|
||||
class="h-[95px] sm:h-[180px] md:h-[205px] rounded-[5px]"
|
||||
onerror="this.onerror=null; this.src='/photo.svg';"
|
||||
>
|
||||
class="w-[150px] sm:w-[260px] md:w-[330px] px-2 py-3 sm:py-5 sm:px-[15px] bg-block rounded-2xl flex flex-col items-center gap-[15px] sm:gap-[50px] h-full">
|
||||
<img :src="`/api/public/file/${product.cover_picture_uuid}.webp`" alt="Product Image"
|
||||
class="h-[95px] sm:h-[180px] md:h-[205px] rounded-[5px]" @error="handleImageError" />
|
||||
|
||||
<div
|
||||
class="flex flex-col justify-between h-full w-full gap-[7px] sSm:gap-[15px]"
|
||||
>
|
||||
<div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px]">
|
||||
<div class="flex flex-col gap-[7px] sm:gap-[15px] w-full">
|
||||
<h3
|
||||
class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark"
|
||||
>
|
||||
{{ props.product?.name }}
|
||||
class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
|
||||
{{ product.name }}
|
||||
</h3>
|
||||
<p class="text-[9px] sm:text-[12px] text-sm text-bg-dark">
|
||||
{{ props.product?.tax_name }}
|
||||
{{ product.tax_name }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<p
|
||||
class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold"
|
||||
>
|
||||
{{ props.product?.formatted_price }}
|
||||
class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
||||
{{ product.formatted_price }}
|
||||
</p>
|
||||
<button
|
||||
class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] text-bg-light sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1"
|
||||
@click.self="productStore.incrementCartItem(props.product?.id)"
|
||||
>
|
||||
<i
|
||||
class="uil uil-shopping-cart text-lg sm:text-2xl md:text-[31px] cursor-pointer"
|
||||
/>
|
||||
@click.stop.prevent="productStore.incrementCartItem(product.id)">
|
||||
<i class="uil uil-shopping-cart text-lg sm:text-2xl md:text-[31px]" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -58,17 +44,22 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
product: Object,
|
||||
})
|
||||
interface Product {
|
||||
id: number
|
||||
name: string
|
||||
link_rewrite: string
|
||||
tax_name: string
|
||||
formatted_price: string
|
||||
cover_picture_uuid: string
|
||||
}
|
||||
|
||||
defineProps<{ product: Product }>()
|
||||
|
||||
const productStore = useProductStore()
|
||||
const menuStore = useMenuStore()
|
||||
|
||||
const isError = ref(false);
|
||||
|
||||
function handleImageError(event: Event) {
|
||||
isError.value = true;
|
||||
(event.target as HTMLImageElement).src = '/photo.svg';
|
||||
const img = event.target as HTMLImageElement
|
||||
img.src = '/photo.svg'
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -248,17 +248,6 @@ const goRight = () => {
|
||||
curImage.value = product.value.picture_uuids[0]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* INSERT INTO `front_page` (`created_at`, `updated_at`, `name`, `is_default`, `id`) VALUES ('2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','product','0','13');
|
||||
* INSERT INTO `front_menu` (`created_at`, `updated_at`, `active`, `position_id`, `id_front_page`, `is_default`, `is_root`, `id`) VALUES ('2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','1','1','13','0','0','13');
|
||||
* INSERT INTO `front_menu_lang` (`name`, `id_lang`, `id_front_menu`, `link_rewrite`) VALUES ('Product','2','13','product');
|
||||
* INSERT INTO `front_menu_lang` (`link_rewrite`, `id_front_menu`, `id_lang`, `name`) VALUES ('produkt','13','1','Produkt');
|
||||
* INSERT INTO `front_menu_lang` (`name`, `id_lang`, `id_front_menu`, `link_rewrite`) VALUES ('Produkt','3','13','produkt');
|
||||
* INSERT INTO `front_section` (`id`, `created_at`, `updated_at`, `name`, `img`, `component_name`, `is_no_lang`) VALUES ('32','2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','product','[]','ProductBlock','1');
|
||||
* INSERT INTO `front_page_section` (`id_front_page`, `id_position`, `id_front_section`) VALUES ('13','1','32');
|
||||
* INSERT INTO `front_page_section` (`id_front_page`, `id_position`, `id_front_section`) VALUES ('13','2','4');
|
||||
*/
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -8,89 +8,50 @@
|
||||
<div class="xl:hidden flex items-center w-full">
|
||||
<button
|
||||
class="h-[40px] w-full cursor-pointer rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px] bg-button text-text-dark group-hover:bg-button-hover"
|
||||
@click="openCategories = !openCategories"
|
||||
>
|
||||
@click="openCategories = !openCategories">
|
||||
Otevřené kategorie a filtry
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Transition>
|
||||
<div v-if="openCategories"
|
||||
class="min-w-[250px] px-5 sm:p-0 xl:hidden"
|
||||
>
|
||||
<h1
|
||||
class="font-bounded leading-[140%] font-bold text-[24px] mb-[25px]"
|
||||
>
|
||||
<div v-if="openCategories" class="min-w-[250px] px-5 sm:p-0 xl:hidden">
|
||||
<h1 class="font-bounded leading-[140%] font-bold text-[24px] mb-[25px]">
|
||||
{{ $t("category") }}
|
||||
</h1>
|
||||
<div class="flex flex-col gap-[25px]">
|
||||
<div>
|
||||
<div
|
||||
v-if="categoriesList && categoriesList.length < 1"
|
||||
class="animate-pulse"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24"
|
||||
>
|
||||
<div v-if="categoriesList && categoriesList.length < 1" class="animate-pulse">
|
||||
<div class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24">
|
||||
<div class="w-32 h-4 bg-gray-200 rounded" />
|
||||
<div class="w-4 h-4 bg-gray-200 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<CategoryTree
|
||||
:data="categoriesList"
|
||||
:active="categoryId"
|
||||
@change-category="changeCategory($event)"
|
||||
/>
|
||||
<CategoryTree :data="categoriesList" :active="categoryId" @change-category="changeCategory($event)" />
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
class="mb-[25px] text-lg font-extrabold text-black dark:text-white"
|
||||
>
|
||||
<p class="mb-[25px] text-lg font-extrabold text-black dark:text-white">
|
||||
{{ $t("filtered_by") }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-for="(item, itemIndex) in filters"
|
||||
:key="itemIndex"
|
||||
:class="[
|
||||
'mb-[30px]',
|
||||
visibleFeatures[item.feature] && 'border-b border-block pb-2',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
class="flex justify-between items-center font-bold cursor-pointer mb-[25px] text-base"
|
||||
@click="toggleFeature(item.feature)"
|
||||
>
|
||||
<div v-for="(item, itemIndex) in filters" :key="itemIndex" :class="[
|
||||
'mb-[30px]',
|
||||
visibleFeatures[item.feature] && 'border-b border-block pb-2',
|
||||
]">
|
||||
<span class="flex justify-between items-center font-bold cursor-pointer mb-[25px] text-base"
|
||||
@click="toggleFeature(item.feature)">
|
||||
{{ item.feature }}
|
||||
<span
|
||||
:class="[
|
||||
visibleFeatures[item.feature] && 'rotate-180',
|
||||
'transition-all',
|
||||
]"
|
||||
><i
|
||||
class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto"
|
||||
/></span>
|
||||
<span :class="[
|
||||
visibleFeatures[item.feature] && 'rotate-180',
|
||||
'transition-all',
|
||||
]"><i class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto" /></span>
|
||||
</span>
|
||||
<ul
|
||||
v-show="visibleFeatures[item.feature]"
|
||||
class="flex flex-col gap-5"
|
||||
>
|
||||
<li
|
||||
v-for="filter in item.feature_values"
|
||||
:key="filter.value_id"
|
||||
class="flex items-center gap-[10px] cursor-pointer"
|
||||
>
|
||||
<input
|
||||
:id="`${filter.value_id}`"
|
||||
v-model="selectedFilters"
|
||||
:value="`${filter.parent}.${filter.value_id}`"
|
||||
type="checkbox"
|
||||
class="border-button !bg-inherit"
|
||||
>
|
||||
<label
|
||||
:for="`${filter.value_id}`"
|
||||
class="cursor-pointer flex items-center justify-between w-full text-base"
|
||||
>
|
||||
<ul v-show="visibleFeatures[item.feature]" class="flex flex-col gap-5">
|
||||
<li v-for="filter in item.feature_values" :key="filter.value_id"
|
||||
class="flex items-center gap-[10px] cursor-pointer">
|
||||
<input :id="`${filter.value_id}`" v-model="selectedFilters"
|
||||
:value="`${filter.parent}.${filter.value_id}`" type="checkbox" class="border-button !bg-inherit">
|
||||
<label :for="`${filter.value_id}`"
|
||||
class="cursor-pointer flex items-center justify-between w-full text-base">
|
||||
<span>{{ filter.value }}</span>
|
||||
<span>12</span>
|
||||
</label>
|
||||
@ -109,22 +70,13 @@
|
||||
</h1>
|
||||
<div class="flex flex-col gap-12">
|
||||
<div>
|
||||
<div
|
||||
v-if="categoriesList && categoriesList.length < 1"
|
||||
class="animate-pulse"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24"
|
||||
>
|
||||
<div v-if="categoriesList && categoriesList.length < 1" class="animate-pulse">
|
||||
<div class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24">
|
||||
<div class="w-32 h-4 bg-gray-200 rounded" />
|
||||
<div class="w-4 h-4 bg-gray-200 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<CategoryTree
|
||||
:data="categoriesList"
|
||||
:active="categoryId"
|
||||
@change-category="changeCategory($event)"
|
||||
/>
|
||||
<CategoryTree :data="categoriesList" :active="categoryId" @change-category="changeCategory($event)" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-10 text-2xl font-extrabold text-black dark:text-white">
|
||||
@ -139,52 +91,28 @@
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div
|
||||
v-for="(item, itemIndex) in filters"
|
||||
:key="itemIndex"
|
||||
:class="[
|
||||
'mb-[30px]',
|
||||
visibleFeatures[item.feature] && 'border-b border-block pb-2',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
class="flex justify-between items-center font-bold cursor-pointer mb-[25px]"
|
||||
@click="toggleFeature(item.feature)"
|
||||
>
|
||||
<div v-for="(item, itemIndex) in filters" :key="itemIndex" :class="[
|
||||
'mb-[30px]',
|
||||
visibleFeatures[item.feature] && 'border-b border-block pb-2',
|
||||
]">
|
||||
<span class="flex justify-between items-center font-bold cursor-pointer mb-[25px]"
|
||||
@click="toggleFeature(item.feature)">
|
||||
{{ item.feature }}
|
||||
<span
|
||||
:class="[
|
||||
visibleFeatures[item.feature] && 'rotate-180',
|
||||
'transition-all',
|
||||
]"
|
||||
><i
|
||||
class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto"
|
||||
/></span>
|
||||
<span :class="[
|
||||
visibleFeatures[item.feature] && 'rotate-180',
|
||||
'transition-all',
|
||||
]"><i class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto" /></span>
|
||||
</span>
|
||||
<ul
|
||||
v-show="visibleFeatures[item.feature]"
|
||||
class="flex flex-col gap-5"
|
||||
>
|
||||
<li
|
||||
v-for="filter in item.feature_values"
|
||||
:key="filter.value_id"
|
||||
class="flex items-center gap-[10px] cursor-pointer"
|
||||
>
|
||||
<ul v-show="visibleFeatures[item.feature]" class="flex flex-col gap-5">
|
||||
<li v-for="filter in item.feature_values" :key="filter.value_id"
|
||||
class="flex items-center gap-[10px] cursor-pointer">
|
||||
<!-- <input :id="`${filter.value_id}`" :value="`${filter.parent}.${filter.value_id}`"
|
||||
v-model="selectedFilters" type="checkbox" class="border-button !bg-inherit" />
|
||||
<label :for="`${filter.value_id}`" class="cursor-pointer">{{ filter.value }}</label> -->
|
||||
|
||||
<input
|
||||
:id="`${filter.value_id}`"
|
||||
v-model="selectedFilters"
|
||||
:value="`${filter.parent}.${filter.value_id}`"
|
||||
type="checkbox"
|
||||
class="border-button !bg-inherit"
|
||||
>
|
||||
<label
|
||||
:for="`${filter.value_id}`"
|
||||
class="cursor-pointer flex items-center justify-between w-full"
|
||||
>
|
||||
<input :id="`${filter.value_id}`" v-model="selectedFilters"
|
||||
:value="`${filter.parent}.${filter.value_id}`" type="checkbox" class="border-button !bg-inherit">
|
||||
<label :for="`${filter.value_id}`" class="cursor-pointer flex items-center justify-between w-full">
|
||||
<span>{{ filter.value }}</span>
|
||||
<span>12</span>
|
||||
</label>
|
||||
@ -197,57 +125,33 @@
|
||||
|
||||
<div class="w-full space-y-10">
|
||||
<!-- pop-up -->
|
||||
<div
|
||||
v-if="isInfo"
|
||||
class="w-full xl:w-[70%] mx-auto border-y border-block py-[15px] sm:p-[30px] flex gap-[55px] relative"
|
||||
>
|
||||
<UButton
|
||||
variant="ghost"
|
||||
class="p-0 absolute right-0 top-2 sm:right-2 sm:top-2 cursor-pointer text-button font-light hover:bg-inherit hover:text-button-hover"
|
||||
size="xl"
|
||||
icon="i-lucide-x"
|
||||
@click="closeElement()"
|
||||
/>
|
||||
<div v-if="isInfo"
|
||||
class="w-full xl:w-[70%] mx-auto border-y border-block py-[15px] sm:p-[30px] flex gap-[55px] relative">
|
||||
<UButton variant="ghost"
|
||||
class="p-0 absolute right-0 top-2 sm:right-2 sm:top-2 cursor-pointer text-button font-light hover:bg-inherit hover:text-button-hover"
|
||||
size="xl" icon="i-lucide-x" @click="closeElement()" />
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-[25px]">
|
||||
<div class="flex flex-col justify-between gap-[25px]">
|
||||
<h4
|
||||
class="font-inter text-lg sm:text-[24px] leading-[150%] md:leading-[120%] font-bold"
|
||||
>
|
||||
<h4 class="font-inter text-lg sm:text-[24px] leading-[150%] md:leading-[120%] font-bold">
|
||||
{{ component.front_section_lang[0].data.title }}
|
||||
</h4>
|
||||
<p>{{ component.front_section_lang[0].data.description }}</p>
|
||||
</div>
|
||||
<img
|
||||
class="max-w-[150px] mx-auto"
|
||||
:src="`/api/public/file/${component.img[0]}_m.webp')`"
|
||||
>
|
||||
<img class="max-w-[150px] mx-auto" :src="`/api/public/file/${component.img[0]}_m.webp')`">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="products.length < 1"
|
||||
class="grid gap-12 pt-32 pb-16 md:grid-cols-2 2xl:grid-cols-3"
|
||||
>
|
||||
<div v-if="products.length < 1" class="grid gap-12 pt-32 pb-16 md:grid-cols-2 2xl:grid-cols-3">
|
||||
<!-- <TheProductSkeleton v-for="index in 6" :key="index" /> -->
|
||||
</div>
|
||||
|
||||
<!-- products -->
|
||||
<div
|
||||
v-else
|
||||
ref="loadingElement"
|
||||
class="flex flex-wrap justify-center gap-5 sm:gap-10"
|
||||
>
|
||||
<Product
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:product="product"
|
||||
/>
|
||||
<div v-else ref="loadingElement" class="flex flex-wrap justify-center gap-5 sm:gap-10">
|
||||
<Product v-for="product in products" :key="product.id" :product="product" />
|
||||
</div>
|
||||
|
||||
<div v-if="reachedEnd"
|
||||
class="w-full flex justify-center"
|
||||
>
|
||||
<div v-if="reachedEnd" class="w-full flex justify-center">
|
||||
<p>
|
||||
{{ $t("FrontTranslations", "You reached end of the list.") }}
|
||||
</p>
|
||||
@ -297,7 +201,7 @@ defineProps<{
|
||||
|
||||
const openCategories = ref(false)
|
||||
const isInfo = ref<boolean>(true)
|
||||
const selectedFilters = ref<any>([])
|
||||
const selectedFilters = ref<string[]>([])
|
||||
const categoryId = ref<number>(1)
|
||||
|
||||
const loading = ref(false)
|
||||
@ -482,7 +386,12 @@ async function loadMoreProducts() {
|
||||
}
|
||||
}
|
||||
|
||||
const changeCategory = (item: any) => {
|
||||
interface CategoryItem {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
|
||||
const changeCategory = (item: CategoryItem) => {
|
||||
categoryId.value = item.id
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user