Load more, loading a collection list without an attirbute

Attributes
,
1

Description

Load more is displaying a collection list without an attribute.

We have 2 collection lists on the banner at the top of the page, those do not have any attribute, but when you click on load more, the contents of the said collection list is displaying.

Any one knows a fix for this?

Site URL

Required: Please provide a staging/production URL where we can see the issue

Steps to Reproduce

  1. Click the Load More Button
    …

Expected Behavior

It should display item 10 onwards, though right now i only have item 10 since I was in the middle of adding content when I noticed the issue

Actual Behavior

it is displaying a different collection list instead

2

Hey @miko!

The issue here is that your news collection list is missing an instance identifier, while your banner already has fs-list-instance="sales" set. When multiple collection lists using Finsweet Attributes live on the same page, they can interfere with each other — so the Load More button ends up targeting the wrong list.

The fix is to give each list its own unique fs-list-instance attribute. Here’s how:

  1. Find the wrapper parent of your news collection list — the div that contains your Collection List (with fs-list-element="list" and fs-list-load="more") along with the Load More button.

  2. Add this attribute to that wrapper parent:

fs-list-instance="news"

Just make sure the name is different from “sales” — or any other instance on the page.

  1. Publish and test — the Load More button should now only load items from the news list.

One thing worth noting: the fs-list-instance attribute needs to go on the wrapper parent that contains all the elements of that instance (the list, pagination, filters, etc.), not directly on the Collection List element itself.

Let me know how it goes! :flexed_biceps: