yakovenko_arina/your-gold
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: yakovenko_arina:7b0d9b9c7b0c26e7b757b568c94e0a5f01a9caef
Branches Tags
yakovenko_arina:main yakovenko_arina:img_button
...
compare: yakovenko_arina:7d0a449a1ee425850f2d9339b566109ffb429c34
Branches Tags
yakovenko_arina:main yakovenko_arina:img_button

3 Commits
7b0d9b9c7b ... 7d0a449a1e

Author SHA1 Message Date
Arina Yakovenko
7d0a449a1e additions to product page 2025-06-23 15:54:55 +02:00
Arina Yakovenko
77a490a94d product page 2025-06-17 15:57:00 +02:00
Arina Yakovenko
35575eda6f shop 2025-06-17 12:00:32 +02:00
18 changed files with 964 additions and 91 deletions
Expand all files Collapse all files

12
components/CartPopup.vue Normal file
View File

@ -0,0 +1,12 @@
<template>
<div class="p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-2xl">
<div class="" v-if="productStore.productList">
{{ productStore.productList }}
</div>
<UiButtonArrow class="w-full" type="fill" :arrow="true">Přejít k pokladně</UiButtonArrow>
</div>
</template>
<script lang="ts" setup>
const productStore = useProductStore()
</script>

17
components/HeaderBlock.vue
View File

@ -2,7 +2,7 @@
<div>
<!-- xl -->
<div class="w-full border-b border-border">
<UiContainer>
<UiContainer class="relative">
<div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
<ul class="flex items-center justify-between whitespace-nowrap w-full">
<li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="index"
@ -18,18 +18,21 @@
<div class="w-full flex items-center justify-between">
<div class="flex items-center gap-[30px]">
<i class="uil uil-user text-[31px] cursor-pointer"></i>
<i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
<i @click="openCart = !openCart" class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
</div>
<div class="flex">
<LangSwitcher />
<CountryCurrencySelector />
</div>
<ThemeSwitcher />
<button
<button @click="menuStore.navigateToShop"
class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all text-inter">
E-shop
{{ $t('eshop') }}
</button>
</div>
<div v-if="openCart" class="max-w-[1067px] absolute top-[130px] z-50 right-20">
<CartPopup />
</div>
</div>
</UiContainer>
</div>
@ -209,15 +212,19 @@
</div>
</template>
<script lang="ts" setup>
import CartPopup from "./CartPopup.vue";
import CountryCurrencySelector from "./CountryCurrencySelector.vue";
import LangSwitcher from "./LangSwitcher.vue";
const menuStore = useMenuStore();
const productStore = useProductStore();
const open = ref(false);
const openCart = ref(false);
const colorMode = useColorMode();
const route = useRoute()
productStore.getCart()
const route = useRoute()
const isDark = computed({
get() {
return colorMode.value === "dark";

2
components/section/investment-page/InvestmentZone.vue
View File

@ -52,7 +52,7 @@
</div>
</div>
<UiButtonArrow :arrow="true" class="mx-auto" type="fill">E-shop</UiButtonArrow>
<UiButtonArrow :arrow="true" class="mx-auto" type="fill">{{ $t('eshop') }}</UiButtonArrow>
</div>
<!-- calculator-block -->

18
components/section/login-page/LoginMain.vue
View File

@ -7,7 +7,7 @@
}" />
<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 justify-between">
<div class="flex flex-wrap-reverse gap-y-4 justify-between">
<h2 class="h2-bold-bounded">{{ $t('login') }}</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">{{
@ -15,28 +15,28 @@
</div>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('email') }}</p>
<input :placeholder="$t('email')" type="text"
<input v-model="store.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 :placeholder="$t('placeholder_password')" type="text"
<input v-model="store.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">{{
$t('forgot_password_question')
}}</p>
}}</p>
<div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
<UiButtonArrow type="fill" :arrow="true">{{ $t('login') }}</UiButtonArrow>
<UiButtonArrow @click="store.logIn()" type="fill" :arrow="true">{{ $t('login') }}</UiButtonArrow>
</div>
<div class="mt-[25px] sm:mt-[30px] w-full flex justify-center gap-3">
<p class="cursor-pointer hover:underline transition-all">{{
$t('no_account')
}}</p>
}}</p>
<p class="text-button cursor-pointer hover:text-button-hover">{{
$t('sign_up_now')
}}</p>
}}</p>
</div>
</div>
</UiContainer>
@ -49,4 +49,6 @@ type Component = {
section_id: string;
section_img: string;
section_lang_data: {};
};</script>
};
const store = useStore()
</script>

42
components/section/main-page/MainProducts.vue
View File

@ -1,27 +1,17 @@
<template>
<UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
<div
:class="[
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
]"
>
<div :class="[
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
]">
<!-- product -->
<div
v-for="(item, index) in productStore.productList"
:key="index"
class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
>
<img
:src="`https://www.yourgold.cz/api/public/file/${item.cover_picture_uuid}.webp`"
alt="pics"
class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]"
/>
<div v-for="(item, index) in productStore.productList" :key="index"
class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-7">
<img :src="`https://www.yourgold.cz/api/public/file/${item.cover_picture_uuid}.webp`" alt="pics"
class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]" />
<div class="flex flex-col justify-between h-full">
<div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
<h3
class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[150%] text-bg-dark"
>
<h3 class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[150%] text-bg-dark">
{{ item.name }}
</h3>
<p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
@ -33,24 +23,19 @@
{{ item.formatted_price }}
</p>
<button
class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center"
>
<i
class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"
></i>
class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center">
<i class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"></i>
</button>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-6 md:flex-row items-center justify-between">
<h3
class="h4-uppercase-bold-inter w-full text-center md:text-start xl:max-w-[50%]"
>
<h3 class="h4-uppercase-bold-inter w-full text-center md:text-start xl:max-w-[50%]">
Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
vás ochrání zítra
</h3>
<UiButtonArrow type="fill" :arrow="true">E-shop</UiButtonArrow>
<UiButtonArrow @click="menuStore.navigateToShop" type="fill" :arrow="true">{{ $t('eshop') }}</UiButtonArrow>
</div>
</UiContainer>
</template>
@ -72,6 +57,7 @@ type Component = {
];
};
const menuStore = useMenuStore()
const itemCount = ref(4);
const productStore = useProductStore();

93
components/section/registration-page/RegistrationMain.vue
View File

@ -1,5 +1,5 @@
<template>
<UiContainer class="flex py-20 sm:py-14">
<UiContainer class="flex py-[15px] xl:py-20 sm:py-0">
<div class="hidden xl:block rounded-2xl min-w-[40%] h-[830px]" :style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
backgroundSize: 'cover',
@ -13,62 +13,96 @@
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">{{
$t('back_to_home') }}</button>
</div>
<div class="space-y-[30px]">
<div class="space-y-[25px] sm:space-y-[30px]">
<p>Obecné informace</p>
<div class="grid grid-cols-2 gap-[30px]">
<div class="grid grid-cols-1 md:grid-cols-2 gap-[30px]">
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('first_name') }}</p>
<input :placeholder="$t('first_name')" 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" />
class="text-sm sm:text-xl 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('last_name') }}</p>
<input :placeholder="$t('last_name')" 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" />
class="text-sm sm:text-xl 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('email') }}</p>
<input :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" />
class="text-sm sm:text-xl 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]">
<div class="space-y-[15px]" ref="dropdownRef">
<p class="pl-6">{{ $t('phone') }}</p>
<div class="flex items-center border-2 border-block rounded-lg">
<div
class="relative z-50 bg-inherit ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
class="relative z-50 bg-inherit ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
<div class="px-[25px]" @click="dropCountry = !dropCountry">
<div
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
{{ menuStore.selectedPhoneCountry.name }} <span> <i
class="flex items-center gap-2 text-sm sm:text-xl uppercase text-text-light dark:text-text-dark">
<span :class="[dropCountry && 'rotate-180', 'transition-all']"> <i
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
<p class="text-sm sm:text-xl">
{{ menuStore.selectedPhoneCountry.iso_code }}
</p>
</div>
</div>
<div v-if="dropCountry"
class="absolute bg-bg-light rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
<div class="overflow-auto h-[200px] w-full">
<p @click="() => {
class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-full border border-button py-[10px] px-[5px] overflow-hidden">
<div class="overflow-y-auto h-[200px] w-full">
<p v-for="item in menuStore.countryList" @click="() => {
menuStore.selectedPhoneCountry = item
dropCountry = false
}" class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
v-for="item in menuStore.countryList">
}" class="w-full truncate whitespace-nowrap overflow-hidden hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
:title="item.name">
{{ item.name }}
</p>
</div>
</div>
</div>
{{ menuStore.selectedPhoneCountry.call_prefix }}
<p class="text-sm sm:text-xl font-normal">{{ menuStore.selectedPhoneCountry.call_prefix
}}</p>
<input :placeholder="$t('phone')" type="text"
class="placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0" />
class="text-sm sm:text-xl placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0" />
</div>
</div>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('email') }}</p>
<input :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" />
<p class="pl-6">{{ $t('account_type') }}</p>
<USelect v-model="selectedType" :items="component.section_lang_data.account_types"
value-key="name" :searchable="false" :ui="{
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
trailing: 'hidden w-full',
viewport: 'ring-0 min-w-full',
content: 'bg-bg-light dark:bg-bg-dark ring-0 border border-button',
leading:
'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0 w-full',
group: 'px-[5px] py-[10px]',
item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 min-w-full',
}">
<template #leading="{ modelValue }">
<div
class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]">
<p class="truncate whitespace-nowrap">
{{component.section_lang_data.account_types.find((item) => item.name ===
modelValue)?.name}}</p>
<span> <i
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
</div>
</template>
<template #item="{ item }">
<div class="flex items-center gap-2 cursor-pointer min-w-full">
<p
class="truncate whitespace-nowrap text-sm sm:text-xl font-medium uppercase text-text-light dark:text-text-dark opacity-100">
{{ item.name }}
</p>
</div>
</template>
</USelect>
</div>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('password') }}</p>
<p class="pl-6">{{ $t('partner_code') }}</p>
<input :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>
@ -91,13 +125,26 @@
</template>
<script lang="ts" setup>
defineProps<{ component: Component }>();
import { onClickOutside } from "@vueuse/core";
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {};
section_lang_data: {
account_types: [{
id: number,
name: string
}]
};
};
const menuStore = useMenuStore()
const dropdownRef = ref(null);
const dropCountry = ref()
const selectedType = ref(props.component.section_lang_data.account_types[0].name)
onClickOutside(dropdownRef, () => {
dropCountry.value = false
});
</script>

46
components/section/shop-page/CategoryTree.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<div v-if="hasMainCategory" :class="['flex flex-col gap-[25px]', isOpen && 'border-b border-block pb-[10px]']">
<div @click="toggle" class="flex items-center justify-between rounded-lg cursor-pointer">
<div class="flex items-center justify-between w-full">
<p class="text-lg xl:text-2xl font-extrabold text-black dark:text-white">
{{ mainCategoryName }}
</p>
<span :class="['flex items-center justify-center',isOpen && 'rotate-180', 'transition-all']"><i
class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto"></i></span>
</div>
</div>
<ul class="flex flex-col gap-[25px]" v-show="isOpen">
<li @click="$emit('change-category', child)" v-for="child in subcategories" :key="child.id"
class="text-base xl:text-lg cursor-pointer flex justify-between items-center"
:class="child.id === props.active ? 'text-yellow' : ''">
<span>{{ child.langs[0].Name }}</span>
<span>12</span>
</li>
</ul>
</div>
<div v-else>
<!-- Optional: Placeholder or message when main category is not available -->
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
// Define the props
const props = defineProps({
data: Array,
active: Number
});
const isOpen = ref(false);
const toggle = () => {
isOpen.value = !isOpen.value;
};
// Computed properties
const hasMainCategory = computed(() => props.data.length > 0 && props.data[0].langs && props.data[0].langs.length > 0);
const mainCategoryName = computed(() => hasMainCategory.value ? props.data[0].langs[0].Name : '');
const subcategories = computed(() => hasMainCategory.value && props.data[0].children ? props.data[0].children : []);
</script>

81
components/section/shop-page/CurrencyRatesBar.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<div class="flex gap-24">
<div class="price-container">
<div class="slider" v-html="duplicatedContent">
</div>
</div>
</div>
</template>
<script setup lang="ts">
let res = "<span class=\"text-base sm:text-lg font-bold\">CZK price (to EUR). Kč 25,1720<span class=\"text-accent-green-light dark:text-accent-green-dark\"> Kč 0,0180 (0.07%) </span></span><span class=\"text-base sm:text-lg font-bold\">Gold price on market. 2 929,7250 €<span class=\"text-[#B72D2D]\"> -6,9560 € (-0.24%) </span></span><span class=\"text-base sm:text-lg font-bold\">Silver price on market. 31,5280 €<span class=\"text-accent-green-light dark:text-accent-green-dark\"> 0,1690 € (0.54%) </span></span><span class=\"text-base sm:text-lg font-bold\">PLN price (to EUR). zł 4,2660<span class=\"text-[#B72D2D]\"> zł -0,0050 (-0.12%) </span></span>"
const productStore = useProductStore()
const activeElement = ref(1);
productStore.getModules()
// Computed property to duplicate the content
const duplicatedContent = computed(() => {
const originalContent = res || '';
return originalContent + originalContent + originalContent + originalContent;
});
const changeActive = (item: number) => {
activeElement.value = item;
};
</script>
<style scoped>
.price-container {
/* display: flex; */
overflow: hidden;
}
.slider {
display: flex;
gap: 64px;
animation: slidein 40s linear infinite;
white-space: nowrap;
}
.logos {
display: flex;
gap: 64px;
width: 100%;
/* display: inline-block; */
margin: 0px 0;
}
.fas {
height: 50%;
animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}
@keyframes slidein {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media (min-width: 900px) {
.slider {
animation: slidein 80s linear infinite;
}
}
</style>

41
components/section/shop-page/Product.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<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="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`" alt="pics"
class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px] rounded-[5px]" />
<div class="flex flex-col justify-between h-full w-full gap-[7px] sSm:gap-[15px]"
@click="productStore.addToCart(props.product)">
<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 }}
</h3>
<p class="text-[9px] sm:text-[12px] text-sm text-bg-dark">
{{ props.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 }}
</p>
<button
class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1">
<UButton icon="i-lucide-shopping-cart" variant="ghost" class="sm:text-[25px] md:text-2xl text-bg-light" />
</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
// import imgUrl from "~/utils/imgUrl";
const props = defineProps({
product: Object,
});
const productStore = useProductStore()
// const addToCartAndPreventNavigation = (event: any) => {
// event.preventDefault();
// useCartStore().addToCart(props.product);
// };
</script>

434
components/section/shop-page/ShopMain.vue Normal file
View File

@ -0,0 +1,434 @@
<template>
<SectionShopPageCurrencyRatesBar class="mb-[25px] sm:mb-[55px] xl:mb-[75px]" />
<UiContainer>
<div class="flex flex-col gap-[25px] sm:gap-10 xl:flex-row">
<!-- button to open categories -->
<div class="xl:hidden flex items-center w-full">
<button @click="openCategories = !openCategories"
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">
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]">
{{ $t("category") }}
</h1>
<div class="flex flex-col gap-[25px]">
<div>
<div v-if="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>
<div class="w-4 h-4 bg-gray-200 rounded-full"></div>
</div>
</div>
<CategoryTree :data="categoriesList" @change-category="changeCategory($event)"
:active="categoryId" />
</div>
<div>
<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)">
{{ 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"></i></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}`" :value="`${filter.parent}.${filter.value_id}`"
v-model="selectedFilters" 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>
</li>
</ul>
</div>
</div>
</div>
</div>
</Transition>
<!-- categories -->
<div class="min-w-[250px] hidden xl:block">
<h1 class="font-bounded leading-[140%] font-bold text-[40px] mb-[55px]">
{{ $t("category") }}
</h1>
<div class="flex flex-col gap-12">
<div>
<div v-if="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>
<div class="w-4 h-4 bg-gray-200 rounded-full"></div>
</div>
</div>
<CategoryTree :data="categoriesList" @change-category="changeCategory($event)"
:active="categoryId" />
</div>
<div>
<p class="mb-10 text-2xl font-extrabold text-black dark:text-white">
{{ $t("filtered_by") }}
</p>
<!-- <div v-if="filters.length < 1" class="mb-8 text-white animate-pulse">
<div v-for="i in 5"
class="mt-10 flex justify-between font-bold text-black cursor-pointer 2xl:pr-24 dark:text-gray">
<div class="w-32 h-4 bg-gray-200 rounded"></div>
<div class="w-4 h-4 bg-gray-200 rounded"></div>
</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)">
{{ 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"></i></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}`" :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}`" :value="`${filter.parent}.${filter.value_id}`"
v-model="selectedFilters" 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>
</li>
</ul>
</div>
</div>
</div>
</div>
<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 @click="closeElement()" size="xl" icon="i-lucide-x" 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" />
<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">
{{ component.section_lang_data.title }}
</h4>
<p>{{ component.section_lang_data.description }}</p>
</div>
<img class="max-w-[150px] mx-auto"
:src="`/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`"
alt="" />
</div>
</div>
<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"></TheProductSkeleton>
</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>
<div v-if="reachedEnd" class="w-full flex justify-center">
<p>
{{ $t("FrontTranslations", "You reached end of the list.") }}
</p>
</div>
</div>
</div>
</UiContainer>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Product from "./Product.vue";
import type { Feature, ProductType } from "~/types";
import CategoryTree from "./CategoryTree.vue";
defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
title: string;
description: string
};
};
const openCategories = ref(false);
const isInfo = ref<boolean>(true);
const selectedFilters = ref<any>([]);
const categoryId = ref<number>(1);
const itemsCount = ref(0);
const loading = ref(false);
const reachedEnd = ref(false);
const loadingElement = ref<HTMLElement | null>(null);
const page = ref(1);
const elems = ref(12);
const maxElements = ref(0);
const products = ref([] as ProductType[]);
async function getProducts() {
try {
const res = await fetch(
`http://127.0.0.1:4000/api/public/products/category/${categoryId.value}?p=${page.value}&elems=${elems.value}`,
{
headers: {
"Content-Type": "application/json",
},
}
);
const data = await res.json();
products.value = data.data.items;
maxElements.value = data.data.items_count + 1;
} catch (error) {
console.error("getProducts error:", error);
}
}
const filters = ref([] as Feature[]);
async function getCategory() {
try {
const res = await fetch(
`http://127.0.0.1:4000/api/public/products/category/1/classification`,
{
headers: {
"Content-Type": "application/json",
},
}
);
const data = await res.json();
filters.value = data.data as Feature[];
filters.value.forEach((el) => {
const parentId = el.feature_id;
el.feature_values.forEach((el) => {
el.parent = parentId;
});
});
} catch (error) {
console.error("getCategory error:", error);
}
}
const categoriesList = ref([]);
async function getCategoryTree() {
try {
const res = await fetch(
`http://127.0.0.1:4000/api/public/categories/tree`,
{
headers: {
"Content-Type": "application/json",
},
}
);
const data = await res.json();
categoriesList.value = data.data.children;
} catch (error) {
console.error("getCategory error:", error);
}
}
getProducts()
getCategory()
getCategoryTree()
const closeElement = () => {
isInfo.value = false;
};
onMounted(() => {
window.addEventListener("scroll", scrollEvent);
});
onUnmounted(() => {
window.removeEventListener("scroll", scrollEvent);
});
async function scrollEvent(e: Event) {
let maxScrollY = window.scrollY || document.documentElement.scrollHeight - document.documentElement.clientHeight;
if (window.scrollY >= maxScrollY - 500 && !reachedEnd.value && !loading.value) {
loading.value = true;
await loadMoreProducts();
loading.value = false;
}
}
filters.value.forEach((item) => {
visibleFeatures[item.feature] = false;
});
const visibleFeatures = reactive<any>({});
function toggleFeature(feature: any) {
if (visibleFeatures.hasOwnProperty(feature)) {
visibleFeatures[feature] = !visibleFeatures[feature];
} else {
visibleFeatures[feature] = true;
}
}
class FilteredQueryString extends URLSearchParams {
override append(name: string, value: string): void {
if (value == null) {
return;
}
super.append(name, value);
}
}
async function loadMoreProducts() {
let qParams = new FilteredQueryString();
page.value = page.value + 1;
qParams.append("p", `${page.value}`);
qParams.append("elems", `${elems.value}`);
qParams.append("features", selectedFilters.value.length > 0 ? selectedFilters.value : null);
try {
const res = await fetch(
`http://127.0.0.1:4000/api/public/products/category/${categoryId.value}?${qParams.toString()}`,
{
headers: {
"Content-Type": "application/json",
},
}
);
const data = await res.json();
maxElements.value = data.data.items_count;
if (data.data.items) {
products.value.push(...(data.data.items as ProductType[]));
} else {
reachedEnd.value = true;
}
if (products.value.length >= maxElements.value) {
reachedEnd.value = true;
}
} catch (error) {
console.error("getCategory error:", error);
}
}
const changeCategory = (item: any) => {
categoryId.value = item.id;
};
watch(selectedFilters, async (newQuestion) => {
if (newQuestion) {
page.value = 1;
reachedEnd.value = false;
loadingElement.value?.scrollIntoView();
let qParams = new FilteredQueryString();
qParams.append("p", `${page.value}`);
qParams.append("elems", `${elems.value}`);
qParams.append("features", selectedFilters.value.length > 0 ? selectedFilters.value : null);
try {
const res = await fetch(
`http://127.0.0.1:4000/api/public/products/category/1?${qParams.toString()}`,
{
headers: {
"Content-Type": "application/json",
},
}
);
const data = await res.json();
products.value = data.data.items;
maxElements.value = data.data.items_count;
} catch (error) {
console.error("selectedFilters error:", error);
}
}
});
watch(categoryId, async (newQuestion) => {
if (newQuestion) {
page.value = 1;
reachedEnd.value = false;
loadingElement.value?.scrollIntoView();
let qParams = new FilteredQueryString();
qParams.append("p", `${page.value}`);
qParams.append("elems", `${elems.value}`);
qParams.append("features", selectedFilters.value.length > 0 ? selectedFilters.value : null);
try {
const res = await fetch(
`http://127.0.0.1:4000/api/public/products/category/${categoryId.value}?${qParams.toString()}`,
{
headers: {
"Content-Type": "application/json",
},
}
);
const data = await res.json();
products.value = data.data.items;
maxElements.value = data.data.items_count;
} catch (error) {
console.error("getCategory error:", error);
}
}
});
</script>
<style scoped>
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>

2
components/ui/Container.vue
View File

@ -1,6 +1,6 @@
<template>
<UContainer
class="mx-auto w-full max-w-[360px] px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20">
class="mx-auto w-full max-w-[380px] px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20">
<slot />
</UContainer>
</template>

72
composables/useMyFetch.ts Normal file
View File

@ -0,0 +1,72 @@
import { ofetch } from "ofetch";
export interface RequestOptions<T> extends RequestInit {
onError?: (error: Error, statusCode: number) => void;
onSuccess?: (data: T, statusCode: number) => void;
onStart?: () => void;
}
/**
* @function useMyFetch
*
* @description
* Makes a request to a given url, handles cookies and errors.
*
* @param {string} url - The url to make a request to.
* @param {RequestOptions} [options] - The options to use for the request.
*
* @returns {Promise<T | undefined>} - A promise resolving to the response data
* or undefined if an error occurred.
*
* @example
* const { data } = useMyFetch<{ name: string }>('/api/user')
*/
export const useMyFetch = async <T>(
url: string,
options?: RequestOptions<T>
): Promise<T | undefined> => {
if (options?.onStart) options.onStart();
let response = null;
try {
const event = useRequestEvent();
if (options == null) options = {};
options.credentials = "include";
if (import.meta.server) {
const api_uri =
event?.node.req.headers["api-uri"] || "http://localhost:4000";
url = api_uri + url;
options.headers = event?.headers;
}
response = await ofetch.raw(url, options);
if (import.meta.server && !event?.handled) {
for (const cookie of response.headers.getSetCookie()) {
event?.headers.set("Cookie", cookie);
event?.node.res.setHeader("set-cookie", cookie);
}
}
// handle errors if any
if (!response.ok && typeof options.onError == "function") {
options.onError(new Error(response.statusText), response.status);
}
// handle success to be able clearly marked that request has finished
if (response.ok && typeof options.onSuccess == "function") {
options.onSuccess(response._data.data, response.status);
}
return response._data as T;
} catch (e) {
// handle errors if any
if (typeof options?.onError == "function") {
options.onError(e as Error, response?.status || 500);
} else {
console.error(e);
}
return undefined;
}
};

2
pages/[id]/[slug].vue
View File

@ -23,4 +23,4 @@ onMounted(() => {
useHead(menuStore.headMeta);
const componentsList = await store.getComponents(route.params.id);
</script>
</script>

1
plugins/i18n.ts
View File

@ -28,5 +28,4 @@ export default defineNuxtPlugin(async (nuxtApp) => {
throw err;
}
};
});

52
stores/menuStore.ts
View File

@ -139,7 +139,8 @@ export const useMenuStore = defineStore("menuStore", () => {
name: `id-slug___${$i18n.locale.value}`,
});
openDropDown.value = false;
} else {
}
else {
router.push({
params: {
slug: defaultMenu.value.link_rewrite,
@ -150,6 +151,28 @@ export const useMenuStore = defineStore("menuStore", () => {
}
};
function navigateToShop() {
navigateToItem(menuItems.value?.items.find(item => item.page_name === 'shop'))
}
// function redirectToPage(link_rewrite: string) {
// const page = menuItems.value?.items.find(
// (item) => item.link_rewrite === link_rewrite
// );
// if (!page?.id_page || !page?.link_rewrite) {
// console.warn(`Page not found or missing data for name: ${link_rewrite}`);
// return;
// }
// router.push({
// params: {
// id: page?.id_page,
// slug: page?.link_rewrite,
// },
// });
// }
const getFirstImage = () => {
const req = useRequestEvent();
const url = useRequestURL();
@ -209,24 +232,6 @@ export const useMenuStore = defineStore("menuStore", () => {
};
});
function redirectToPage(link_rewrite: string) {
const page = menuItems.value?.items.find(
(item) => item.link_rewrite === link_rewrite
);
if (!page?.id_page || !page?.link_rewrite) {
console.warn(`Page not found or missing data for name: ${link_rewrite}`);
return;
}
router.push({
params: {
id: page?.id_page,
slug: page?.link_rewrite,
},
});
}
watch($i18n.locale, async () => {
await loadMenu();
await loadFooter();
@ -246,13 +251,14 @@ export const useMenuStore = defineStore("menuStore", () => {
selectedCountry,
selectedCurrency,
selectedPhoneCountry,
defaultMenu,
headMeta,
navigateToShop,
loadMenu,
loadFooter,
getCountryList,
navigateToItem,
redirectToPage,
getCurrencies,
defaultMenu,
headMeta,
// redirectToPage,
getCurrencies
};
});

75
stores/productStore.ts
View File

@ -1,5 +1,6 @@
export const useProductStore = defineStore("productStore", () => {
const productList = ref();
const modules = ref();
async function getList(count: number, categoryId = 1) {
try {
@ -23,8 +24,82 @@ export const useProductStore = defineStore("productStore", () => {
}
}
async function getModules() {
try {
const res = await fetch(
`http://127.0.0.1:4000/api/public/module/e_shop`,
{
headers: {
"Content-Type": "application/json",
},
}
);
if (!res.ok) {
throw new Error(`HTTP error: ${res.status}`);
}
const data = await res.json();
modules.value = data.children.find(
(item: { id: number; name: string }) =>
item.name === "currency_rates_bar"
);
} catch (error) {
console.error("getList error:", error);
}
}
async function addToCart(product) {
try {
const res = await fetch(
`http://127.0.0.1:4000/api/public/user/cart/item/add/${product.id}/1`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
}
);
if (!res.ok) {
throw new Error(`HTTP error: ${res.status}`);
}
const data = await res.json();
console.log(data);
} catch (error) {
console.error("getList error:", error);
}
}
const cart = ref();
async function getCart() {
try {
const res = await fetch(`http://127.0.0.1:4000/api/public/user/cart`, {
headers: {
"Content-Type": "application/json",
},
});
if (!res.ok) {
throw new Error(`HTTP error: ${res.status}`);
}
const data = await res.json();
console.log(data);
cart.value = data;
} catch (error) {
console.error("getList error:", error);
}
}
return {
productList,
modules,
getList,
getModules,
addToCart,
getCart,
};
});

35
stores/store.ts
View File

@ -13,6 +13,10 @@ export const useStore = defineStore("store", () => {
const totalInvestment = ref()
const minValue = ref()
// login
const email = ref()
const password = ref()
const components = ref({} as PBPageItem[]);
const getSections = async (id: string) => {
pb.cancelRequest("menu_view");
@ -111,6 +115,34 @@ export const useStore = defineStore("store", () => {
}
}
async function logIn() {
try {
const res = await fetch(
'http://127.0.0.1:4000/api/public/user/session/start',
{
method: 'POST',
body: JSON.stringify({
mail: email.value,
password: password.value
}),
headers: {
"Content-Type": "application/json",
},
}
);
if (!res.ok) {
throw new Error(`HTTP error: ${res.status}`);
}
const data = await res.json();
minValue.value = data.data
} catch (error) {
console.error("getList error:", error);
}
}
getCalculator()
getMinValue()
@ -121,6 +153,9 @@ export const useStore = defineStore("store", () => {
monthlySavings,
storagePeriod,
minValue,
email,
password,
logIn,
getCalculator,
getComponents,
getSections,

30
types/index.ts
View File

@ -126,4 +126,34 @@ export type Currencies = {
sign: string;
active: boolean;
suffix: boolean;
}
export type FeatureValue = {
parent: number,
products_with_value: number,
value: string,
value_id: number,
}
export type Feature = {
feature: string,
feature_id: number,
feature_values: FeatureValue[],
products_with_feature: number,
}
export type ProductType = {
applied_tax_rate: number,
cover_picture_uuid: string,
description: string,
formatted_price: string,
id: number,
in_stock: number,
is_sale_active: boolean,
link_rewrite: string,
name: string,
price: number,
tax_name: string,
cart_item_id?: number
product_id?: number
}