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

additions to product page

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-23 15:54:55 +02:00
parent 77a490a94d
commit 7d0a449a1e
13 changed files with 387 additions and 136 deletions
Download Patch File Download Diff File 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>

19
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 @click="navigateToShop"
<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">
{{ $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,19 +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();
productStore.getCart()
const route = useRoute()
function navigateToShop() {
menuStore.navigateToItem(menuStore.menuItems?.items.find(item => item.page_name === 'shop'))
}
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 -->

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();

14
components/section/shop-page/CategoryTree.vue
View File

@ -2,18 +2,20 @@
<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-2xl font-extrabold text-black dark:text-white">
<p class="text-lg xl:text-2xl font-extrabold text-black dark:text-white">
{{ mainCategoryName }}
</p>
<span :class="[isOpen && 'rotate-180', 'transition-all']"> <i
class="uil uil-angle-down text-3xl text-button font-light cursor-pointer"></i></span>
<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] text-black dark:text-gray" v-show="isOpen">
<li @click="$emit('change-category', child)" v-for="child in subcategories" :key="child.id" class="cursor-pointer"
<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' : ''">
{{ child.langs[0].Name }}
<span>{{ child.langs[0].Name }}</span>
<span>12</span>
</li>
</ul>
</div>

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>

16
components/section/shop-page/Product.vue
View File

@ -1,14 +1,15 @@
<template>
<div
class="w-[150px] sm:w-[260px] md:w-[330px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-[50px]">
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]" />
<div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px]">
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-[13px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
<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-[10px] sm:text-[12px] text-sm text-bg-dark">
<p class="text-[9px] sm:text-[12px] text-sm text-bg-dark">
{{ props.product?.tax_name }}
</p>
</div>
@ -18,8 +19,7 @@
</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="text-xl sm:text-[25px] md:text-2xl text-bg-light" />
<UButton icon="i-lucide-shopping-cart" variant="ghost" class="sm:text-[25px] md:text-2xl text-bg-light" />
</button>
</div>
</div>
@ -32,6 +32,8 @@ const props = defineProps({
product: Object,
});
const productStore = useProductStore()
// const addToCartAndPreventNavigation = (event: any) => {
// event.preventDefault();
// useCartStore().addToCart(props.product);

138
components/section/shop-page/ShopMain.vue
View File

@ -1,53 +1,7 @@
<template>
<SectionShopPageCurrencyRatesBar class="mb-[25px] sm:mb-[55px] xl:mb-[75px]" />
<UiContainer>
<div class="flex justify-between mb-[25px] sm:mb-[55px] xl:mb-[75px] whitespace-nowrap gap-[100px]">
<p>CZK cena (na EUR). Kč 25,2380 Kč +0,0030 (+0.01%)</p>
<p>Cena zlata na trhu. 2 852,1450 € -21,6520 € (-0.75%)</p>
<p>Cena stříbra na trhu. 28,6500 € -0,1570 € (-0.54%)</p>
<p>PLN cena (na EUR). zł 4,2550</p>
</div>
<div class="flex flex-col gap-10 xl:flex-row">
<Transition>
<div v-if="openCategories" class="z-40 block w-full pt-8 xl:w-1/4 xl:pt-36 xl:hidden">
<BaseTitle>
{{ $t("FrontTranslations", "Categories") }}
</BaseTitle>
<div class="mt-14">
<div class="flex flex-col gap-12">
<div>
<CategoryTree :data="categoriesList" @change-category="changeCategory($event)"
:active="categoryId" />
</div>
<div>
<p class="mb-8 text-2xl font-extrabold text-black dark:text-white">
{{ $t("FrontTranslations", "Filtered by") }}
</p>
<div v-for="(item, itemIndex) in filters" :key="itemIndex" class="mb-8 text-white">
<span
class="flex justify-between font-bold text-black cursor-pointer 2xl:pr-24 dark:text-gray"
@click="toggleFeature(item.feature)">
{{ item.feature }}
<span class="w-4 h-4 text-yellow"><i
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
</span>
<ul v-show="visibleFeatures[item.feature]"
class="flex flex-col gap-8 pl-8 mt-8 text-black dark:text-gray">
<li v-for="filter in item.feature_values" :key="filter.value_id"
class="flex gap-1">
<input :id="`${filter.value_id}`"
:value="`${filter.parent}.${filter.value_id}`" v-model="selectedFilters"
type="checkbox" />
<label :for="`${filter.value_id}`">{{ filter.value }}</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</Transition>
<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"
@ -56,6 +10,57 @@
</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]">
@ -88,21 +93,31 @@
</div> -->
<div v-for="(item, itemIndex) in filters" :key="itemIndex"
:class="['mb-[30px] text-white', visibleFeatures[item.feature] && 'border-b border-block pb-[10px]']">
<span
class="flex justify-between items-center font-bold text-black cursor-pointer dark:text-gray mb-[25px]"
: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="uil uil-angle-down text-3xl text-button font-light cursor-pointer"></i></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"></i></span>
</span>
<ul v-show="visibleFeatures[item.feature]"
class="flex flex-col gap-5 text-black dark:text-gray">
<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 gap-[10px] cursor-pointer">
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" />
<label :for="`${filter.value_id}`" class="cursor-pointer">{{ filter.value }}</label>
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>
@ -118,8 +133,8 @@
<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 gap-[25px]">
<div class="flex flex-col justify-between gap-[25px ]">
<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>
@ -136,8 +151,7 @@
</div>
<!-- products -->
<div v-else ref="loadingElement"
class="xl:grid gap-5 sm:gap-10 grid grid-cols-2 sm:flex sm:flex-wrap justify-center xl:grid-cols-4">
<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>