CMS Mirror Input on Collection List Items

Attributes
1

Is there a way to make CMS Mirror Input work using items populated by a collection list?

Screenshot 2025-01-04 at 1.48.56 PM
Screenshot 2025-01-04 at 1.48.56 PM1864×1590 189 KB

1 Like
2

Hi @nate.chiles!

Could you send me the Webflow Read-Only link? I can try to create a script to achieve that.

3

Hey @Support-Pedro

Sorry, I never got a notification for this.

Here’s the read-only:

https://preview.webflow.com/preview/prowood-staging?utm_medium=preview_link&utm_source=designer&utm_content=prowood-staging&preview=50294933e50fa3f3e75f0f032de2148f&pageId=67743b050a0d5fe85bbaf474&locale=en&workflow=preview

Thanks!

4

Hi @nate.chiles!

Mirror click doesn’t work both ways, the trigger can change the target but the target can’t change the trigger, but we can try to make a solution.

Would it be possible to change the top list back to a CMS list, as it was before? This would help ensure we’re working with the same list and minimize potential differences that could cause bugs.

For example, if an item in the first list or its order is modified, the solution I have in mind might not work as expected.

Whenever you’re able to make those changes, just let me know, and I’ll get started on the solution.

5

Thank you for taking a look @support-pedro!

The top collection items are only supposed to trigger the collection items in the sidebar. No need for the target to ever change the trigger. The sidebar collection list can be hidden. I was just making it visible for the demonstration. Sorry for the confusion.

I can get it to work by making static triggers to the collection list in the sidebar, but for maintenance, I would like to use a collection list in both places.

The end goal is just to have those filters work from a different place on the page, so I’m open to other solutions if mirror click doesn’t make sense here.

Thanks again for your time.

6

Hey @nate.chiles!

Here is how I made it work setting the attributes with code.
You’ll need to remove the existing Mirror Input Values attributes from your setup. The code will handle them.

Then replace the previous script from your <head> tag with this one.

<!-- [Attributes by Finsweet] Mirror input values -->
<script defer fs-attributes-preventload='true'
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-mirrorinput@1/mirrorinput.js"></script>

And add this script to your </body> tag.

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

      const [filterInstance] = filterInstances;

      const triggerForm = document.querySelector('.filters2_list.cc-featured-filter')
      const targetForm = document.querySelector('.filters2_list.is-checkbox2 ')

      const triggers = triggerForm.querySelectorAll('[type="radio"]');
      const targets = targetForm.querySelectorAll('[type="radio"]');

      triggers.forEach((trigger, i) => {
        if (i === 0) {
          trigger.setAttribute('fs-mirrorinput-element', 'trigger');
          targets[i].setAttribute('fs-mirrorinput-element', 'target');
        } else {
          trigger.setAttribute('fs-mirrorinput-element', `trigger-${i + 1}`);
          targets[i].setAttribute('fs-mirrorinput-element', `target-${i + 1}`);
        }
      });
      window.fsAttributes.mirrorinput.init();
    },
  ]);
</script>

Please let us know if it works for you or if you need to make any changes! :muscle:

7

@Support-Pedro This works. Thank you!