Products comparison

JBZoo cart allows visitors to buy products on your website. But what can we do if customers are constantly doubting their choice, unable to determine and find what they need?

To avoid that and let your customers get information in a handy way, we have developed a product comparison for ZOO which will apparently improve and brighten up any internet store. Let’s examine its features closer.

Possibilities of JBZoo Compare element

  • Products comparison by any fields.
  • Buttons to add or remove from comparison as well as the button to open a page with a convenient comparison table.
  • Buttons addable to a teaser layout, full product page or to any other layout.
  • Product properties for the comparison table are configured in the control panel by simple mouse dragging.
  • Comparison table has a horizontal and vertical layout which can be chosen by a user.
  • Such elements as images, text fields, radio buttons, rating and others can be added to the comparison table.
  • and a lot more!...

Let’s just go into it!

Buttons for adding to comparison

Every product has “Add to compare” button. Upon its pressing, two other buttons appear instead of it: “Remove” and “Compare”. All this automatically works very fast without reloading the page.

How to add a product to comparisonHow to remove a product from comparison or open the comparison table

Comparison table

Properties are arranged in a convenient way in the comparison table. You can configure links to open a detailed product page and read more about that product. Users can switch between horizontal and vertical view of comparison table. There is also a link to remove all products from comparison. Moreover, if you included JBZoo Image element in the comparison table, you can enlarge it in the lightbox by clicking on a small image in the table and browse through other images from the table.

Vertical layoutHorizontal layout

Configuration in the control panel

It is very easy to configure the comparison table so that it shows only specific properties of a product. To do this, you just need to open the configuration of the “Compare” template and drag needed elements to a desired position. You can also configure each element individually. For example, you can set any title for a row or a column with a product property, or set a specific dimensions for an image etc.

Dragging of properties to the table templateConfiguring element properties

Installation of the “Compare” template

Products comparison is available from version 1.4.0. If you made an update from the older version, you need to add the “Compare” template to an item type that needs to be compared. To do this, follow these instructions:

  1. Download jbuniversal.zip archive.
  2. Extract the archive and move templates/catalog/renderer/item/compare.php file to a folder with an item template. (for example, templates/catalog/renderer/item/<ITEM ALIAS>/compare.php).
  3. In the same folder find a “positions.xml” file and open it with a text editor.
  4. By analogy with other positions, add the following code to this file:
    <positions layout="compare">
        <position name="fields">Fields</position>
    </positions>
  5. Configure fields for comparison in the control panel.