What is Attributes?
Attributes is an open source JavaScript library of solutions for adding filters, sort, load & search options, CMS tabs & sliders —and more— to Webflow using simple HTML attributes.
Getting Started
Please follow the documentation at finsweet.com/attributes to learn how to use Attributes in your Webflow projects.
API Reference
Attributes will inject a global window.FinsweetAttributes
object into your project that contains some methods to interact with the library.
To ensure that the library is loaded before you try to access the window.FinsweetAttributes
object, you can use the following instantiation code:
window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push([
'ATTRIBUTE_KEY', // 'list', 'copyclip', 'modal', etc.
(result) => {
// Your code goes here.
},
]);
The result object will contain the API of the loaded attribute solution. Check the README.md
file of each attribute solution for more information on the API.
The FinsweetAttributes
object
Properties
Property | Type | Description |
---|---|---|
process |
Set |
Contains the currently active Attribute solutions. |
modules |
Object |
Contains the controls for the active Attribute solutions (FinsweetAttributeControls). |
Methods
Method | Description | Arguments |
---|---|---|
push([key, callback]) |
Run a callback after an Attribute has loaded. | key (string) : The Attribute key.callback (function) : The callback function. |
load(key) |
Dynamically load an Attribute solution. | key (string) : The Attribute key. |
destroy() |
Destroys the instance and all Attribute solutions. |
The FinsweetAttributeControls
object
Properties
Property | Type | Description |
---|---|---|
version |
string |
The version of the Attribute. |
loading |
Promise |
A promise that resolves once the Attribute has loaded and returns its API. |
Methods
Method | Description | Arguments |
---|---|---|
restart() |
Restarts the Attribute. In practice, this means that the Attribute will be destroyed and loaded again. | |
destroy() |
Destroys the Attribute. |