Skip to content

Instantly share code, notes, and snippets.

@bashunaimiroy
Created March 27, 2020 17:46
Show Gist options
  • Save bashunaimiroy/9b4dcd3e5fa3237890cd30ff47078c99 to your computer and use it in GitHub Desktop.
Save bashunaimiroy/9b4dcd3e5fa3237890cd30ff47078c99 to your computer and use it in GitHub Desktop.
Get All Products in a Collection via AJAX
{% 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 %}
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment