Adding classes to freshly loaded items after clicking pagination "Next"

Hi everyone!

@SunbearStudio @cyberdave @sam-g

Would anyone be able to offer some advice on this issue, pretty please? I’m having difficulty with interacting with newly loaded elements from a paginated CMS list.

I have a products component which is basically a dynamic list with dynamic items containing products. I’ve built a custom view change whereby the user can view the products in either a Grid or List view. I am using Finsweet’s CMS Filter and CMS Load attributes (load under) to work out the filtering and pagination stuff, but whenever I load new items in List view, they come in still stuck in their default “grid” view.

I think what needs to happen is that I need to somehow add a class (the same “is-list-view” class that gets dynamically added to a whole host of other classes when the user clicks on the List View button) to the dynamic item as well as to specific classes inside of it, as soon as the new products are loaded in. I just cannot get it right somehow.

At the moment the code isn’t executing the “if” block… it simply returns, which must mean it’s not even finding the “is-list-view” class on the .w-dyn-list element, even though it is there in the Inspector (it’s added after you click the List View button on the live site).

Here’s my latest code:

$(document).ready(function () {
 
  // Click event handler for the "Load More" button
  $(".button_load-more").on("click", function () {
    console.log("Button clicked.");
    
    // Find the dynamic list
    const productsList = $(this).closest("w-dyn-list");

    // Check if any of the list's classes contain 'is-list-view'
    if (productsList.hasClass("is-list-view")) {
      console.log("Common container found! Class list:", productsList[0].classList);
      
      // Remove 'is-grid-view' from newly loaded items
      $(".products_list-item, .products-list-item_padding, .products-list-item_content, .products-list-item_lifestyle-image-wrapper, .product-image_lifestyle, .products-list-item_info-wrapper, .products-list-item_portrait-info-wrapper, .products-list-item_title, .products-list-item_portrait-lifestyle-image-wrapper, .product-image_detail, .product-image_portrait-detail, .products-list-item-portrait_range-logo-wrapper").removeClass("is-grid-view");

      // Add 'is-list-view' to newly loaded items
      $(".products_list-item, .products-list-item_padding, .products-list-item_content, .products-list-item_lifestyle-image-wrapper, .product-image_lifestyle, .products-list-item_info-wrapper, .products-list-item_portrait-info-wrapper, .products-list-item_title, .products-list-item_portrait-lifestyle-image-wrapper, .product-image_detail, .product-image_portrait-detail, .products-list-item-portrait_range-logo-wrapper").addClass("is-list-view");
    
    // If nothing done, log a message to the console
    } else console.log("No classes added.");
    return;
  });
});

Any insights into this would be awesome. I am at wit’s end with this one.

Thanks in advance,

Caleb


Here is my site Read-Only: Webflow - IQP)