Fix variant select ingredient

The Variant select didn't showed any result, because the text and frontend_display are not available on the variant entity. It is now replaced by a multiline output to make it easier to find the correct product variant.
AlchemyCMS · May 27, 2024 · 7516872 · 7516872
1 parent 8e28e4e
commit 7516872
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 11 deletions.
diff --git a/app/assets/javascripts/alchemy/solidus/admin/variant_select.js b/app/assets/javascripts/alchemy/solidus/admin/variant_select.js
@@ -1,7 +1,25 @@
 //= require alchemy/solidus/admin/select2_config
 
 $.fn.alchemyVariantSelect = function(options) {
-  var config = Alchemy.Solidus.getSelect2Config(options)
+  const config = Alchemy.Solidus.getSelect2Config(options)
+
+  function formatSelection(variant) {
+    return variant.options_text ? `${variant.name} - ${variant.options_text}` : variant.name
+  }
+
+  function formatResult(variant) {
+    return `
+      <div class="variant-select-result">  
+        <div>
+          <span>${variant.name}</span>
+        </div>
+        <div>
+          <span>${variant.options_text}</span>
+          <span>${variant.sku}</span>
+        </div>
+      </div>       
+    `
+  }
 
   this.select2($.extend(true, config, {
     ajax: {
@@ -15,18 +33,12 @@ $.fn.alchemyVariantSelect = function(options) {
       },
       results: function(data, page) {
         return {
-          results: data.variants.map(function(variant) {
-            return {
-              id: variant.id,
-              text: variant.frontend_display
-            }
-          }),
+          results: data.variants,
           more: page * data.per_page < data.total_count
         }
       }
     },
-    formatSelection: function(variant) {
-      return variant.text || variant.frontend_display
-    }
+    formatSelection,
+    formatResult
   }))
 }
diff --git a/app/views/alchemy/ingredients/_spree_variant_editor.html.erb b/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 %>
   })