@lancom/shared 0.0.326 → 0.0.328

package/assets/js/api/admin.js

@@ -200,6 +200,18 @@ export default {
   removePage(id) {
     return _delete(`admin/pages/${id}`);
   },
+  fetchCategories(params) {
+    return _get('admin/categories', params);
+  },
+  fetchCategoryById(id) {
+    return _get(`admin/categories/${id}`);
+  },
+  saveCategory(category) {
+    return category._id ? _put(`admin/categories/${category._id}`, category) : _post('admin/categories', category);
+  },
+  removeCategory(id) {
+    return _delete(`admin/categories/${id}`);
+  },
   fetchPackages() {
     return _get('admin/packages');
   },
@@ -731,5 +743,8 @@ export default {
   },
   findResources(query) {
     return _get(`admin/order/resources?search=${query || ''}`);
-  }
+  },
+  getReOrderReport(params) {
+    return _get(`admin/reports/re-order`, params);
+  },
 };

package/assets/js/utils/product.js

@@ -98,12 +98,24 @@ export function filterBigSize(simpleProducts) {
 //   };
 // };
 
-export function generateProductsLink($route, data) {
-  let { type, brand, text, sort } = data;
-  type = (type || type === null) ? type : ($route && $route.params.type);
-  brand = (brand || brand === null) ? brand : ($route && $route.params.brand);
-  text = (text || text === '') ? text : ($route && $route.query.text);
-  sort = (sort || sort === '') ? sort : ($route && $route.query.sort);
+function getCategoryPathFromRoute(routeParams) {
+  const categories = [];
+  for (let i = 5; i >= 0; i--) {
+    const category = routeParams?.[`category${!i ? '' : i}`];
+    if (category) {
+      categories.push(category);
+    }
+  }
+  return categories.join('/');
+}
+
+export function generateProductsLink($route, data, skipParams = false) {
+  let { type, category, brand, text, sort } = data;
+  category = (category || category === null) ? generateCategoryPath(category) : getCategoryPathFromRoute($route?.params);
+  type = (type || type === null) ? type : ($route?.params?.type || $route?.query?.type);
+  brand = (brand || brand === null) ? brand : ($route?.params?.brand || $route?.query?.brand);
+  text = (text || text === '') ? text : $route?.query?.text;
+  sort = (sort || sort === '') ? sort : $route?.query?.sort;
 
   const params = [];
 
@@ -120,7 +132,8 @@ export function generateProductsLink($route, data) {
   }
 
   Object.keys({ ...(($route && $route.query) || {}), ...data }).forEach(key => {
-    if (!['text', 'sort', 'page', 'type', 'brand'].includes(key)) {
+    const rootKeys = ['text', 'sort', 'page', 'category', 'type', 'brand'];
+    if (!rootKeys.includes(key)) {
       let items = ($route && $route.query[key]) ? $route.query[key].split(',') : [];
       items = (data[key] ? (items.includes(data[key]) ? items.filter(c => c !== data[key]) : [...items, data[key]]) : items).join(',');
       if (items) {
@@ -128,16 +141,48 @@ export function generateProductsLink($route, data) {
       }
     }
   });
+  if (category) {
+    if (brand) {
+      params.push(`brand=${brand}`);
+    }
+    if (type) {
+      params.push(`type=${type}`);
+    }
+  }
 
-  const typeRoute = type ? `/${type}` : '';
-  const brandRoute = brand ? `/brand/${brand}` : '';
+  const categoryRoute = category ? `/c/${category}` : '';
+  const typeRoute = (!category && type) ? `/${type}` : '';
+  const brandRoute = (!category && brand) ? `/brand/${brand}` : '';
 
-  return `/products${typeRoute}${brandRoute}${params.length ? `?${params.join('&')}` : ''}`;
+  const baseRoute = categoryRoute || `/products${typeRoute}${brandRoute}`;
+  return `${baseRoute}${(params.length && !skipParams) ? `?${params.join('&')}` : ''}`;
+}
+
+export function generateCategoryPath(cat) {
+  let category = cat;
+  const categories = [];
+  while (category) {
+    categories.unshift(category.alias);
+    category = category.parent;
+  }
+  let baseLink = '';
+  if (categories.length) {
+    baseLink = `${categories.join('/')}`;
+  }
+  return baseLink;
 }
 
 export function generateProductLink(product, color, toEditor = false) {
   const baseLink = `/${product.brand?.alias}/${product.productType?.alias}/${product.alias}`;
-  return `${toEditor ? `${baseLink}/editor` : baseLink}${color ? `?color=${color.alias}` : ''}`;
+  let link = toEditor ? `${baseLink}/editor` : baseLink;
+  if (product.useTaxonomyUrl) {
+    const categoryPath = generateCategoryPath(product.category);
+    if (categoryPath) {
+      const categoryBaseLink = `/c/${categoryPath}/${product.alias}/${product.SKU.toLowerCase()}`;
+      link = toEditor ? `${categoryBaseLink}.html` : `${categoryBaseLink}/info.html`;
+    }
+  }
+  return `${link}${color ? `?color=${color.alias || color}` : ''}`;
 }
 
 export function getProductColorImages(product, color, skipDefault = false) {

package/components/checkout/order/address-form/address-form.vue

@@ -5,20 +5,20 @@
         <validation-provider
           v-slot="{ errors }"
           tag="div"
-          name="Full Name"
+          :name="namePrefix + 'Full Name'"
           rules="required"
           class="form-col col-half">
           <label
-            for="fullName"
+            :for="'fullName'+uniqueKey"
             class="form-label">
             Full Name
           </label>
           <input
-            id="fullName"
+            :id="'fullName'+uniqueKey"
             ref="fullName"
             v-model="address.fullName"
             placeholder="Full Name"
-            name="fullName"
+            :name="'fullName'+uniqueKey"
             type="text"
             class="form-field labelless"
             :class="{
@@ -35,19 +35,19 @@
         <validation-provider
           v-slot="{ errors }"
           tag="div"
-          name="company"
+          :name="namePrefix + 'Company'"
           class="form-col col-half">
           <label
-            for="company"
+            :for="'company'+uniqueKey"
             class="form-label">
             Company Name
           </label>
           <input
-            id="company"
+            :id="'company'+uniqueKey"
             ref="company"
             v-model="address.company"
             placeholder="Company Name"
-            name="company"
+            :name="'company'+uniqueKey"
             type="text"
             class="form-field labelless"
             :class="{
@@ -66,20 +66,20 @@
         <validation-provider
           v-slot="{ errors }"
           tag="div"
-          name="email"
+          :name="namePrefix + 'Email'"
           rules="required|email"
           class="form-col col-half">
           <label
-            for="email"
+            :for="'email'+uniqueKey"
             class="form-label">
             Email
           </label>
           <input
-            id="email"
+            :id="'email'+uniqueKey"
             ref="email"
             v-model="address.email"
             placeholder="Email"
-            name="email"
+            :name="'email'+uniqueKey"
             type="email"
             class="form-field labelless"
             :class="{
@@ -96,20 +96,20 @@
         <validation-provider
           v-slot="{ errors }"
           tag="div"
-          name="Phone"
+          :name="namePrefix + 'Phone'"
           rules="required|phone"
           class="form-col col-half">
           <label
-            for="phone"
+            :for="'phone'+uniqueKey"
             class="form-label">
             Phone number
           </label>
           <input
-            id="phone"
+            :id="'phone'+uniqueKey"
             ref="phone"
             v-model="address.phone"
             placeholder="Phone"
-            name="phone"
+            :name="'phone'+uniqueKey"
             type="text"
             class="form-field labelless"
             :class="{
@@ -127,19 +127,19 @@
       <validation-provider
         v-slot="{ errors }"
         tag="div"
-        name="Address line 1"
+        :name="namePrefix + 'Address line 1'"
         rules="required"
         class="form-row">
         <label
-          for="addressLine1"
+          :for="'addressLine1'+uniqueKey"
           class="form-label">
           Address line 1
         </label>
         <input
-          id="addressLine1"
+          :id="'addressLine1'+uniqueKey"
           ref="addressLine1"
           v-model="address.addressLine1"
-          name="addressLine1"
+          :name="'addressLine1'+uniqueKey"
           type="text"
           class="form-field labelless"
           placeholder="Address line 1"
@@ -158,18 +158,18 @@
       <validation-provider
         v-slot="{ errors }"
         tag="div"
-        name="Address line 2"
+        :name="namePrefix + 'Address line 2'"
         class="form-row">
         <label
-          for="addressLine2"
+          :for="'addressLine2'+uniqueKey"
           class="form-label">
           Address line 2
         </label>
         <input
-          id="addressLine2"
+          :id="'addressLine2'+uniqueKey"
           ref="addressLine2"
           v-model="address.addressLine2"
-          name="addressLine2"
+          :name="'addressLine2'+uniqueKey"
           type="text"
           class="form-field labelless"
           placeholder="Address line 2"
@@ -191,20 +191,21 @@
           :suburb="address.suburb"
           :labelless="true"
           :required="true"
+          :name-prefix="namePrefix"
           placeholder="Suburb"
           @select="handleSuburbChange">
         </postcode-select>
         <div class="form-col col-half">
           <label
-            for="country"
+            :for="'country'+uniqueKey"
             class="form-label">
             Country
           </label>
           <input
-            id="country"
+            :id="'country'+uniqueKey"
             ref="country"
             :value="address.country === 'Australia' ? 'Only Australia' : address.country"
-            name="country"
+            :name="'country'+uniqueKey"
             type="country"
             class="form-field filled labelless"
             disabled />
@@ -214,18 +215,18 @@
         v-if="!withoutAdditionalInfo"
         v-slot="{ errors }"
         tag="div"
-        name="additionalInfo"
+        :name="namePrefix + 'Additional Info'"
         class="form-row">
         <label
-          for="additionalInfo"
+          :for="'additionalInfo'+uniqueKey"
           class="form-label">
           Additional Info
         </label>
         <input
-          id="additionalInfo"
+          :id="'additionalInfo'+uniqueKey"
           ref="additionalInfo"
           v-model="address.additionalInfo"
-          name="additionalInfo"
+          :name="'additionalInfo'+uniqueKey"
           placeholder="Additional Info"
           type="text"
           class="form-field labelless"
@@ -253,6 +254,11 @@ export default {
   components: {
     PostcodeSelect
   },
+  data() {
+    return {
+      uniqueKey: Math.random()
+    };
+  },
   props: {
     address: {
       type: Object,
@@ -264,6 +270,10 @@ export default {
     withoutAdditionalInfo: {
       type: Boolean,
       default: false
+    },
+    namePrefix: {
+      type: String,
+      default: ''
     }
   },
   computed: {

package/components/checkout/order/order-billing-information/order-billing-information.vue

@@ -25,6 +25,7 @@
             <address-form
               :address="order.billingAddress"
               :copy-from="order.shippingAddress"
+              name-prefix="Delivery "
               :without-additional-info="true" />
           </div>
         </div>

package/components/checkout/order/order-success/order-success.scss

@@ -7,7 +7,7 @@
     right: 0;
   }
   &__card {
-    min-height: 250px;
+    min-height: 400px;
     display: flex;
     align-items: center;
     justify-content: center;

package/components/common/postcode_select/postcode-select.vue

@@ -4,7 +4,7 @@
       v-slot="{ errors }"
       tag="div"
       :rules="required ? 'required' : ''"
-      name="Postcode"
+      :name="namePrefix + 'Postcode'"
       class="form-group">
       <label
         v-if="labelless"
@@ -55,6 +55,9 @@
       <input
         type="text"
         :value="value"
+        :id="'postcode'+uniqueKey"
+        :name="'postcode'+uniqueKey"
+        :required="required"
         :class="{ 'filled': value || selected }"
         class="form-hidden-validator form-field"
         style="display: none" />
@@ -120,10 +123,15 @@ export default {
     },
     suburb: {
       type: Object
+    },
+    namePrefix: {
+      type: String,
+      default: ''
     }
   },
   data() {
     return {
+      uniqueKey: Math.random(),
       selected: null,
       suburbs: [],
       options: [],

package/components/products/products_brands/products-brands.vue

@@ -54,7 +54,7 @@ export default {
       return this.brands;
     },
     currentBrand() {
-      return this.$route.params.brand;
+      return this.$route.params.brand || this.$route.query.brand;
     }
   }
 };

package/components/products/products_link/products-link.vue

@@ -12,6 +12,9 @@ import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
 export default {
   name: 'ProductsLink',
   props: {
+    category: {
+      type: String
+    },
     type: {
       type: String
     },
@@ -37,6 +40,7 @@ export default {
   computed: {
     link() {
       const params = {
+        category: this.category,
         type: this.type,
         brand: this.brand,
         tags: this.tags,

package/components/products/products_types/products-types.vue

@@ -8,9 +8,9 @@
         :class="{
           'ProductsTypes__item--active': type.alias === currentType
         }">
-        <a
-          :href="`/products${type.alias === currentType ? '' : `/${type.alias}`}`"
-          class="ProductsTypes__more">
+        <products-link
+          class="ProductsTypes__more"
+          :type="type.alias === currentType ? null : type.alias">
           <checked-icon
             v-if="hasSelectedIcon"
             :checked="type.alias === currentType"
@@ -25,7 +25,7 @@
             v-else-if="hasThumbs"
             :class="`icon-${type.alias}`"></i>
           {{ type.name }}
-        </a>
+        </products-link>
       </div>
     </toggle-content>
   </div>
@@ -35,12 +35,14 @@
 import { mapGetters } from 'vuex';
 import ToggleContent from '@lancom/shared/components/common/toggle-content';
 import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
 
 export default {
   name: 'ProductsTypes',
   components: {
     ToggleContent,
-    CheckedIcon
+    CheckedIcon,
+    ProductsLink
   },
   props: {
     hasSelectedIcon: {
@@ -59,7 +61,7 @@ export default {
   computed: {
     ...mapGetters('products', ['types']),
     currentType() {
-      return this.$route.params.type;
+      return this.$route.params.type || this.$route.query.type;
     }
   }
 };

package/layouts/products.vue

@@ -98,27 +98,51 @@
     computed: {
       ...mapGetters('page', ['routeInfo']),
       ...mapGetters(['notificationBar', 'shop', 'country', 'currency']),
-      ...mapGetters('products', ['brands', 'types', 'tags', 'loadError', 'count', 'products', 'minPrice', 'maxPrice']),
+      ...mapGetters('products', ['category', 'categories', 'brands', 'types', 'tags', 'loadError', 'count', 'products', 'minPrice', 'maxPrice']),
+      pageItemCanonical() {
+        return this.breadcrumbs[this.breadcrumbs.length - 1]?.to;
+      },
       currentBrand() {
         return this.findByRouteParam(this.brands, 'brand');
       },
       currentTag() {
-        return this.findByRouteParam(this.tags, 'category');
+        return this.findByRouteParam(this.tags, 'tag');
       },
       currentProductType() {
         return this.findByRouteParam(this.types, 'type');
       },
+      currentCategory() {
+        return this.category;
+      },
       breadcrumbs() {
         const breadcrumbs = [{
           to: '/products',
           text: 'Products'
         }];
-  
+        if (this.currentCategory) {
+          const categoriesBreadcrumbs = [];
+          let category = this.currentCategory;
+          console.log('category: ', category);
+          while (category) {
+            categoriesBreadcrumbs.unshift({
+              to: generateProductsLink(this.$route, {
+                type: null,
+                brand: null,
+                tag: null,
+                category
+              }, true),
+              text: category.name
+            });
+            category = category.parent;
+          }
+          breadcrumbs.push(...categoriesBreadcrumbs);
+        }
         if (this.currentProductType) {
           breadcrumbs.push({
             to: generateProductsLink(this.$route, {
               type: this.currentProductType.alias,
               brand: null,
+              tag: null,
               category: null
             }),
             text: this.currentProductType.name
@@ -129,8 +153,9 @@
           breadcrumbs.push({
             to: generateProductsLink(this.$route, {
               type: this.currentProductType?.alias,
-              category: this.currentTag?.alias,
-              brand: null
+              tag: this.currentTag?.alias,
+              brand: null,
+              category: null
             }),
             text: this.currentTag.name
           });
@@ -140,8 +165,9 @@
           breadcrumbs.push({
             to: generateProductsLink(this.$route, {
               type: this.currentProductType?.alias,
-              category: this.currentTag?.alias,
-              brand: this.currentBrand?.alias
+              tag: this.currentTag?.alias,
+              brand: this.currentBrand?.alias,
+              category: this.currentCategory?.alias
             }),
             text: this.currentBrand.name
           });
@@ -155,6 +181,9 @@
         }
   
         const items = ['Products'];
+        if (this.currentCategory) {
+          items.push(this.currentCategory.name);
+        }
         if (this.currentProductType) {
           items.push(this.currentProductType.name);
         }
@@ -304,7 +333,8 @@
       fillWithItemData(text = '') {
         text = this.currentBrand ? text.replace(/{{brandName}}/g, this.currentBrand.name) : text;
         text = this.currentProductType ? text.replace(/{{typeName}}/g, this.currentProductType.name) : text;
-        text = this.currentTag ? text.replace(/{{categoryName}}/g, this.currentTag.name) : text;
+        text = this.currentTag ? text.replace(/{{tagName}}/g, this.currentTag.name) : text;
+        text = this.currentCategory ? text.replace(/{{categoryName}}/g, this.currentCategory.name) : text;
         return text;
       },
       async openAside() {

package/mixins/meta-info.js

@@ -19,7 +19,7 @@ const metaInfo = {
   },
   methods: {
     getCanonical() {
-      return this.$route.path === '/' ? '' : this.$route.path;
+      return this.$route.path === '/' ? '' : (this.pageItemCanonical || this.$route.path);
     },
     generateTitleFromRoute() {
       return this.$route.path

package/mixins/product-view.js

@@ -7,17 +7,17 @@ import { tax, staticLink, inRange } from '@lancom/shared/assets/js/utils/filters
 import { getProductLargeCover } from '@lancom/shared/assets/js/utils/colors';
 import metaInfo from '@lancom/shared/mixins/meta-info';
 import { STORE_CODES } from '@/constants/store';
-
+import { generateProductLink, generateProductsLink } from '@lancom/shared/assets/js/utils/product';
 const { mapActions, mapMutations } = createNamespacedHelpers('product');
 
-export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
+export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
   mixins: [metaInfo],
   transition(to, from) {
     if (from && from.name === 'brand-tees-slug') { return 'slide-left-to-right'; };
     if (to && to.name === 'brand-tees-slug') { return 'slide-right-to-left'; };
     return 'fade';
   },
-  async asyncData({ store, params, error, query }) {
+  async asyncData({ store, params, error, query, redirect }) {
     try {
       const { print, color, colour } = query;
       const { shop, country, currency } = store.getters;
@@ -29,10 +29,20 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
         print,
         defaultColor: color || colour
       };
+
       await store.dispatch('product/fetchProduct', data);
       await store.dispatch('product/fetchProductDetails', data);
 
       const product = store.getters['product/product'];
+
+      if ((product.useTaxonomyUrl && !params.sku) || (!product.useTaxonomyUrl && params.sku)) {
+        const redirectUrl = generateProductLink(product, data.defaultColor, isEditor);
+        return redirect(301, redirectUrl);
+      }
+      
+      if (params.sku && params.sku !== product?.SKU?.toLowerCase()) {
+        return error({ statusCode: 404, message: 'Product not found' });
+      }
       if (IS_PRODUCT_PRESET_PRINT_PRICING) {
         const printType = product.printTypes[0];
         store.commit('product/setSelectedPrintType', printType);
@@ -69,6 +79,9 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
     pageItemImage() {
       return this.mainProductImageSrc;
     },
+    pageItemCanonical() {
+      return generateProductLink(this.product);
+    },
     hasImages() {
       return this.images.length > 0;
     },
@@ -181,7 +194,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
       }
     },
     fillBreadcrumbs() {
-      this.breadcrumbs = [{
+      const breadcrumbs = [{
         to: '/products',
         text: 'Products'
       }, {
@@ -190,6 +203,19 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
       }, {
         text: this.product.name
       }];
+      if (this.product.useTaxonomyUrl && this.product.category) {
+        const categoriesBreadcrumbs = [];
+        let category = this.product.category;
+        while (category) {
+          categoriesBreadcrumbs.unshift({
+            to: generateProductsLink(null, { category }, true),
+            text: category.name
+          });
+          category = category.parent;
+        }
+        breadcrumbs.splice(1, 1, ...categoriesBreadcrumbs);
+      }
+      this.breadcrumbs = breadcrumbs;
     }
   },
   getRoute() {

package/package.json

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

package/routes/index.js

@@ -1,5 +1,80 @@
 module.exports = function(routes, resolve) {
   return [{
+    name: 'product-taxonomy-view-level1',
+    path: '/c/:category/:slug/:sku/info.html',
+    component: resolve('@/pages/_brand/_type/_slug/index.vue'),
+    chunkName: 'pages/product/view/level1'
+  }, {
+    name: 'product-taxonomy-view-level2',
+    path: '/c/:category1/:category/:slug/:sku/info.html',
+    component: resolve('@/pages/_brand/_type/_slug/index.vue'),
+    chunkName: 'pages/product/view/level2'
+  }, {
+    name: 'product-taxonomy-view-level3',
+    path: '/c/:category2/:category1/:category/:slug/:sku/info.html',
+    component: resolve('@/pages/_brand/_type/_slug/index.vue'),
+    chunkName: 'pages/product/view/level3'
+  }, {
+    name: 'product-taxonomy-view-level4',
+    path: '/c/:category3/:category2/:category1/:category/:slug/:sku/info.html',
+    component: resolve('@/pages/_brand/_type/_slug/index.vue'),
+    chunkName: 'pages/product/view/level4'
+  }, {
+    name: 'product-taxonomy-view-level5',
+    path: '/c/:category4/:category3/:category2/:category1/:category/:slug/:sku/info.html',
+    component: resolve('@/pages/_brand/_type/_slug/index.vue'),
+    chunkName: 'pages/product/view/level5'
+  }, {
+    name: 'product-taxonomy-editor-level1',
+    path: '/c/:category/:slug/:sku.html',
+    component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
+    chunkName: 'pages/product/editor/level1'
+  }, {
+    name: 'product-taxonomy-editor-level2',
+    path: '/c/:category1/:category/:slug/:sku.html',
+    component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
+    chunkName: 'pages/product/editor/level2'
+  }, {
+    name: 'product-taxonomy-editor-level3',
+    path: '/c/:category2/:category1/:category/:slug/:sku.html',
+    component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
+    chunkName: 'pages/product/editor/level3'
+  }, {
+    name: 'product-taxonomy-editor-level4',
+    path: '/c/:category3/:category2/:category1/:category/:slug/:sku.html',
+    component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
+    chunkName: 'pages/product/editor/level4'
+  }, {
+    name: 'product-taxonomy-editor-level5',
+    path: '/c/:category4/:category3/:category2/:category1/:category/:slug/:sku.html',
+    component: resolve('@/pages/_brand/_type/_slug/editor/index.vue'),
+    chunkName: 'pages/product/editor/level5'
+  }, {
+    name: 'products-taxonomy-catalog-level1',
+    path: '/c/:category',
+    component: resolve('@/pages/products/index.vue'),
+    chunkName: 'pages/products/catalog/level1'
+  }, {
+    name: 'products-taxonomy-catalog-level2',
+    path: '/c/:category1/:category',
+    component: resolve('@/pages/products/index.vue'),
+    chunkName: 'pages/products/catalog/level2'
+  }, {
+    name: 'products-taxonomy-catalog-level3',
+    path: '/c/:category2/:category1/:category',
+    component: resolve('@/pages/products/index.vue'),
+    chunkName: 'pages/products/catalog/level3'
+  }, {
+    name: 'products-taxonomy-catalog-level4',
+    path: '/c/:category3/:category2/:category1/:category',
+    component: resolve('@/pages/products/index.vue'),
+    chunkName: 'pages/products/catalog/level4'
+  }, {
+    name: 'products-taxonomy-catalog-level5',
+    path: '/c/:category4/:category3/:category2/:category1/:category',
+    component: resolve('@/pages/products/index.vue'),
+    chunkName: 'pages/products/catalog/level5'
+  }, {
     name: 'order-view',
     path: '/order/:token',
     component: resolve('@lancom/shared/pages/order/_token/index.vue'),

package/store/products.js

@@ -10,6 +10,8 @@ export const state = () => ({
   types: [],
   colors: [],
   brands: [],
+  category: null,
+  categories: [],
   tags: [],
   attributes: [],
   loadError: null,
@@ -21,6 +23,8 @@ export const getters = {
   types: ({ types }) => types || [],
   colors: ({ colors }) => colors || [],
   brands: ({ brands }) => brands || [],
+  categories: ({ categories }) => categories || [],
+  category: ({ category }) => category,
   tags: ({ tags }) => tags || [],
   attributes: ({ attributes }) => attributes || [],
   page: ({ page }) => page,
@@ -46,7 +50,7 @@ export const actions = {
       commit('setLoadError', null);
       const {
         products, count, page, perPage, productTypes, colors, brands, tags, attributes,
-        minPrice, maxPrice
+        categories, minPrice, maxPrice, category
       } = await api.fetchProducts(shop, params);
       commit('setProducts', products);
       commit('setPage', page);
@@ -55,6 +59,8 @@ export const actions = {
       commit('setTypes', productTypes);
       commit('setColors', colors);
       commit('setBrands', brands);
+      commit('setCategories', categories);
+      commit('setCategory', category);
       commit('setTags', tags);
       commit('setAttributes', attributes);
       commit('setMinPrice', minPrice);
@@ -104,6 +110,12 @@ export const mutations = {
   setBrands(state, brands) {
     state.brands = brands;
   },
+  setCategories(state, categories) {
+    state.categories = categories;
+  },
+  setCategory(state, category) {
+    state.category = category;
+  },
   setTags(state, tags) {
     state.tags = tags;
   },