Allow price selection using a slider
The product search has been extended to allow a slider bar to be used to select the minimum and maximum price for the search.
To enable the slider bar the property “UseSliderForPrice” should be set to ‘True’ and the “price” field should be in the list of search fields. The minimum and maximum value the can be selected needs to be set on the skintag via the “SliderMinValue” and “SliderMaxValue” properties.
A full listing of the available properties related to the slider is in table 1.
Table 1 – pbAdvProductSearch slider properties
|
Property
|
Default Value
|
Available Values
|
Notes
|
|
UseSliderForPrice
|
False
|
True|False
|
If true, a slider control will replace the min and max price texbox fields
|
|
SliderBuffer
|
0
|
Number
|
This value is added to the selected max price and subtracted from the selected min price for the search results
|
|
SliderMinValue
|
0
|
Number
|
|
|
SliderMaxValue
|
500
|
Number
|
|
|
SliderSelectionStart
|
50
|
Number
|
Must be greater than the SliderMinValue and less than SliderMaxValue and less than SliderSelectionStart
|
|
SliderSelectionEnd
|
450
|
Number
|
Must be greater than the SliderMinValue and less than SliderMaxValue and greater than SliderSelectionStart
|
|
SliderSmallChange
|
20
|
Number
|
|
|
SliderBigChange
|
100
|
Number
|
|
|
SliderOrientation
|
Horizontal
|
Horiztonal|Vertical
|
|
|
SliderTrackPostition
|
Center
|
Center|TopLeft| BottomRight
|
|
|
SliderHeight
|
40
|
Number
|
|
|
SliderWidth
|
400
|
Number
|
|
Image 1 – pbAdvProductSearch slider example
Allow checkbox list fields to be used
The product search has been extended to allow for checkbox list fields to be used on category fields, standard product fields and additional fields.
To enable a field to be displayed as a checkbox list, the field name needs to be included in the “CheckboxListFields” property.
A full listing of the available properties related to the checkbox list is in table 2.
Table 2 – pbAdvProductSearch checkbox list properties
|
Property
|
Default Value
|
Available Values
|
Notes
|
|
CheckboxListFields
|
""
|
|
Comma separated list of field names to be displayed as a checkbocx list
|
|
CheckboxListColumns
|
3
|
Number
|
Number of columns that the checkbox list will be displayed with
|
|
CheckboxListRepeatDirection
|
Horizontal
|
Horizontal|Vertical
|
|
|
CheckboxTextAlign
|
Right
|
Left|Right
|
Text / image appears to the left or right of the checkbox
|
|
HideDisabledCheckboxLists
|
True
|
True|False
|
When true, dependent checkbox list fields are not visible and only become visible when a parnet field is selected.
|
Allow images to be included in the checkbox list and dropdown list items
The product search has been extended to support image display within a dropdown and in a checkbox list.
To enable images in a dropdown, the property “UseLegacyControls” needs to be set to ‘False’, and the property “ImageRegionName” needs to be set to the image region name that contains the image to be displayed.
Note that images must be retrieved from a collection item, so the dropdown or checkbox list needs to be created with the items coming from a datasource in the console. See image 2 for an example.
Image 2 – Create a dropdown field with a datasource
A full listing of the available properties related to the images in dropdown items and checkbox items is in table 3.
Table 3 – pbAdvProductSearch checkbox list properties
|
Property
|
Default Value
|
Available Values
|
Notes
|
|
UseLegacyControls
|
True
|
True|False
|
Set to false when images are required to be in dropdowns
|
|
ImageRegionName
|
""
|
|
Region name that contains the image for the dropdown / checkbox list items
|
|
ImageWidth
|
20
|
Number
|
Width of the dropdown / checkbox list image
|
|
ImageHeight
|
20
|
Number
|
Height of the dropdown / checkbox list image
|
|
MinImageWidth
|
20
|
Number
|
Min width of the dropdown / checkbox list image
|
|
MinImageHeight
|
20
|
Number
|
Min height of the dropdown / checkbox list image
|
Example skintag and output
An example skintag and the generated output is as follows
[pbProductSearch UseSliderForPrice="True" Collection="Special Deals" SearchFields="keyword,collection,category,price,manufacturer,model,year" usedropdownfields="true" ImageRegionName="Image1" UseLegacyControls="false" imagewidth="50" ImageHeight="50" CheckboxListFields="manufacturer,model,year"]
