Load more

Cursor pagination for a collection grid: a <load-more> button fetches the next page and appends it. One attribute switches it to infinite scroll.

<storesynk-collection handle="example-collection" page-size="12">

  <p>Showing <show-result-count></show-result-count> products</p>

  <product-list class="grid">
    <storesynk-product class="card">
      <product-link>
        <a>
          <show-image main class="card-img"><img alt="" /></show-image>
          <span class="card-title"><show-title></show-title></span>
        </a>
      </product-link>
      <show-price class="card-price"></show-price>
    </storesynk-product>
  </product-list>

  <!-- Fetches the next page; hides itself via [ss-empty] CSS when there are no more pages. -->
  <load-more>Load more</load-more>

</storesynk-collection>

• On load-more, <product-list> appends only the new tail. Cards already on screen are not re-rendered, so scroll position stays put. Changing a filter or the sort is a full re-render.
• Page state mirrors into the URL (?page=2) along with filters and sort. <show-result-count> grows as pages come in.
• For infinite scroll, drop <load-more> and add infinite to <storesynk-collection>: the next page auto-loads as the shopper nears the bottom.

Options

<load-more> takes no attributes; the knobs live on <storesynk-collection>:

Attribute (on storesynk-collection)	Type / default	Meaning
page-size	number = 24	Products fetched per page.
infinite	boolean	Auto-load the next page near the bottom instead of a load-more click.

Styling

load-more { display: block; margin: 24px auto 0; padding: 12px 24px; cursor: pointer; }
load-more[ss-empty]   { display: none; }  /* no more pages */
load-more[ss-loading] { opacity: .5; }
product-list[ss-loading] { opacity: .5; }

<load-more> doesn’t remove itself when the collection is exhausted. It sets [ss-empty], and your CSS hides it.

Gotchas

• Clicking does nothing when <load-more> is outside <storesynk-collection> (SSK-110). See collections troubleshooting.
• <storesynk-list> has no pagination. For load-more, build the grid with <storesynk-collection>.
• Pick one pattern: with infinite set you usually omit the button.

Related

• Collections tag reference
• Filtered collection
• Sort and price range