Product Compare Library

Product Compare is a library for product features, and product plans comparison. It supports multiple CSS frameworks and can be implemented in any HTML layout using data attributes. The library contains an embedded touch-enabled gallery, supports local and session storage, and can compare by text, HTML, or numbers.

General Features

• Html Layout. The library has a flexible HTML layout that supports any CSS framework.
• Data Types. It’s possible to compare by different data types: text, HTML, and numbers.
• Case Sensitivity. Case-sensitive and case-insensitive comparison is supported.
• Gallery. Responsive and touch-enabled gallery with the modern Web Animation API.
• Storage Solutions. There is local storage, session storage, and cookies support.
• Documentation. Great and extensive documentation is included.
• Multiple Instances. It’s possible to have any number of library instances on the same page.
• Cutting-Edge Tech. The library is written in TypeScript + ES6 JS and uses modern Web Animation API.
• Look & Feel. The user ultimately defines all look & feel of the page; Any HTML layout or CSS can be configured and customized.
• Reset. The library supports reset buttons that can return the widget to its initial state.

Demo Pages

Product Compare is a library for making product features comparisons quickly and easily. It is written in modern ES6 JavaScript + TypeScript and doesn’t have any external dependencies. Any CSS framework can be used for styling.

• Bootstrap CSS Framework Examples
• Tailwind CSS Framework Examples
• Bulma CSS Framework Examples
• UIKit CSS Framework Examples
• Foundation CSS Framework Examples
• CSS Examples (Without Frameworks)

Data Types

• Text. The default comparison type is text. The comparison can be case-sensitive or non-sensitive. Also, it’s possible to use regex to ignore some special characters.
• HTML. HTML comparison is also supported. The library can compare any HTML elements like images, icons, or complex HTML structures.
• Numbers. The library can compare numeric data. In this case, all other content except numbers will be ignored.

Storage

The library supports storage to save the current state and restore it after page refresh or when the back button is pressed.

• Local storage – this is persistent storage that keeps data even if the user closes the browser.
• Session storage – it will be cleared when the browser session is over, typically when the user closes the browser.
• Cookies – unlike local and session storage, cookie values can be used on the server too. It’s also possible to define cookies’ expiration date.
• Deep Links – special links that send users directly into the predefined drop-down selection state.

Gallery

The library contains a responsive and touch-enabled gallery with the modern Web Animation API effects.

• Mobile ready and touch-enabled. The gallery HTML is fully responsive and customizable via data attributes.
• CSS Frameworks. Works in any CSS framework or pure CSS. The library contains examples of five famous CSS frameworks.
• Animation. The library uses a modern & efficient Web Animation API.
• CSS Classes. Dynamic CSS classes for selected, disabled, and hidden states.

Table

The library comparison table is fully customizable and mobile-ready.

• Control Buttons. There are control buttons to hide and show identical rows, reset buttons, and also close table columns buttons.
• Fade Animation. There is a fade-in / fade-out animation on adding and removing table columns.
• Flexible HTML Layout. The table HTML and styles are highly customizable through data attributes.
• Selected Columns Number. It’s possible to define the maximal number of columns that can be selected.