Change Range of spree price filter

Question

I want to amend the price range in spree side bar, because default range is not good. I have tried a lot but unable to do so please help.

Sebin · Answer 1 · 2016-11-23T17:05:09.450

You could use a custom slider like this. Override _custom_sidebar.html.erb and add the following lines

<span for="amount" class="filter-hd">Price range</span>
<hr class="myhr2">
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range"></div>

Include jQuery ui slider and initiate the slider as given below.

<script>
  $(function() {
      $( "#slider-range" ).slider({
          range: true,
          min: 0,
          max: 5000,
          /* jshint ignore:start */
          values: [ <%= params.key?(:minprice) ? params[:minprice].to_i : 0 %>, <%= params.key?(:maxprice) ? params[:maxprice].to_i : 1000 %> ],
          slide: function( event, ui ) {
              $( "#amount" ).val( "<%= current_currency %>" + ui.values[ 0 ] + " - <%= current_currency %>" + ui.values[ 1 ] );
          },
          /* jshint ignore:end */
          change: function( event, ui ) {
              url = window.location.href;
              newmin = ui.values[ 0 ];
              newmax = ui.values[ 1 ];
              url = updateURLParameter(url, 'minprice', newmin);
              url = updateURLParameter(url, 'maxprice', newmax);
              window.location.href = url;
          }
      });
      $( "#amount" ).val( "<%= current_currency %>" + $( "#slider-range" ).slider( "values", 0 ) +
  " - <%= current_currency %>" + $( "#slider-range" ).slider( "values", 1 ) );
  });
</script>

Here is the javascript function updateURLParameter which is used in the above js snippet. You can add it in your js file.

Also decorate Taxons_controller and Products_controller to include price filtering

@products = @products.price_between(params[:minprice], params[:maxprice]) if params.key?(:minprice) && params.key?(:maxprice)

This will be inside the files - app/controllers/spree/products_controller_decorator.rb and app/controllers/spree/taxons_controller_decorator.rb

products_controller_decorator.rb -

# Custom methods for products related stuff
module Spree
  ProductsController.class_eval do
  alias_method :old_index, :index

  def index
    old_index # Like calling super: http://stackoverflow.com/a/13806783/73673
    @products = @products.price_between(params[:minprice], params[:maxprice]) if params.key?(:minprice) && params.key?(:maxprice)
    @products = @products.in_name_or_description(params[:query]) if params.key?(:query)
  end
end

In taxons_controller_decorator.rb, you can do the same for the method show.

thanks for looking into it but its not working, getting an error whenever copying your code into controller — Sumeet Masih, May 01 '16 at 12:47
Can you post your controller decorator method where you included this? — Sebin, May 01 '16 at 12:49
Inside app/controllers/spree/products_controller_decorator.rb? — Sebin, May 01 '16 at 12:53
nope in app/controllers/spree/taxons_controller.rb and app/controllers/spree/products_controller.rb — Sumeet Masih, May 01 '16 at 13:02
can you please give me decorator code for both taxons and products please — Sumeet Masih, May 01 '16 at 13:03
yup but now its giving some other error, on sliding the slider products are not being fetched error caught in console was (Uncaught ReferenceError: updateURLParameter is not defined) — Sumeet Masih, May 01 '16 at 13:42
here is the updateURLParameter function - https://gist.github.com/resaca/180f07a4d83a6511291001ca285f559e — Sebin, May 01 '16 at 15:44

score 0 · Answer 2 · answered Jun 09 '20 at 17:34

Update for spree 4.1-stable

For spree 4.1 just override price_filter_values in FrontendHelper module.

create a file price_filters_decorator.rb put it in app/helpers

inside that file override price_filter_values something like this:

module PriceFiltersDecorator
    Spree::FrontendHelper.module_eval do
        def price_filter_values
            [
                "#{I18n.t('activerecord.attributes.spree/product.less_than')} #{formatted_price(50)}",
                "#{formatted_price(50)} - #{formatted_price(200)}",
                "#{formatted_price(201)} - #{formatted_price(500)}",
                "#{formatted_price(501)} - #{formatted_price(1000)}",
                "#{formatted_price(1001)} - #{formatted_price(1500)}",
                "#{formatted_price(1501)} - #{formatted_price(2500)}",
                "#{formatted_price(2501)} - #{formatted_price(3500)}",
                "#{formatted_price(3501)} - #{formatted_price(4500)}",
                "#{formatted_price(4501)} - #{formatted_price(10000)}"
            ]
        end
    end
end

Now save it and restart your server. You may need to flush the cache to see the results.

Change Range of spree price filter

2 Answers2