@ecomplus/storefront-components 1.0.0-beta.19 → 1.0.0-beta.190

package/src/js/RecommendedItems.js

@@ -0,0 +1,178 @@
+import {
+  i19add,
+  i19seeMore,
+  i19weRecommendToYou
+} from '@ecomplus/i18n'
+
+import {
+  i18n,
+  recommendedIds as getRecommendedIds
+} from '@ecomplus/utils'
+
+import { graphs } from '@ecomplus/client'
+import EcomSearch from '@ecomplus/search-engine'
+import ecomCart from '@ecomplus/shopping-cart'
+import { isMobile } from '@ecomplus/storefront-twbs'
+import addIdleCallback from './helpers/add-idle-callback'
+import ProductCard from '../ProductCard.vue'
+
+export default {
+  name: 'RecommendedItems',
+
+  components: {
+    ProductCard
+  },
+
+  props: {
+    pageSize: {
+      type: Number,
+      default: !isMobile ? 4 : 2
+    },
+    sortOrder: {
+      type: String,
+      default: 'sales'
+    },
+    canLoadMore: {
+      type: Boolean,
+      default: true
+    },
+    rowClassName: {
+      type: String,
+      default: 'row no-gutters'
+    },
+    colClassName: {
+      type: String,
+      default: 'col-6 col-md-4 col-lg-3'
+    },
+    productCardProps: {
+      type: Object,
+      default () {
+        return {
+          isSmall: true,
+          buyText: i18n(i19add),
+          installmentsOption: {},
+          discountOption: {}
+        }
+      }
+    },
+    ecomCart: {
+      type: Object,
+      default () {
+        return ecomCart
+      }
+    },
+    productIds: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    defaultMatchType: {
+      type: String,
+      default: (typeof window === 'object' && window.ecomRecommendationsType) || 'recommended'
+    }
+  },
+
+  data () {
+    return {
+      ecomSearch: new EcomSearch()
+        .mergeFilter({
+          range: {
+            quantity: {
+              gt: 0
+            }
+          }
+        })
+        .mergeFilter({
+          term: {
+            available: true
+          }
+        }),
+      pageNumber: 1,
+      items: []
+    }
+  },
+
+  computed: {
+    i19seeMore: () => i18n(i19seeMore),
+    i19weRecommendToYou: () => i18n(i19weRecommendToYou)
+  },
+
+  methods: {
+    fetchItems () {
+      delete this.ecomSearch.dsl.aggs
+      this.ecomSearch.setPageNumber(this.pageNumber).fetch().then(() => {
+        this.items = this.items.concat(this.ecomSearch.getItems())
+        this.totalCount = this.ecomSearch.getTotalCount()
+        if (this.totalCount) {
+          this.$emit('recommend-items', {
+            items: this.items,
+            totalCount: this.totalCount
+          })
+        }
+      }).finally(() => {
+        this.$emit('fetched')
+      })
+    }
+  },
+
+  created () {
+    const fetchRecommendations = (matchType = this.defaultMatchType) => {
+      const promises = []
+      const items = this.ecomCart.data.items.sort((a, b) => a.quantity > b.quantity ? -1 : 1)
+      for (let i = 0; i < items.length && i <= 4; i++) {
+        promises.push(graphs({ url: `/products/${items[i].product_id}/${matchType}.json` }))
+      }
+      Promise.allSettled(promises).then(results => {
+        const productIds = []
+        results.forEach(({ status, value }) => {
+          if (status === 'fulfilled') {
+            getRecommendedIds(value.data).forEach(productId => {
+              if (
+                !productIds.includes(productId) &&
+                !this.ecomCart.data.items.find(item => item.product_id === productId)
+              ) {
+                productIds.push(productId)
+              }
+            })
+          }
+        })
+        if (productIds.length) {
+          this.ecomSearch.setProductIds(productIds.slice(0, 24))
+          this.fetchItems()
+        } else if (matchType === 'recommended') {
+          fetchRecommendations('related')
+        }
+      })
+    }
+    if (this.productIds.length) {
+      this.ecomSearch.setProductIds(this.productIds)
+      this.totalCount = this.items.length
+      this.fetchItems()
+    } else {
+      addIdleCallback(() => {
+        fetchRecommendations()
+      })
+    }
+  },
+
+  watch: {
+    pageSize: {
+      handler (pageSize) {
+        this.ecomSearch.setPageSize(pageSize)
+      },
+      immediate: true
+    },
+
+    sortOrder: {
+      handler (sortOrder) {
+        this.ecomSearch.setSortOrder(sortOrder)
+      },
+      immediate: true
+    },
+
+    pageNumber () {
+      this.fetchItems()
+    }
+  }
+}

package/src/js/SearchEngine.js

@@ -1,4 +1,6 @@
 import {
+  i19all,
+  i19asOf,
   i19brands,
   i19categories,
   i19clearFilters,
@@ -9,21 +11,31 @@ import {
   i19highestPrice,
   i19itemsFound,
   i19lowestPrice,
+  i19name,
   i19noResultsFor,
   i19popularProducts,
+  i19price,
   i19refineSearch,
+  i19releases,
   i19relevance,
   i19results,
   i19sales,
   i19searchAgain,
   i19searchingFor,
   i19searchOfflineErrorMsg,
-  i19sort
+  i19sort,
+  i19upTo
 } from '@ecomplus/i18n'
 
-import { i18n } from '@ecomplus/utils'
+import {
+  i18n,
+  formatMoney
+} from '@ecomplus/utils'
+
 import lozad from 'lozad'
 import EcomSearch from '@ecomplus/search-engine'
+import { Portal } from '@linusborg/vue-simple-portal'
+import scrollToElement from './helpers/scroll-to-element'
 import ABackdrop from '../ABackdrop.vue'
 import ProductCard from '../ProductCard.vue'
 
@@ -44,6 +56,7 @@ export default {
   name: 'SearchEngine',
 
   components: {
+    Portal,
     ABackdrop,
     ProductCard
   },
@@ -63,6 +76,7 @@ export default {
     isFixedBrands: Boolean,
     isFixedCategories: Boolean,
     defaultSort: String,
+    defaultFilters: Object,
     autoFixScore: {
       type: Number,
       default: 0.6
@@ -79,10 +93,15 @@ export default {
       type: Boolean,
       default: true
     },
+    loadMoreSelector: String,
     canRetry: {
       type: Boolean,
       default: true
     },
+    canShowItems: {
+      type: Boolean,
+      default: true
+    },
     productCardProps: Object,
     gridsData: {
       type: Array,
@@ -103,6 +122,9 @@ export default {
       noResultsTerm: '',
       keepNoResultsTerm: false,
       filters: [],
+      priceRange: {},
+      priceOptions: [],
+      hasSetPriceRange: false,
       lastSelectedFilter: null,
       selectedOptions: {},
       selectedSortOption: null,
@@ -110,6 +132,7 @@ export default {
       lastRequestId: null,
       isScheduled: false,
       isLoadingMore: false,
+      mustSkipLoadMore: false,
       hasNetworkError: false,
       popularItems: [],
       hasSetPopularItems: false,
@@ -119,6 +142,7 @@ export default {
   },
 
   computed: {
+    i19all: () => i18n(i19all),
     i19clearFilters: () => i18n(i19clearFilters),
     i19closeFilters: () => i18n(i19closeFilters),
     i19didYouMean: () => i18n(i19didYouMean),
@@ -127,8 +151,9 @@ export default {
     i19itemsFound: () => i18n(i19itemsFound),
     i19noResultsFor: () => i18n(i19noResultsFor),
     i19popularProducts: () => i18n(i19popularProducts),
-    i19relevance: () => i18n(i19relevance),
+    i19price: () => i18n(i19price),
     i19refineSearch: () => i18n(i19refineSearch),
+    i19relevance: () => i18n(i19relevance),
     i19results: () => i18n(i19results),
     i19searchAgain: () => i18n(i19searchAgain),
     i19searchingFor: () => i18n(i19searchingFor),
@@ -158,6 +183,12 @@ export default {
       }, {
         value: 'highest_price',
         label: i18n(i19highestPrice)
+      }, {
+        value: 'news',
+        label: i18n(i19releases)
+      }, {
+        value: 'slug',
+        label: i18n(i19name)
       }
     ],
 
@@ -172,7 +203,10 @@ export default {
 
     isNavVisible () {
       return this.hasSearched && this.isFilterable &&
-        (this.isSearching || this.totalSearchResults > 8 || this.hasSelectedOptions)
+        (this.isSearching ||
+          this.totalSearchResults > 8 ||
+          this.hasSelectedOptions ||
+          this.hasSetPriceRange)
     },
 
     isResultsVisible () {
@@ -181,7 +215,8 @@ export default {
 
     hasFilters () {
       return this.hasSelectedOptions ||
-        this.filters.find(({ options }) => options.length)
+        this.filters.find(({ options }) => options.length) ||
+        this.hasSetPriceRange
     },
 
     suggestedItems () {
@@ -191,10 +226,18 @@ export default {
     loadObserver () {
       return this.canLoadMore && lozad('#search-engine-load-more', {
         load: () => {
-          this.isLoadingMore = true
-          this.fetchItems()
+          if (!this.mustSkipLoadMore) {
+            this.mustSkipLoadMore = this.isLoadingMore = true
+            this.fetchItems()
+          }
         }
       })
+    },
+
+    pageAnchorIndex () {
+      const count = this.suggestedItems.length
+      const rest = count % this.pageSize
+      return (rest === 0 ? count - this.pageSize : count - rest) - 1
     }
   },
 
@@ -208,7 +251,7 @@ export default {
         ecomSearch.setPageNumber(this.page + Math.ceil(this.resultItems.length / this.pageSize))
       }
       const fetching = ecomSearch.setPageSize(this.pageSize).fetch()
-        .then(() => {
+        .then(result => {
           if (this.lastRequestId === requestId) {
             this.hasNetworkError = false
             if (!isPopularItems) {
@@ -219,6 +262,7 @@ export default {
             this.hasSetPopularItems = true
             this.popularItems = ecomSearch.getItems()
           }
+          return result
         })
         .catch(err => {
           console.error(err)
@@ -232,9 +276,15 @@ export default {
         })
         .finally(() => {
           this.countOpenRequests--
-          this.isLoadingMore = false
+          if (this.isLoadingMore) {
+            this.isLoadingMore = false
+            this.$nextTick(() => setTimeout(() => {
+              this.mustSkipLoadMore = false
+              this.loadObserver.observe()
+            }, 300))
+          }
         })
-      this.$emit('fetch', { ecomSearch, fetching })
+      this.$emit('fetch', { ecomSearch, fetching, isPopularItems })
     },
 
     updateFilters () {
@@ -256,7 +306,8 @@ export default {
             options,
             isSpec
           }
-          const optionsList = !this.selectedOptions[filter] ? []
+          const optionsList = !this.selectedOptions[filter]
+            ? []
             : this.selectedOptions[filter]
               .filter(option => options.find(({ key }) => key === option))
           this.$set(this.selectedOptions, filter, optionsList)
@@ -265,46 +316,75 @@ export default {
       }
       addFilter('Brands', this.ecomSearch.getBrands())
       addFilter('Categories', this.ecomSearch.getCategories())
-      this.ecomSearch.getSpecs().forEach(({ key, options }, index) => {
+      this.ecomSearch.getSpecs().forEach(({ key, options }) => {
         addFilter(key, options, true)
       })
       this.filters = this.filters.filter((_, i) => updatedFilters.includes(i))
       this.searchFilterId = Date.now()
     },
 
-    handleSuggestions () {
-      const { ecomSearch, term } = this
-      let suggestTerm = term
-      let canAutoFix = false
-      this.suggestedTerm = ''
-      ecomSearch.getTermSuggestions().forEach(({ options, text }) => {
-        if (options.length) {
-          const opt = options[0]
-          if (
-            !this.totalSearchResults &&
-            this.autoFixScore > 0 &&
-            opt.score >= this.autoFixScore &&
-            opt.text.indexOf(term) === -1
-          ) {
-            canAutoFix = true
-          }
-          suggestTerm = suggestTerm.replace(text, opt.text)
+    updatePriceOptions () {
+      this.priceRange = this.ecomSearch.getPriceRange()
+      if (Math.round(this.priceRange.min) < Math.round(this.priceRange.avg)) {
+        const price1 = Math.ceil(Math.max(this.priceRange.min * 1.5, this.priceRange.avg / 2))
+        const price2 = Math.ceil(Math.min(this.priceRange.max / 1.5, this.priceRange.avg * 2))
+        if (price1 !== price2) {
+          this.priceOptions = [Math.min(price1, price2), Math.max(price1, price2), null]
+            .map((max, i, prices) => {
+              const min = prices[i - 1]
+              return {
+                min,
+                max,
+                label: !min
+                  ? `${i18n(i19upTo)} ${formatMoney(max)}`
+                  : i < 2
+                    ? `${formatMoney(min)} - ${formatMoney(max)}`
+                    : `${i18n(i19asOf)} ${formatMoney(min)}`
+              }
+            })
+          return
         }
-      })
-      if (!this.keepNoResultsTerm) {
-        this.noResultsTerm = ''
-      } else {
-        this.keepNoResultsTerm = false
       }
-      if (suggestTerm !== term) {
-        if (canAutoFix) {
-          this.noResultsTerm = term
-          this.keepNoResultsTerm = true
-          this.$emit('update:term', suggestTerm)
+      this.priceOptions = []
+    },
+
+    handleSuggestions () {
+      if (this.term) {
+        const { ecomSearch } = this
+        const term = this.term.toLowerCase()
+        let suggestTerm = term
+        let canAutoFix = false
+        this.suggestedTerm = ''
+        ecomSearch.getTermSuggestions().forEach(({ options, text }) => {
+          if (options.length) {
+            const opt = options[0]
+            const optTerm = opt.text.toLowerCase()
+            if (
+              !this.totalSearchResults &&
+              this.autoFixScore > 0 &&
+              opt.score >= this.autoFixScore &&
+              optTerm.indexOf(term) === -1
+            ) {
+              canAutoFix = true
+            }
+            suggestTerm = suggestTerm.replace(new RegExp(text, 'i'), optTerm)
+          }
+        })
+        if (!this.keepNoResultsTerm) {
+          this.noResultsTerm = ''
         } else {
-          this.suggestedTerm = suggestTerm
+          this.keepNoResultsTerm = false
+        }
+        if (suggestTerm !== term) {
+          if (canAutoFix) {
+            this.noResultsTerm = term
+            this.keepNoResultsTerm = true
+            this.$emit('update:term', suggestTerm)
+          } else {
+            this.suggestedTerm = suggestTerm
+          }
+          ecomSearch.history.shift()
         }
-        ecomSearch.history.shift()
       }
     },
 
@@ -315,6 +395,17 @@ export default {
         ? this.resultItems.concat(ecomSearch.getItems())
         : ecomSearch.getItems()
       this.updateFilters()
+      if (!this.hasSearched && this.defaultFilters) {
+        for (const filter in this.defaultFilters) {
+          const options = this.defaultFilters[filter]
+          if (Array.isArray(options)) {
+            options.forEach(option => this.setFilterOption(filter, option, true))
+          } else if (typeof options === 'string') {
+            this.setFilterOption(filter, options, true)
+          }
+        }
+      }
+      this.updatePriceOptions()
       this.handleSuggestions()
       if (!this.totalSearchResults && this.hasPopularItems && !this.hasSetPopularItems) {
         this.fetchItems(false, true)
@@ -349,7 +440,8 @@ export default {
 
     toggleFilters (isVisible) {
       this.isAsideVisible = typeof isVisible === 'boolean'
-        ? isVisible : !this.isAsideVisible
+        ? isVisible
+        : !this.isAsideVisible
     },
 
     getFilterLabel (filter) {
@@ -409,23 +501,53 @@ export default {
       }
     },
 
+    handlePriceInputs () {
+      const { inputMinPrice, inputMaxPrice } = this.$refs
+      const min = Number(inputMinPrice.value) || null
+      const max = Number(inputMaxPrice.value) || null
+      if ((min && !max) || min <= max) {
+        this.setPriceRange(min, max)
+      }
+      inputMinPrice.value = (min || '')
+      inputMaxPrice.value = (max || '')
+    },
+
+    setPriceRange (min, max) {
+      if (
+        (min && min !== this.priceRange.min) ||
+        (max && max !== this.priceRange.max)
+      ) {
+        this.hasSetPriceRange = true
+      } else if (this.hasSetPriceRange) {
+        this.hasSetPriceRange = false
+      } else {
+        return
+      }
+      this.ecomSearch.setPriceRange(min, max)
+      this.scheduleFetch()
+    },
+
     setFilterOption (filter, option, isSet) {
       const { selectedOptions } = this
       const optionsList = selectedOptions[filter]
-      if (isSet) {
-        this.lastSelectedFilter = filter
-        optionsList.push(option)
-      } else {
+      if (optionsList) {
         const optionIndex = optionsList.indexOf(option)
-        if (optionIndex > -1) {
-          optionsList.splice(optionIndex, 1)
-        }
-        if (!optionsList.length && this.lastSelectedFilter === filter) {
-          this.lastSelectedFilter = null
+        if (isSet) {
+          if (optionIndex === -1) {
+            this.lastSelectedFilter = filter
+            optionsList.push(option)
+          }
+        } else {
+          if (optionIndex > -1) {
+            optionsList.splice(optionIndex, 1)
+          }
+          if (!optionsList.length && this.lastSelectedFilter === filter) {
+            this.lastSelectedFilter = null
+          }
         }
+        this.updateSearchFilter(filter)
+        this.scheduleFetch()
       }
-      this.updateSearchFilter(filter)
-      this.scheduleFetch()
     },
 
     clearFilters () {
@@ -442,7 +564,11 @@ export default {
     setSortOrder (sort) {
       this.selectedSortOption = sort
       this.ecomSearch.setSortOrder(sort)
-      this.scheduleFetch()
+      if (this.page > 1) {
+        this.page = 1
+      } else {
+        this.scheduleFetch()
+      }
     }
   },
 
@@ -465,7 +591,11 @@ export default {
     isSearching (isSearching) {
       if (!isSearching && this.loadObserver) {
         this.$nextTick(() => {
-          this.loadObserver.observe()
+          if (!this.mustSkipLoadMore) {
+            this.loadObserver.observe()
+          } else {
+            setTimeout(() => scrollToElement(this.$refs.pageAnchor[0], 40), 100)
+          }
         })
       }
     }