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

product page

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-17 15:57:00 +02:00
parent 35575eda6f
commit 77a490a94d
3 changed files with 88 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,13 @@
<template>
<UiContainer>
<div class="flex justify-between mb-[75px] whitespace-nowrap gap-[100px]">
<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-16 px-4 xl:flex-row">
<!-- <Transition>
<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") }}
@ -46,9 +46,18 @@
</div>
</div>
</div>
</Transition> -->
</Transition>
<div class="min-w-[275px]">
<!-- 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>
<!-- categories -->
<div class="min-w-[250px] hidden xl:block">
<h1 class="font-bounded leading-[140%] font-bold text-[40px] mb-[55px]">
{{ $t("category") }}
</h1>
@ -78,8 +87,10 @@
</div>
</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]"
<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]"
@click="toggleFeature(item.feature)">
{{ item.feature }}
<span :class="[visibleFeatures[item.feature] && 'rotate-180', 'transition-all']"> <i
@ -87,7 +98,8 @@
</span>
<ul v-show="visibleFeatures[item.feature]"
class="flex flex-col gap-5 text-black dark:text-gray">
<li v-for="filter in item.feature_values" :key="filter.value_id" class="flex gap-[10px] cursor-pointer">
<li v-for="filter in item.feature_values" :key="filter.value_id"
class="flex gap-[10px] cursor-pointer">
<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>
@ -98,21 +110,41 @@
</div>
</div>
<div class="w-full">
<ThePartnerInfo v-if="isInfo" @close-element="closeElement()" />
<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 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>
<div v-else ref="loadingElement" class="grid gap-12 pt-32 pb-16 md:grid-cols-2 2xl:grid-cols-4">
<!-- 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">
<Product v-for="product in products" :key="product.id" :product="product" />
<div v-if="reachedEnd"
class="md:col-span-2 2xl:col-span-3 border-2 border-yellow border-r-0 border-l-0 mt-10">
<p class="text-black dark:text-gray text-center text-lg p-2">
{{ $t("FrontTranslations", "You reached end of the list.") }}
</p>
</div>
</div>
<div v-if="reachedEnd" class="w-full flex justify-center">
<p>
{{ $t("FrontTranslations", "You reached end of the list.") }}
</p>
</div>
</div>
</div>
@ -123,6 +155,18 @@ 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>([]);
@ -234,12 +278,11 @@ async function scrollEvent(e: Event) {
}
}
const visibleFeatures = reactive<any>({});
filters.value.forEach((item) => {
visibleFeatures[item.feature] = false;
});
const visibleFeatures = reactive<any>({});
function toggleFeature(feature: any) {
if (visibleFeatures.hasOwnProperty(feature)) {
visibleFeatures[feature] = !visibleFeatures[feature];