@lancom/shared 0.0.394 → 0.0.395

package/assets/js/api/index.js

@@ -41,6 +41,9 @@ const api = {
   fetchCustomerCoupons(customer, shop) {
     return _get(`shop/${shop}/customer/${customer._id}/coupons`);
   },
+  fetchChildrenCategories(category, params) {
+    return _get(`category/${category}/children`, params);
+  },
   searchProducts(shop, text, save) {
     return _get(`shop/${shop}/products/search`, { text, save });
   },

package/components/products/children_categories/children-categories.scss

@@ -0,0 +1,65 @@
+@import "@/assets/scss/variables";
+
+.ChildrenCategories {
+  &__wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 20px;
+    @media (max-width: $bp-small-max) {
+      justify-content: center;
+    }
+  }
+}
+
+.CategoryCard {
+  width: 270px;
+  margin: 0 0 15px 15px;
+  position: relative;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: white;
+  box-shadow: 0px 0px 0px rgba(75, 75, 75, 0.2);
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0px 5px 15px rgba(75, 75, 75, 0.2);
+  }
+
+  &__link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  &__image-wrapper {
+    width: 100%;
+    height: 300px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  &__name {
+    padding: 15px;
+    font-size: 16px;
+    font-weight: 600;
+    color: $grey_1;
+    text-align: center;
+    background-color: white;
+  }
+
+  @media (max-width: $bp-extra-small-max) {
+    margin: 0 auto 25px auto;
+  }
+} 

package/components/products/children_categories/children-categories.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="ChildrenCategories__wrapper">
+    <div
+      v-for="category in childrenCategories"
+      :key="category._id"
+      class="CategoryCard">
+      <a
+        :href="generateProductsLink($route, { category }, true)"
+        class="CategoryCard__link">
+        <div class="CategoryCard__image-wrapper">
+          <img
+            v-if="category.image"
+            :src="category.image.medium"
+            :alt="category.name"
+            class="CategoryCard__image" />
+        </div>
+        <div class="CategoryCard__name">
+          {{ category.name }}
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+  
+<script>
+import { mapGetters } from 'vuex';
+import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
+  
+export default {
+  name: 'ChildrenCategories',
+  computed: {
+    ...mapGetters('products', ['childrenCategories'])
+  },
+  methods: {
+    generateProductsLink
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'children-categories';
+</style>
+  

package/layouts/products.vue

@@ -20,12 +20,16 @@
             <h1 class="Products__name">
               {{ routeName }}
             </h1>
-            <div class="Products__filters">
+            <div
+              v-if="!visiblChildrenCategories"
+              class="Products__filters">
               <products-filters @open="openAside" />
             </div>
           </div>
           <div class="Products__content">
-            <div class="Products__aside">
+            <div
+              v-if="!visiblChildrenCategories"
+              class="Products__aside">
               <breakpoint
                 name="md"
                 mode="up">
@@ -33,7 +37,10 @@
               </breakpoint>
             </div>
             <div class="Products__list">
-              <products-catalog class="Products__catalog" />
+              <children-categories v-if="visiblChildrenCategories" />
+              <products-catalog
+                v-else
+                class="Products__catalog" />
             </div>
           </div>
           <div
@@ -57,21 +64,22 @@
   
   <script>
   import debounce from 'lodash.debounce';
+  import LazyHydrate from 'vue-lazy-hydration';
   import { mapActions, mapGetters, mapMutations } from 'vuex';
   import gtm from '@lancom/shared/assets/js/utils/gtm';
   import metaInfo from '@lancom/shared/mixins/meta-info';
   import { generateProductsLink, generateProductLink } from '@lancom/shared/assets/js/utils/product';
   import { getProductLargeCover, getProductMediumCover } from '@lancom/shared/assets/js/utils/colors';
-  import LazyHydrate from 'vue-lazy-hydration';
-  import TheNavbar from '@/components/the_navbar/the-navbar';
   import TheChangesSavedIndicator from '@lancom/shared/components/the_changes_saved_indicator/the-changes-saved-indicator';
   import Breadcrumbs from '@lancom/shared/components/common/breadcrumbs/breadcrumbs';
-  import TheFooter from '@/components/the_footer/the-footer';
+  import StaticPage from '@lancom/shared/components/static_page/static-page';
   import TheAside from '@lancom/shared/components/the_aside/the-aside';
-  import ProductsAside from '@/components/products/products_aside/products-aside';
   import ProductsFilters from '@lancom/shared/components/products/products_filters/products-filters';
+  import ChildrenCategories from '@lancom/shared/components/products/children_categories/children-categories';
+  import ProductsAside from '@/components/products/products_aside/products-aside';
+  import TheNavbar from '@/components/the_navbar/the-navbar';
+  import TheFooter from '@/components/the_footer/the-footer';
   import ProductsCatalog from '@/components/products/products_catalog/products-catalog';
-  import StaticPage from '@lancom/shared/components/static_page/static-page';
   import Error from './error';
   
   export default {
@@ -85,6 +93,7 @@
       ProductsAside,
       ProductsFilters,
       ProductsCatalog,
+      ChildrenCategories,
       Error,
       StaticPage,
       TheChangesSavedIndicator
@@ -93,6 +102,11 @@
     middleware: ['page-info'],
     async fetch() {
       await this.loadProducts();
+
+      if (this.page === 1 && this.products.length === 0) {
+        await this.fetchChildrenCategories(this.currentCategory);
+      }
+  
       if (process.server) {
         this.$root.context?.res?.setHeader('Cache-Control', `max-age=${86400}`);;
       }
@@ -100,7 +114,10 @@
     computed: {
       ...mapGetters('page', ['routeInfo']),
       ...mapGetters(['notificationBar', 'shop', 'country', 'currency']),
-      ...mapGetters('products', ['category', 'categories', 'brands', 'types', 'tags', 'loadError', 'count', 'products', 'minPrice', 'maxPrice']),
+      ...mapGetters('products', ['category', 'childrenCategories', 'categories', 'brands', 'types', 'tags', 'loadError', 'count', 'products', 'minPrice', 'maxPrice', 'page']),
+      visiblChildrenCategories() {
+        return this.page === 1 && this.products.length === 0 && this.childrenCategories.length > 0;
+      },
       pageItemCanonical() {
         const page = +this.$route.query.page;
         return `${this.breadcrumbs[this.breadcrumbs.length - 1]?.to}${page > 1 ? `?page=${page}` : ''}`;
@@ -302,7 +319,8 @@
         'loadState'
       ]),
       ...mapActions('products', [
-        'fetchProducts'
+        'fetchProducts',
+        'fetchChildrenCategories'
       ]),
       ...mapMutations('products', [
         'setPlaceholder'

package/nuxt.config.js

@@ -38,6 +38,7 @@ module.exports = (config, axios, { raygunClient, publicPath, productUrlToEditor
       '/checkout/**',
       '/customer/**'
     ],
+    cacheTime: 10,
     routes: async () => {
       const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/sitemap?host=${config.HOST_NAME}&toEditor=${!!productUrlToEditor}`);
       return [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.394",
+  "version": "0.0.395",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

package/store/products.js

@@ -12,6 +12,7 @@ export const state = () => ({
   brands: [],
   category: null,
   categories: [],
+  childrenCategories: [],
   tags: [],
   attributes: [],
   loadError: null,
@@ -25,6 +26,7 @@ export const getters = {
   brands: ({ brands }) => brands || [],
   categories: ({ categories }) => categories || [],
   category: ({ category }) => category,
+  childrenCategories: ({ childrenCategories }) => childrenCategories,
   tags: ({ tags }) => tags || [],
   attributes: ({ attributes }) => attributes || [],
   page: ({ page }) => page,
@@ -79,10 +81,22 @@ export const actions = {
       });
       throw e;
     }
+  },
+  async fetchChildrenCategories({ commit }, category) {
+    try {
+      const categories = await api.fetchChildrenCategories(category?._id);
+      commit('setChildrenCategories', categories);
+      return categories;
+    } catch (e) {
+      console.log(e);
+    }
   }
 };
 
 export const mutations = {
+  setChildrenCategories(state, categories) {
+    state.childrenCategories = categories;
+  },
   setPlaceholder(state, placeholder) {
     state.placeholder = placeholder;
   },