Product Card Comparison Counter


#1

Hi,

I’m trying to prototype a product card grid comparison feature. The grid is repeater. Each card has rollover and selected modes in dynamic panels. This grid page allows up to 3 items selected for comparison. If the user clicks the 4th one, it will get a popup saying max 3 is allowed, something like that. The idea is to set an upper limit of how many products you can compare at a time. I would like to know what’s the best way to count how many products have been selected/unselected and what’re the items(name, image, etc). These variables will be passed onto a floating bottom tray showing the thumbnails of products selected and there’s a “compare” button which will trigger a full screen modal showing the spec break down of each product side by side.

I suspect I could use repeater data fields to count the “selected” products. But I’m a newbie when it comes to repeater(a brain twister to me), not sure how would I get started. What would be the best way to set this up in Axure? Thanks.

KB


#2

You can add an “isSelected” column to the product repeater that gets set to “true” whenever a card is clicked. Then you can increment/decrement a counter based on the number of selected cards.

I’d also make your “Compare” list a repeater as well, just to make moving data around a bit easier, and avoid a bunch of complicated global variables.

Product_Compare.rp (66.4 KB)


#3

Thank you, wow! I’m getting better with repeater now. It’s one thing to know how it works, it’s entirely different when you know how to use it creatively. The idea of making the compare tray as a one cell repeater and add more columns as the main repeater items are selected is marvelous.

This one is pretty straight forward compare to the password checker you built for me last time(thanks again). I still have questions on the “Moved” interaction you added on the number counter which triggers max comparable item warning message. I never thought you could use “Moved” for the text value change. I always use “Moved” as the X,Y coordinates on the screen, the physical location change. So what other shape attributes can be used as “Moved” interaction?

Another thing. I tried to see the main repeater data table popup. For some reason, it’s not showing up when I selected the main repeater. I’m in RP10.

Thanks again, much appreciated. I’ll take some notes as I’m rebuilding my own. Only way to learn I guess.


#4

Using a benign interaction, like moving or rotating a widget by 0, is a controlled way to trigger a logic check. It’s a lot like calling a function in regular coding. I’ll sometimes create a specific, hidden, “function_” widget and use it for really complex logic so I only have to make changes in a single place. You can use anything, really. I’ve seen people use hidden dynamic panels and the “panel state change” action to make a sort of “poor man’s” FOR loop.

I’ve also seen instances where the data table just doesn’t show up for a specific repeater. I haven’t been able to figure out why or how to bring it back. You can try contacting Axure support and see what they have to say.

Repeaters are extremely powerful once you learn their idiosyncrasies. I highly recommend just searching the forums for “repeater” and seeing all the creative ways people have been able to use them.


#5

Hi,

I’m getting a better understanding on your build now. There’s one thing I’m still not sure is the Delete Row function, especially [[Item.index != ‘’]]. What does it do when the repeater is loaded the first time. Why does it delete a row? I think the “!” after Item.index is confusing to me.

Thanks.

KB


#6

[[Item.index]] always has value(include NaN).

so… I think [[Item.index != ‘’]] means true, equals to all rows.


#7

Exclamation point, equals sign ( ‘!=’ ) is the JavaScript operator for “not equal”. So the expression is saying:
If the row’s Item.index does not equal ‘’ (blank), then delete that row.
Since a row will always have an index, it’s just a way of saying “delete all the rows in this repeater”.

It’s there because we’re populating one repeater with data from another one. A repeater completely rebuilds itself any time it is refreshed. For example:

  1. You click Item 1 in Repeater A, it updates Item 1’s row to “IsSelected = true”.

  2. Repeater A refreshes:
    a) Sees Item 1’s “IsSelected” equals “true” and adds it to Repeater B.

  3. Repeater B refreshes:
    a) Displays Item 1.

  4. You click Item 2 in Repeater A, it updates Item 2’s row to “IsSelected = true”.

  5. Repeater A refreshes:
    a) Sees Item 1’s “IsSelected” equals “true” and adds it to Repeater B.
    b) Sees Item 2’s “IsSelected” equals “true” and adds it to Repeater B.

  6. Repeater B refreshes:
    a) Displays Item 1.
    b) Displays Item 1.
    c) Displays Item 2.

It’s a way to make sure you’re starting with a “fresh” list every time. It might become more clear id you take out that check and just see what happens.