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

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

@ -1,43 +1,29 @@
<template>
<NuxtLink>
<li class="bg-block rounded-2xl min-h-[420px] w-[330px] list-none overflow-hidden p-5">
<article class="group h-full">
<div class="h-full flex flex-col">
<div class="h-[205px]">
<img :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`"
:alt="props.product?.description" class="h-full object-contain w-auto block mx-auto">
</div>
<div class="flex flex-col items-start text-start mt-[50px] justify-between h-full">
<div class="space-y-[15px]">
<h4 class="font-bold">{{ props.product?.name }}</h4>
<p class="text-sm font-normal">{{ props.product?.tax_name }}</p>
</div>
<div class="flex items-center justify-between w-full">
<p class="font-bold text-accent-green-light text-sm sm:text-2xl">{{ props.product?.formatted_price }}</p>
<div class="w-12 h-12 bg-button flex items-center justify-center rounded-[10px]">
<i class="uil uil-shopping-cart text-[31px] cursor-pointer text-white"></i>
</div>
</div>
</div>
</div>
<!-- <div v-if="!props.product?.is_sale_active"
class="absolute top-0 flex items-center justify-center w-full h-full px-4 bg-black bg-opacity-90 cursor-progress">
<div class="flex flex-col items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#ffcc00" d="M5.7 22H42.5V26H5.7z" transform="rotate(-45.001 24.036 24.037)"></path>
<path fill="#ffcc00"
d="M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z M24,40c-8.8,0-16-7.2-16-16S15.2,8,24,8 s16,7.2,16,16S32.8,40,24,40z">
</path>
</svg>
<span class="font-bold text-center uppercase text-yellow">
{{ $t("FrontTranslations", "not available") }}
</span>
</div>
</div> -->
</article>
</li>
</NuxtLink>
<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]">
<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]">
<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">
{{ props.product?.name }}
</h3>
<p class="text-[10px] 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="text-xl sm:text-[25px] md:text-2xl text-bg-light" />
</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">

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];

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>