Filters

With the following Datafeedr tag used in your views, you can create URLs to be used to filter a list of products. In conjunction with Widget Context, a free plugin which displays specific widgets on specific pages, a lot of cool things can be done.

In the examples below, we are assuming the page we are viewing (ie. our current URL) is http://www.mysite.com/store/category/shoes/. So, every filter we set up will be filtering the products in the "Shoes" category. We can apply filters to almost every page in our store; front page, category pages, custom pages and search pages. Filters really don't make sense on single product pages as there is nothing to filter... So, in the next few examples, you can assume that the filters we create will be applied to our current URL.

First, let me introduce the primary tag involved in creating a filtering URL:

[server.url type='fullpage' query='']

As is, this will simply return the full URL of the current page.

Example: http://www.mysite.com/store/category/shoes/

What we really need to do is append the URL with some parameters.

[server.url type='fullpage' query='price=150-300']

Now we have filled in the query attribute with a Key=Value parameter. Now this tag returns the current URL with the price filter. Example:

http://www.mysite.com/store/category/shoes/?price=150-300

Here are a few different examples of other Key=Value parameters you could use in this tag instead of the Price Key.:

[server.url type='fullpage' query='brand=Nike']
[server.url type='fullpage' query='merchant=Cooking.com']
[server.url type='fullpage' query='name=shoe']
[server.url type='fullpage' query='word=brown']
[server.url type='fullpage' query='tags=foo']
[server.url type='fullpage' query='tags=foo+bar']
[server.url type='fullpage' query='saleprice=5-10']

You can also have multiple Key=Value parameters within your query attribute:

[server.url type='fullpage' query='merchant=Cooking.com&price=20-40&word=black']

Now that we have the basics down, there are a few more tweaks we can make to the tag to give us more options:

In the previous examples, the Key=Value parameters were added unconditionally to the query string, replacing any Value that had a matching Key. For example, if a user was on this page:

http://www.mysite.com/store/category/shoes/?brand=Coke

and then clicked the URL generated by this tag:

[server.url type='fullpage' query='brand=Pepsi']

They would be taken to this URL:

http://www.mysite.com/store/category/shoes/?brand=Pepsi

But there might be times when you want to ensure that when one Key is set, that it cannot be overwritten. For example:

If a user is on this page:
http://www.mysite.com/store/category/shoes/?brand=Coke

This tag should not give them an option to view the Pepsi pages:

[server.url type='fullpage' query='brand=Pepsi']

We can do that by adding a "+" to the Key value in the query attribute.

[server.url type='fullpage' query='+brand=Pepsi']
[server.url type='fullpage' query='+brand=Coke']
[server.url type='fullpage' query='+brand=7up']

This reads, "Only append the URL with the brand parameter if the brand parameter is not already set. If the brand parameter is already set, do not modify its value".

The last operator we can use is the "-" minus sign. This is useful for giving a user the option to remove a filter:

[server.url type='fullpage' query='-brand']

This generates a URL that removes the brand parameter. This is useful if your user needs to reset their filter and remove any brand filter from their search.

You can also set up a tag that would allow the user to remove many filters at one time:

[server.url type='fullpage' query='-brand&-price&-merchant']

Below are some examples of actually using the Filters within a Widget View:

Example 1

<ul>
	<li><a href="[server.url type='fullpage' query='price=-50']">Less than $50</a></li>
	<li><a href="[server.url type='fullpage' query='price=50-150']">$50 ~ $150</a></li>
	<li><a href="[server.url type='fullpage' query='price=150-300']">$150 ~ $300</a></li>
	<li><a href="[server.url type='fullpage' query='price=300-']">More than $300</a></li>
</ul>

Example 2

This example will remove all filters if a filter has already been clicked and give the user to remove the Brand filter which is in place.

<ul>

	<?php if (@$_GET['brand']) { ?>
		<li><a href="[server.url type='fullpage' query='-brand']">[X] Remove Brand Filter</a></li>
	<?php } else { ?>
		<li><a href="[server.url type='fullpage' query='brand=Adidas']">Adidas</a></li>
		<li><a href="[server.url type='fullpage' query='brand=Nike']">Nike</a></li>
		<li><a href="[server.url type='fullpage' query='brand=Reebok']">Reebok</a></li>
	<?php } ?>

</ul>