@lancom/shared 0.0.62 → 0.0.66

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

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="ProductList__wrapper"
+    :data-aos="aosFadeLeft">
+    <div
+      v-if="hasProducts"
+      style="display: contents">
+      <div
+        v-for="(product, index) in products"
+        :key="product._id"
+        class="ProductList__item-wrapper"
+        :class="{
+          'ProductList__item-wrapper--active': activeProduct === index
+        }"
+        @mouseenter="setActiveProduct(index)"
+        @mouseleave="setActiveProduct(null)">
+        <slot name="product" v-bind="{ product, full: activeProduct === index, toEditor }">
+          <product-list-product
+            :product="product"
+            :to-editor="toEditor"
+            :full="activeProduct === index"
+            class="ProductList__item"
+            :class="{
+              'ProductList__item--active': activeProduct === index
+            }" />
+        </slot>
+      </div>
+    </div>
+    <div
+      v-else
+      class="ProductList__empty">
+      Products not found
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductListProduct from '../product_list_product/product-list-product';
+
+export default {
+  name: 'LancomProductList',
+  components: {
+    ProductListProduct
+  },
+  props: {
+    products: {
+      type: Array,
+      required: true
+    },
+    toEditor: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      activeProduct: null
+    };
+  },
+  computed: {
+    hasProducts() {
+      return this.products.length > 0;
+    }
+  },
+  methods: {
+    setActiveProduct(activeProduct) {
+      const isTouch = ('ontouchstart' in window);
+      if (!isTouch) {
+        this.activeProduct = activeProduct;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-list';
+</style>

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

@@ -0,0 +1,124 @@
+@import "@/assets/scss/variables";
+
+.ProductListProduct {
+  &__wrapper {
+    background: $white;
+
+    .visible-full {
+      opacity: 0;
+    }
+    &--full {
+      // background: $white;
+      .visible-full {
+        opacity: 1;
+      }
+    }
+  }
+  &__colors {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 14px 25px 20px 25px;
+  }
+  &__color {
+    margin: 0px;
+    padding: 2px;
+    border: 2px solid transparent;
+    width: 36px;
+    height: 36px;
+    border-radius: 13px;
+    cursor: pointer;
+    &-image {
+      width: 100%;
+      height: 100%;
+      border-radius: 11px;
+    }
+    &--selected {
+      border: 2px solid $grey_1;
+    }
+  }
+  &__link {
+    position: relative;
+    display: block;
+    transition: background-color 0.5s ease;
+    background-color: white;
+    height: 340px;
+    width: 340px;
+  }
+  &__brand {
+    width: 54px;
+    top: 10px;
+    left: 5px;
+    position: absolute;
+    z-index: 2;
+    opacity: 0.7;
+  }
+  &__cover {
+    width: 100%;
+    object-fit: contain;
+    position: relative;
+    z-index: 1;
+  }
+  &__cover-hover {
+    top: 0;
+    left: 0;
+    position: absolute;
+    z-index: 1;
+    display: none;
+    width: 100%;
+    &--visible {
+      display: block;
+    }
+  }
+  &__cover-color {
+    top: 5px;
+    left: 5px;
+    bottom: 5px;
+    right: 5px;
+    position: absolute;
+    z-index: 0;
+    opacity: 0;
+    transition: opacity 1s;
+    &--visible {
+      opacity: 1;
+    }
+  }
+  &__tear-away-tag {
+    top: 8px;
+    right: 15px;
+    width: 30px;
+    position: absolute;
+    z-index: 2;
+  }
+  &__gender {
+    left: 0;
+    right: 0;
+    bottom: 20px;
+    text-align: center;
+    position: absolute;
+    z-index: 2;
+    span {
+      color: $grey_1;
+      background-color: $grey_3;
+      text-transform: uppercase;
+      padding: 9px 15px;
+      border-radius: 5px;
+    }
+  }
+  &__info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &-item {
+      margin-top: 4px;
+      padding: 0 20px;
+    }
+    &-name {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      max-width: 180px;
+      margin-right: 5px;
+      display: block;
+    }
+  }
+}

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

@@ -0,0 +1,113 @@
+<template>
+  <div
+    class="ProductListProduct__wrapper"
+    :class="{
+      'ProductListProduct__wrapper--full': full,
+    }">
+    <nuxt-link
+      :to="productLink"
+      class="ProductListProduct__link">
+      <img
+        v-if="productBrand"
+        class="ProductListProduct__brand"
+        :src="productBrand" />
+      <img
+        v-if="productСover"
+        class="ProductListProduct__cover"
+        :src="productСover"
+        @load="productСoverLoaded = true" />
+      <img
+        v-if="productСoverLoaded && productСoverHover"
+        class="ProductListProduct__cover-hover"
+        :class="{
+          'ProductListProduct__cover-hover--visible': full
+        }"
+        :src="productСoverHover" />
+      <div
+        class="ProductListProduct__cover-color"
+        :class="{
+          'ProductListProduct__cover-color--visible': productСoverLoaded
+        }"
+        :style="productBackgroundСover"></div>
+      <img
+        v-if="product.isTearAwayTag"
+        class="ProductListProduct__tear-away-tag"
+        src="~static/images/tear-away-tag.svg" />
+      <div class="ProductListProduct__gender">
+        <span>{{ product.gender }}</span>
+      </div>
+    </nuxt-link>
+    <div class="ProductListProduct__info">
+      <div class="ProductListProduct__info-item">
+        <nuxt-link :to="productLink" class="lc_h4 row">
+          <div>
+            <v-popover trigger="hover">
+              <span class="ProductListProduct__info-name">
+                {{ product.name }}
+              </span>
+              <template slot="popover">
+                {{ product.name }}
+              </template>
+            </v-popover>
+          </div>
+          <div>
+            | {{ product.SKU }}
+          </div>
+        </nuxt-link>
+      </div>
+      <div
+        v-if="product.minPrice === product.maxPrice"
+        class="ProductListProduct__info-item lc_h4">
+        {{ product.minPrice | price }}
+      </div>
+      <div
+        v-else
+        class="ProductListProduct__info-item lc_h4">
+        {{ product.minPrice | price }} - {{ product.maxPrice | price }}
+      </div>
+      <div class="ProductListProduct__info-item mt-9 lc_caption">
+        {{ product.colors.length }} {{ product.colors.length === 1 ? 'Colour' : 'Colours' }} | Size: {{ product.sizes | sizesRange }}
+      </div>
+      <div
+        v-if="full"
+        class="ProductListProduct__info-item mt-9 lc_caption visible-full">
+        {{ product.material }} | {{ product.weight }} gsm
+      </div>
+      <div
+        v-if="full"
+        class="ProductListProduct__colors visible-full">
+        <div
+          v-for="color in product.colors"
+          :key="color._id"
+          class="ProductListProduct__color"
+          :class="{
+            'ProductListProduct__color--selected': color._id === currentColor._id
+          }"
+          @click="currentColor = color">
+          <product-color-image
+            :color="color"
+            class="ProductListProduct__color-image" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { price, sizesRange } from '@lancom/shared/assets/js/utils/filters';
+import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
+import productPreview from '@lancom/shared/mixins/product-preview';
+
+export default {
+  name: 'ProductListProduct',
+  components: {
+    ProductColorImage
+  },
+  filters: { price, sizesRange },
+  mixins: [productPreview]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-list-product';
+</style>

package/components/products/products_aside/products-aside.scss

@@ -0,0 +1,14 @@
+@import "@/assets/scss/variables";
+
+.ProductsAside {
+  &__wrapper {
+    max-width: 230px;
+  }
+  &__item {
+    padding: 20px 0;
+    border-bottom: 1px solid $grey_3;
+    &:empty {
+      display: none;
+    }
+  }
+}

package/components/products/products_aside/products-aside.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    :data-aos="aosFadeRight"
+    class="ProductsAside__wrapper">
+    <div class="ProductsAside__item hidden-md-and-up">
+      <input
+        v-model="search"
+        name="search"
+        placeholder="Search"
+        type="text"
+        class="form-field no-label tiny-placeholder labelless"
+        @change="goToTextSearch" />
+    </div>
+    <div class="ProductsAside__item">
+      <products-types
+        :has-selected-icon="hasSelectedIcon"
+        :has-thumbs="hasThumbs" />
+    </div>
+    <div class="ProductsAside__item">
+      <products-brands
+        :has-selected-icon="hasSelectedIcon" />
+    </div>
+    <div class="ProductsAside__item">
+      <products-colors />
+    </div>
+    <div class="ProductsAside__item">
+      <products-attributes
+        :has-selected-icon="hasSelectedIcon" />
+      <products-tags
+        :has-selected-icon="hasSelectedIcon" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductsTypes from '@lancom/shared/components/products/products_types/products-types';
+import ProductsBrands from '@lancom/shared/components/products/products_brands/products-brands';
+import ProductsTags from '@lancom/shared/components/products/products_tags/products-tags';
+import ProductsAttributes from '@lancom/shared/components/products/products_attributes/products-attributes';
+import ProductsColors from '@lancom/shared/components/products/products_colors/products-colors';
+import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
+
+export default {
+  name: 'ProductsAside',
+  components: {
+    ProductsTypes,
+    ProductsBrands,
+    ProductsTags,
+    ProductsAttributes,
+    ProductsColors
+  },
+  props: {
+    hasSelectedIcon: {
+      type: Boolean,
+      default: false
+    },
+    hasThumbs: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      search: this.$route.query.text || ''
+    };
+  },
+  methods: {
+    goToTextSearch() {
+      this.goToPageWithFilters({ text: this.search });
+    },
+    goToPageWithFilters(filters) {
+      const link = generateProductsLink(this.$route, filters);
+      this.$router.push(link);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-aside';
+</style>

package/components/products/products_attributes/products-attributes.scss

@@ -0,0 +1,27 @@
+@import "@/assets/scss/variables";
+
+.ProductsAttributes {
+  &__header {
+    font-size: 22px;
+    line-height: 20px;
+    font-weight: 600;
+    margin-top: 3px;
+    margin-bottom: 24px;
+    color: $black;
+  }
+  &__item {
+    margin: 19px 0;
+    font-size: 19px;
+    font-weight: 400;
+    i {
+      font-size: 20px;
+    }
+    a {
+      color: $grey_2;
+      text-decoration: none;
+    }
+    &--active a {
+      color: $grey_1;
+    }
+  }
+}

package/components/products/products_attributes/products-attributes.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    v-if="attributes.length"
+    class="ProductsAttributes__wrapper">
+    <!-- <toggle-content label="Attributes"> -->
+    <div
+      v-for="attribute in attributes"
+      :key="attribute._id"
+      class="ProductsAttributes__item">
+      <products-attribute
+        :attribute="attribute"
+        :has-selected-icon="hasSelectedIcon" />
+    </div>
+    <!-- </toggle-content> -->
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+// import ToggleContent from '@lancom/shared/components/common/toggle-content';
+import ProductsAttribute from './products_attribute/products-attribute';
+
+export default {
+  name: 'ProductsAttributes',
+  components: {
+    ProductsAttribute,
+    // ToggleContent
+  },
+  props: {
+    hasSelectedIcon: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters('products', ['attributes'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-attributes';
+</style>

package/components/products/products_attributes/products_attribute/products-attribute.scss

@@ -0,0 +1,28 @@
+@import "@/assets/scss/variables";
+
+.ProductsAttribute {
+    &__title {
+      font-weight: 800;
+      font-size: 18px;
+      line-height: 25px;
+      margin-top: 3px;
+      margin-bottom: 10px;
+      color: $black;
+    }
+    &__option {
+      margin: 10px 0;
+      font-size: 14px;
+      font-weight: 400;
+      i {
+        font-size: 20px;
+      }
+      a {
+        color: $grey_2;
+        text-decoration: none;
+        display: flex;
+      }
+      &--active a {
+        color: $grey_1;
+      }
+    }
+  }

package/components/products/products_attributes/products_attribute/products-attribute.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="ProductsAttribute__wrapper">
+    <div class="ProductsAttribute__title">
+      {{ attribute.name }}
+    </div>
+    <div class="ProductsAttribute__options">
+      <div
+        v-for="option in options"
+        :key="option._id"
+        class="ProductsAttribute__option"
+        :class="{
+          'ProductsAttribute__option--active': selectedOptions.includes(option.alias)
+        }">
+        <products-link :attributes="{ [attribute.alias]: option.alias }">
+          <checked-icon
+            v-if="hasSelectedIcon"
+            :checked="selectedOptions.includes(option.alias)" />
+          {{ option.name }}
+        </products-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+
+export default {
+  components: {
+    ProductsLink,
+    CheckedIcon
+  },
+  props: {
+    hasSelectedIcon: {
+      type: Boolean,
+      default: false
+    },
+    attribute: {
+      type: Object
+    }
+  },
+  computed: {
+    options() {
+      return this.attribute.options || [];
+    },
+    selectedOptions() {
+      return (this.$route.query[this.attribute.alias] || '').split(',');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-attribute';
+</style>

package/components/products/products_autocomplete/products-autocomplete.scss

@@ -0,0 +1,54 @@
+@import "@/assets/scss/variables";
+
+.ProductsAutocomplete {
+  &__wrapper {
+    position: relative;
+  }
+  &__result {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 41px;
+    padding: 10px;
+    background-color: $black;
+    color: $white;
+  }
+  &__result-item {
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid $gray_main;
+    &:last-child {
+      border-bottom: none;
+      margin-bottom: 0px;
+    }
+    ::v-deep {
+      a {
+        color: $white;
+        font-size: 13px;
+        text-decoration: none;
+      }
+    }
+  }
+  &__input {
+    input {
+      background-color: #535353;
+      border: none;
+      border-radius: 0px;
+      color: $white;
+      height: 41px;
+      &::placeholder {
+        font-weight: 600;
+        font-size: 14px;
+        color: $grey_3;
+      }
+    }
+    i {
+      position: absolute;
+      top: 12px;
+      right: 10px;
+      font-size: 17px;
+      pointer-events: none;
+      color: $white;
+    }
+  }
+}