Infinite Scrolling Blog Template | Shopify Blog Posts

Explore our latest blog posts with infinite scrolling. Stay updated with our articles on various topics. Discover more with each scroll.

<div class="Container">
  {% comment %} You can make per page dynamic {% endcomment %}
  {%- assign articles_per_page = 20 -%}

    {%- paginate blog.articles by articles_per_page -%}
    {% assign is_first_article_featured = false %}

    {%- if section.settings.show_featured_article and current_tags == blank and blog.articles.first.image -%}
      {%- assign is_first_article_featured = true -%}
    {%- endif -%}

    <div class="press-list">
      <div class="Grid" id="AjaxinateLoop">
        {%- for article in blog.articles -%}
          {% for tag in article.tags %}
            {% if tag contains 'view_full' %}
              {%- assign class = 'Grid__Cell' -%}
            {% elsif tag contains 'view_half' %}
              {%- assign class = 'Grid__Cell 1/2--tablet-and-up' -%}
            {% endif %}
          {% endfor %}
          <div class="cv__coll_product_main Grid__Cell {{class}}">
            <article class="ArticleItem">
              {%- if article.image != blank -%}
              {%- include 'image-size', sizes: '200,400,600,700,800,900,1000,1200', image: article.image -%}
              {%- assign image_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

              <a class="press-imgWrp" href="{{ article.url }}">
                <img class="press-img Image--lazyLoad Image--fadeIn"
                     data-src="{{ image_url }}"
                     data-widths="[{{ supported_sizes }}]"
                     data-sizes="auto"
                     alt="{{ article.image.alt | escape }}">
                <span class="Image__Loader"></span>
                <noscript>
                  <img class="press-img" src="{{ article.image | img_url: 'original' }}" alt="{{ article.image.alt | escape }}">
                </noscript>
              </a>
              {%- endif -%}

              <div class="press-cont">
                <h2 class="press-t"><a href="{{ article.url }}">{{ article.title }}</a></h2>
              </div>
            </article>
          </div>
        {%- endfor -%}
      </div>
    </div>
    <div id="AjaxinatePagination">
      <div class="cv_ajax_inner">
        {% if paginate.next %}
        <a href="{{ paginate.next.url }}"><span class="cv__Image__Loader"></span><span class="cv__loading_text">Loading</span></a>
        {% endif %}
      </div>
    </div>
    {%- endpaginate -%}
  </div>
</div>

<script>
  // Infinite scrolling JavaScript code here
let currentPage = 2;
let moreArticlesAvailable = true;
let isFetching = false;

const container = document.querySelector('#AjaxinateLoop');
const loadingElement = document.getElementById('AjaxinatePagination');
const observer = new IntersectionObserver(
  async (entries) => {
    if (!moreArticlesAvailable || isFetching) {
      return;
    }

    if (entries[0].isIntersecting) {
      isFetching = true;
      const url = '{{ paginate.next.url }}' + '?page=' + currentPage;

      try {
        const response = await fetch(url);
        const data = await response.text();

        const parser = new DOMParser();
        const doc = parser.parseFromString(data, 'text/html');
        const newArticles = doc.querySelectorAll('.press-list .Grid__Cell');

        if (newArticles.length === 0) {
          moreArticlesAvailable = false;
          const noMoreAvailableMessage = document.createElement('div');
          noMoreAvailableMessage.textContent = 'No more available';
          container.appendChild(noMoreAvailableMessage);

          // Hide the loading element when all data is loaded
          loadingElement.style.display = 'none';
        } else {
          const fragment = document.createDocumentFragment();
          newArticles.forEach(article => {
            fragment.appendChild(article);
          });

          container.appendChild(fragment);
          currentPage++;
        }
      } catch (error) {
        console.error('Error loading more articles:', error);
      } finally {
        isFetching = false;
      }
    }
  },
  { threshold: 0.1 }
);

observer.observe(loadingElement);

</script>