@ecomplus/widget-search-engine 0.3.7 → 1.0.0-beta.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecomplus/widget-search-engine",
-  "version": "0.3.7",
+  "version": "1.0.0-beta.100",
   "description": "Storefront plugin & Vue component for dynamic search page",
   "module": "src/index.js",
   "browser": "dist/widget-search-engine.min.js",
@@ -8,12 +8,13 @@
   "jsdelivr": "dist/public/widget-search-engine.var.min.js",
   "unpkg": "dist/public/widget-search-engine.var.min.js",
   "scripts": {
-    "build": "NODE_ENV=production webpack",
+    "build": "cross-env NODE_ENV=production webpack",
     "serve": "webpack-dev-server"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ecomplus/storefront.git"
+    "url": "git+https://github.com/ecomplus/storefront.git",
+    "directory": "@ecomplus/widget-search-engine"
   },
   "keywords": [
     "ecomplus",
@@ -28,13 +29,13 @@
   },
   "homepage": "https://github.com/ecomplus/storefront/tree/master/@ecomplus/widget-search-engine#readme",
   "peerDependencies": {
-    "@ecomplus/search-engine": ">=1 <3",
-    "@ecomplus/utils": "^1.3.4",
+    "@ecomplus/utils": "^1.4.1",
     "core-js": "3.x",
     "vue": ">=2 <4"
   },
   "dependencies": {
-    "@ecomplus/storefront-twbs": "^4.0.8"
+    "@ecomplus/storefront-components": "^1.0.0-beta.101",
+    "@ecomplus/storefront-twbs": "^5.11.1"
   },
   "webpackOutput": {
     "library": "widgetSearchEngine",

package/src/index.js

@@ -4,56 +4,206 @@
  * Released under the MIT License.
  */
 
+import { $ } from '@ecomplus/storefront-twbs'
 import Vue from 'vue'
-import '@ecomplus/storefront-twbs'
-import EcSearchEngine from './components/EcSearchEngine.vue'
+import SearchEngine from '#components/SearchEngine.vue'
 
-export default (options = {}, elId = 'search-engine') => {
+export default (options = {}, elId = 'search-engine', paginationElId = 'search-pagination') => {
   const $searchEngine = document.getElementById(elId)
-
   if ($searchEngine) {
-    const { $overlay } = window.storefront
+    const $dock = document.getElementById(`${elId}-dock`)
+    let $productItems
+    const getScopedSlots = window.storefront && window.storefront.getScopedSlots
+    const { dataset } = $searchEngine
+
     const urlParams = new URLSearchParams(window.location.search)
+    const props = {
+      ...options.props,
+      term: urlParams.get('term'),
+      brands: urlParams.getAll('brands[]'),
+      categories: urlParams.getAll('categories[]'),
+      defaultFilters: urlParams.getAll('filters[]').reduce((filters, gridAndOption) => {
+        const [gridId, option] = gridAndOption.split(':')
+        if (!filters[gridId]) {
+          filters[gridId] = []
+        }
+        filters[gridId].push(option)
+        return filters
+      }, {}),
+      defaultSort: dataset.sort || urlParams.get('sort')
+    }
+
+    ;['brands', 'categories'].forEach(resource => {
+      if (dataset[resource]) {
+        try {
+          props[resource] = JSON.parse(dataset[resource])
+        } catch (err) {
+          console.error(err)
+          return
+        }
+        if (props[resource] && props[resource].length < 2) {
+          props[`isFixed${resource.charAt(0).toUpperCase()}${resource.slice(1)}`] = true
+        }
+        props.hasPopularItems = false
+      }
+    })
+
+    const { resource } = window.document.body.dataset
+    switch (resource) {
+      case 'brands':
+      case 'categories':
+        if (!props[resource] || !props[resource].length) {
+          console.error(new Error(`Skipping SearchEngine with empty '${resource}' filter`))
+          return
+        }
+    }
 
-    new Vue({
+    const pageTitle = document.title
+    const updatePageUrl = () => {
+      const term = urlParams.get('term')
+      let title = term ? `${term} ~ ${pageTitle}` : pageTitle
+      const page = urlParams.get('page')
+      if (page > 1) {
+        title += ` (${page}) `
+      }
+      if (window.history) {
+        const query = urlParams.toString()
+        const { pathname } = window.location
+        window.history.pushState({
+          pathname,
+          query
+        }, title, pathname + (query ? `?${query}` : ''))
+      }
+      document.title = title
+    }
+    updatePageUrl()
+
+    const vueApp = new Vue({
       data: {
-        showFilters: false
+        countRequests: 0,
+        canShowItems: !$dock,
+        term: props.term,
+        page: parseInt(urlParams.get('page'), 10) || 1,
+        totalItems: 0
       },
 
       render (createElement) {
         const vm = this
-        return createElement(EcSearchEngine, {
+        if (options.pagination) {
+          import('#components/APagination.vue')
+            .then(pagination => {
+              new Vue({
+                render: h => h(pagination.default, {
+                  props: {
+                    totalItems: vm.totalItems,
+                    page: vm.page
+                  },
+                  on: {
+                    'update:page' (page) {
+                      vm.page = page
+                      urlParams.set('page', page)
+                      updatePageUrl()
+                      window.scroll({
+                        top: 0,
+                        behavior: 'smooth'
+                      })
+                    }
+                  }
+                })
+              }).$mount(document.getElementById(paginationElId))
+            })
+        }
+
+        return createElement(SearchEngine, {
           attrs: {
-            id: elId
+            id: $dock ? null : elId
           },
           props: {
-            ...options.props,
-            term: urlParams.get('term'),
-            page: parseInt(urlParams.get('page'), 10),
-            brands: urlParams.getAll('brands'),
-            categories: urlParams.getAll('categories'),
-            navbarId: 'header',
-            showFilters: vm.showFilters,
-            prerenderedHTML: $searchEngine.outerHTML
+            ...props,
+            term: vm.term,
+            page: vm.page,
+            canLoadMore: !options.pagination && !dataset.disableLoadMore,
+            canShowItems: vm.canShowItems,
+            loadMoreSelector: $dock ? '#search-engine-load' : null,
+            isFilterable: !dataset.disableFilters
           },
 
           on: {
-            'update:showFilters' (canShow) {
-              vm.showFilters = canShow
-              if ($overlay) {
-                if (canShow) {
-                  $overlay.show()
-                  $overlay.once('hide', () => {
-                    vm.showFilters = false
-                  })
-                } else {
-                  $overlay.hide()
+            'update:term' (term) {
+              vm.term = term
+              urlParams.set('term', term)
+              updatePageUrl()
+            },
+
+            fetch ({ ecomSearch, fetching, isPopularItems }) {
+              fetching.then(result => {
+                if (!isPopularItems) {
+                  vm.totalItems = ecomSearch.getTotalCount()
+                }
+                if ($dock) {
+                  vm.countRequests++
+                  const renderNewItems = () => {
+                    vm.canShowItems = true
+                    $('#search-engine-snap').remove()
+                  }
+                  if (!vm.canShowItems) {
+                    if (vm.countRequests > 1) {
+                      renderNewItems()
+                    } else if (result && result.hits) {
+                      if (!$productItems || $productItems.length !== result.hits.hits.length) {
+                        renderNewItems()
+                      } else {
+                        let isSameItems = true
+                        const { hits } = result.hits
+                        for (let i = 0; i < hits.length; i++) {
+                          if (!$productItems.find(`[data-product-id="${hits[i]._id}"]`).length) {
+                            isSameItems = false
+                            break
+                          }
+                        }
+                        if (!isSameItems) {
+                          renderNewItems()
+                        }
+                      }
+                    }
+                  }
                 }
-              }
+              })
             }
-          }
+          },
+
+          scopedSlots: typeof getScopedSlots === 'function'
+            ? getScopedSlots($searchEngine, createElement, !$dock)
+            : undefined
+        })
+      }
+    })
+
+    if ($dock) {
+      $($searchEngine).append($('<div>', {
+        id: 'search-engine-load'
+      }))
+
+      const mount = () => vueApp.$mount($dock)
+      $productItems = $('#search-engine-snap .product-item')
+      if ($productItems.length) {
+        const observer = new window.MutationObserver(() => {
+          clearTimeout(fallbackTimer)
+          observer.disconnect()
+          setTimeout(mount, 150)
+        })
+        observer.observe($productItems[0], {
+          childList: true
         })
+        const fallbackTimer = setTimeout(() => {
+          observer.disconnect()
+          mount()
+        }, 3000)
+      } else {
+        mount()
       }
-    }).$mount($searchEngine)
+    } else {
+      vueApp.$mount($searchEngine)
+    }
   }
 }

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('../../webpack.config')

package/__tests__/index.js

@@ -1,6 +0,0 @@
-import widget from './../src/'
-
-window._widgets = false
-widget()
-
-export default widget

package/src/components/EcSearchEngine.vue

@@ -1,3 +0,0 @@
-<script src="./js/EcSearchEngine.js"></script>
-<template lang="html" src="./html/EcSearchEngine.html"></template>
-<style lang="scss" src="./scss/EcSearchEngine.scss"></style>

package/src/components/html/EcSearchEngine.html

@@ -1,272 +0,0 @@
-<section class="ec-search-engine">
-  <nav ref="nav">
-    <portal-target name="search-nav"/>
-  </nav>
-
-  <portal to="search-nav">
-    <transition enter-active-class="animated fadeInDown fast">
-      <div
-        class="ec-search-engine__nav"
-        v-if="searched && (searching || totalSearchResults > 8 || hasSelectedOptions)"
-      >
-        <slot name="nav" v-bind="{ totalSearchResults, toggleFilters }">
-          <div class="container">
-            <div class="row">
-              <div class="col-auto">
-                <div class="ec-search-engine__count">
-                  <strong>{{ totalSearchResults }}</strong>
-                  {{ dictionary('items') }}
-                  <div
-                    class="spinner-grow ec-search-engine__spinner"
-                    role="status"
-                    v-if="searching"
-                  >
-                    <span class="sr-only">Loading...</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="text-right col">
-                <button
-                  class="btn ec-search-engine__toggle"
-                  @click="toggleFilters(true)"
-                  type="button"
-                  v-if="hasSelectedOptions || filters.find(({ filterObj }) => filterObj.options.length)"
-                >
-                  <i class="fas fa-filter"></i>
-                  {{ dictionary('filter') }}
-                  <span class="d-none d-md-inline">
-                    {{ dictionary('results') }}
-                  </span>
-                </button>
-
-                <b-dropdown
-                  variant="link"
-                  toggle-class="ec-search-engine__toggle"
-                  right
-                  no-caret
-                >
-                  <template #button-content>
-                    <i class="fas fa-sort"></i>
-                    <span class="d-none d-md-inline">
-                      {{ dictionary('sort') }}
-                    </span>
-                  </template>
-                  <b-dropdown-item
-                    href="#"
-                    v-for="(sortOption, index) in sortOptions"
-                    :key="`sort-${index}`"
-                    @click.prevent="setSortOrder(sortOption)"
-                    :active="selectedSortOption === sortOption"
-                  >
-                    {{ dictionary(sortOption || 'relevance') }}
-                  </b-dropdown-item>
-                </b-dropdown>
-              </div>
-            </div>
-          </div>
-        </slot>
-      </div>
-    </transition>
-  </portal>
-
-  <transition
-    enter-active-class="animated slideInRight"
-    leave-active-class="animated slideOutRight"
-  >
-    <aside
-      class="ec-search-engine__sidebar card shadow"
-      v-show="showFilters"
-    >
-      <slot name="filters">
-        <header class="card-header">
-          {{ dictionary('refine_search') }}
-          <button
-            type="button"
-            class="close"
-            :aria-label="dictionary('close_filters')"
-            @click="toggleFilters(false)"
-          >
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </header>
-
-        <div class="card-body">
-          <div
-            class="ec-search-engine__filter"
-            v-for="({ filter, filterObj, isSpec }) in filters"
-            v-if="filterObj.options.length"
-            :class="`ec-search-engine__filter--${filter}`"
-            :key="`filters-${filter}`"
-          >
-            <button
-              class="btn ec-search-engine__filter__btn"
-              type="button"
-              :aria-expanded="filterObj.show ? 'true' : 'false'"
-              :aria-controls="`collapse-${filter}`"
-              @click="filterObj.show = !filterObj.show"
-            >
-              <i class="fas fa-chevron-down"></i>
-              {{ filterLabel(filter) }}
-            </button>
-
-            <b-collapse :id="`collapse-${filter}`" v-model="filterObj.show">
-              <div
-                class="custom-control custom-checkbox ec-search-engine__option"
-                v-for="(opt, index) in filterObj.options"
-                :key="`${filter}-${index}`"
-              >
-                <input
-                  type="checkbox"
-                  class="custom-control-input"
-                  :id="`${filter}-${index}`"
-                  @change="ev => setFilterOption(filter, opt.key, ev.target.checked)"
-                  :checked="selectedOptions[filter].indexOf(opt.key) > -1"
-                >
-                <label class="custom-control-label" :for="`${filter}-${index}`">
-                  {{ opt.key }}
-                  <small v-if="!isSpec">
-                    ({{ opt.doc_count }})
-                  </small>
-                </label>
-              </div>
-            </b-collapse>
-          </div>
-        </div>
-
-        <footer class="card-footer">
-          <button
-            class="btn btn-sm btn-block btn-outline-secondary"
-            type="button"
-            @click="clearFilters"
-          >
-            <span class="mr-1">
-              <i class="fas fa-trash-alt"></i>
-            </span>
-            {{ dictionary('clear_filters') }}
-          </button>
-        </footer>
-      </slot>
-    </aside>
-  </transition>
-
-  <transition enter-active-class="animated fadeIn slower">
-    <div
-      class="ec-search-engine__results"
-      :style="{ opacity: searching && !loadingMore ? 0.4 : 1 }"
-      v-if="searched"
-    >
-      <div class="ec-search-engine__info">
-        <template v-if="term">
-          <div class="ec-search-engine__no-results" v-if="emptyResult">
-            <div class="lead">
-              {{ dictionary('no_results_for') }}
-              <em>{{ term }}</em>
-            </div>
-            <h1>{{ dictionary('popular_products') }}</h1>
-          </div>
-
-          <div class="ec-search-engine__terms" v-else>
-            <h1>
-              <small class="d-none d-md-block">
-                {{ dictionary('searching_for') }}:
-              </small>
-              {{ fixedTerm || term }}
-            </h1>
-            <em v-if="fixedTerm" class="d-none d-lg-block">
-              {{ dictionary('no_results_for') }}
-              <s>{{ term }}</s>
-            </em>
-          </div>
-        </template>
-
-        <transition
-          enter-active-class="animated fadeInDown"
-          leave-active-class="animated position-absolute fadeOutUp"
-        >
-          <div v-if="hasSelectedOptions">
-            <button
-              class="btn btn-sm btn-outline-secondary"
-              type="button"
-              @click="clearFilters"
-            >
-              <span class="mr-1">
-                <i class="fas fa-trash-alt"></i>
-              </span>
-              {{ dictionary('clear_filters') }}
-            </button>
-
-            <template v-for="(options, filter) in selectedOptions">
-              <button
-                class="btn m-1 btn-sm btn-light"
-                type="button"
-                v-for="option in options"
-                @click="setFilterOption(filter, option, false)"
-              >
-                <span class="mr-1">
-                  <i class="fas fa-times"></i>
-                </span>
-                {{ option }}
-                <small>\ {{ filterLabel(filter) }}</small>
-              </button>
-            </template>
-          </div>
-        </transition>
-      </div>
-
-      <article class="ec-search-engine__retail">
-        <div class="row">
-          <div
-            class="col-6 col-md-4 col-lg-3"
-            v-for="product in resultItems"
-            :key="product._id"
-          >
-            <slot name="product" v-bind="{ product }">
-              <ec-product-card
-                class="ec-search-engine__item"
-                :lang="lang"
-                :storeId="storeId"
-                :product="product"
-              />
-            </slot>
-          </div>
-        </div>
-      </article>
-
-      <transition
-        enter-active-class="animated fadeInDown"
-        leave-active-class="animated position-absolute fadeOutUp"
-      >
-        <div class="alert alert-warning" role="alert" v-if="networkError">
-          <h4 class="alert-heading">Offline</h4>
-          <template v-if="lang === 'pt_br'">
-            Não foi possível buscar os produtos, por favor verifique sua
-            conexão com a internet.
-          </template>
-          <template v-else>
-            Unable to fetch the products, please check your internet connection.
-          </template>
-
-          <hr>
-          <button
-            type="button"
-            class="btn btn-primary"
-            @click="fetchItems(currentPage)"
-          >
-            <i class="fas fa-search mr-1"></i>
-            {{ dictionary('search_again') }}
-          </button>
-        </div>
-      </transition>
-    </div>
-  </transition>
-
-  <transition
-    enter-active-class="animated fadeInDown"
-    leave-active-class="animated fadeOutUp"
-  >
-    <slot v-if="!searched || loadingMore">
-      <div v-html="prerenderedHTML"></div>
-    </slot>
-  </transition>
-</section>