Pagination Load More (Adding an on click arhef attribute)

kevinjwiles
Tourist
8 0 1

Hey

I have a Shopify site that uses the onCLick attribute within collection pages, I am trying to add the additional HTML link attribute on this button. However as the page is using the “Load More” function adding href="{{ paginate.next.url }}" doesn’t work as when you’re on page to the load more link still shows page to in the HTML reference. What I need is a hybrid between pagination & +1 so it keeps referencing until there are no more pages in the sequence.

<results-pagination

  v-if="!state.empty"

  :current="current"

  inline-template

  :state="state"

  :total-pages="response.meta.totalPages"

  <div

    v-if="!state.empty && totalPages > 1"

    id="CollectionPagination"

    class="results__pagination vue js"

    :class="`is-active`"

  >

    <button

      v-if="current.page !== totalPages"

      class="button button--wide"

      :class="{ 'is-loading': state.loading }"

      :aria-busy="state.loading"

      @Click="changePage(current.page + 1)"

    >

      <span class="button__text">

        {{ 'collections.pagination.load_more' | t }}

      </span>

 

      <span v-html="renderLoader()"></span>

    </button>

  </div>

</results-pagination>

0 Likes