@lancom/shared 0.0.350 → 0.0.352

package/assets/js/utils/colors.js

@@ -11,7 +11,7 @@ export const getColorImage = (product = {}, size = 'small', type, color, allowAn
   const validImages = (product.images || []).filter(i => !excludeTypes.some(type => isValidImageType(i, type)));
   const colorImage = color && validImages.find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (color?._id === i.color || color?._id === i.color?._id));
   const image = colorImage || validImages.find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (allowAnyColor || !i.color));
-  return image && staticLink(image[size]);
+  return image && image[size] && staticLink(image[size]);
 };
 
 export const getProductCover = (product = {}, size = 'small', type = COLORS_IMAGES_TYPES.FRONT, color, allowAnyColor = false) => {

package/components/common/pagination.vue

@@ -0,0 +1,77 @@
+<template>
+	<div>
+		<nav>
+			<ul class="pagination">
+				<li
+					v-for="page in totalPages"
+					:key="page"
+					:class="{ active: page === currentPage }">
+					<a :href="`${baseUrl}${page > 1 ? `${dividerPage}page=${page}` : ''}`">
+						{{ page }}
+					</a>
+				</li>
+			</ul>
+		</nav>
+	</div>
+</template>
+
+<script>
+export default {
+  data() {
+		const baseUrl = this.$route.fullPath
+			.replace(/page=[0-9]+/, '')
+			.replace(/\?$/, '')
+			.replace(/\&$/, '');
+    return {
+      baseUrl,
+      dividerPage: baseUrl.includes('?') ? '&' : '?',
+      currentPage: parseInt(this.$route.query.page) || 1
+    };
+  },
+	props: {
+		itemsCount: {
+			type: Number,
+			required: true
+		},
+		itemsPerPage: {
+			type: Number,
+			default: 50
+		}
+	},
+  computed: {
+    totalPages() {
+      return Math.min(20, Math.ceil(this.itemsCount / this.itemsPerPage));
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+	@import "@/assets/scss/variables";
+	.pagination {
+		list-style: none;
+		display: flex;
+		gap: 6px;
+		padding: 0;
+		justify-content: center;
+	}
+
+	.pagination li {
+		cursor: pointer;
+	}
+
+	.pagination li.active {
+		background-color: $medium_gray;
+		color: white;
+		font-weight: bold;
+	}
+
+	.pagination li a {
+		text-decoration: none;
+		color: inherit;
+		display: block;
+		border: 1px solid #ddd;
+		padding: 8px 12px;
+		border-radius: 3px;
+	}
+</style>

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_text/editor-layer-form-text.vue

@@ -5,7 +5,7 @@
         name="header"
         :invalid="invalid">
       </slot>
-      <div class="EditorLayerFormText__content">
+      <div class="EditorLayerFormText__content" @click.stop>
         <validation-provider
           tag="div"
           name="Copy"

package/components/editor/editor_product_details/editor-product-details.scss

@@ -13,6 +13,19 @@
       margin-top: -10px;
     }
   }
+  &__colors {
+    position: relative;
+  }
+  &__loader {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   &__description {
     margin-top: 15px;
     color: rgb(118, 118, 118);

package/components/editor/editor_product_details/editor-product-details.vue

@@ -125,9 +125,17 @@
         <i class="icon-rotate-tee"></i>
       </div>
     </div>
+    <div class="EditorProductDetails__section">
+      <client-only>
+        <gallery
+          v-if="hasImages"
+          :show-big-image="false" />
+      </client-only>
+    </div>
     <div
       v-if="productDetailsLoaded"
-      id="EditorProductDetails">
+      id="EditorProductDetails"
+      class="EditorProductDetails__colors">
       <div class="EditorProductDetails__section">
         <product-colors-selector
           :has-another-print-btn="false"
@@ -136,6 +144,13 @@
       <div class="EditorProductDetails__section">
         <editor-pricing :has-cart-btn="false" />
       </div>
+      <div
+        v-if="loadingProductDetails"
+        class="EditorProductDetails__loader">
+        <div>
+          <spinner />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -153,10 +168,12 @@ import Price from '@lancom/shared/components/common/price';
 import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
 import RichText from '@lancom/shared/components/common/rich-text';
 import QuoteRequestModal from '@lancom/shared/components/quotes/quote_request_modal/quote-request-modal';
+import Gallery from '@lancom/shared/components/product/gallery/gallery';
 
 export default {
   name: 'EditorProductDetails',
   components: {
+    Gallery,
     ProductColorsSelector,
     PricingDiscountsTable,
     EditorPricing,
@@ -179,6 +196,7 @@ export default {
   computed: {
     ...mapGetters(['taxName']),
     ...mapGetters('product', [
+      'loadingProductDetails',
       'product',
       'editableColor',
       'images',
@@ -197,6 +215,9 @@ export default {
       'pricingSettings',
       'country'
     ]),
+    hasImages() {
+      return this.images.length > 0;
+    },
     previewPrintProduct() {
       return {
         ...this.product,

package/components/editor/editor_workspace/editor-workspace.vue

@@ -136,14 +136,7 @@ export default {
       size: null,
       fabricHelper: null,
       preloading: true,
-      isRotating: false,
-      productSides: [
-        { label: 'Front', value: 'front' },
-        { label: 'Back', value: 'back' }
-        // { label: 'Left sleeve', value: 'left_sleeve' },
-        // { label: 'Right sleeve', value: 'right_sleeve' },
-        // { label: 'Outside label', value: 'outside_label' }
-      ]
+      isRotating: false
     };
   },
   props: {
@@ -164,6 +157,14 @@ export default {
       'editableLayers',
       'editorSize'
     ]),
+    productSides() {
+      const sides = [
+        { label: 'Front', value: 'front' },
+        { label: 'Back', value: 'back' }
+      ]
+      const validSides = sides.filter(s => this.product.printAreas?.some(pa => pa.side === s.value));
+      return validSides[0] ? validSides : [sides[0]];
+    },
     sideZoomSize() {
       return this.printAreaZoomSize?.width;
     },

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.scss

@@ -88,6 +88,9 @@
           display: inline;
         }
       }
+      &:last-child {
+        display: none;
+      }
     }
     &-divider {
       color: $grey_1;
@@ -110,10 +113,17 @@
       }
     }
     &.side {
-      width: 20px;
+      display: flex;
+      flex-direction: row;
       .EditorWorkspaceSide__placeholder-option span {
         &:last-child {
-          display: inline;
+          display: inline-block;
+          background-color: $purple;
+          color: $white;
+          cursor: pointer;
+          padding: 4px;
+          margin: 1px;
+          font-size: 15px;
         }
         &:first-child {
           display: none;
@@ -122,6 +132,13 @@
       .EditorWorkspaceSide__placeholder-divider {
         display: none;
       }
+      .EditorWorkspaceSide__placeholder-option--edit-btn {
+        display: flex;
+        span {
+          margin-top: -0.5px !important;
+          display: inline-block !important;
+        }
+      }
     }
   }
   &__alert {

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -33,7 +33,7 @@
       </div>
     </div>
     <div
-      v-if="fabricHelper"
+      v-if="fabricHelper && !editModeSelectedLayer"
       class="EditorWorkspaceSide__placeholder"
       :class="{
         tighten: !isZoomed && printAreaIsSmall,
@@ -45,7 +45,7 @@
         @click="createTextLayer"
         class="EditorWorkspaceSide__placeholder-option">
         <span>Type here</span>
-        <span>T</span>
+        <span style="margin-top: -0.5px;">Text</span>
       </div>
       <div class="EditorWorkspaceSide__placeholder-divider">
         or
@@ -61,7 +61,7 @@
                 <i class="icon-picture"></i> Add art
               </span>
               <span>
-                <i class="icon-picture"></i>
+                Art
               </span>
             </div>
           </template>
@@ -77,6 +77,12 @@
           </template>
         </file-uploader>
       </div>
+      <!-- <div
+        v-if="editablePrintAreaLayers"
+        @click="editFirstLayer"
+        class="EditorWorkspaceSide__placeholder-option EditorWorkspaceSide__placeholder-option--edit-btn">
+        <span>Edit</span>
+      </div> -->
     </div>
     <div
       v-show="isVisibleOverlay"
@@ -180,6 +186,9 @@ export default {
     sideEditableLayers() {
       return this.editableLayers.filter(l => l.sideId === this.side);
     },
+    editablePrintAreaLayers() {
+      return this.printAreaLayers.some(l => l.editableDetails);
+    },
     printAreaLayers() {
       const paId = this.printArea?.parentPrintArea || this.printArea?._id;
       const layers = this.editableLayers.filter(l => !paId || (l.printArea === paId));
@@ -196,8 +205,8 @@ export default {
       // console.log('this.fabricHelper.printAreaRect: ', this.fabricHelper.printAreaRect);
       const ratio = this.calcWorkspaceSize() / this.editorSize.width;
       return this.printAreaLayers.length > 0 ? {
-        top: `${top * ratio}px`,
-        left: `${(left + width) * ratio + 4}px`
+        top: `${(top + height) * ratio}px`,
+        left: `${left * ratio}px`
       } : {
         top: `${top * ratio}px`,
         left: `${left * ratio}px`,
@@ -275,12 +284,20 @@ export default {
     ...mapActions('product', ['createLayer']),
     ...mapMutations('product', [
       'setSelectedLayerField',
+      'setEditModeSelectedLayer',
       'setSelectedLayer',
       'removeTemplateLayer'
     ]),
     ...mapMutations('layers', [
       'setLayersThumbnail'
     ]),
+    editFirstLayer() {
+      const layer = this.printAreaLayers.find(l => l.editableDetails);
+      if (layer?.editableDetails) {
+        this.setSelectedLayer(layer);
+        this.setEditModeSelectedLayer(true);
+      }
+    },
     checkVisibleWireframe() {
       this.visibleWireframe = this.sideEditableLayers.length > 0;
     },

package/components/news/news_list/news-list.vue

@@ -16,16 +16,14 @@
       </div>
     </div>
     <pagination
-      v-if="perPage > 0"
-      v-model="currentPage"
-      :records="count"
-      :per-page="perPage"
-      :options="{ chunk: 3 }" />
+      v-if="count > perPage"
+      :itemsCount="count"
+      :itemsPerPage="perPage" />
   </div>
 </template>
 
 <script>
-import Pagination from 'vue-pagination-2';
+import Pagination from '@lancom/shared/components/common/pagination';
 import NewsListItem from '../news_list_item/news-list-item';
 
 export default {
@@ -48,23 +46,6 @@ export default {
     page: {
       type: Number
     }
-  },
-  computed: {
-    currentPage: {
-      get() {
-        return this.page;
-      },
-      set(page) {
-        const params = [];
-        if (page > 1) {
-          params.push(`page=${page}`);
-        }
-        const link = `${this.$route.path}${params.length ? `?${params.join('&')}` : ''}`;
-        window.location = link;
-        // this.$router.push(link);
-        // window.scrollTo(0, 0);
-      }
-    }
   }
 };
 </script>

package/components/product/gallery/gallery.scss

@@ -215,5 +215,11 @@
       max-width: 800px;
       max-height: 800px;
     }
+    &.preview {
+      img {
+        max-width: 350px;
+        max-height: 350px;
+      }
+    }
   }
 }

package/components/product/gallery/gallery.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="Gallery__wrapper">
-    <div class="Gallery__big">
+    <div
+      v-if="showBigImage"
+      class="Gallery__big">
       <div class="Gallery__big-image">
         <img
           :src="staticLink(currentImage.large)"
@@ -40,7 +42,10 @@
     </div>
     <div
       v-if="isZooming"
-      class="Gallery__zoom-image">
+      class="Gallery__zoom-image"
+      :class="{
+        preview: !showBigImage
+      }">
       <img
         :src="staticLink(currentImage.large)"
         :style="zoomImageStyles"
@@ -54,7 +59,9 @@
         :class="{
           'Gallery__small-image--active': (visibleImagesFrom + index) === activeIndex
         }"
-        @click="goToSlideAndChangeColor(visibleImagesFrom + index)">
+        @click="goToSlideAndChangeColor(visibleImagesFrom + index)"
+        @mouseenter="startPreview(visibleImagesFrom + index)"
+        @mouseleave="stopZoom">
         <img
           :src="staticLink(image.small)"
           :alt="product.name"
@@ -116,6 +123,10 @@ export default {
     slidesPerRow: {
       type: Number,
       default: 6
+    },
+    showBigImage: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -199,6 +210,12 @@ export default {
   methods: {
     ...mapActions('product', ['selectColor']),
     staticLink,
+    startPreview(index) {
+      if (!this.isZoomin) {
+        this.startZoom();
+        this.goToSlideAndChangeColor(index);
+      }
+    },
     startZoom() {
       this.isZooming = true;
     },

package/components/product/layouts/product_main_info/product-main-info.vue

@@ -29,7 +29,7 @@
         class="lc_regular16 ProductMainInfo__description-body"
         v-html="product.description || '—'">
       </p>
-      <div class="ProductMainInfo__additional-info">
+      <!-- <div class="ProductMainInfo__additional-info">
         <span class="lc_medium16">
           &bull;
           Shoulder to shoulder tape
@@ -52,7 +52,7 @@
             </div>
           </template>
         </v-popover>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>

package/components/product/product.vue

@@ -18,6 +18,17 @@
         <section class="Product__section">
           <product-main-info :product="product" />
         </section>
+        <section class="Product__section">
+          <btn
+            :btn-block="true"
+            :to="goToEditorLink"
+            btn-class="purple"
+            btn-label="DESIGN AND ORDER">
+            <i
+              slot="icon-after"
+              class="icon-arrow-right"></i>
+          </btn>
+        </section>
         <section class="Product__section">
           <wizard-editor />
         </section>
@@ -44,6 +55,9 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import RelatedProducts from '@lancom/shared/components/product/related_products/related-products';
+import Gallery from '@lancom/shared/components/product/gallery/gallery';
+import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 import ProductMainInfo from './layouts/product_main_info/product-main-info';
 import ProductColorsSelector from './product_colors_selector/product-colors-selector';
 import ProductTierPrices from './layouts/product_tier_prices/product-tier-prices';
@@ -51,8 +65,6 @@ import ProductFabricAndSizeInfo from './layouts/product_fabric_and_size_info/pro
 import ProductPackaging from './layouts/product_packaging/product-packaging';
 import ProductModelMeasurements from './layouts/product_model_measurements/product-model-measurements';
 import ProductSizeTable from './layouts/product_size_table/product-size-table';
-import RelatedProducts from '@lancom/shared/components/product/related_products/related-products';
-import Gallery from '@lancom/shared/components/product/gallery/gallery';
 import WizardEditor from './wizard-editor/wizard-editor.vue';
 
     
@@ -80,6 +92,9 @@ export default {
       'productDetails',
       'editableColor'
     ]),
+    goToEditorLink() {
+      return generateProductLink(this.product, null, true);
+    },
     hasImages() {
       return this.images.length > 0;
     }

package/components/product/product_color_image/product-color-image.vue

@@ -6,7 +6,7 @@
     <div
       v-if="hasAdditionalColors"
       :style="{
-        'top': additionalColorHeight,
+        'top': hasMainColor ? additionalColorHeight : 0,
         width: '100%',
         height: '100%',
         position: 'relative'
@@ -41,6 +41,9 @@ export default {
     }
   },
   computed: {
+    hasMainColor() {
+      return (!!this.color?.pattern || !!this.color?.rgb);
+    },
     pattern() {
       return this.color.pattern && staticLink(this.color.pattern);
     },
@@ -54,7 +57,9 @@ export default {
       return (this.color.additionalColors || []);
     },
     additionalColorHeight() {
-      return `${100 / (this.additionalColors.length + 1)}%`;
+      const color = this.hasMainColor ? 1 : 0;
+      const height = 100 / (this.additionalColors.length + color);
+      return `${height}%`;
     },
     additionalColorsThumbs() {
       return (this.color.additionalColors || [])

package/components/products/products_catalog/products-catalog.vue

@@ -10,17 +10,16 @@
           :placeholder="placeholder" />
       </slot>
       <pagination
-        v-model="currentPage"
-        :records="count"
-        :per-page="perPage"
-        :options="{ chunk: 3 }" />
+        v-if="count > perPage"
+        :itemsCount="count"
+        :itemsPerPage="perPage" />
     </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import Pagination from 'vue-pagination-2';
+import Pagination from '@lancom/shared/components/common/pagination';
 import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
 import ProductList from '../product_list/product-list';
 

package/feeds/google-shopping.js

@@ -72,6 +72,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 'g:item_group_id': { _text: product.SKU },
                 'g:size': { _text: sp.size.name },
                 'g:size_system': COUNTRIES_SIZE_SYSTEMS[country] || country || 'AU',
+                'g:ships_from_country': country || 'AU',
                 'g:size_type': 'regular',
                 'g:gender': { _text: product.gender },
                 'g:material': { _text: product.fabricInfoShort },
@@ -119,6 +120,10 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 }
               }
 
+              if (product.country) {
+                info['g:shipping_label'] = product.country;
+              }
+
               const productHighlight = `${product.feedProductHighlight || ''}`
                 .trim()
                 .split(/\n+/g)

package/layouts/products.vue

@@ -61,7 +61,7 @@
   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 } from '@lancom/shared/assets/js/utils/colors';
+  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';
@@ -93,13 +93,17 @@
     middleware: ['page-info'],
     async fetch() {
       await this.loadProducts();
+      if (process.server) {
+        this.$root.context?.res?.setHeader('Cache-Control', `max-age=${86400}`);;
+      }
     },
     computed: {
       ...mapGetters('page', ['routeInfo']),
       ...mapGetters(['notificationBar', 'shop', 'country', 'currency']),
       ...mapGetters('products', ['category', 'categories', 'brands', 'types', 'tags', 'loadError', 'count', 'products', 'minPrice', 'maxPrice']),
       pageItemCanonical() {
-        return this.breadcrumbs[this.breadcrumbs.length - 1]?.to;
+        const page = +this.$route.query.page;
+        return `${this.breadcrumbs[this.breadcrumbs.length - 1]?.to}${page > 1 ? `?page=${page}` : ''}`;
       },
       currentBrand() {
         return this.findByRouteParam(this.brands, 'brand');
@@ -252,7 +256,8 @@
             };
           }
   
-          const image = getProductLargeCover(product, 'front');
+          const image = getProductLargeCover(product, 'front') || getProductMediumCover(product, 'front');
+          console.log('image: ', image, product.images);
           if (image) {
             schema.image = image;
           }
@@ -314,7 +319,8 @@
           ...this.$route.query,
           country: this.country?._id,
           currency: this.currency?._id,
-          placeholder
+          placeholder,
+          limit: 80
         };
         try {
           await this.fetchProducts({ params, shop: this.shop._id });
@@ -322,7 +328,6 @@
           setTimeout(() => this.logGtm());
         } catch ({ response }) {
           if (process.server) {
-            // console.log('status code: ', this.loadError, process.server, this._self.context, Object.keys(this));
             this.$root.context.res.statusCode = this.loadError?.statusCode || 500;
           }
         }

package/mixins/product-view.js

@@ -17,7 +17,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     if (to && to.name === 'brand-tees-slug') { return 'slide-right-to-left'; };
     return 'fade';
   },
-  async asyncData({ store, params, error, query, redirect }) {
+  async asyncData({ store, params, error, query, redirect, res }) {
     try {
       const { print, color, colour } = query;
       const { shop, country, stockCountry, currency } = store.getters;
@@ -63,6 +63,8 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
       error(loadError);
     }
 
+    res?.setHeader('Cache-Control', `max-age=${3600}`);
+
     return {
       isEditor,
       pageItem,
@@ -122,9 +124,10 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     };
     if (!this.product) {
       await this.fetchProduct(data);
-      await this.fetchProductDetails(data);
     }
 
+    await this.fetchProductDetails(data);
+
     try {
       if (this.preSetPrints?.length) {
         for (const preSetPrint of this.preSetPrints) {
@@ -235,7 +238,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     const productSchema = {
       '@context': 'https://schema.org',
       '@type': 'Product',
-      description: this.product.gsFeedDescription || this.product.description,
+      description: (this.product.gsFeedDescription || this.product.description || '').replace(/<[^>]*>/g, ''),
       name,
       offers: this.productDetails?.simpleProducts.map(sp => {
         const spMaxPrice = (sp.pricing || []).reduce((price, pricing) => Math.max(price, pricing.price), 0);

package/package.json

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

package/plugins/cache-headers.js

@@ -1,13 +1,17 @@
 module.exports = function (req, res, next) {
+  if (res.getHeader('Cache-Control')) {
+    return next();
+  }
+
   if (!/auth\=/.test(req.headers?.cookie || '')) {
     const routes = [
       /^\/quotes\//,
       /\.xml$/
     ];
     const value = routes.some(route => route.test(`${req.url}`)) ? 'no-cache' : `max-age=${31536000}`;
-    res.setHeader('Cache-Control', value);
+    res?.setHeader('Cache-Control', value);
   } else {
-    res.setHeader('Cache-Control', 'no-cache');
+    res?.setHeader('Cache-Control', 'no-cache');
   }
   next();
 };

package/store/product.js

@@ -12,6 +12,7 @@ import { sortByName } from '../assets/js/utils/filters';
 export const state = () => ({
   multipack: null,
   calculatingPrice: false,
+  loadingProductDetails: false,
   images: [],
   priceIncludeGST: false,
   product: null,
@@ -49,6 +50,7 @@ export const state = () => ({
 });
 
 export const getters = {
+  loadingProductDetails: ({ loadingProductDetails }) => loadingProductDetails,
   multipack: ({ multipack }) => multipack,
   calculatingPrice: ({ calculatingPrice }) => calculatingPrice,
   product: ({ product }) => product,
@@ -177,8 +179,10 @@ export const actions = {
   },
   async fetchProductDetails({ commit, state }, { shop, slug, country, stockCountry, currency, defaultColor = 'white' }) {
     const params = { country, currency, stockCountry };
+    commit('setLoadingProductDetails', true);
     const response = await api.fetchProductDetails(shop, slug, params);
     commit('setProductDetails', response);
+    commit('setLoadingProductDetails', false);
 
     const catalogFrontColorId = getColorOfDefaultCatalogFrontImage(state.product);
     const editableColor = state.availableColors.find(c => c.alias === defaultColor) ||
@@ -273,6 +277,9 @@ export const actions = {
 };
 
 export const mutations = {
+  setLoadingProductDetails(state, loadingProductDetails) {
+    state.loadingProductDetails = loadingProductDetails;
+  },
   setMultipack(state, multipack) {
     state.multipack = multipack;
   },