Dynamic CMS Select + Custom Form Select

[memetican]

I have an interesting challenge where a client needs a cascading master/detail filter. Choosing an item in one Custom Form Select will trigger a CMS Filter and also filter the choices in a second Custom Form Select.

Choosing the master item ( e.g. “country” ) will show all of the matching items in the filter result. Specifying the detail item ( e.g. “city” ) will further constrain that list.

I’ve temporary rebuilt some parts of FS attributes with a custom code version to short circuit some of the problems, so these are the remaining issues in order of importance;

RE-INITIALIZING FS FILTER
When “country” is selected, I rebuild “cities” in custom code. I then need to re-initialize FS filter so that the associated Custom Form Select will work to affect the filter. Right now it doesn’t.

I’ve tried

window.fsAttributes.cmsfilter.init();

However this doesn’t remedy the issue.

CLEARING SPECIFIC FILTER-ITEM SETTINGS

When a Country and a City are selected they show as two tag indicators. When the Country is changed, I need to remove the City one automatically, but keep the Country filtered.

RE-INITIALIZING A CUSTOM FORM SELECT

Ideally, I’d re-populate the SELECT that the Custom Form Select is based on, and then have FS Custom Form Select re-initialize the dropdown accordingly. This might also fix the FS filter binding? Unsure of the underlying design.

TRIGGERING AN FS-FILTER UPDATE

In various scenarios I need to set the filter and then trigger an update. I’m hoping there’s an API mechanism to do the update, rather than pushing events.

Thanks!

[Support-Luis]

Hey @memetican! Could you share some links to the project? There are some ways to achieve all this

[memetican]

Hi Luis it’s a client project, how can I send it to you directly?
The “Chat” link is not working from your popup bio-card.

[memetican]

On a related topic, I keep running into occasions where I need to modify the HTML with JS just before FS filter initializes. What would the approach be as a callback where I can run code just before FS Filter attempts to construct the filter from it?

[Support-Luis]

Hey @memetican! There are a couple of ways of achieving this.

We can call storeFiltersData() to rescan the form for any new Filters

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const [filterInstance] = filterInstances;

      // Modify the HTML with your code here

      // Store new filter data in the filter instance, useful when modifying the filter UI
      filterInstance.storeFiltersData();

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
      });
    },
  ]);
</script>

Or with the code below prevent the script from loading on the page until it is triggered by code

<!-- [Attributes by Finsweet] CMS Filter -->
<script
  defer
  fs-attributes-preventload="true"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"
></script>

<!-- Code on "before </body>" tag -->

<script>
  window.fsAttributes = window.fsAttributes || [];
  
  // Modify the HTML as needed before calling the init() function

  window.fsAttributes.cmsfilter.init();

  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      // Console log to check everything is correctly initiated
      console.log('cmsfilter Successfully loaded!');

      const [filterInstance] = filterInstances;

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
      });
    },
  ]);
</script>

[memetican]

Thanks Luis,

I have a working progressive filtering mechanism, but it’s a bit of a hack and has two remaining issues;

MASTER CHANGES NEED TO RESET DETAIL FILTER

Currently if the user selects Brand, then Model, we see both filter settings applied.

However if the Brand is changed, the Model filter is still applied, which results on zero filtered results.

How do I programmatically reset the Model filter selectively?

I am storing the filter instance ( there is only one ) on window, and I can reset all filters like so;

window.filterInstance.resetFilters()

But I do not see any API docs on how to reset a specific filter.

In the project link, I’ve temporarily hacked this in my clearModels func by finding the Model tag and clicking the close button to reset that filter in isolation.

RESETTING FS CUSTOM FORM SELECT

The second item is that the arrangement the client has is;

• A hidden Select element, populated with FS CMS Select, and bound to FS Filter
• An FS Custom Form Select construction which has that hidden select embedded

I’m assuming that the Select element is the center of the universe from a functional standpoint, so my progressive filtering UX code should focus on that.

I’ve replaced FS CMS Select with my own solution that repopulates the select when the Brand changes, and determines the Brand-specific Models list.

The FS Custom Form Select however isn’t aware of the change. How do I get the FS Custom Form Select to re-initialize from its Select list?

In the project link, I’ve temporarily hacked this by building a replacement for FS custom form select. I’d rather not hand this off to the client with that approach, they’re using a lot of FS attributes and it would be great to keep their site based on FS attr ( augmented with API code ) rather than replacing whole attributes to support the progressive filter.

[memetican]

Hey team, checking in, I can’t see any of the messages in my post- hoping that adding a reply might make them appear…

[Support-Luis]

Hey @memetican don’t worry I can see your messages. I will be tackling this today. I’ll get back t you when I have some results

[memetican]

@Support-Luis Hi Luis, checking in again- for some reason I cannot see any of our message thread.

[memetican]

test1

[studiopiraat]

Hi @memetican, try looking up your thread from the main forum page. Whenever I refresh a thread, all messages disappear too, for some reason. However, when I click on a thread from the main page, it shows the messages properly. Hope that helps!

[Support-Luis]

@memetican @studiopiraat Seems that some random params are being added to the URL, if you remove them and refresh the page, you will be able to see the whole thread.

I have let the team know about this and we will work on fixing it ASAP!

[memetican]

Hi Luis, checking in.

[memetican]

Hi @Support-Luis ,

I know you’ve been busy- our project is still stuck on these items.

[Support-Luis]

Hey @memetican! I’ve DM you on Slack, can you check please?