Fix variant select ingredient

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

@@ -1,32 +1,55 @@
 //= require alchemy/solidus/admin/select2_config
 
-$.fn.alchemyVariantSelect = function(options) {
-  var config = Alchemy.Solidus.getSelect2Config(options)
+$.fn.alchemyVariantSelect = function (options) {
+  const config = Alchemy.Solidus.getSelect2Config(options)
 
-  this.select2($.extend(true, config, {
-    ajax: {
-      data: function(term, page) {
-        return {
-          q: $.extend({
-            product_name_or_sku_cont: term
-          }, options.query_params),
-          page: page
-        }
+  function formatSelection(variant) {
+    return variant.options_text
+      ? `${variant.name} - ${variant.options_text}`
+      : variant.name
+  }
+
+  function formatResult(variant, _el, query) {
+    const matchTerm = new RegExp(query.term, "gi")
+    const formatMatch = (match) => `<em>${match}</em>`
+    const name = variant.name.replace(matchTerm, formatMatch)
+    const sku = variant.sku.replace(matchTerm, formatMatch)
+    return `
+      <div class="variant-select-result">
+        <div>
+          <span>${name}</span>
+        </div>
+        <div>
+          <span>${variant.options_text}</span>
+          <span>${sku}</span>
+        </div>
+      </div>
+    `
+  }
+
+  this.select2(
+    $.extend(true, config, {
+      ajax: {
+        data: function (term, page) {
+          return {
+            q: $.extend(
+              {
+                product_name_or_sku_cont: term,
+              },
+              options.query_params
+            ),
+            page: page,
+          }
+        },
+        results: function (data, page) {
+          return {
+            results: data.variants,
+            more: page * data.per_page < data.total_count,
+          }
+        },
       },
-      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
-    }
-  }))
+      formatSelection,
+      formatResult,
+    })
+  )
 }

app/views/alchemy/ingredients/_spree_variant_editor.html.erb

@@ -10,6 +10,25 @@
   <% end %>
 <% end %>
 
+<style>
+  .variant-select-result > * {
+    display: flex;
+    justify-content: space-between;
+    min-height: 16px;
+
+    > span {
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:last-child {
+      color: hsl(224, 8%, 63%);
+    }
+  }
+</style>
+
 <script>
   $('#<%= spree_variant_editor.form_field_id(:variant_id) %>').alchemyVariantSelect({
     placeholder: "<%= Alchemy.t(:search_variant, scope: 'solidus') %>",
@@ -19,7 +38,8 @@
     <% if spree_variant_editor.variant %>
     initialSelection: {
       id: <%= spree_variant_editor.variant.id %>,
-      text: "<%= spree_variant_editor.variant.name %>"
+      name: "<%= spree_variant_editor.variant.name %>",
+      options_text: "<%= spree_variant_editor.variant.options_text %>"
     }
     <% end %>
   })