Need panels to sort (appear) in order as selected from menu

advanced-prototyping
#1

I’m working on a filter/faceted search demo and have been able to get it to a certain point thanks to these forums, but now I’m stuck.

What I’m working on:
When you choose a filter from the left menu, a panel appears above the products showing the filter you chose. This allows you to deselect the filter and show you what filters you have turned on in this ‘Filtering By’ area. Home Depot does this well.

My issue:
I made a dynamic panel of each filter option. I can get these to appear/disappear and reset each filter. BUT - They appear in the spot I placed them on my page.

Question:
Is there a way I can stack these on the side and have them appear dynamically, in order, as the user chooses them? Also if you turn one off on of these filters the rest would move to fill in the blank space?

Demo here:
https://116k6a.axshare.com/#c=2

Instructions:
Open the ‘Occasion’ filter on the left menu accordion and choose some facets. You’ll see my ‘Filtering By’ panels appear above the product list and you can turn them off. Overall I want these to appear in order as you choose them instead of the static spot where I placed them.

Just looking for direction on how to start to figure this out, or if someone has a sample of something like this to get me started.

Thanks!

#2

Hi!

Here’s a solution using a repeater and the “absolute positioning” trick (sort of explained here), which requires turning off the “Fit to Content in HTML” setting for the repeater.

A filter and a sort are applied OnLoad of the dynamic panel that surrounds the repeater. The repeater items will automatically wrap to the next line at the width of this panel. (I set the panel’s background to pink so it’s visible.)

Note that the tag_row dynamic panel (the one that surrounds the two items in the repeater) needs to be set to Fit to Content.

Live sample.

File: filter_tags.rp (81.1 KB)

#3

Thank you!!! This is a great help. Thanks for taking the time.

On another note:
Is there a way to have individual repeater items be clickable and run an interaction?
Like target a specific repeater item?
Should I ask this in a new thread?

#4

Hi!

I’m not familiar with a model where clicking on a search tag does anything (aside from deleting the tag), but yes. You can put an OnClick handler on the tag_row panel and use [[Item.tag_name]] in a condition to do something based on the label of the current row (tag).

E.g.,

If (value) [[Item.tag_name]] equals "Apples"
   < do something if the tag you clicked on contains "Apples">

Or you can set a filter on another repeater (although - as you know - this isn’t any way to do a facet filter) by using [[Item.tag_name]] in the filter.

By the way, I added deleting the tags upon clicking the “x”. Note that I put a bit of javascript in there (this will work anywhere - even locally) to find the checkbox with the matching label and uncheck it when the tab is deleted. The link above is updated. Here is the new file:

[ Update ] Use this file: filter_tags_with_delete.rp (83.2 KB)

#5

Thank you so much for your help! This is just what I needed!

unlisted #6