Advanced product search enhancements

Advanced Product Search

Introduction

The advanced product search skintag has now been updated to include a new slider field type, allow for checkbox list fields, and to allow images to be displayed in dropdown list items and also for checkbox list items.

Minimum Requirements

Pegboard V6.0.11.4

Advanced Product Search

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

 

 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.

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"]