Get All Products in a Collection via AJAX

collection.products-json.liquid

{% layout none %}

{% paginate collection.products by 50 %}

{ 
  "collection": {{ collection | json }},
  "productsCount": {{ collection.all_products_count }},
  "products": [
    {%- for product in collection.products -%}
      {%- include 'product_json' with product -%}
      {%- unless forloop.last -%},{%- endunless -%}
    {%- endfor -%}
  ]
}
{% endpaginate %}

getAllProducts.js

const collectionHandle = 'all';

((theme, $) => {
  $(() => {
    
      /* 
        We can expect a response object with: 
        * productsCount - count of products in this collection
        * products - array of product objects, limited by pagination (50 per page)
        * collection - data relating to the collection.
      */

      // This function gets a page of products from Shopify, then checks if there are more. If there are, it generates multiple AJAX requests for the next page. If not, it returns all products that it's retrieved so far.
    
      const fetchProducts = () => {
        
        // call Shopify for first page of Products.

        return $.get(`/collections/${collectionHandle}?view=products-json`)
        .then(response => {
            const requests = [];

            requests.push(response);
            const collection = JSON.parse(response);
            const totalProducts = collection.productsCount;

            const totalPages = Math.ceil(totalProducts / 50);
            if (totalPages === 1) {
              // If there's just one page, we needn't worry.
            } else {
              // If there are more, then we start building an array of promises from AJAX requests that will resolve to an array of responses.
              console.log(`total Pages: ${totalPages}`)
              for (let pageNumber = 2; pageNumber <= totalPages; pageNumber++) {
                requests.push($.get(`/collections/${collectionHandle}?view=products-json&page=${pageNumber}`));
              }
            }

          return Promise.all(requests)
        })
      };
      
      // execute the fetching function and process the results into a lookup directory
      fetchProducts().then(allRequestResponses => {
        
        // we expect an array of responses from our AJAX request.
        
        // Parse them into objects
        const collectionObjects = allRequestResponses.map(JSON.parse);
        
        // Concatenate all the products arrays into one large array of products
        const allProducts = collectionObjects.reduce(
            (all, collection) => all.concat(collection.products),[]
          );

        // Using the compiled products array, create a lookup directory of all Products for which we need data

        theme.productLibrary = allProducts;
      });
  });
})(window.theme = window.theme || {}, window.jQuery);