Use Select2 for variant search

app/assets/javascripts/alchemy/solidus/admin.js

@@ -0,0 +1 @@
+//= require alchemy/solidus/admin/variant_select

app/assets/javascripts/alchemy/solidus/admin/variant_select.js

@@ -0,0 +1,46 @@
+$.fn.alchemyVariantSelect = function(options) {
+  var headers = {
+    'X-Spree-Token': options.apiToken
+  }
+
+  this.select2({
+    placeholder: options.placeholder,
+    minimumInputLength: 3,
+    initSelection: function($element, callback) {
+      $.ajax({
+        url: options.baseUrl + '/' + $element.val(),
+        headers: headers,
+        success: callback,
+        error: function (_xhr, _textStatus, errorThrown) {
+          console.error(errorThrown)
+        }
+      })
+    },
+    ajax: {
+      url: options.baseUrl,
+      datatype: 'json',
+      quietMillis: 300,
+      params: { headers: headers },
+      data: function (term, page) {
+        return {
+          q: { product_name_or_sku_cont: term },
+          page: page
+        }
+      },
+      results: function (data, page) {
+        return {
+          results: data.variants.map(function (variant) {
+            return {
+              id: variant.id,
+              text: variant.frontend_display
+            }
+          }),
+          more: page * data.per_page < data.total_count
+        }
+      }
+    },
+    formatSelection: function(variant) {
+      return variant.text || variant.frontend_display
+    }
+  })
+}

app/models/alchemy/essence_spree_variant.rb

@@ -6,20 +6,22 @@ class EssenceSpreeVariant < ActiveRecord::Base
 
     belongs_to :variant, class_name: 'Spree::Variant', optional: true
 
-    acts_as_essence(
-      ingredient_column: :variant,
-      preview_text_method: :name
-    )
+    acts_as_essence(ingredient_column: :variant)
 
-    def ingredient=(variant)
-      case variant
+    def ingredient=(variant_or_id)
+      case variant_or_id
       when VARIANT_ID
-        self.variant = Spree::Variant.new(id: variant)
+        self.variant_id = variant_or_id
       when Spree::Variant
-        self.variant = variant
+        self.variant = variant_or_id
       else
         super
       end
     end
+
+    def preview_text(_maxlength)
+      return unless variant
+      variant.descriptive_name
+    end
   end
 end

app/views/alchemy/essences/_essence_spree_variant_editor.html.erb

@@ -1,9 +1,17 @@
 <div class="content_editor essence_spree_variant" id="<%= content.dom_id %>" data-content-id="<%= content.id %>">
   <%= content_label(content) %>
-  <%= select_tag(
+  <%= text_field_tag(
     content.form_field_name,
-    options_from_collection_for_select(Spree::Variant.all, :id, :name, content.essence.variant_id),
+    content.essence.variant_id,
     id: content.form_field_id,
     class: 'alchemy_selectbox full_width'
   ) %>
 </div>
+
+<script>
+  $('#<%= content.form_field_id %>').alchemyVariantSelect({
+    placeholder: "<%= Alchemy.t(:search_variant, scope: 'solidus') %>",
+    apiToken: "<%= current_alchemy_user.spree_api_key %>",
+    baseUrl: "<%= spree.api_variants_path %>"
+  })
+</script>

config/locales/alchemy_solidus_en.yml

@@ -1,4 +1,7 @@
 en:
+  alchemy:
+    solidus:
+      search_variant: Search a variant
   spree:
     admin:
       tab:

lib/generators/alchemy/solidus/install/install_generator.rb

@@ -131,6 +131,11 @@ def set_root_route
           end
         end
       end
+
+      def append_assets
+        append_file "vendor/assets/javascripts/alchemy/admin/all.js",
+          "//= require alchemy/solidus/admin.js"
+      end
     end
   end
 end

spec/models/alchemy/essence_spree_variant_spec.rb

@@ -18,18 +18,15 @@
   end
 
   describe 'ingredient=' do
-    subject(:ingredient) { essence.variant }
-
     context 'when String value is only a number' do
       let(:value) { '101' }
 
       before do
         essence.ingredient = value
       end
 
-      it 'sets variant to an variant instance with that id' do
-        is_expected.to be_a(Spree::Variant)
-        expect(ingredient.id).to eq(101)
+      it 'sets variant_id with that id' do
+        expect(essence.variant_id).to eq(101)
       end
     end
 
@@ -40,9 +37,8 @@
         essence.ingredient = value
       end
 
-      it 'sets variant to an variant instance with that id' do
-        is_expected.to be_a(Spree::Variant)
-        expect(ingredient).to eq(variant)
+      it 'sets variant to that variant' do
+        expect(essence.variant).to eq(variant)
       end
     end
 
@@ -56,4 +52,12 @@
       end
     end
   end
+
+  describe '#preview_text' do
+    subject { essence.preview_text(nil) }
+
+    it 'returns the variants name' do
+      is_expected.to eq(variant.descriptive_name)
+    end
+  end
 end

spec/views/alchemy/essences/essence_spree_variant_editor_spec.rb

@@ -8,26 +8,28 @@
 
   before do
     view.class.send(:include, Alchemy::Admin::EssencesHelper)
-    allow(view).to receive(:content_label).and_return(content.name)
+    allow(view).to receive(:content_label) { content.name }
   end
 
-  it "renders a variant select box" do
-    render 'alchemy/essences/essence_spree_variant_editor', content: content
-    expect(rendered).to have_css('select.alchemy_selectbox.full_width')
+  subject do
+    render 'alchemy/essences/essence_spree_variant_editor',
+      content: content,
+      spree: double(api_variants_path: '/api/variants'),
+      current_alchemy_user: double(spree_api_key: '123')
+    rendered
+  end
+
+  it "renders a variant input" do
+    is_expected.to have_css('input.alchemy_selectbox.full_width')
   end
 
   context 'with a variant related to essence' do
     let(:product) { Spree::Product.new(name: 'Chocolate') }
     let(:variant) { Spree::Variant.new(id: 1, product: product) }
     let(:essence) { Alchemy::EssenceSpreeVariant.new(variant_id: variant.id) }
 
-    before do
-      expect(Spree::Variant).to receive(:all) { [variant] }
-    end
-
-    it "selects variant in select box" do
-      render 'alchemy/essences/essence_spree_variant_editor', content: content
-      expect(rendered).to have_css('option[value="1"][selected]')
+    it "sets variant id as value" do
+      is_expected.to have_css('input.alchemy_selectbox[value="1"]')
     end
   end
 end