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">
<div class="w-full flex justify-between items-center max-lg:container">
<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">
{{ title }}
</span>
@@ -69,45 +72,55 @@ const onSwiper = (swiper: SwiperClass) => {
</button>
</div>
</div>
<div class="w-full">
<Swiper
:slides-per-view="1.5"
:loop="true"
:centered-slides="true"
:space-between="24"
@swiper="onSwiper"
:breakpoints="{
640: {
centeredSlides: true,
slidesPerView: 3,
},
1024: {
centeredSlides: false,
slidesPerView: 4,
},
}"
>
<SwiperSlide
v-for="product in products"
:key="product.id"
<ClientOnly>
<div class="w-full">
<Swiper
:slides-per-view="1.5"
:loop="true"
:centered-slides="true"
:space-between="24"
@swiper="onSwiper"
:breakpoints="{
640: {
centeredSlides: true,
slidesPerView: 3,
},
1024: {
centeredSlides: false,
slidesPerView: 4,
},
}"
>
<ProductCard
:id="product.id"
:slug="product.slug"
:title="product.name"
:picture="product.main_image"
:colors="product.colors"
:rate="product.rating"
:dark-layer="true"
:price="product.best_deal_price_before_discount"
:tag="product.best_deal_discount > 0 ? `${product.best_deal_discount}% تخفیف` : undefined"
:price-after="
product.best_deal_discount > 0 ? product.best_deal_price_after_discount : undefined
"
/>
</SwiperSlide>
</Swiper>
</div>
<SwiperSlide
v-for="product in products"
:key="product.id"
>
<ProductCard
:id="product.id"
:slug="product.slug"
:title="product.name"
:picture="product.main_image"
:colors="product.colors"
:rate="product.rating"
:dark-layer="true"
:price="product.best_deal_price_before_discount"
:tag="product.best_deal_discount > 0 ? `${product.best_deal_discount}% تخفیف` : undefined"
:price-after="
product.best_deal_discount > 0 ? product.best_deal_price_after_discount : undefined
"
/>
</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>
</template>