Fluent Commerce Logo
Docs
Sign In

Using fc.filterPanel in fc.tabs.card

How-to Guide

Authors:

Henadz Budai, Randy Chan

Changed on:

6 May 2025

Key Points

  • a handy tip on how to use fc.filterPanel in fc.tabs.card

Steps

Step arrow right iconfc.filterPanel and fc.tabs.card structure

In a typical setup, the

`fc.filterPanel`
is placed above the
`fc.list`
so that OMX will relate the filter panel to the associated list:

No alt provided

In the

`fc.tabs.card`
, card tab is declared as an individual descendant, which means fc.panelPanel might not work well under
`fc.tabs.card`

No alt provided

Step arrow right iconUsing fc.page.section

To make

`fc.filterPanel`
work under tab, one trick is to add
`fc.page.section`
into each tab descendant.  Then, put fc.filterPanel and
`fc.list`
as descendants of
`fc.page.section`
:

No alt provided


The outcome:

No alt provided
Henadz Budai

Henadz Budai

Contributors:
Randy Chan