@lancom/shared 0.0.384 → 0.0.385

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_size/products-kit-option-size.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="ProductsKitOptionSize__wrapper">
+    <multiselect
+      v-model="selectedSize"
+      value="_id"
+      label="shortName"
+      track-by="_id"
+      placeholder="Select size"
+      :options="availableSizes"
+      :allow-empty="false"
+      :searchable="false"
+      :option-height="60">
+      <template #option="{ option }">
+        <div class="ProductsKitOptionSize__option">
+          <span class="ProductsKitOptionSize__option-name">
+            {{ option.shortName }}
+          </span>
+        </div>
+      </template>
+      <template #singleLabel="{ option }">
+        <div class="ProductsKitOptionSize__option">
+          {{ option.shortName }}
+        </div>
+      </template>
+    </multiselect>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import Multiselect from 'vue-multiselect';
+
+export default {
+  name: 'ProductsKitOptionSize',
+  components: {
+    Multiselect
+  },
+  props: {
+    productsKit: {
+      type: Object,
+      required: true
+    },
+    option: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('productsKit', [
+      'selectedOptionsSimpleProducts',
+      'selectedOptionsColors',
+      'selectedOptionsSizes',
+    ]),
+    selectedColor() {
+      return this.selectedOptionsColors[this.option._id];
+    },
+    selectedSize: {
+      get () {
+        return this.selectedOptionsSizes[this.option._id];
+      },
+      set(size) {
+        this.selectOptionSize({ option: this.option, size });
+      }
+    },
+    availableSizes() {
+      const simpleProducts = this.selectedOptionsSimpleProducts[this.option._id] || [];
+      const uniqueSizesMap = new Map();
+      simpleProducts
+        .filter(sp => sp.quantityStock > 0)
+        .forEach(({ size, color }) => {
+          const isSameColor = color?._id === this.selectedColor?._id;
+          if (size && isSameColor && !uniqueSizesMap.has(size._id)) {
+            uniqueSizesMap.set(size._id, size);
+          }
+        });
+      return Array.from(uniqueSizesMap.values());
+    }
+  },
+  methods: {
+    ...mapActions('productsKit', ['selectOptionSize'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-kit-option-size';
+</style>

package/components/products_kit/products_kits_list/products-kits-list.scss

@@ -0,0 +1,68 @@
+@import "@/assets/scss/variables";
+
+.ProductKitsList {
+  &__wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+  }
+  &__item {
+    width: calc(50% - 30px);
+    @media (max-width: $bp-extra-small-max) {
+      width: 100%
+    }
+    margin: 15px;
+    height: 300px;
+    
+    &--large {
+      width: 100%;
+      height: 500px;  
+      @media (max-width: $bp-extra-small-max) {
+        height: 300px;
+      }
+    }
+  }
+}
+
+
+.VuePagination {
+  &__pagination {
+    display: flex;
+    justify-content: center;
+    &-item {
+      font-size: 16px;
+      line-height: 170%;
+      color: $black;
+      width: 50px;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid $grey_3;
+      border-radius: 4px;
+      margin: 0 3px;
+      a {
+        display: block;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        padding-top: 11px;
+        cursor: pointer;
+        &:hover {
+          background-color: $grey_3;
+        }
+      }
+      &.active {
+        background-color: $black;
+        color: white;
+      }
+      &.disabled {
+        pointer-events: none;
+        opacity: .5;
+      }
+    }
+  }
+  &__count {
+    display: none;
+  }
+}

package/components/products_kit/products_kits_list/products-kits-list.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="ProductKitsList__wrapper">
+      <div
+        v-for="(item) in productsKits"
+        :key="item._id"
+        class="ProductKitsList__item">
+        <transition appear>
+          <products-kits-list-item :item="item" class="elevation2" />
+        </transition>
+      </div>
+    </div>
+    <pagination
+      v-if="count > perPage"
+      :itemsCount="count"
+      :itemsPerPage="perPage" />
+  </div>
+</template>
+
+<script>
+import Pagination from '@lancom/shared/components/common/pagination';
+import ProductsKitsListItem from './products_kits_list_item/products-kits-list-item';
+
+export default {
+  name: 'ProductKitsList',
+  components: {
+    ProductsKitsListItem,
+    Pagination
+  },
+  props: {
+    productsKits: {
+      type: Array,
+      required: true
+    },
+    count: {
+      type: Number
+    },
+    perPage: {
+      type: Number
+    },
+    page: {
+      type: Number
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'products-kits-list';
+</style>

package/components/products_kit/products_kits_list/products_kits_list_item/products-kits-list-item.scss

@@ -0,0 +1,84 @@
+@import "@/assets/scss/variables";
+
+.ProductsKitsListItem {
+  &__wrapper {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    background-color: $black_medium_emphasis;
+    position: relative;
+    height: 100%;
+  }
+  &__info {
+    position: absolute;
+    top: 30px;
+    left: 30px;
+    right: 30px;
+  }
+  &__link {
+    color: white;
+    font-size: 30px;
+    font-weight: 800;
+    @media (max-width: $bp-extra-small-max) {
+      font-size: 25px;
+    }
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  &__text {
+    margin-top: 10px;
+    color: white;
+    line-height: 150%;;
+  }
+  &__date {
+    color: #e8e8e8;
+    margin-top: 7px;
+    font-size: 11px;
+  }
+  &__more {
+    position: absolute;
+    bottom: 30px;
+    left: 30px;
+    padding: 10px;
+    border-width: 1px;
+    border-style: solid; 
+    border-color: white;
+    color: white;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition: border-color 0.3s;
+    font-size: 13px;
+    font-weight: 800;
+    &>span {
+      position: relative;
+    }
+
+    &::before {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      opacity: 0;
+      background-color: $green;
+      transition: opacity 0.3s;
+    }
+
+    &:hover {
+      border-color: $green;
+      &::before {
+        opacity: 1;
+      }
+    }
+  }
+  &__overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    cursor: pointer;
+  }
+}

package/components/products_kit/products_kits_list/products_kits_list_item/products-kits-list-item.vue

@@ -0,0 +1,52 @@
+<template>
+  <article
+    class="ProductsKitsListItem__wrapper"
+    :style="{ backgroundImage }">
+    <a
+      class="ProductsKitsListItem__overlay"
+      :href="linkToProductsKit"
+      :title="item.name"></a>
+    <div class="ProductsKitsListItem__info">
+      <h3>
+        <a
+          :href="linkToProductsKit"
+          class="ProductsKitsListItem__link"
+          :title="item.name"
+          :style="{ color: item.color }">
+          {{ item.name }}
+        </a>
+      </h3>
+    </div>
+  </article>
+</template>
+
+<script>
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'ProductsKitsListItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    linkToProductsKit() {
+      return `/products-kit/${this.item.alias}`;
+    },
+    backgroundImage() {
+      return this.item.image ? `url('${staticLink(this.item.image.medium)}')` : '';
+    }
+  },
+  methods: {
+    goToNews() {
+      this.$router.push(this.linkToNews);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-kits-list-item';
+</style>

package/mixins/product-preview.js

@@ -105,6 +105,12 @@ const productPreview = {
         this.loadHolder.canLoadColorImages = true;
       }, 3000);
     }
+  },
+  methods: {
+    updateCurrentColor(color) {
+      this.currentColor = color;
+      this.$emit('color', color);
+    }
   }
 };
 

package/package.json

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

package/pages/contact.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="ContactPage__wrapper">
+    <div class="content-inner">
+      <breadcrumbs :items="breadcrumbs" />
+      <div class="row">
+        <div class="col-sm-5 col-12">
+          <contact-us />
+        </div>
+        <div class="col-sm-7 col-12">
+          <iframe
+            v-if="contacts.googleMapIframeSrc"
+            :src="contacts.googleMapIframeSrc"
+            width="100%"
+            height="100%"
+            style="border:0;"
+            loading="lazy">
+          </iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import metaInfo from '@lancom/shared/mixins/meta-info';
+
+export default {
+  name: 'ContactPage',
+  components: {
+    Breadcrumbs: () => import('@lancom/shared/components/common/breadcrumbs/breadcrumbs'),
+    ContactUs: () => import('@lancom/shared/components/asides/contact_us/contact-us')
+  },
+  mixins: [metaInfo],
+  data() {
+    return {
+      breadcrumbs: [{
+        text: 'Contact'
+      }]
+    };
+  },
+  computed: {
+    ...mapGetters(['contacts'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ContactPage{
+  &__wrapper {
+    padding: 30px 0;
+  }
+}
+</style>

package/pages/products-kit/_alias.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="ProductsKitPage__wrapper">
+    <breadcrumbs :items="breadcrumbs" />
+    <transition name="from-right-to-left" appear>
+      <products-kit :products-kit="productsKit" />
+    </transition>
+    <transition
+      v-if="hasProductsKitsList"
+      name="from-left-to-right"
+      appear>
+      <div class="content-inner">
+        <h2 class="lc_h2 lc_black ProductsKitPage__list-title">
+          You might also like
+        </h2>
+        <products-kits-list
+          class="ProductsKitPage__list"
+          :productsKits="productsKitsList" />
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+import metaInfo from '@lancom/shared/mixins/meta-info';
+
+export default {
+  name: 'ProductsKitPage',
+  components: {
+    Breadcrumbs: () => import('@lancom/shared/components/common/breadcrumbs/breadcrumbs'),
+    ProductsKit: () => import('@lancom/shared/components/products_kit/products_kit/products-kit'),
+    ProductsKitsList: () => import('@lancom/shared/components/products_kit/products_kits_list/products-kits-list')
+  },
+  mixins: [metaInfo],
+  async asyncData({ params, store, error, redirect }) {
+    console.log('asyncData: ', 1);
+    try {
+      const { shop, country, currency } = store.getters;
+      const data = {
+        shop: shop._id,
+        alias: params.alias,
+        country: country?._id,
+        currency: currency?._id
+      };
+      await store.dispatch('productsKit/fetchProductsKit', data);
+    } catch (e) {
+      console.log(e);
+    }
+    const productsKit = store.getters['productsKit/productsKit'];
+    const loadError = store.getters['productsKit/loadError'];
+
+    // console.log('loadError: ', loadError);
+    if (loadError?.redirectLink) {
+      return redirect(301, loadError?.redirectLink);
+    } else if (loadError) {
+      error(loadError);
+    }
+    return {
+      productsKit
+    };
+  },
+  data() {
+    return {
+      productsKit: null,
+      productsKits: []
+    };
+  },
+  computed: {
+    hasProductsKitsList() {
+      return this.productsKitsList.length > 0;
+    },
+    productsKitsList() {
+      return this.productsKits.filter(i => i.alias !== this.productsKit.alias).slice(0, 3);
+    },
+    breadcrumbs() {
+      const item = this.productsKit ? { text: this.productsKit.name } : null;
+      return [{
+        to: '/products-kits',
+        text: 'Products Kits'
+      }, item].filter(i => !!i);
+    },
+    pageItemType() {
+      return 'products-kits';
+    }
+  },
+  getRoute() {
+    return '/shop/:shop/products-kits/:alias';
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ProductsKitPage{
+  &__wrapper {
+    margin-top: 30px;
+  }
+  &__list-title {
+    margin-top: 20px;
+    text-align: center;
+  }
+  &__list {
+    padding: 20px 0;
+  }
+}
+</style>

package/pages/products-kit/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="ProductsKitsPage__wrapper view-transition">
+    <div class="content-inner">
+      <breadcrumbs :items="breadcrumbs" />
+      <products-kits-list
+        class="ProductsKitsPage__list"
+        :products-kits="productsKits"
+        :count="count"
+        :page="page"
+        :per-page="perPage" />
+    </div>
+  </div>
+</template>
+
+<script>
+import metaInfo from '@lancom/shared/mixins/meta-info';
+import api from '@lancom/shared/assets/js/api';
+
+const KITS_PER_PAGE = 18;
+
+export default {
+  name: 'ProductPage',
+  components: {
+    Breadcrumbs: () => import('@lancom/shared/components/common/breadcrumbs/breadcrumbs'),
+    ProductsKitsList: () => import('@lancom/shared/components/products_kit/products_kits_list/products-kits-list')
+  },
+  mixins: [metaInfo],
+  async asyncData({ store, params, query }) {
+    const { _id } = store.getters.shop;
+    const kitsQuery = { ...params, ...query, limit: KITS_PER_PAGE };
+    const { productsKits, count, page, perPage } = await api.fetchProductsKits(_id, kitsQuery);
+    return { productsKits, count, page, perPage };
+  },
+  data() {
+    return {
+      productsKits: [],
+      count: null,
+      page: null,
+      perPage: null,
+      breadcrumbs: [{
+        text: 'Products Kits'
+      }]
+    };
+  },
+  computed: {
+    pageItemType() {
+      return 'products-kits';
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ProductsKitsPage {
+  &__wrapper {
+    padding: 30px 0;
+  }
+}
+</style>

package/routes/index.js

@@ -169,5 +169,20 @@ module.exports = function(routes, resolve) {
     path: '/news/tag/:tag',
     component: resolve('@lancom/shared/pages/news/tag/_tag.vue'),
     chunkName: 'pages/news/tag'
+  }, {
+    name: 'products-kits',
+    path: '/products-kits',
+    component: resolve('@lancom/shared/pages/products-kit/index.vue'),
+    chunkName: 'pages/products-kits'
+  }, {
+    name: 'products-kit-view',
+    path: '/products-kit/:alias',
+    component: resolve('@lancom/shared/pages/products-kit/_alias.vue'),
+    chunkName: 'pages/products-kit/products-kit-view'
+  }, {
+    name: 'contact',
+    path: '/contact',
+    component: resolve('@lancom/shared/pages/contact.vue'),
+    chunkName: 'pages/contact'
   }];
 }

package/store/cart.js

@@ -134,7 +134,7 @@ export const actions = {
     const cartEntities = state.id ? (await api.fetchCartById(shop._id, state.id, params)).entities : state.entities;
     entities = entities.map(e => {
       const entitiy = cartEntities.find(e2 => isSamePrints(e, e2) && e2?.product?._id === e?.product?._id);
-      if (entitiy) {
+      if (!e.productsKit && entitiy) {
         e.simpleProducts.forEach(sp => {
           const simpleProduct = entitiy.simpleProducts.find(sp2 => sp2.SKU === sp.SKU);
           if (!simpleProduct) {