Product Filtering on Ecommerce Site

[amenard0076]

Does anyone have a good solution to provide product filtering for an online store??

The {tag_browsepanel} is too simple and only allows for price search. Would like a similar function to occur, but based off of assigned categories that would be assigned to the different products.

The client needs filters set up for criteria such as:

• Color
• Product
• Size
• Material
• Price
• Manufacturer

Would liquid be any help in this?  Is there any known plugin that works efficiently with BC?

[Mihai_Tica]

You could use the tagging feature for this type of build. Something along these lines: -add tags to your products (Color, Product, Size, Material, Price, Manufacturer)

-on a page insert this module - {module_productfeaturelist tag="{module_url,tag}"} - notice how we pass module_url as the tag to filter by - http://docs.businesscatalyst.com/dev-assets/reference#!/module-reference/pages/module_url.html!named...

-now if you go to http://perfume10.worldsecuresystems.com/tagged-products?tag=color or http://perfume10.worldsecuresystems.com/tagged-products?tag=product only the products tagged with "color" or "product" are shown.

We are about to release the new Product v3 APIs for products in the near future, when those will be available this type of filtering will be alot easier to implement and you will be able to filter by more complex conditions.

[Machinette]

Hi,

I am stocked with a product filter. It is for a computer shop with diferent kinds of filters, ie motherboard wont need the same filters as graphics cards..

Thanks

Ira

[QreusJorj]

I am looking for something similar.  I'd like to drill down AJAX style with drop down menus.  Specifically; store

on the link above I'd like to be able to have the user select Brand > Year > Model > then the available catalogs for that model.  Can this be done now or do I have to wait for the v3 Product API?

[chogrady]

Hi,

So the {module_productfeaturelist tag="{module_url,tag}"} is just what I'm looking for but I've put for example:

{module_productfeaturelist tag="{module_url,barbour}"} Is this correct? replacing the 'tag' with the actual tag I want to show? As i tried it but it doesn't work not sure what I'm doing wrong, wondered if you could help this is what I have:

<a href="{module_productfeaturelist tag="{module_url,barbour}"}">Barbour</a>

Would be great to get your insight.

[Mihai_Tica]

Try changing the "outer" double quotes to single quotes like so:

<a href='{module_productfeaturelist tag="{module_url,barbour}"}'>Barbour</a>

[chogrady]

Thanks Mihai

The link works but it doesn't actually filter the results. I've put the link into the catalogue page is that correct?

[Mihai_Tica · Accepted solution]

With Liquid building the collection of anchors is pretty easy, paste this code snippet in your page - module_productfeaturelist · GitHub and access the URL like so:

mtica1.businesscatalyst.com/products-by-tag?tagname=teaming

This will render an UL containing an anchor with the link you need for every product tagged with the tag teaming.

The great part is that besides the item's name and URL we are using to build the hyperlink there is a bunch of other product properties you can use, just paste

<pre>{{tagged-products.items|json}}</pre>

below the code snippet and you will see everything you can use.

Hope this helps,

Mihai

[chogrady]

This is great!

but when I follow your instructions the liquid doesn't seem to be working even though I've activated it in the beta features.

[chogrady]

Hi Mihai,

The code snippet you sent doesn't seem to be working I put in what you said but the " on the <a> element shows up red?

[chogrady]

Apologies this is the link: http://ogrady06.businesscatalyst.com/clothing

[Mihai_Tica]

2 issues:

1. use the tag name in the URL - http://ogrady06.businesscatalyst.com/clothing?tagname=barbour
2. in the href use {{item.name}} instead of {{title}}

[chogrady]

Okay so it worked with name but I want the tags, so I can filter items by their tags?

I put :

{module_productfeaturelist tag="{{globals.get.tagname}}" collection="tagged-products" template=""}

{% for item in tagged-products.items %}

<ul>

    <li>

<a href="{{item.url}}">{{item.tags}}</a>

    </li>

</ul>

{% endfor %}

But it doesn't show the tag name? although I chose the tag 'barbour' on the product yet it says on the json that it has no tags?

Any help would be greatly appreciated.

[chogrady]

Wait I think I might of figured it out.

So I didn't realise what you were saying before but now I get it. I can great a menu and each link is the tags and that will loop the items within that tag.

Cool thanks

[chogrady]

I'll explain in more detail, so essentially I'm looking for something whereby I can filter through product items with the tags you can associate with them.

I feel like this is really close to what I need but it\s showing the item names and what I'd like is to filter the products shown instead.

hope this makes sense.