workarea-classic_search_autocomplete 1.0.0

data/app/assets/javascripts/workarea/storefront/modules/search_fields.js

@@ -0,0 +1,69 @@
+/**
+ * @namespace WORKAREA.searchFields
+ */
+WORKAREA.registerModule('searchFields', (function () {
+    'use strict';
+
+    var getSource = function (request, response) {
+            var endpoint = WORKAREA.routes.storefront.searchesPath();
+
+            $.getJSON(endpoint, { q: request.term }, function (data) {
+                response(data.results);
+            });
+        },
+
+        openSelected = function (event, ui) {
+            if (ui.item.type === "Products") {
+                WORKAREA.analytics.fireCallback(
+                    'productClick',
+                    ui.item.analytics
+                );
+            }
+
+            if (WORKAREA.analytics.domEventsDisabled()) { return; }
+            window.location = ui.item.url;
+        },
+
+        /**
+         * iOS touch devices treat touch events as mouseenter unless there is no
+         * change in the UI, like a menu-selected state. By unbinding the
+         * mouseenter event we force those devices to treat the touch event as a
+         * click. This prevents the user having to tap twice to open a search
+         * autocomplete result.
+         */
+        openOnTouchDevices = function () {
+            $('.ui-autocomplete').off('mouseenter');
+        },
+
+        getConfig = function () {
+            var config = WORKAREA.config.searchFieldsAutocomplete || {
+                minLength: 2
+            };
+
+            return _.assign({}, config, {
+                source: getSource,
+                select: openSelected,
+                open: openOnTouchDevices
+            });
+        },
+
+        /**
+         * Queries the DOM for either a `data-search-field` or
+         * `[id=storefront_search] attribute to hook onto, selecting the first
+         * that is found, before initializing the customized jQuery UI
+         * Autocomplete method `categorizedAutocomplete`.
+         *
+         * @method
+         * @name init
+         * @memberof WORKAREA.searchFields
+         */
+        init = function ($scope) {
+            $('[data-search-field], #storefront_search', $scope)
+                .first()
+                .categorizedAutocomplete(getConfig());
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/templates/ui_menu_heading.jst.ejs

@@ -0,0 +1 @@
+<li class="ui-menu-heading"><%= categoryName %></li>

data/app/assets/javascripts/workarea/storefront/templates/ui_menu_item.jst.ejs

@@ -0,0 +1,8 @@
+<li class="ui-menu-item">
+    <span class="ui-menu-item-wrapper">
+        <% if (image) { %>
+            <img src="<%= image %>" alt="">
+        <% } %>
+        <%= label %>
+    </span>
+</li>

data/app/assets/stylesheets/jquery_ui/storefront/_ui_autocomplete.scss

@@ -0,0 +1,17 @@
+/*------------------------------------*\
+    #UI-AUTOCOMPLETE
+\*------------------------------------*/
+
+$ui-autocomplete-bg-color:  $white !default;
+
+$ui-autocomplete-width:     190px !default;
+
+
+.ui-autocomplete {
+    @extend %list-reset;
+    position: absolute;
+    z-index: index($components, ui-autocomplete);
+    padding: $spacing-unit;
+    width: $ui-autocomplete-width;
+    background: $ui-autocomplete-bg-color;
+}

data/app/assets/stylesheets/jquery_ui/storefront/_ui_menu.scss

@@ -0,0 +1,40 @@
+/*------------------------------------*\
+    #UI-MENU
+\*------------------------------------*/
+
+$ui-menu-item-selected-color:  $highlight-color !default;
+
+
+/**
+ * 1. default menu item state
+ * 2. hovered menu item state
+ * 3. the displayed result image
+ * 4. menu headings
+ */
+
+.ui-menu {
+    .ui-menu-item { /* [1] */
+        @extend %clearfix;
+        padding: ($spacing-unit / 2) 0;
+        cursor: pointer;
+
+        &:hover { /* [2] */
+            background: $ui-menu-item-selected-color;
+        }
+
+        img { /* [3] */
+            margin: 0 ($spacing-unit / 2) 0 0;
+            float: left;
+        }
+    }
+
+    .ui-menu-heading { /* [4] */
+        margin:  ($spacing-unit / 2) 0;
+        padding: ($spacing-unit / 2) 0;
+        font-weight: bold;
+    }
+}
+
+    .ui-menu-item-wrapper {
+        display: block;
+    }

data/app/controllers/workarea/storefront/searches_controller.decorator

@@ -0,0 +1,14 @@
+module Workarea
+  decorate Storefront::SearchesController, with: :classic_search_autocomplete do
+    def index
+      render nothing: true and return if search_query.blank?
+      autocomplete_params = params.permit(:q)
+
+      search = Search::SearchSuggestions.new(autocomplete_params)
+
+      @results = search.results.map do |result|
+        Storefront::SearchSuggestionViewModel.new(result).to_h
+      end
+    end
+  end
+end

data/app/queries/workarea/search/search_suggestions.rb

@@ -0,0 +1,45 @@
+module Workarea
+  module Search
+    class SearchSuggestions
+      include Query
+      include ProductDisplayRules
+
+      document Search::Storefront
+
+      def results
+        response['hits']['hits']
+      end
+
+      def sanitized_string
+        @sanitized_query ||= QueryString.new(params[:q]).sanitized
+      end
+
+      def query
+        {
+          bool: {
+            must: [
+              {
+                match_phrase_prefix: {
+                  'content.name': {
+                    query: sanitized_string,
+                    max_expansions: 10
+                  }
+                }
+              },
+              active_for_segments_clause,
+              preview_current_release_clause
+            ]
+          }
+        }
+      end
+
+      def sort
+        { type: :desc }
+      end
+
+      def size
+        Workarea.config.search_suggestions
+      end
+    end
+  end
+end

data/app/view_models/workarea/storefront/search_suggestion_view_model.rb

@@ -0,0 +1,85 @@
+module Workarea
+  module Storefront
+    class SearchSuggestionViewModel < ApplicationViewModel
+      include I18n::DefaultUrlOptions
+      include Storefront::Engine.routes.url_helpers
+      include Search::LoadProductResults
+      include AnalyticsHelper
+
+      def to_h
+        {
+          value: name,
+          type: type,
+          image: image,
+          url: url,
+          analytics: analytics
+        }
+      end
+
+      def source
+        model['_source']
+      end
+
+      def name
+        source['content']['name']
+      end
+
+      def type
+        t("workarea.storefront.searches.#{suggestion_type.pluralize}")
+      end
+
+      def image
+        return if source['cache']['image'].blank?
+
+        image_url = URI.parse(source['cache']['image'])
+
+        if asset_host.present?
+          image_url.scheme = asset_host.scheme
+          image_url.host = asset_host.host
+        end
+
+        image_url.to_s
+      end
+
+      def asset_host
+        URI.parse(Rails.application.config.action_controller.asset_host)
+      rescue URI::InvalidURIError
+        nil
+      end
+
+      def suggestion_type
+        source['type']
+      end
+
+      def analytics
+        return unless suggestion_type == 'product'
+
+        product_analytics_data(product)
+      end
+
+      def product
+        @product ||=
+          begin
+            loaded = load_model_from(model)
+
+            Storefront::ProductViewModel.wrap(
+              loaded[:model],
+              loaded.slice(:inventory, :pricing)
+            )
+          end
+      end
+
+      def url
+        if suggestion_type == 'product'
+          product_path(product)
+        elsif suggestion_type == 'search'
+          search_path(q: name)
+        elsif suggestion_type == 'category'
+          category_path(source['slug'])
+        elsif suggestion_type == 'page'
+          page_path(source['slug'])
+        end
+      end
+    end
+  end
+end

data/app/views/workarea/storefront/searches/index.json.jbuilder

@@ -0,0 +1 @@
+json.results @results

data/bin/rails

@@ -0,0 +1,25 @@
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails gems
+# installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path('..', __dir__)
+ENGINE_PATH = File.expand_path('../lib/workarea/classic_search_autocomplete/engine', __dir__)
+APP_PATH = File.expand_path('../test/dummy/config/application', __dir__)
+
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__)
+require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
+
+require "rails"
+# Pick the frameworks you want:
+require "active_model/railtie"
+require "active_job/railtie"
+# require "active_record/railtie"
+# require "active_storage/engine"
+require "action_controller/railtie"
+require "action_mailer/railtie"
+require "action_view/railtie"
+# require "action_cable/engine"
+require "sprockets/railtie"
+require "rails/test_unit/railtie"
+require 'rails/engine/commands'

data/config/initializers/appends.rb

@@ -0,0 +1,26 @@
+Workarea.append_javascripts(
+  'storefront.dependencies',
+  'jquery-ui/widgets/autocomplete'
+)
+
+Workarea.append_javascripts(
+  'storefront.templates',
+  'workarea/storefront/templates/ui_menu_heading',
+  'workarea/storefront/templates/ui_menu_item'
+)
+
+Workarea.append_javascripts(
+  'storefront.extensions',
+  'jquery_ui/storefront/categorized_autocomplete'
+)
+
+Workarea.append_javascripts(
+  'storefront.modules',
+  'workarea/storefront/modules/search_fields'
+)
+
+Workarea.append_stylesheets(
+  'storefront.dependencies',
+  'jquery_ui/storefront/ui_menu',
+  'jquery_ui/storefront/ui_autocomplete'
+)

data/config/initializers/workarea.rb

@@ -0,0 +1,2 @@
+Workarea.configure do |config|
+end

data/config/routes.rb

@@ -0,0 +1,5 @@
+Workarea::Storefront::Engine.routes.draw do
+  scope '(:locale)', constraints: Workarea::I18n.routes_constraint do
+    resources :searches, only: :index
+  end
+end

data/lib/workarea/classic_search_autocomplete.rb

@@ -0,0 +1,11 @@
+require 'workarea'
+require 'workarea/storefront'
+require 'workarea/admin'
+
+require 'workarea/classic_search_autocomplete/engine'
+require 'workarea/classic_search_autocomplete/version'
+
+module Workarea
+  module ClassicSearchAutocomplete
+  end
+end

data/lib/workarea/classic_search_autocomplete/engine.rb

@@ -0,0 +1,10 @@
+require 'workarea/classic_search_autocomplete'
+
+module Workarea
+  module ClassicSearchAutocomplete
+    class Engine < ::Rails::Engine
+      include Workarea::Plugin
+      isolate_namespace Workarea::ClassicSearchAutocomplete
+    end
+  end
+end

data/lib/workarea/classic_search_autocomplete/version.rb

@@ -0,0 +1,5 @@
+module Workarea
+  module ClassicSearchAutocomplete
+    VERSION = '1.0.0'.freeze
+  end
+end

data/package.json

@@ -0,0 +1,9 @@
+{
+  "devDependencies": {
+    "eslint": "~5.16.0",
+    "eslint-config-recommended": "~4.0.0",
+    "stylelint": "~10.1.0",
+    "stylelint-config-recommended-scss": "~3.3.0",
+    "stylelint-scss": "~3.9.2"
+  }
+}

data/script/admin_ci

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+gem install bundler
+bundle update
+
+CI_GEM_PATH="$(bundle show workarea-ci)"
+. ${CI_GEM_PATH}/exe/workarea-set-ci-env
+
+bin/rails app:workarea:test:admin

data/script/ci

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+gem install bundler
+bundle update
+
+CI_GEM_PATH="$(bundle show workarea-ci)"
+. ${CI_GEM_PATH}/exe/workarea-set-ci-env
+
+bundle exec workarea-lint
+bundle exec workarea-audit
+bin/rails test test/**/*_test.rb

data/script/core_ci

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+gem install bundler
+bundle update
+
+CI_GEM_PATH="$(bundle show workarea-ci)"
+. ${CI_GEM_PATH}/exe/workarea-set-ci-env
+
+bin/rails app:workarea:test:core

data/script/plugins_ci

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+gem install bundler
+bundle update
+
+CI_GEM_PATH="$(bundle show workarea-ci)"
+. ${CI_GEM_PATH}/exe/workarea-set-ci-env
+
+bin/rails app:workarea:test:plugins