संस्करण विकल्प मानों के लिए स्प्री ड्रॉपडाउन बॉक्स

Question

मैं स्प्री 3.0 सीख रहा हूं और मेरे पास एक टेस्ट शॉप है जो शॉर्ट्स बेचती है।

शॉर्ट्स कई विकल्प प्रकार हैं: आकार, रंग, लंबाई

मैं जिस तरह से यह ड्रॉप-डाउन बॉक्स के लिए एक रेडियो चेकबॉक्स से दृश्यपटल पर संस्करण विकल्पों को प्रदर्शित करता है को बदलना चाहते हैं।

वर्तमान में, स्प्री रेडियो बटन के रूप में विकल्प प्रकार प्रदर्शित करता है:

:

मैं इस तरह प्रत्येक विकल्प प्रकार के लिए ड्रॉप डाउन मेनू का उपयोग करने के लिए इस बदलना चाहते हैं

मैंने निम्नलिखित कोशिश की है:

<%= select_tag "variant_id", options_for_select(@product.variants_and_option_values(current_currency).collect{ |v| ["#{variant_options(v)} #{variant_price(v)}", v.id] })%> 

लेकिन यह बस प्रत्येक टैग में सभी विकल्प प्रकार के मूल्यों को प्रदर्शित करता है:

मैं व्यक्तिगत ड्रॉपडाउन मेनू में विकल्प मान विभाजित करने के लिए सबसे अच्छा तरीका है जानना चाहता था?

कोई भी सहायता मेरी बहुत सराहना की है, धन्यवाद।

Answer 1

यह उतना आसान नहीं है जितना लगता है कि आप Spree::OptionValue संस्करणों के बजाय रिकॉर्ड का उपयोग करेंगे और किसी बिंदु पर आप इसे अपने कार्ट में जोड़ने के लिए वेरिएंट में कनवर्ट करना चाहते हैं। संयोजन संभव नहीं हो सकते हैं और/या स्टॉक से बाहर हो सकते हैं, इसलिए विकल्प_वृत्त के साथ काम करने के लिए यह बेहद अनैतिक है।

लेकिन फिर भी, आप को पता है कि कैसे तो मैं निम्नलिखित की स्थापना करना चाहता था:

@options = Spree::OptionValue.joins(:option_value_variants).where(spree_option_value_variants: { variant_id: @product.variant_ids }).group_by(&:option_type) 

यह आपको जा रहा है हैश की कुंजी के साथ एक हैश दे देंगे option_types (आकार, रंग, आपके मामले में लंबाई) और विकल्प विकल्प_वृत्त के सरणी हैं।

आप आसानी से इस तरह रेडियो में इस फार्म कर सकते हैं:

<% @options.each do |option_type, option_values| %> 
    <%= content_tag :h2, option_type.presentation %> 
    <% option_values.each do |option_value| %> 
    <%= radio_button_tag option_type.name, option_value.id %> 
    <%= label_tag option_value.presentation %> 
    <% end %> 
<% end %> 

या ड्रॉपडाउन के लिए:

<% @options.each do |option_type, option_values| %> 
    <%= content_tag :h2, option_type.presentation %> 
    <%= collection_select :variants, option_type.name, option_values, :id, :presentation %> 
<% end %> 

और अपने नियंत्रक में आप एक प्रकार उन 3 मानदंडों से मिलान करने लगता है, तो देखें कि चाहेगा यह in_stock, backorderable या track_inventory?false है और त्रुटियों या एक अद्यतन कार्ट के साथ प्रतिक्रिया :)

मुझे आशा है कि इससे

Answer 2

इस समस्या को हल करने के लिए मैंने यही किया है। यह मूल रूप से variant_id पैरामीटर लेता है जिसे रेडियो बटन द्वारा नियंत्रित किया गया था और इसे अतिरिक्त अधिसूचनाओं के साथ jQuery और AJAX द्वारा नियंत्रित एक छिपे हुए क्षेत्र में बदल देता है।

मुझे आशा है कि इससे किसी की मदद मिलेगी।

config/routes.rb

# Mount the core routes 
Rails.application.routes.draw do 
    mount Spree::Core::Engine, at: '/' 
end 

# Create new routes 
Spree::Core::Engine.routes.draw do 
    post "products/:product_id/get_variant", 
     to: "products#toggle_like", 
     as: "get_variant", 
     constraints: { :format => /(js)/ } 
end 

एप्लिकेशन/मॉडल/होड़/product_decorator.rb

Spree::Product.class_eval do 

    # Find the Product's Variant from an array of OptionValue ids 
    def find_variant_by_options(array) 
    option_values = Spree::OptionValue.where(id: array) 
    variants = [] 
    option_values.each do |option_value| 
     variants.push(option_value.variants.ids) 
    end 
    self.variants.find_by(:id => variants.inject(:&).first) 
    end 
end 

एप्लिकेशन/नियंत्रक/होड़/products_controller_decorator.rb

Spree::ProductsController.class_eval do 

    # Get the Variant from params[:ids], respond with JavaScript 
    def get_variant 
    @product = Spree::Product.find_by :slug => params[:product_id] 
    @variant = @product.find_variant_by_options(params[:ids].split(',')) 

    respond_to do |format| 
     format.js 
    end 
    end 
end 

एप्लिकेशन/विचारों/होड़/उत्पादों/get_variant.js.erb

// Update hidden field #varient_id's value. 
$("#variant_id").val("<%= @variant.id %>") 
// Update price 
$(".price.selling").html("<%= number_to_currency @variant.price %>"); 
<% if @variant.in_stock? && @variant.available? %> 
// If in stock and available 
    $("#add-to-cart-button").prop("disabled", false); // Enable button 
    $(".out-of-stock").hide(); // Hide 'out of stock' message 
<% else %> 
// Otherwise 
    $("#add-to-cart-button").prop("disabled", true); // Disable button 
    $(".out-of-stock").show(); // Show 'out of stock' message 
<% end %> 

एप्लिकेशन/विचारों/होड़/उत्पादों/_cart_form.html.erb के लिए

<%= form_for order, url: populates_orders_path do |f| %> 
    ... 
    <% if @product.variants_and_option_values(current_currency).any? %> 
    <div id="product_variants" class="col-md-6"> 
     <h3 class="product-section-title"><%= Spree.t(:variants) %></h3> 
     <% @product.option_types.each do |option_type| %> 
     <%= f.label "option_type_#{option_type.id}", option_type.name %> 
     <br> 
     <%= f.select "option_type_value_#{option_type.id}", 
        option_type.option_values.all.collect { |v| [ v.name, v.id ] }, 
        { include_blank: true }, 
        { class: "form-control" } %> 
     <br> 
     <% end %> 
     <%= hidden_field_tag "variant_id", value: "0" %> 
     ... 
    </div> 
    <% else %> 
    <%= hidden_field_tag "variant_id", @product.master.id %> 
    <% end %> 
    ... 
    <span class="price selling" 
      itemprop="price" 
      content="<%= @product.price_in(current_currency).amount.to_d %>"> 
     <%= display_price(@product) %> 
    </span> 
    ... 
    <%= button_tag class: "btn btn-success", 
         id: "add-to-cart-button", 
       disabled: @product.variants.any?, 
        type: :submit do %> 
     <%= Spree.t(:add_to_cart) %> 
    <% end %> 
    ... 
    <span class="out-of-stock" style="display: none;"> 
    <%= Spree.(:out_of_stock) %> 
    </span> 
<% end %> 

<script> 
    // Call AJAX if all options are selected, otherwise clean up. 
    $("#product-variants select").change(function(){ 
    var option_value_ids = []; 
    $("#product-variants select").each(function(){ 
     option_value_ids.push($(this).val()); 
    }); 
    if(option_value_ids.indexOf("") == -1){ 
     $.ajax({ 
     url: "<%= get_variant_path(@product) %>?ids=" + option_value_ids.join(','), 
     method: "post" 
     }); 
    }else{ 
     $("#variant_id").val("0"); 
     $("#add-to-cart-button").prop("disabled", true); 
     $(".out-of-stock").hide(); 
    } 
    }); 
</script>