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.


#8

Thanks for explaining this in details. I got a hang of repeater now. But still ran into some issues when I mixing rollover states, panel states, nested components.

  1. The product name and price don’t get transferred from the main product grid repeater to the comparison repeater. The images transferred just fine.

  2. The highlighted states(brown box) disappears on the previous selected products when I select a new products. I think it has something to do with resetting the repeater to the default. I want those brown outline boxes to be present so the user knows which ones have been selected.

  3. The main image resets to the empty default state after selecting another product. Probably also has to do with resetting the product grid repeater every time.

  4. When clicking a “- Remove Comparison” button(a toggle), the entire comparison repeater cells goes away, instead of removing the corresponding product.

I’ve attached my rp file here.

Still some problems, but I’m getting there! Thanks everyone for the help! Learning something new about Axure is fun :slight_smile:

product_grid_repeater_test.rp (1.9 MB)


#9
  • The product name and price don’t get transferred from the main product grid repeater to the comparison repeater. The images transferred just fine.[Fixed]
  • The highlighted states(brown box) disappears on the previous selected products when I select a new products. I think it has something to do with resetting the repeater to the default. I want those brown outline boxes to be present so the user knows which ones have been selected.[Fixed]
  • The main image resets to the empty default state after selecting another product. Probably also has to do with resetting the product grid repeater every time.[Fixed]
  • When clicking a “- Remove Comparison” button(a toggle), the entire comparison repeater cells goes away, instead of removing the corresponding product.[Fixed]

I switched to another method.

product_grid_repeater_test_Jorkin.rp (1.9 MB)

Preview: https://4hoavn.axshare.com


#10

Thanks! I thought using event handler is a pretty interesting way to tackle. I found it’s easier for me to understand the logic behind this method: raise “compare” and “remove_compare” events in the master(the product card). However, I was a little lost on what interaction you used to raise the above two separate events. When I go into my master component, I don’t get interaction pane on the right where I can raise events. How did you create those two events?


#11

I slightly modified your component structure

This documentation will help you:


#12

I found out this is the oddity of Axure. The event raiser could only be placed inside the master component, not outside of the component instance. Otherwise, the “Raise Event” would not be available at bottom of the actions list. This took me some googling to find out. I read the Axure Docs Raised Events, but it doesn’t point out this tricky part. Thanks a lot for explaining.


#13

So I rebuilt this prototype from scratch by following Jorkin’s direction. It’s a good way for me to understand the logic behind the process. I thought I followed pretty closely and know how to do it now. But I still ran into some issues. The swapping repeater data between the main repeater and the compare repeater still doesn’t work. I spent a day trying to “debug” but without avail. So I attached my rp file here. Please take a look and point out where I did wrong. Thank you all. product_grid_repeater_follow_jorkin.rp (1.9 MB)


#14

I found two bugs and optimized the logic.

product_grid_repeater_follow_jorkin.rp (3.6 MB)

Oh! There’s a small trick here:
image

You don’t need to set panel state yourself.just show or hide “Select Hightlight Box”, the panel will be changed automatic.


#15

Great! Thanks. Not sure how I missed those details :crazy_face: I don’t have any coding background. Syntax can be easily overlooked.

So I showed this prototype to a few user group people. One of the feed back I received was that it would be nice to have the ability to deselect(remove) the selected products in the comparison tray. The tray will be a stickie header that floats over the main product grid. If the product grid gets very long, it’s not that user friendly to force the user scroll all the way up or down to deselect the product. An easy way to remove the product is from the stickie tray. This was also the idea I had while doing the wireframe.

So now I decide to add this functionality to my prototype and run another test. The tricky part is to use the mini repeater(compare) to tell the main repeater(product grid) to reset the corresponding product(turn off brown border, set the button back to “compare”). So this is almost a reversed functionality except that the small repeater doesn’t delete rows in the main repeater, only resets it. The idea I thought about is to apply Click/Tap to the product in the compare tray, and mark that row, and raise event to delete the row. Then use marked item to match to the product in the main product grid repeater so it can turn off outlined highlight and reset “compare” button. The compare repeater needs to know which product it needs to reset in the main product grid repeater.

I tried to mark the row in compare, but there’s no available repeater in the dropdown. This seems to be a dead end. If I simply raise Remove_Compare, it will reset all of the selected products in the main repeater, but not that corresponding one. So I’m not sure if there’s other way I can do it.

Any suggests are greatly appreciated!


#16

you need a listener to check condition:

https://forum.axure.com/search?q=listener


#17

Thanks!

I tried a few times with “listener” after reading a few forum posts you’ve suggested. I think my main problem is that I can’t single out a particular component inside of a particular repeater row. So I have two repeaters, A and B. I use A to trigger an interaction(onClick) and point it(MarkRow) to a matching row in B.

[[Item.Product_Name==TargetItem.Product_Name]]

Then I move a component inside of that matching row in B by “0,0”. It could be a text label, image or icon, doesn’t matter. This will give me an OnMoved event inside of the B component(text/img/icon). At this point in theory I should already ID’ed the matching row in B and I could use OnMoved interaction and use “hide/show” action to make changes in the respective row in B. Unfortunately, it didn’t work. The “hide/show” would not isolate that particular component in the row that has been isolated(marked). Instead, it still hide/show every component in all rows. So how do I tell a component to do sth when I marked a repeater row which the component belongs to?

What did I do wrong here? Please advise. Thank you.


#18

Congratulations, you are just one step away from the finish line.

This is logic of listener

This is interaction of repeater A

product_grid_repeater_follow_jorkin.rp (4.4 MB)


#19

Hi, thanks for the advice. I think I just found another oddity of Axure. It’s the “listener” placement. Unlike the event raiser which could only be placed inside the master component, the “listener” could only be placed outside the row component, but still within the main repeater. So the event can be raised deep inside of the row component, the event then can be fired outside of the row, or even outside of the repeater. This is the hierarchical structure. That’s why I wasn’t able to Fire Event from inside of the row component and target a particular row. Once the “listener” was placed outside, the previous raised events became available in the + Add Event pulldown.

Is there an Axure raise/fire event, listener hierarchical structure documentation somewhere?

Thanks again Jorkin for pointing the way:+1: Learned a lot. :slightly_smiling_face:


#20

The “listener” can also be placed inside the row component, just raise event first.
There is a new “Page 3”, event raiser is “++CompareButton”.
image
and continue raising event in “Product Card”
image

product_grid_repeater_follow_jorkin.rp (6.2 MB)