When combining the FinSweet attributes "CMS Filter" and "CMS Load" in Webflow, you may come across a situation where the items after the "Load More" button are appearing twice. This issue can usually be attributed to how you've set up the filtering and loading interactions.
To troubleshoot this issue, here are a few things to consider:
1. Interaction Order: Ensure that the order of your interactions is set correctly. The "CMS Filter" interaction should be triggered before the "CMS Load" interaction. This way, the filter interaction will refine the results, and only then will the load interaction kick in to display the filtered items.
2. Element Targeting: Verify that you're targeting the correct elements for both interactions. Make sure that the "CMS Filter" interaction is targeting the wrapper or container element that holds the items to be filtered. Similarly, ensure that the "CMS Load" interaction is targeting the same wrapper or container element to load the additional items.
3. Unique Identifiers: Check if each CMS item has a unique identifier. If multiple items have the same identifier, it can cause duplication when the load interaction appends the new items to the existing ones. Ensure that each CMS item has a unique identifier, such as a unique CMS field value or a unique class name applied through conditional visibility.
4. Interaction Triggers: Review the triggers for both interactions. Ensure that the filter interaction is set to trigger when filter conditions are met (e.g., when a specific button is clicked or the filter criteria are selected). Similarly, ensure that the load interaction is triggered when the "Load More" button is clicked or when reaching the end of the item list.
5. Interaction Settings: Double-check the settings of both interactions. Confirm that the filter interaction is set to hide the items that don't meet the filter conditions, and the load interaction is configured to append additional items from the CMS to the existing list.
By reviewing these aspects of your interactions, you should be able to identify any potential issues causing the duplicated items after using the "CMS Filter" and "CMS Load" attributes in Webflow.