Page 1 of 1

Sort options to dropdown instead of links

Posted: Fri Aug 14, 2015 5:31 am
by rudy
Hi,

Is there a way to convert Sort Options in HeatClinic from links to dropdown??
productSortOptions.html:-

Code: Select all

<a blc:addsortlink="salePrice asc"><span th:utext="#{productSortOptions.price}"></span></a>


Regards,
rudy

Re: Sort options to dropdown instead of links

Posted: Sun Sep 06, 2015 4:26 am
by rudy
Finally found a solution to this.

How to HIT a URL with <select>
Below is a plain HTML+Javascript, which will change the location of page, based on selected option.

Code: Select all

<select onchange = "window.location=this.options[this.selectedIndex].value">
   <option value="http://www.google.com">GOOGLE</option>
   <option value="http://www.hotmail.com">HOTMAIL</option>
</select>


Now, for enabling sort, broadleaf provides links in combination with <a> tags.
Something like:

Code: Select all

<a blc:addsortlink="price"><span th:utext="#{productSortOptions.price}"></span></a>

On clicking this link, a URL is hit, which sorts the results.

We have to achieve the same functionality using dropdown.
Below steps can achieve that

1. Extend the class AddSortLinkProcessor
Add the following code:

Code: Select all

@Override
protected Map<String, String> getModifiedAttributeValues(Arguments arguments, Element element, String attributeName) {
   Map<String, String> attrs = super.getModifiedAttributeValues(arguments, element, attributeName);
   String url = attrs.get("href");
   attrs.remove("href");
   attrs.put("value",url );
   return attrs;
}

This code, removes the dynamic "href" attribute, and adds the URL [used for sorting] to the "value" attribute, which will be used with <option> tag within <select> tag.


2. Add your extended class to applicationContext.xml in site module

Code: Select all

<bean id="blAddSortLinkProcessor" class="<your_extended_class_here>" />


3. Your HTML code

Code: Select all

<select onchange = "window.location=this.options[this.selectedIndex].value">
   <option blc:addsortlink="price" />
   <option blc:addsortlink="name" />
</select>

Here, for each option, an attribute named "value=<SORT_URL>".

I tried to do a similar functionality for facets using checkboxes instead of links too.