@lancom/shared 0.0.331 → 0.0.333

package/assets/js/models/product-layers.js

@@ -108,5 +108,5 @@ export const getLayerModel = async ({ type, colorId, top, left, isEditMode, url,
 };
 
 export const cloneLayerModel = layer => {
-  return { ...layer, createdAt: Date.now() };
+  return { ...layer, createdAt: Date.now(), guid: generateGUID() };
 };

package/components/common/client_settings/client-settings.vue

@@ -8,7 +8,7 @@
         <span v-if="country">
           <img
             v-if="checkedCountry"
-            :src="checkedCountry.icon" />
+            :src="checkedCountry.icon | staticLink" />
           <i
             v-else
             class="icon-globe"></i>
@@ -75,12 +75,16 @@
   
 <script>
 import { mapGetters } from 'vuex';
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 import CheckedIcon from '@lancom/shared/components/common/checked-icon';
 
 const Cookie = process.client ? require('js-cookie') : undefined;
 
 export default {
   name: 'ClientSettings',
+  filters: {
+    staticLink
+  },
   components: {
     CheckedIcon
   },

package/components/editor/editor_print_area_options/editor-print-area-options.vue

@@ -55,7 +55,12 @@ export default {
   },
   computed: {
     options() {
-      const groupItemToOption = printArea => ({ printArea, label: printArea.name, size: printArea.printSize.alias });
+      const groupItemToOption = printArea => ({
+        printArea,
+        label: printArea.name,
+        size: printArea.printSize.alias,
+        sizeLabel: printArea.printSize.name
+      });
       const productsOptions = (this.product.printAreas || [])
         .map(printArea => {
           const mainOption = { ...groupItemToOption(printArea), sides: [printArea.side] };

package/components/editor/editor_print_area_options/editor_print_area_option/editor-print-area-option.scss

@@ -8,7 +8,7 @@
   }
   &__content {
     text-align: center;
-    padding: 8px 0;
+    padding: 8px 8px 8px 0;
     display: flex;
     align-items: center;
     &:hover {

package/components/editor/editor_print_area_options/editor_print_area_option/editor-print-area-option.vue

@@ -17,7 +17,7 @@
       </div>
       <div class="EditorPrintAreaOption__info">
         <div class="lc_caption">
-          {{ option.label }}
+          {{ option.label }}. {{ option.sizeLabel }}
         </div>
         <div class="lc_regular10">
           <price
@@ -46,8 +46,10 @@
             [productType]: true
           }">
         </div>
-        <div class="lc_caption">
-          {{ suboption.label }}
+        <div>
+          <div class="lc_caption">
+            {{ suboption.label }}. {{ suboption.sizeLabel }} 
+          </div>
         </div>
       </div>
     </div>

package/components/products/product_list/product-list.scss

@@ -11,7 +11,7 @@
   }
   &__item-wrapper {
     width: 270px;
-    height: 450px;
+    height: 490px;
     margin: 0 0 15px 15px;
     position: relative;
     z-index: 1;

package/components/products/product_list_product/product-list-product.scss

@@ -73,7 +73,7 @@
     transition: opacity 0.35s ease-in-out;
     opacity: 1;
     position: absolute;
-    top: 30px;
+    // top: 30px;
     max-width: 250px;
   }
   &__cover-hover {
@@ -81,14 +81,14 @@
     z-index: 2;
     opacity: 0;
     position: absolute;
-    top: 30px;
+    // top: 30px;
     max-width: 250px;
   }
   &__link {
     position: relative;
     transition: background-color 0.5s ease;
     background-color: white;
-    height: 300px;
+    height: 340px;
     width: 270px;
     display: flex;
     align-items: center;

package/feeds/google-shopping.js

@@ -19,7 +19,7 @@ const COUNTRIES_SIZE_SYSTEMS = {
   GB: 'UK'
 };
 
-async function googleShoppingFeed(axios, config, availableStores, country, endSlug = '') {
+async function googleShoppingFeed(axios, config, availableStores, country, isEditor) {
   const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/products?host=${config.HOST_NAME}&country=${country || ''}`);
   const spliceFirstImage = images => (images || []).splice(0, 1)[0];
   const getImages = images => (images || []).length > 0 ? images : null;
@@ -42,7 +42,8 @@ async function googleShoppingFeed(axios, config, availableStores, country, endSl
               const backImages = filterImagesByType('back');
               const additionalImages = filterImagesByType('additional_image_link');
               const catalogFrontImages = (product.images || []).filter(i => (i.types || []).includes('catalog_front')).map(i => i.image);
-              const image = spliceFirstImage(feedImages) || spliceFirstImage(frontImages) || spliceFirstImage(catalogFrontImages) || spliceFirstImage(backImages) || null;
+              const feedImage = spliceFirstImage(feedImages);
+              const image = feedImage || spliceFirstImage(frontImages) || spliceFirstImage(catalogFrontImages) || spliceFirstImage(backImages) || null;
               const images = [
                 ...additionalImages,
                 ...((!backImages?.includes(image) && getImages(backImages)) || (!frontImages?.includes(image) && getImages(frontImages)) || [])
@@ -56,7 +57,8 @@ async function googleShoppingFeed(axios, config, availableStores, country, endSl
               const description = `${product.description || product.fabricInfoShort || product.name || ''}`
                 .replace(/ /g, ' ')
                 .replace(/·/, '·');
-              let link = `https://${config.HOST_NAME}/${product.brand.alias}/${product.productType.alias}/${product.alias}${endSlug || ''}?color=${sp.color.alias}`;
+                
+              let link = `https://${config.HOST_NAME}${generateProductLink(product, sp.color, isEditor)}`;
               if (sp.multipackQty) {
                 link = `${link}&multipack=${sp.SKU}`
               }
@@ -77,8 +79,8 @@ async function googleShoppingFeed(axios, config, availableStores, country, endSl
                 'g:condition': { _text: 'new' },
                 'g:mpn': { _text: sp.SKU },
                 'g:color': { _text: sp.color.name },
-                'g:image_link': { _text: sp.image || image },
-                'g:additional_image_link': (sp.image ? [image, ...images] : images).map(i => ({ _text: i })),
+                'g:image_link': { _text: staticLink(feedImage || sp.image || image, config) },
+                'g:additional_image_link': ((sp.image || feedImage) ? [image, ...images] : images).map(i => ({ _text: staticLink(i, config) })),
                 'g:price': { _text: `${(sp.price || 0)} ${sp.currencyCode || 'AUD'}` },
                 'g:availability': { _text: sp.quantityStock > 0 ? 'in_stock' : 'out_of_stock' },
                 'g:google_product_category': { _text: product.feedGoogleProductCategory || 2047 },
@@ -158,7 +160,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, endSl
               }
 
               if (product.feedLifestyleImage) {
-                info['g:lifestyle_image_link'] = { _text: product.feedLifestyleImage };
+                info['g:lifestyle_image_link'] = { _text: staticLink(product.feedLifestyleImage, config) };
               }
 
               return info;
@@ -180,7 +182,51 @@ async function googleShoppingFeed(axios, config, availableStores, country, endSl
   }
 }
 
+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;
+}
+
+function generateProductLink(product, color, toEditor) {
+  const baseLink = `/${product.brand?.alias}/${product.productType?.alias}/${product.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 const staticLink = (link, config) => {
+  const { PROD_S3_BUCKET, DEV_S3_BUCKET, PROD_CDN_URL, DEV_CDN_URL, STATIC_URL } = config || {};
+  if ((link || '').startsWith('http')) {
+    if (PROD_S3_BUCKET && PROD_CDN_URL) {
+      link = link.replace(new RegExp(`https://${PROD_S3_BUCKET}[a-z\-\.0-9]+.amazonaws.com`), PROD_CDN_URL);
+    }
+    if (DEV_S3_BUCKET && PROD_CDN_URL) {
+      link = link.replace(new RegExp(`https://${DEV_S3_BUCKET}[a-z\-\.0-9]+.amazonaws.com`), DEV_CDN_URL);
+    }
+    return link;
+  } else {
+    return `${STATIC_URL || ''}${link}`;
+  };
+}
+
+
 module.exports = {
   googleShoppingFeed,
-  googleLocalShoppingFeed
+  googleLocalShoppingFeed,
+  generateProductLink
 };

package/mixins/product-view.js

@@ -63,6 +63,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     }
 
     return {
+      isEditor,
       pageItem,
       breadcrumbs: []
     };
@@ -80,7 +81,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
       return this.mainProductImageSrc;
     },
     pageItemCanonical() {
-      return generateProductLink(this.product);
+      return generateProductLink(this.product, null, this.isEditor);
     },
     hasImages() {
       return this.images.length > 0;

package/package.json

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