Prev Button HTML element Not Rendering

Attributes
1

Hi Everyone,

I am facing quite a dilemma with this project and am hoping for any bit of guidance. For nearly two years now, we have been experiencing strange behavior when we try to add filter and load more to our collection list.

For some reason, the previous button doesn’t even render on the page. If you inspect the page, there isn’t even a previous HTML element that you can force CSS to be visible. This bug has been persistent for Attributes V1 and V2.

As such, we’ve had to look for alternatives.

However, at this point, we really want to use the Finsweet Filters because we love using it.

Read Only

2

Hi @lovebrian649

The setup seems :100: correct

The attributes fs-list-element="list" & fs-list-load="pagination" are correctly added to the CollectionList

Paginate Items is enabled

The previous button in your current setup works, which I presume is JB powered

Could you provide a link to a page where it fails for inspection & troubleshooting

Also hopefully this warning highlighted in the docs has not tripped you up

image
image1908×882 40 KB

3

Hi @jesse.muiruri

I appreciate you looking at this…you are a lifesaver. Haha, we’ve been pulling our hair out over here trying to figure this out

4

No worries @lovebrian649

The team is looking into this

5

Hi @lovebrian649

The team looked into this & apparently the issue is caused by this marquee script:

<script async src="https://cdn.jsdelivr.net/gh/francesco-castronuovo/infinite-marquee@1.4.0/script.js"></script>

Because it duplicates a collection on the page and makes Attributes loose reference to the right collection.

Possible fixes are:

  1. Not use that marquee script.
  2. Remove the marquee script from the page settings and load it only after Attributes has initialized using the JS API:
window.FinsweetAttributes = window.FinsweetAttributes || [];
window.FinsweetAttributes.push([
  'list',
  async (listInstances) => {
    await Promise.all(listInstances.map(async (instance) => instance.loadingPaginationElements));

    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/gh/francesco-castronuovo/infinite-marquee@1.4.0/script.js';
    script.async = true;
    
    document.head.appendChild(script);
  },
]);
6

Amazing!! Thank you so much @jesse.muiruri

You are a lifesaver…cannot thank you enough

7

Perfect! Kudos to the team!