Hello everybody.
So i´m trying to figure out how to implement an compare option between two products. Has anyone tried this yet?
Basically on a collection overview page you would pick 2 products and display them on a seperate landing page where different fields would be compared. Fx price, technical specs etc.
Best Olafur
Here is my public share link: LINK
(how to access public share link)
Interesting. I’d like to know the solution to this too, but it will most definitely be a custom code job.
I’ll have a think and see if I can come up with something. Searching codepen may be an idea as this is not do-able natively I know for sure.
Similar to this layout perhaps? Compare Google Pixel 2 vs. Samsung Galaxy S9 vs. Google Pixel 3 - GSMArena.com
That’s a good example. A lot of detailed information easily compared quickly. I also like the ability to search the products at the top of each column.
Is this one of yours?
Sorry for late reply… yes different fields… basically pulling up dynamically collection items on a page and compare for example mobile phone specs… exactly like gsm arena are doing it.
Hi @olafur,
I may have a solution for you or at least some useful tips to solve this problem
Here is the process and some relative screenshots.
I created a collection with item containing a title, a description and an image just for test purposes.
The idea is to setup 2 collection lists elements on the page to display the quick pickers.
In each collection item there is an illustration for the picker but also a div which will contain the information that you want to compare.
The trick here is to position this second div (left and right comparator) with absolut or fixed so they are stacked on top of each others. (I’ll let you in charge of the layout but you should understand mine in the screenshots)
Then everything happens in the interaction. I have 2 first mouse click interaction for the collection items for each side. One to hide all the left comparators and one to show the one that was clicked.
In the hide all left interaction, I’m hiding the Left comparator and I make it affect all elements with this class and the initial state is also set to hidden. (I also added an hiding interaction for the please select left item element which is displayed before an item is picked)
In the show clicked left interaction it is just a matter of showing the same left comparator element but this time I only affect children with that class. This way only the one item that was clicked come from display none to display block.
Same process for the right side with a hide all right and show clicked right.
Everytime you click on a item everything is set to display none in this collection list and just display back the one which was clicked.
Because both of those mouse click interactions are happening at the same time I would also recommend adding a bit of delay to the show clicked animation to insure it happens after the hide all interaction (0.01s for example).
I hope all of this make sense and will help you with your project.
Max
Thanks for this… will have a look at this.
I have done something similar like olafur.
See how it works here: Compare Bots ★ Beyond All Reason RTS
Would love to see if anyone has done this where they can compare items from their shopping cart or wish list.
Hi! How did you do that???
