ItemPriceRange_Filter Widget

The ItemPriceRange_Filter widget displays a price-range slider for the current item search or category. When a shopper changes the slider, the widget refreshes Items_TileListing with price filters.

Add the widget to a page

Use this widget on the same page as Items_TileListing. It requires the GetSearchParameters and SetupItemsToDisplay functions that Items_TileListing provides.

<Control src="LoadWidgetControl.ascx"
    FileLocation="ItemPriceRange_Filter.html"
    Options="priceBasis: 'List',
        titleText: 'Price Range',
        rangeBarColor: '#999'" />

How the price filter affects the item listing

The widget first requests the lowest and highest prices for the current category and child-category scope. It displays a range slider only when the returned low and high prices differ.

When the shopper finishes moving the slider, the widget:

  1. Creates LowPrice<priceBasis> and HighPrice<priceBasis> filter values.
  2. Includes active characteristic filters when ItemCharacteristics_Filter is present.
  3. Sends the filters through the search operation supplied by Items_TileListing.
  4. Calls SetupItemsToDisplay to replace the items in the main listing.

The price filter does not provide its own item listing. Items_TileListing must be present for the slider to load and refresh results.

Widget options

Option Default Valid values or format Effect
priceBasis
String		 'List' Value accepted by the price-range and item-search operations Determines the price basis sent when retrieving the range and constructing the low- and high-price filters.
titleText
String		 'Price Range' Text Sets the filter accordion title.
rangeBarColor
String		 '#999' CSS color value Sets the slider’s selected-range color.
sliderStep
Number		 Calculated from the returned price range Number The source calculates the slider step from the price range. When this option is supplied, the current implementation still uses the calculated value rather than the supplied numeric value.

Interaction with characteristic filters

When ItemCharacteristics_Filter is present, the price filter calls its GetActiveFilters function before adding its price filters. This preserves selected characteristic filters when the shopper changes the price range.

Validate the widget

  1. Place ItemPriceRange_Filter and Items_TileListing on the same page.
  2. Open a category with items at different prices and confirm the price-range slider appears.
  3. Change the slider range and confirm the main item listing refreshes with matching items.
  4. When ItemCharacteristics_Filter is also present, select a characteristic and then change the price range. Confirm both filters remain applied.