3

I've been trying to learn AngularJS to prototype new concepts and designs for an ecommerce site. I'm currently trying to create a product search page with a series of filters based on different product attributes.

Initially the filter groups would consist of:

  • Brand (single string value)
  • Category (array with id and string)
  • Labels (array with zero or more values, max 5)
  • Callouts (array with zero or more values, max 5)

However this might change so ideally the solution would be abstracted to allow for new groups to be listed and filtered without having to rewrite the controller completely.

The values from each filter set would be listed as checkboxes in the sidebar and de-duplicated to only show unique values and ideally also count for how many products are in each.

I started using some of the code from Filter Array Using Checkboxes with AngularJS however it doesn't seem that scalable in terms of having a variety of different facets/filter groups and doesn't work with values in arrays.

Is there a way to abstract this solution into two different services? E.g.

  • A service to list the available values for the filter
  • A custom filter that would accept the attribute and value to filter by which you could use to add multiple instances of that custom filter.

My main obstacle at the moment is finding a practical way to iterate through the arrays and only show unique values, whilst at the same time getting a correct count. I tried to cheat by manually listing the filter options but couldn't get the count to work. Ideally I'm looking for a solution that fetches the filter values from JSON than hardcoded in the view.

The product JSON is structured as follows but can be modified if it makes things easier.

{
    "Category": ["g122", "Side by Side Refrigerators"],
    "Brand": "LG",
    "ModelNo": "GC-P197DPSL",
    "Sku": "50001129",
    "Heading": "567L Side by Side Refrigerator",
    "ShortDesc": "The LG 567L Side-by-Side Platinum Refrigerator with One Touch Home Bar offers a huge amount of storage capacity making it perfect for family sized homes!",
    "Labels": ["New", "As Advertised"],
    "Callout": ["Bonus Offer", "Sale"],
    "Price": 1399,
    "WasPrice": 1650,
    "DeliveryTier": "4",
    "Image": "50001129_62296"
},
{
    "Category": ["g186", "LED TVs"],
    "Brand": "LG",
    "ModelNo": "55LA6620",
    "Sku": "50017349",
    "Heading": "55\"(139cm) FHD LED LCD 100Hz 3D Smart TV",
    "ShortDesc": "The LG 55\" FHD LED LCD is a Smart TV for smart people. The LG Smart TV is a class above with dual core processor, virtual surround, LED plus and magic remote control with voice recognition.",
    "Labels": ["New", "As Advertised"],
    "Callout": ["Bonus Offer", "Sale"],
    "Price": 1389,
    "WasPrice": 1599,
    "DeliveryTier": "4",
    "Image": "50017349_87400"
  }

Here's a JSfiddle of my progress so far http://jsfiddle.net/LifeOnLars/HWa2m/24/

Any help would be appreciated.

Community
  • 1
  • 1
LifeOnLars
  • 398
  • 3
  • 15
  • Hey @LifeOnLars, did you find any solutions or libraries to help with this? I'm just embarking upon the same challenge this week too! – richardwhatever May 25 '14 at 17:28
  • Nope, unfortunately I haven't found a good generic or abstract solution to this yet. I'm using a more manual approach to show a smaller set of filters for now. Since this I'm working on a ux prototype it's not vital, but for a production site I would need to find proper solution. There must be a way to do this where you don't have to manually code up separate nested custom filters for each facet you want to use. – LifeOnLars May 26 '14 at 23:20
  • How are you getting the data in the real app, an API? We are using elasticsearch at work (similar sort of thing, product search, each product has multiple facets e.g. brand, category, color, etc.), and it gives counts of each facet with each query. This lets me simply use `ng-repeat` for the facets, without needing to hard code anything (if I need to display a facet differently, I can do it through a directive). Ideally counts should be done server side (same with detecting duplicates). – Daniel May 27 '14 at 14:08
  • For my project it's simply a UX prototype that's being used for user testing and conveying development requirements so it's just using JSON files as the data source. I considered a Mean stack but again a bit overkill for my needs and added more work initially than I had capacity for. I did come across Elasticsearch in my research but was out of scope for what I was doing. I can see it being quite good for a real world app though. – LifeOnLars May 27 '14 at 22:52
  • @LifeOnLars did you managed to get anything for this? I am looking for a similar solution with JSON files and filtering. – Bala Sivagnanam Sep 14 '15 at 09:03
  • Not really. Went a slightly different path with a lot of manual queries. Still haven't found a practical and somewhat dynamic way of doing this. – LifeOnLars Aug 24 '16 at 05:12

0 Answers0