Using the data source filter editor

In this article, we'll go through the layout of the data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. filter editor as well as how to use it.

Access

There are a few places where you'll find the data source filter editor:

  1. Site builder - hover on a page folder, click the settings icon, expand the Data source section, then edit an existing data source or click + Add data source filter
  2. Dynamic pages - hover on a dynamic page rule, click the settings icon, expand the Data source section, then edit an existing data source or click + Add data source filter
  3. Templates - hover on a component group, click the settings icon, expand the Data source section, then edit an existing data source or click + Add data source filter
  4. Page builder - add a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. to your page that has a data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site., then click + Add data source filter

Layout

Once you've clicked the edit icon on the name of a page versionpage version - A page can have multiple versions and in different states within a page folder, such as draft, scheduled, live, and so on. (or clicked + Add data source filter , you'll see a screen similar to the below:

You can change the name of your data source filter. If you click Save without editing, it'll show all the data from that data source.

The filters that you can use will depend on the fields in the data source schema. There are no filters set in the above example, so we can only use the full data source. The one below has 1 filter we can add, which is the Movie ID:

See the developing a data source extension article and the Frontastic schemas article for more information.

Multiple data sources

By adding more Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. or data sourcesData sources - The data provided from an API to display products, content, or anything from an extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your site., you can show your users different products or content, all depending on what you configure within the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

For example, you could have 2 product slider components that have 2 different data source filters.

🚧

Data sources don't communicate with each other, so you could see the same things in both Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code.


Did this page help you?