{"version":3,"sources":["webpack:///./src/views/website/pages/products/category-details.vue?c5b9","webpack:///./src/views/website/pages/products/category-details.vue?c22a","webpack:///./src/views/website/pages/products/category-details.vue?f98f","webpack:///src/views/website/pages/products/category-details.vue","webpack:///./src/views/website/pages/products/category-details.vue?5ac2","webpack:///./src/views/website/pages/products/category-details.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","staticStyle","_v","_s","webCategoryDto","name","description","$store","getters","imagePath","t","childCategory","length","showSlider","ref","swiperOptions","_l","subCat","i","key","id","staticRenderFns","component"],"mappings":"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","file":"js/chunk-6cb2f8ff.js","sourcesContent":["export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./category-details.vue?vue&type=style&index=1&lang=scss&\"","export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./category-details.vue?vue&type=style&index=0&id=bae1bfc2&scoped=true&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-container',[_c('section',{staticClass:\"category-details-section py-5 overflow-hidden\"},[_c('b-row',[_c('b-col',{attrs:{\"cols\":\"12\",\"md\":\"6\"}},[_c('div',{staticClass:\"mx-auto\",staticStyle:{\"max-width\":\"500px\"},attrs:{\"data-aos\":\"fade-right\",\"data-aos-duration\":\"3000\"}},[_c('h5',{staticClass:\"text-custom-blue-sky mb-2\"},[_vm._v(\" \"+_vm._s(_vm.webCategoryDto.name)+\" \")]),_c('p',{staticClass:\"m-0 text-white text-justify\"},[_vm._v(\" \"+_vm._s(_vm.webCategoryDto.description)+\" \")])])]),_c('b-col',{staticClass:\"d-flex align-items-center\",attrs:{\"cols\":\"12\",\"md\":\"6\"}},[_c('div',{staticClass:\"category-description-container text-center w-100 rounded mx-auto\",staticStyle:{\"max-width\":\"300px\"},attrs:{\"data-aos\":\"fade-left\",\"data-aos-duration\":\"3000\"}},[_c('img',{staticClass:\"w-100 rounded\",attrs:{\"src\":_vm.$store.getters['app/domainHost'] +\n                                '/' +\n                                _vm.webCategoryDto.imagePath}})])])],1)],1),_c('section',{staticClass:\"sub-category-section py-5\"},[_c('b-col',{attrs:{\"cols\":\"12\",\"data-aos\":\"fade-up\",\"data-aos-duration\":\"3000\"}},[_c('h4',{staticClass:\"text-custom-blue-sky\"},[_vm._v(\" \"+_vm._s(_vm.t(\"website.subCategories\"))+\" \")]),(_vm.webCategoryDto.childCategory.length && _vm.showSlider)?_c('swiper',{ref:\"mySwiper\",staticClass:\"products-carousel mt-4 mt-md-0\",attrs:{\"options\":_vm.swiperOptions}},_vm._l((_vm.webCategoryDto.childCategory),function(subCat,i){return _c('swiper-slide',{key:i},[_c('div',{staticClass:\"slide-sub-category mx-auto\"},[_c('div',{staticClass:\"image-2\"},[_c('div',{staticClass:\"category-image-card-border rounded\"},[_c('div',{staticClass:\"category-image-card rounded\"},[_c('div',{staticClass:\"sub-category rounded\"})])]),_c('router-link',{attrs:{\"to\":'/products?mainCategoryId=' +\n                                        _vm.id +\n                                        '&subCategoryId=' +\n                                        subCat.id,\"custom\":\"\"}},[_c('div',{staticClass:\"category-content\"},[_c('img',{staticStyle:{\"object-fit\":\"cover\"},attrs:{\"src\":_vm.$store.getters[\n                                                'app/domainHost'\n                                            ] +\n                                                '/' +\n                                                subCat.imagePath}}),_c('h5',{staticClass:\"m-0 text-white mt-75\"},[_c('strong',[_vm._v(_vm._s(subCat.name))])])])])],1)])])}),1):_c('h5',{staticClass:\"text-center text-white\"},[_vm._v(\" \"+_vm._s(_vm.t(\"website.nosubcat\"))+\" \")])],1)],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <b-container>\r\n        <section class=\"category-details-section py-5 overflow-hidden\">\r\n            <b-row>\r\n                <b-col cols=\"12\" md=\"6\">\r\n                    <div\r\n                        class=\"mx-auto\"\r\n                        style=\"max-width: 500px\"\r\n                        data-aos=\"fade-right\"\r\n                        data-aos-duration=\"3000\"\r\n                    >\r\n                        <h5 class=\"text-custom-blue-sky mb-2\">\r\n                            {{ webCategoryDto.name }}\r\n                        </h5>\r\n                        <p class=\"m-0 text-white text-justify\">\r\n                            {{ webCategoryDto.description }}\r\n                        </p>\r\n                    </div>\r\n                </b-col>\r\n                <b-col cols=\"12\" md=\"6\" class=\"d-flex align-items-center\">\r\n                    <div\r\n                        data-aos=\"fade-left\"\r\n                        data-aos-duration=\"3000\"\r\n                        class=\"category-description-container text-center w-100 rounded mx-auto\"\r\n                        style=\"max-width: 300px\"\r\n                    >\r\n                        <img\r\n                            :src=\"\r\n                                $store.getters['app/domainHost'] +\r\n                                    '/' +\r\n                                    webCategoryDto.imagePath\r\n                            \"\r\n                            class=\"w-100 rounded\"\r\n                        />\r\n                    </div>\r\n                </b-col>\r\n            </b-row>\r\n        </section>\r\n        <section class=\"sub-category-section py-5\">\r\n            <b-col cols=\"12\" data-aos=\"fade-up\" data-aos-duration=\"3000\">\r\n                <h4 class=\"text-custom-blue-sky\">\r\n                    {{ t(\"website.subCategories\") }}\r\n                </h4>\r\n                <swiper\r\n                    :options=\"swiperOptions\"\r\n                    class=\"products-carousel mt-4 mt-md-0\"\r\n                    ref=\"mySwiper\"\r\n                    v-if=\"webCategoryDto.childCategory.length && showSlider\"\r\n                >\r\n                    <swiper-slide\r\n                        v-for=\"(subCat, i) in webCategoryDto.childCategory\"\r\n                        :key=\"i\"\r\n                    >\r\n                        <div class=\"slide-sub-category mx-auto\">\r\n                            <div class=\"image-2\">\r\n                                <div class=\"category-image-card-border rounded\">\r\n                                    <div class=\"category-image-card rounded\">\r\n                                        <div class=\"sub-category rounded\"></div>\r\n                                    </div>\r\n                                </div>\r\n                                <router-link\r\n                                    :to=\"\r\n                                        '/products?mainCategoryId=' +\r\n                                            id +\r\n                                            '&subCategoryId=' +\r\n                                            subCat.id\r\n                                    \"\r\n                                    custom\r\n                                >\r\n                                    <div class=\"category-content\">\r\n                                        <img\r\n                                            :src=\"\r\n                                                $store.getters[\r\n                                                    'app/domainHost'\r\n                                                ] +\r\n                                                    '/' +\r\n                                                    subCat.imagePath\r\n                                            \"\r\n                                            style=\"object-fit: cover\"\r\n                                        />\r\n                                        <h5 class=\"m-0 text-white mt-75\">\r\n                                            <strong>{{ subCat.name }}</strong>\r\n                                        </h5>\r\n                                    </div>\r\n                                </router-link>\r\n                            </div>\r\n                        </div>\r\n                    </swiper-slide>\r\n                </swiper>\r\n                <h5 class=\"text-center text-white\" v-else>\r\n                    {{ t(\"website.nosubcat\") }}\r\n                </h5>\r\n            </b-col>\r\n        </section>\r\n    </b-container>\r\n</template>\r\n\r\n<script>\r\nimport { useUtils as useI18nUtils } from \"@core/libs/i18n\";\r\nimport \"vue-slick-carousel/dist/vue-slick-carousel.css\";\r\nimport \"vue-slick-carousel/dist/vue-slick-carousel-theme.css\";\r\nimport { mapActions, mapState } from \"vuex\";\r\nimport { handleLangChange } from \"@/libs/event-bus\";\r\nimport { Swiper, SwiperSlide } from \"vue-awesome-swiper\";\r\nimport \"swiper/css/swiper.min.css\";\r\nexport default {\r\n    components: {\r\n        Swiper,\r\n        SwiperSlide\r\n    },\r\n    props: {\r\n        id: String\r\n    },\r\n    metaInfo() {\r\n        return {\r\n            titleTemplate:\r\n                \"Awija - \" +\r\n                this.$t(\"website.categories\") +\r\n                \" \" +\r\n                this.webCategoryDto.name,\r\n            htmlAttrs: {\r\n                lang: this.$i18n.locale\r\n            },\r\n            meta: [\r\n                {\r\n                    name: \"description\",\r\n                    content: this.webCategoryDto.description\r\n                },\r\n                {\r\n                    name: \"keywords\",\r\n                    content: \"keywords, keywords, keywords, ...\"\r\n                }\r\n            ]\r\n        };\r\n    },\r\n    setup() {\r\n        const { t } = useI18nUtils();\r\n        return { t };\r\n    },\r\n    data: () => ({\r\n        swiperOptions: {\r\n            slidesPerView: 1,\r\n            centeredSlides: true,\r\n            loop: true\r\n        },\r\n        lengthItems: 3,\r\n        showSlider: true\r\n    }),\r\n    computed: {\r\n        ...mapState({\r\n            webCategoryDto: state => state.webProducts.webCategoryDto,\r\n            lang: state => state.app.lang\r\n        })\r\n    },\r\n    created() {\r\n        addEventListener(\"resize\", this.settings);\r\n        this.getCategoryWebsiteDetails(this.id).then(({ data }) => {\r\n            this.$store.commit(\"Get_Category_Website_Details\", data[0]);\r\n            this.lengthItems = data[0].childCategory.length;\r\n            this.settings();\r\n        });\r\n        handleLangChange(() => {\r\n            addEventListener(\"resize\", this.settings);\r\n            this.getCategoryWebsiteDetails(this.id).then(({ data }) => {\r\n                this.$store.commit(\"Get_Category_Website_Details\", data[0]);\r\n                this.lengthItems = data[0].childCategory.length;\r\n                this.settings();\r\n            });\r\n        });\r\n    },\r\n    methods: {\r\n        ...mapActions([\"getCategoryWebsiteDetails\"]),\r\n        settings() {\r\n            this.showSlider = false;\r\n            const screen =\r\n                this.lengthItems <= 5\r\n                    ? 1\r\n                    : innerWidth < 567\r\n                    ? 1\r\n                    : innerWidth < 992\r\n                    ? 3\r\n                    : innerWidth < 1200\r\n                    ? 5\r\n                    : 5;\r\n            this.swiperOptions = {\r\n                slidesPerView: screen,\r\n                centeredSlides: true,\r\n                loop: true\r\n            };\r\n            this.$nextTick(() => {\r\n                this.showSlider = true;\r\n            });\r\n        }\r\n    }\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.category-details-section {\r\n    .category-description-container {\r\n        position: relative;\r\n        &:after {\r\n            content: \"\";\r\n            position: absolute;\r\n            bottom: -16px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 200px;\r\n            height: 20px;\r\n            background: rgba(0, 0, 0, 0.6);\r\n            filter: blur(8px);\r\n            border-radius: 50%;\r\n        }\r\n    }\r\n}\r\n.sub-category-section {\r\n    .slick-initialized {\r\n        min-height: 260px;\r\n    }\r\n    .slide-sub-category {\r\n        max-width: 200px;\r\n        height: 230px;\r\n        position: relative;\r\n        transform: scale(0.6);\r\n        transition: transform 0.3s, height 1s;\r\n        h5 {\r\n            opacity: 0;\r\n            visibility: hidden;\r\n            transition: 1s;\r\n            position: absolute;\r\n            bottom: 50px;\r\n            left: 12px;\r\n        }\r\n        .image-2 {\r\n            perspective: 500px;\r\n            transform-style: preserve-3d;\r\n            position: relative;\r\n            height: 100%;\r\n            width: 100%;\r\n            .category-image-card-border {\r\n                transform-origin: right center;\r\n                transform: scale(1.1) translate3d(-20px, -12px, -152px)\r\n                    rotate3d(24, 28, 0, -40deg) skew(-6deg, -2deg);\r\n                padding: 3px;\r\n                height: 100%;\r\n                width: 100%;\r\n                background: linear-gradient(\r\n                    0deg,\r\n                    #878787,\r\n                    #ffffff,\r\n                    #6d6d6d,\r\n                    #ffffff,\r\n                    #949494\r\n                );\r\n                .category-image-card {\r\n                    height: 100%;\r\n                    width: 100%;\r\n                }\r\n            }\r\n            .category-content {\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                width: 100%;\r\n                height: 100%;\r\n                text-align: center;\r\n                img {\r\n                    margin-top: 18px;\r\n                    margin-right: -40px;\r\n                    width: 100%;\r\n                    max-width: 160px;\r\n                    max-height: 160px;\r\n                    object-fit: cover;\r\n                }\r\n            }\r\n        }\r\n        .sub-category {\r\n            background: var(--custom-dark);\r\n            height: 100%;\r\n        }\r\n    }\r\n    .swiper-slide-active {\r\n        .slide-sub-category {\r\n            transform: scale(1);\r\n            height: 260px;\r\n            h5 {\r\n                opacity: 1;\r\n                visibility: visible;\r\n            }\r\n        }\r\n    }\r\n    ::v-deep .slick-prev {\r\n        left: -10px !important;\r\n        right: auto !important;\r\n    }\r\n    ::v-deep .slick-arrow {\r\n        height: auto !important;\r\n    }\r\n    ::v-deep .slick-arrow:before {\r\n        color: transparent !important;\r\n        font-size: 0 !important;\r\n    }\r\n    ::v-deep .slick-next {\r\n        right: -10px !important;\r\n    }\r\n}\r\n\r\n[dir=\"ltr\"] {\r\n    .sub-category-section {\r\n        .slide-sub-category {\r\n            .image-2 {\r\n                .category-image-card-border {\r\n                    transform: scale(1.1) translate3d(-20px, -12px, -152px)\r\n                        rotate3d(24, 28, 0, 40deg) skew(-6deg, -2deg);\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n</style>\r\n<style lang=\"scss\">\r\n.arrow {\r\n    z-index: 100;\r\n}\r\n[dir=\"rtl\"] {\r\n    .arrow {\r\n        transform: scaleX(-1);\r\n    }\r\n}\r\n</style>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./category-details.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./category-details.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./category-details.vue?vue&type=template&id=bae1bfc2&scoped=true&\"\nimport script from \"./category-details.vue?vue&type=script&lang=js&\"\nexport * from \"./category-details.vue?vue&type=script&lang=js&\"\nimport style0 from \"./category-details.vue?vue&type=style&index=0&id=bae1bfc2&scoped=true&lang=scss&\"\nimport style1 from \"./category-details.vue?vue&type=style&index=1&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"bae1bfc2\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}