Compare Things Plugin for Bubble.io | Dynamic Data Comparison Table

Plugin

Details & Instructions

Key Features

Data-Driven Comparison: Utilize JSON format to render detailed comparison tables.
- Learn JSON: New to JSON format? Check out this resource for more information.
Customization Options: Tailor colors to match your branding seamlessly.
- Color Codes: Need help choosing color codes? Visit HTML Color Codes for assistance.
Responsive Design: Ensures optimal viewing experience across all devices.
Filtering Functionality: Allow users to filter and compare items effortlessly.

Getting Started

Install the Plugin: Simply add the Compare Things plugin to your Bubble.io project.
Dependency: Ensure you have the Orchestra (repeating group addon) installed, especially if you're using dynamic data with the Compare Things plugin. Orchestra enhances the functionality of repeating groups, providing crucial support for dynamic data handling.
- Install Orchestra: If you haven't already, install for free the Orchestra (repeating group addon) from the Bubble.io plugin marketplace.
Configure Settings: Customize the plugin fields to match your requirements.
- Title: Set a title to display above the comparison table.
- Show Loader: Enable/disable the loader while the table is being generated.
- Activate Filtering: Choose whether to activate filtering options.
- Count: Specify the total number of items to compare.
- Wrapper Id: Paste the ID attribute of the element which will be replaced by the comparison table.
- Receive Data Id: Provide the ID attribute of the 'Receive Data' (Orchestra) element for dynamic data.
- List of Names: Enter names of items in JSON format, ensuring they align with corresponding attributes and attribute values.
Static Data

Each name, must be wrapped inside double quotes "name" and separated by comma.
```
"iPhone",
"iPhone 3G",
"iPhone 3GS",
"iPhone 4",
"iPhone 5",
"iPhone 5c",
"iPhone 5s",
"iPhone 6"
```
Dynamic Data

Each Orchestra - Receive Data item list, must be formatted as :formatted as JSON-safe.
- List of Images: Provide image paths in JSON format, keeping the same sequence as the list of names.
Static Data

Each path, must be wrapped inside double quotes "/cdn/my-image.jpg" and separated by comma.
```
"https://www.3nions.com/wp-content/uploads/2021/01/1st-iPhone.jpeg",
"https://www.3nions.com/wp-content/uploads/2021/01/iPhone-3G.jpeg",
"https://www.3nions.com/wp-content/uploads/2021/01/iPhone-3GS.jpeg",
"https://www.3nions.com/wp-content/uploads/2021/01/iPhone-4.jpeg",
"https://www.3nions.com/wp-content/uploads/2021/01/iPhone-5-i.jpeg",
"https://www.3nions.com/wp-content/uploads/2021/01/iPhone-5c.jpeg",
"https://www.3nions.com/wp-content/uploads/2021/01/iPhone-5s.jpeg",
"https://www.3nions.com/wp-content/uploads/2021/01/iPhone-6.jpeg",
```
Dynamic Data

Each Orchestra - Receive Data item list, must be formatted as :formatted as JSON-safe.
- List of Links: Include links (optional) in JSON format, following the order of names and images.
Static Data

Each link, must be wrapped inside double quotes "https://www.link.com" and separated by comma.
```
"https://www.gsmarena.com/apple_iphone-1827.php",
"https://www.gsmarena.com/apple_iphone_3g-2424.php",
"https://www.gsmarena.com/apple_iphone_3gs-2826.php",
"https://www.gsmarena.com/apple_iphone_4-3275.php",
"https://www.gsmarena.com/apple_iphone_5-4910.php",
"https://www.gsmarena.com/apple_iphone_5c-5690.php",
"https://www.gsmarena.com/apple_iphone_5s-5685.php",
"https://www.gsmarena.com/apple_iphone_6-6378.php"
```
Dynamic Data

Each Orchestra - Receive Data item list, must be formatted as :formatted as JSON-safe.
- Open Links New Tab: Specify if links should open in new tabs.
- Attributes & Attribute Values: Define attributes and their values, ensuring consistency with the order of names and other lists.
Static Data

List of Attributes must be wrapped inside double quotes and separated by comma.
```
"Camera, RAM, Storage, Battery, Processor, NFC"
```
List of Attributes Values, must be wrapped inside double quotes and each value must be separated by comma.
```
"1.9 megapixels, 128 MB, 4/8/16 GB, 1400 mA, S5L8900, No",
"1.9 megapixels, 128 MB, 8/16 GB, 1150 mA, S5L8900, No",
"3.1 megapixels, 256 MB, 8/16/32 GB, 1219 mA, S5L8920, No",
"8.0 megapixels, 512 MB, 8/16/32/64 GB, 1432 mA, S5L8940 A5, No",
"8.0 megapixels, 1 GB, 16/32/64 GB, 1434 mA, S5L8950 A6, No",
"8.0 megapixels, 1 GB, 16/32/64 GB, 1508 mA, S5L8950 A6, Yes",
"8.0 megapixels, 1 GB, 16/32/64 GB, 1508 mA, S5L8960 A7, Yes",
"8.0 megapixels, 1 GB, 16/64/128 GB, 1809 mA, T7000 A8, Yes"
```
Optionally, you can choose a different order for your attributes. They need to match the exact same names provided in the Attributes field, separated by comma.
```
Storage,
Processor,
RAM, 
Camera, 
Battery,  
NFC"
```
Dynamic Data

Each Orchestra - Receive Data item list, must be formatted as :formatted as JSON-safe.

Optionally, you can choose a different order for your attributes, in case the order from Repeater Group does not suits your needs. They need to match the exact same names provided in the Attributes field, separated by comma.
Important! It's crucial to ensure that all lists maintain the same order to keep them synchronized.
Customize Colors: Tailor the appearance of your comparison table with our color customization fields:
- Table Colors: Main background, sidebar, border, and highlight colors.
- Buttons Colors: Text, default, hover, and disabled button colors.
- Functional Colors: Colors for checkmarks and error messages.