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 | A key-value object that contains the controls for each active Attribute solution. Each key is the corresponding Attribute's key and each value is a FinsweetAttributeControls object. | | utils | Object | Contains utility functions for working with Attributes. |

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

The FinsweetAttributes.utils object

type FinsweetAttributesUtils = {
  /**
   * Fetches and parses an external page.
   * Stores the page response in an IndexedDB if the page belongs to the same site.
   *
   * @param source The URL of the page to fetch
   * @param options Optional configuration object
   * @returns Promise that resolves to the page's Document if successful, null otherwise
   */
  fetchPage: (
    source: string | URL,
    options?: {
      cache?: boolean; // Whether to cache fetched documents. Defaults to `true`
      cacheExternal?: boolean; // Whether to cache external documents using a stale-while-revalidate strategy
      cacheKey?: string; // Manual database name for the IndexedDB instance
      cacheVersion?: number; // Manual version for the IndexedDB instance
    }
  ) => Promise<Document | null> | null;

  /**
   * Attaches external stylesheets from a fetched page to the current document head.
   * Only attaches stylesheets hosted on the Webflow Assets CDN that aren't already present.
   *
   * @param page The Document object from which to extract stylesheets
   * @returns Promise that resolves when all stylesheets have been attached
   */
  attachExternalStylesheets: (page: Document) => Promise<void>;
};