Explorer

home / zoteqbgb / public_html / resources / js / components / frontend / home

Location: /home/zoteqbgb/public_html/resources/js/components/frontend/home
Root path: /home/zoteqbgb/public_html/config/676626

Editing: ProductSectionComponent.vue

<div class="p-0 m-0" v-if="productSections.length > 0 && promotions.length > 0" v-for="(productSection, key) in productSections">
        <section class="mb-10 sm:mb-20" v-if="productSection.products.length > 0">
            <div class="container">
                <div class="flex items-center justify-between gap-4 mb-5 sm:mb-7">
                    <h2 class="text-2xl sm:text-4xl font-bold capitalize">
                        {{ $t(`label.${productSection.name}`) }}
                    </h2>
                    <router-link v-if="productSections.length === 8" :to="{name: 'frontend.productSection.products', params: { slug: productSection.slug }}" class="py-2 px-4 text-sm sm:py-3 sm:px-6 rounded-3xl capitalize sm:text-base font-semibold whitespace-nowrap bg-primary-slate text-primary transition-all duration-300 hover:bg-primary hover:text-white">
                        {{ $t('label.show_more') }}
                    </router-link>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">
                    <ProductListComponent v-if="productSection.products.length > 0"
                                          :products="productSection.products"/>
                </div>
            </div>
        </section>

<div class="p-0 m-0" v-else-if="productSections.length > 0" v-for="productSection in productSections">
        <section class="mb-10 sm:mb-20" v-if="productSection.products.length > 0">
            <div class="container">
                <div class="flex items-center justify-between gap-4 mb-5 sm:mb-7">
                    <h2 class="text-2xl sm:text-4xl font-bold capitalize">
                        {{ 
                            $t(`label.${productSection.name}`) }}
                    </h2>
                    <router-link v-if="productSections.length === 8" :to="{name: 'frontend.productSection.products', params: { slug: productSection.slug }}" class="py-2 px-4 text-sm sm:py-3 sm:px-6 rounded-3xl capitalize sm:text-base font-semibold whitespace-nowrap bg-primary-slate text-primary transition-all duration-300 hover:bg-primary hover:text-white">
                        {{ $t('label.show_more') }}
                    </router-link>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">
                    <ProductListComponent v-if="productSection.products.length > 0" :products="productSection.products"/>
                </div>
            </div>
        </section>
    </div>

export default {
    name: "ProductSectionComponent",
    components: {
        ProductListComponent,
        LoadingComponent
    },
    data() {
        return {
            loading: {
                isActive: false,
            },
            promotions: []
        }
    },
    computed: {
        productSections: function () {
            return this.$store.getters["frontendProductSection/lists"];
        },
    },
    mounted() {
        this.loading.isActive = true;
        this.$store.dispatch("frontendProductSection/lists").then(res => {
            this.loading.isActive = false;
        }).catch((err) => {
            this.loading.isActive = false;
        });

this.$store.dispatch("frontendPromotion/lists", {
            paginate: 0,
            order_column: "id",
            order_type: "asc",
            type: promotionTypeEnum.BIG,
            status: statusEnum.ACTIVE,
            vuex: false
        }).then(res => {
            this.promotions       = res.data.data;
        }).catch((err) => {});
    }
}
</script>

Directory Contents

Name	Size	Perms	Modified	Actions
BenefitComponent.vue	1,716 bytes	0644	2025-04-25 02:11	âï¸
CategoryComponent.vue	3,635 bytes	0644	2025-04-25 02:11	âï¸
FlashSaleComponent.vue	1,939 bytes	0644	2025-04-25 02:11	âï¸
HomeComponent.vue	1,093 bytes	0644	2025-04-25 02:11	âï¸
MostPopularComponent.vue	1,941 bytes	0644	2025-04-25 02:11	âï¸
ProductBrandComponent.vue	2,813 bytes	0644	2025-04-25 02:11	âï¸
ProductSectionComponent.vue	5,025 bytes	0644	2025-04-25 02:11	âï¸
PromotionComponent.vue	2,512 bytes	0644	2025-04-25 02:11	âï¸
SliderComponent.vue	2,985 bytes	0644	2025-04-25 02:11	âï¸