additions to product page
This commit is contained in:
@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user