Product Compare Library

Product Compare Library

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.…

Author: js-oceanPrice: $7

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.

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.

\
Data Types

The library supports the following 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.

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.

Leave a Reply

Your email address will not be published.