@lancom/shared 0.0.266 → 0.0.268

package/components/common/file_uploader.vue

@@ -97,6 +97,7 @@ export default {
     },
     onProgress(progress) {
       // const duration = progress ? 0.1 : 0;
+      this.progress = progress;
       // this.timelineLite.to(this, duration, { progress, ease: Power3.easeIn });
     },
     toggle() {

package/components/product/product_multipacks_carousel/product-multipacks-carousel.scss

@@ -15,35 +15,37 @@
     ::v-deep .slick-list {
       min-height: 205px;
     }
-    ::v-deep .slick-arrow.slick-prev,
-    ::v-deep .slick-arrow.slick-next {
+
+    ::v-deep .slick-arrow {
       position: absolute;
-      bottom: 25px;
-      right: 0;
-      background-color: black;
-      border: 1px solid white;
-      background-image: url(./../../../static/icons/arrow-left.svg);
+      color: white;
+      top: 120px;
+      background-color: $gray;
+      background-image: url(./../../../static/icons/arrow-right.svg);
       background-position: center;
       background-repeat: no-repeat;
-      background-size: 15px 15px;
-      width: 41px;
-      height: 41px;
+      background-size: 25px 25px;
+      width: 31px;
+      height: 47px;
+      margin-top: -45px;
       text-indent: -9999px;
+      border: none;
       cursor: pointer;
       z-index: 2;
 
+      &.slick-prev {
+        left: 0;
+        transform: rotate(180deg);
+      }
+      &.slick-next {
+        right: 0;
+      }
       &:hover {
         box-shadow: 0 0 3px $grey_2;
       }
-    }
-    ::v-deep .slick-arrow.slick-prev {
-      transform: rotateZ(180deg);
-      left: 0;
-      right: auto;
-    }
-    ::v-deep .slick-arrow.slick-prev:focus,
-    ::v-deep .slick-arrow.slick-next:focus {
-      outline: none;
+      &:focus {
+        outline: none;
+      }
     }
   }
   &__items {
@@ -56,5 +58,13 @@
     height: 200px;
     max-width: 300px;
     flex-grow: 1;
+    &--active {
+      .elevation2 {
+        box-shadow: 0px 1px 5px $green !important;
+      }
+      ::v-deep .ProductMultipack__price {
+        background-color: $green !important;
+      }
+    }
   }
 }

package/components/product/product_multipacks_carousel/product-multipacks-carousel.vue

@@ -4,11 +4,15 @@
       <div
         v-for="multipack in visibleMultipacks"
         :key="multipack._id"
-        class="ProductMultipacksCarousel__item">
+        class="ProductMultipacksCarousel__item"
+        :class="{
+          'ProductMultipacksCarousel__item--active': multipack === selectedMultipack
+        }">
         <product-multipack
           :multipack="multipack"
           :simple-products="simpleProducts"
-          class="elevation2" />
+          class="elevation2"
+          @selected="toggleMultipack(multipack)" />
       </div>
     </div>
     <button
@@ -27,6 +31,8 @@
 </template>
 
 <script>
+import { mapMutations } from 'vuex';
+import { inRange } from '@lancom/shared/assets/js/utils/filters';
 import ProductMultipack from './product_multipack/product-multipack';
 
 export default {
@@ -36,7 +42,8 @@ export default {
   },
   data() {
     return {
-      thumbsPage: 0
+      thumbsPage: 0,
+      selectedMultipack: null
     };
   },
   props: {
@@ -65,6 +72,38 @@ export default {
     }
   },
   methods: {
+    toggleMultipack(multipack) {
+      this.selectedMultipack = this.selectedMultipack === multipack ? null : multipack;
+      this.clearSimpleProductsAmount();
+      if (this.selectedMultipack) {
+        this.buyMultipack()
+      }
+    },
+    ...mapMutations('product', ['setSimpleProductAmount', 'clearSimpleProductsAmount']),
+    buyMultipack() {
+      const sizes = [
+        { size: 'S', percent: 0.15 },
+        { size: 'M', percent: 0.2 },
+        { size: 'XL', percent: 0.3 },
+        { size: '2XL', percent: 0.05 },
+        { size: 'L' }
+      ];
+      let leftQty = this.selectedMultipack.qty;
+      sizes.forEach(s => {
+        const simpleProduct = this.simpleProducts.find(simpleProduct => simpleProduct.size.shortName === s.size);
+        if (simpleProduct) {
+          const qty = s.percent ? +(s.percent * this.selectedMultipack.qty).toFixed(0) : leftQty;
+          const amount = inRange(qty, 0, simpleProduct.quantityStock || 999);
+          leftQty -= amount;
+          this.setSimpleProductAmount({
+            colorId: simpleProduct.color._id,
+            sizeId: simpleProduct.size._id,
+            amount
+          });
+        }
+      });
+      
+    },
     goToPrevPage() {
       this.thumbsPage = Math.max(0, this.thumbsPage - 1);
     },

package/components/product/product_multipacks_carousel/product_multipack/product-multipack.scss

@@ -2,11 +2,21 @@
 
 .ProductMultipack {
   &__price {
-    padding: 15px;
+    padding: 10px;
     text-align: center;
     font-size: 14px;
     font-weight: bold;
     background-color: $gray;
+    span {
+      text-align: center;
+      padding: 6px;
+      background-color: $orange;
+      color: $white;
+      display: inline-block;
+      font-weight: bold;
+      font-size: 15px;
+      margin-left: 14px;
+    }
   }
   &__image {
     position: absolute;
@@ -16,28 +26,18 @@
     bottom: 0;
     background-position: left top;
     background-repeat: no-repeat;
-    background-size: contain;
+    background-size: cover;
   }
   &__banner {
     position: relative;
     height: 140px;
     &-info {
       position: absolute;
-      top: 20px;
-      right: 10px;
+      top: 0px;
+      right: 0px;
       display: flex;
       flex-direction: column;
       align-items: end;
-      &-item span {
-        margin-bottom: 10px;
-        text-align: center;
-        padding: 6px;
-        background-color: $orange;
-        color: $white;
-        display: inline-block;
-        font-weight: bold;
-        font-size: 15px;
-      }
     }
   }
 }

package/components/product/product_multipacks_carousel/product_multipack/product-multipack.vue

@@ -1,12 +1,13 @@
 <template>
   <div
     :id="`product-multipack-${multipack._id}`"
-    class="ProductMultipack__wrapper">
+    class="ProductMultipack__wrapper"
+    @click="buyMultipack()">
     <div class="ProductMultipack__banner">
       <div
         class="ProductMultipack__image"
         :style="{
-          'background-image': multipack.image ? `url('${multipack.image.small}'` : null
+          'background-image': bannerImage ? `url('${bannerImage}'` : null
         }">
       </div>
       <div class="ProductMultipack__banner-info">
@@ -14,27 +15,22 @@
           <btn
             style="padding: 10px; height: 35px; margin-bottom: 10px;"
             btn-class="green"
-            btn-label="BUY"
+            :btn-label="`BUY ${multipack.qty}`"
             size="sm"
             @onclick="buyMultipack()" />
         </div>
-        <div class="ProductMultipack__banner-info-item">
-          <span>{{ multipack.qty }}</span>
-        </div>
-        <div class="ProductMultipack__banner-info-item">
-          <span>{{ totalPrice | priceWithTax(pricingSettings, currency) }}</span>
-        </div>
       </div>
     </div>
     <div class="ProductMultipack__price">
-      Only {{ oneItemPrice | priceWithTax(pricingSettings, currency) }} each
+      {{ oneItemPrice | priceWithTax(pricingSettings, currency) }} each 
+      <span>{{ totalPrice | priceWithTax(pricingSettings, currency) }}</span>
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex';
-import { priceWithTax, inRange } from '@lancom/shared/assets/js/utils/filters';
+import { mapGetters } from 'vuex';
+import { priceWithTax } from '@lancom/shared/assets/js/utils/filters';
 
 export default {
   name: 'LancomProductMultipack',
@@ -53,6 +49,10 @@ export default {
   },
   computed: {
     ...mapGetters(['pricingSettings', 'currency']),
+    bannerImage() {
+      const banner = this.multipack.banner?.editorImage || this.multipack.banner;
+      return banner?.origin;
+    },
     simpleProduct() {
       return (this.simpleProducts || []).find(sp => sp.SKU === this.multipack.SKU);
     },
@@ -64,13 +64,8 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('product', ['setSimpleProductAmount']),
     buyMultipack() {
-      this.setSimpleProductAmount({
-        colorId: this.simpleProduct.color._id,
-        sizeId: this.simpleProduct.size._id,
-        amount: inRange(this.multipack.qty, 0, this.simpleProduct.quantityStock || 999)
-      });
+      this.$emit('selected', this.multipack);
     }
   }
 };

package/feeds/google-shopping.js

@@ -96,10 +96,10 @@ async function googleShoppingFeed(axios, config, availableStores) {
               }
               if (product.volume) {
                 if (product.volume.length) {
-                  info['g:shipping_length'] = { _text: `${parseInt(product.volume.length * (sp.multipackQty || 1))} cm` };
+                  info['g:shipping_length'] = { _text: `${parseInt(product.volume.length)} cm` };
                 }
                 if (product.volume.width) {
-                  info['g:shipping_width'] = { _text: `${parseInt(product.volume.width * (sp.multipackQty || 1))} cm` };
+                  info['g:shipping_width'] = { _text: `${parseInt(product.volume.width)} cm` };
                 }
                 if (product.volume.height) {
                   info['g:shipping_height'] = { _text: `${parseInt(product.volume.height * (sp.multipackQty || 1))} cm` };

package/package.json

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

package/store/product.js

@@ -67,6 +67,7 @@ export const getters = {
   hasLayers: ({ template }) => (template.layers || []).length > 0,
   visibleSteps: ({ template }) => template.visibleSteps,
   simpleProducts: ({ template }) => template.simpleProducts || [],
+  editableColorSimpleProducts: ({ template, editableColor }) => (template.simpleProducts || []).filter(sp => sp.color._id === editableColor._id),
   usedSimpleProducts: ({ template }) => (template.simpleProducts || []).filter(p => p.amount > 0),
   usedSimpleProductsQuantity: ({ template }) => (template.simpleProducts || []).filter(p => p.amount > 0).reduce((sum, { amount }) => sum + amount, 0),
   usedBigSizeSimpleProductsQuantity: (state, { usedSimpleProducts }) => filterBigSize(usedSimpleProducts).reduce((sum, { amount }) => sum + amount, 0),
@@ -410,6 +411,12 @@ export const mutations = {
       Vue.set(state.template.simpleProducts, index, simpleProduct);
     }
   },
+  clearSimpleProductsAmount(state) {
+    state.template.simpleProducts.forEach((simpleProduct, index) => {
+      Vue.set(simpleProduct, 'amount', 0);
+      Vue.set(state.template.simpleProducts, index, simpleProduct);
+    })
+  },
   setProductPricing(state, price) {
     state.productPricing = price;
   },