Compare Products Side By Side

By | January 23, 2014

I’ve been spending a lot of time recently looking at other shopping cart software, particularly Magento and Opencart and Prestashop to see how they’ve gone beyond “here’s a product, here’s a buy button”.

In Magento and Opencart I particularly like their “compare this product to this product” feature, where the person browsing the shop can add 2 or more products and then see those products listed on a page with their specifications and so on. Pretty much it’s a nice way to allow the customer to decide if they would like to purchase prodcut A or product B easily…

In Magento

magento-compare

In Opencart

opencart-compare

As you can see, the products are side by side ready for the shopper to make a buying decision. We don’t have this in osCommerce other than some older addon that I don’t want to use.

So I set out to create something like these. I pretty much based it on the Magento one as the Magento product compare also has a nice little infobox which I particularly like;

magento-box

I started the modifications late last night, it took some thinking about, but pleased to say that I have something workable – it needs more polishing (which is where you guys come in)…

In osCommerce

oscommerce-compare

How does it work ?

Adding a Product to the Compare List..

On each product page (and product listings) there is a new button “Compare”.

oscommece-button

Clicking this button adds the product to the compare list. This also invokes a new infoBox:

oscommerce-box

In the infoBox is a link to the actual “Compare Products” page as shown above.

Removing a Product from the list..

A product can be removed from the list in the following places; the new infoBox, the product listing page, the product page, the compare products page.

Invitation to test the new system

If you want to have a play with the system, hit my test shop. Let me know your thoughts by responding to this blog post. Thanks.

12 thoughts on “Compare Products Side By Side

  1. Steve

    Overall pretty darned nice. The only thing that occurred to me is when a customer would land directly on the product page, say from a google search; on the product landing page offer “similar products” or “recommended products” suggestion right there to compare.

  2. Steve

    There ya go, but my point was to consider integrating a comparison button within those “similar” or “recommended” products so right there on that page the customer could build his/her comparison list without clicking around looking for things to compare.

  3. Gary

    oh yes, I see. Would be ultra simple to add in a new button to do that.

  4. Ai-Teh Lin

    I’ve been wanting this. I guess it would be easy to define what data fields to compare against in addition to SKU, Stock, and Brand (e.g. fetching data from Extra Product Fields)?

    Thanks, Eddy

  5. Gary

    Eddy – it would be relatively simple to add in the EPF Fields – a case of amending the SQL call in the comparison page and then amending the output to include the result. Doable => Yes.

  6. arlisabijoux

    This looks pretty damn good! 🙂
    One thing I noticed when testing: when you add a product to the cart from the comparison page, it shows in the cart (fine), but if you come back to the comparison page perhaps it would be an idea to mark that product as having already been added to the cart, so the “add to cart” button would disappear and we’d have a “added to cart” text or something like that in its place. Just a thought.

    Hope I make sense.

  7. Gary

    Making the button change dependant on what’s in the cart is a very good idea 🙂 Thanks, Isa

  8. JD

    if you add more than 3 items, the fourth gets dropped down, it would be nice if you could set the right column to disappear on that page or make the center columns expandable to allow more items on the page actually side by side…

    only other thing I could think of would be an admin settable setting where you can limit which products can be compared to what, example comparing a printer to a dvd movie is useless.

  9. Gary

    The page could be changed to be a popup with no columns, or just a normal page with no columns. No problem. I’m not sure that setting a limit on what can be compared is worth the code – after all; most shops don’t sell printers and dvds 🙂

Leave a Reply

Your email address will not be published.