heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add skeleton for products slider

Browse Source
This commit is contained in:
marzban-dev
2026-05-25 18:18:49 +03:30
parent 32b3bff318
commit 3abc2e2f2f
1 changed files with 52 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/product-detail/ProductsSlider.vue
+52 -39
View File
@@ -31,7 +31,10 @@ const onSwiper = (swiper: SwiperClass) => {
<section class="w-full flex flex-col gap-10 md:gap-16 lg:container"> <section class="w-full flex flex-col gap-10 md:gap-16 lg:container">
<div class="w-full flex justify-between items-center max-lg:container"> <div class="w-full flex justify-between items-center max-lg:container">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<NuxtImg :src="iconImage" class="size-8 sm:size-14" /> <NuxtImg
:src="iconImage"
class="size-8 sm:size-14"
/>
<span class="text-black typo-h-6 md:typo-h-5 lg:typo-h-4"> <span class="text-black typo-h-6 md:typo-h-5 lg:typo-h-4">
{{ title }} {{ title }}
</span> </span>
@@ -69,45 +72,55 @@ const onSwiper = (swiper: SwiperClass) => {
</button> </button>
</div> </div>
</div> </div>
<div class="w-full"> <ClientOnly>
<Swiper <div class="w-full">
:slides-per-view="1.5" <Swiper
:loop="true" :slides-per-view="1.5"
:centered-slides="true" :loop="true"
:space-between="24" :centered-slides="true"
@swiper="onSwiper" :space-between="24"
:breakpoints="{ @swiper="onSwiper"
640: { :breakpoints="{
centeredSlides: true, 640: {
slidesPerView: 3, centeredSlides: true,
}, slidesPerView: 3,
1024: { },
centeredSlides: false, 1024: {
slidesPerView: 4, centeredSlides: false,
}, slidesPerView: 4,
}" },
> }"
<SwiperSlide
v-for="product in products"
:key="product.id"
> >
<ProductCard <SwiperSlide
:id="product.id" v-for="product in products"
:slug="product.slug" :key="product.id"
:title="product.name" >
:picture="product.main_image" <ProductCard
:colors="product.colors" :id="product.id"
:rate="product.rating" :slug="product.slug"
:dark-layer="true" :title="product.name"
:price="product.best_deal_price_before_discount" :picture="product.main_image"
:tag="product.best_deal_discount > 0 ? `${product.best_deal_discount}% تخفیف` : undefined" :colors="product.colors"
:price-after=" :rate="product.rating"
product.best_deal_discount > 0 ? product.best_deal_price_after_discount : undefined :dark-layer="true"
" :price="product.best_deal_price_before_discount"
/> :tag="product.best_deal_discount > 0 ? `${product.best_deal_discount}% تخفیف` : undefined"
</SwiperSlide> :price-after="
</Swiper> product.best_deal_discount > 0 ? product.best_deal_price_after_discount : undefined
</div> "
/>
</SwiperSlide>
</Swiper>
</div>
<template #fallback>
<div class="w-full grid grid-cols-3 sm:grid-cols-4 gap-6">
<div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
<div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
<div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
<div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
</div>
</template>
</ClientOnly>
</section> </section>
</template> </template>