Product Filtering on Ecommerce Site

Community Beginner ,
Nov 06, 2014 Nov 06, 2014

Copy link to clipboard

Copied

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?

TOPICS
eCommerce

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Employee , Oct 29, 2015 Oct 29, 2015
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=teamingThis 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 <pr...

Likes

Translate

Translate
Adobe Employee ,
Nov 07, 2014 Nov 07, 2014

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 13, 2015 Mar 13, 2015

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 13, 2015 May 13, 2015

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 29, 2015 Oct 29, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Oct 29, 2015 Oct 29, 2015

Copy link to clipboard

Copied

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

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 29, 2015 Oct 29, 2015

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Oct 29, 2015 Oct 29, 2015

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 29, 2015 Oct 29, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 29, 2015 Oct 29, 2015

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 29, 2015 Oct 29, 2015

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Oct 29, 2015 Oct 29, 2015

Copy link to clipboard

Copied

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}}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 29, 2015 Oct 29, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 29, 2015 Oct 29, 2015

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 29, 2015 Oct 29, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines