Hey there, funny enough, i have found a way.
Probably about time I help someone else out rather than receiving help. It uses AJAX.
This setup was an attempt to bypass the 1000 limit make swatches. It worked but a little slow and I don't care enough so ended up trashing it. But i'm sure it could be modified to do whatever you want. Pulling this out of my trash bin lol.
Heres how you set it up
Create two new files in your templates folder (You may want both)
collection.full-count.liquid
collection.json.liquid
put this code in each..
collection.full-count.liquid
{% layout none %}
{{ collection.all_products_count }}
collection.json.liquid
{% layout none %}
{
"title": {{ collection.title | json }},
"description": {{ collection.description | json }},
"total_products": {{ collection.products_count | json }},
"products": [
{% paginate collection.products by 250 %}
{% for product in collection.products %}
{
"id": {{ product.id | json }},
"title": {{ product.title | json }},
"handle": {{ product.handle | json }},
"url": {{ product.url | json }},
"featured_image": {{ product.featured_image | img_url: '300x300' | json }},
"price": {{ product.price | money | json }}
}{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endpaginate %}
]
}
Now the javascript
async function fetchAllCollectionProducts(collectionUrl) {
let allProducts = [];
let currentPage = 1;
let collectionData = null;
const fetchPage = async (page) => {
const url = `${collectionUrl}?view=json&page=${page}`;
console.log(`Fetching page ${page}: ${url}`);
const response = await fetch(url);
if (!response.ok) throw new Error('Network response was not ok');
const data = await response.json();
console.log(`Page ${page} data:`, data);
return data;
};
const firstPageData = await fetchPage(1);
collectionData = {
title: firstPageData.title,
description: firstPageData.description,
total_products: firstPageData.total_products
};
allProducts = allProducts.concat(firstPageData.products);
const productsPerPage = firstPageData.products.length;
const totalPages = Math.ceil(firstPageData.total_products / productsPerPage);
for (let page = 2; page <= totalPages; page++) {
const data = await fetchPage(page);
allProducts = allProducts.concat(data.products);
console.log(`Fetched page ${page} of ${totalPages}, total products so far: ${allProducts.length}`);
}
return {
...collectionData,
products: allProducts
};
}
// Initialize collection fetcher when the DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
const collectionUrl = '/collections/all';
console.log('Fetching collection:', collectionUrl);
fetchAllCollectionProducts(collectionUrl)
.then(data => {
console.log('All collection products:', data);
console.log('Total products fetched:', data.products.length);
})
.catch(error => console.error('Error fetching collection products:', error));
});
__
This is setup to loop through a collection i named 'all' which puts all products over 0 dollars in by default. Just modify this for your use case.
From memory you can go to two URL's inparticular to make sure the information is feeding through if your console logs come up with errors. Assuming you're still looping over collection 'all'
yoursite.com/collections/all?full-count
yoursite.com/collections/all?view=json
Full count should display the full number of the collection, and the json should show the information you're pulling.
