A responsive product comparision table to compare and filter through multiple products.
If you are developing a online store where you want to no of product to be store, in this scenirioa you will require this product/ plugin with your store. Here we are following a very simple approach in which I will use a simple HTML table element. it will be very helpful in case if you want to compare 6+ product this thing get tricky particular when you want whole things in responsive view.
Today, threw this article you can save your time bye using this time-saver comparison table. It is truly design for big online product store. It is already installed with SONY UK WEKSITE. In UX term we are here letting user select and filter item as you want to compare or filter.
Creating the structure
The HTML structure is combination of a section.cd-products-comparison-table having a <header> and a div.cd-products-table. The <header> include the action buttons (filter and reset) while the div.cd-products-table is used to wrap the div.features(product features list) and the div.cd-products-wrapper. The latter contains an unordered list (ul.cd-products-columns) for the product list items.
The .cd-products-wrapper has a width of 100% and overflow-x of auto; the .cd-products-columns, instead, has a width equal to the sum of all columns widths and is scrollable (because of its parent overflow property). The div.features has an absolute position and is fixed on the left side of the viewport.
On big devices (viewport width greater than 1170px), the .top-fixed class is added to the .cd-products-table when user scrolls down to fix the products top information (product name and image):
To implement the products table, we created a productsTable object and used the bindEvents function to attach event handlers to the proper elements:
You may have noticed that we added an event listener to the scroll event of the .cd-products-wrapper; when the .top-fixed class is added to the .cd-products-table, the .top-info elements are in fixed position, so they don’t scroll with the .cd-products-columns. The updateLeftScrolling() function is used to horizontally translate these elements while the user scrolls inside the .cd-products-wrapper.