Loaders does not work on the Shopify Narrative theme

[gvisniuc]

Describe the bug
Hi there,
I have recently implemented the load more button on a Brooklyn theme and worked perfectly.

However when implemented on a new Narrative theme it fails to load the new objects (the request does succeed it's just the visual part not working).

I investigated a bit and seems to be the cardManager object in theme.js responsible for loading the new content.

I would really appreciate some assistance or guidance if possible.

The section responsible for rendering:

    <div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}" data-grid-style="{{ section.settings.grid_style }}">
      <div class="card-list__column{% if totalProducts == 1 %} card-list__column--center{% endif %} grid grid__item {{ gridClasses }}">
        <div id="ajaxinate-loop" >
        {% for product in collection.products %}
          {% include 'product-card', product: product, grid_style: section.settings.grid_style %}
        {% endfor %}
        </div>
      </div>
    </div>

To Reproduce
Steps to reproduce the behavior:

1. Create narrative theme
2. Add load more button and script
3. Click load more

Screenshots

Desktop (please complete the following information):

• OS: macOS Catalina
• Browser: Chrome
• Version 80

[cam]

Hey @gvisniuc. I'm 99% sure you'd just need to call whatever function is dynamically adding the content to each of the paginated items.

There's a callback option available for exactly that.

I'm a little hard pressed for time at the moment, but I'll try to get some of the more popular themes up in the demo store with some examples as soon as I can.

[cam]

The documentation should ideally have some more info on the callbacks too.

[gvisniuc]

Hi @cam Thank you for the reply.

I did eventually implement a callback logic, but indeed documentation on that from Shopify is non existent.

The issue is that even after triggering the callback function to reload the items in the cardManager object, the items are prepended instead of appending them.

Looking forward for a solution in the future when you have some time.

[chartalex]

Hey @gvisniuc !

I'm also stuck here :(

Have you found a solution for a callback function to trigger the CardManager?