Get Products with AJAX call

Solved
Excursionist
45 2 2

Hi,

I hope this is the correct place for this topic.

I basically want to load my products with AJAX. What I'm doing is this:

function loadJSONcollection() {
	console.log("triggered");
	$.ajax({
		url:	"/collections/MyCollection?view=json",
		type:	'GET'
	})
	.done(function(data) {
		var productList = data;
		$(productList.products).each(function(index){
			console.log(this.title);
		});
	})
	.fail(function(data) {})
	.always(function(data) {});
}

This function is called in my template. However, I can't manage to loop through the data.

I made a collection.json.liquid to structure my data.

{% layout none %}
{% paginate collection.products by 50 %}
{
  "products": [{% for product in collection.products %}
	{
  	"available": {{ product.available }},
  	"title": "{{ product.title }}",
  	"vendor": "{{ product.vendor }}"
	}{% unless forloop.last %},{% endunless %}{% endfor %}
  ]
}
{% endpaginate %}

When I call console.log(data) in '.done'-section of my function, I get a clear list of all products ...

{
  "products": [
	{
  	"available": true,
  	"title": "blue shoe"
	},
	{
  	"available": true,
  	"title": "blue shirt"
	},
...

Thanks for your help :)

Cheers

0 Likes

Success.

Excursionist
45 2 2

What I did now is this:

{% layout none %}
{% paginate collection.products by 50 %}
{
  [{% for product in collection.products %}
	{
  	"available": {{ product.available }},
  	"title": "{{ product.title }}",
  	"vendor": "{{ product.vendor }}"
	}{% unless forloop.last %},{% endunless %}{% endfor %}
  ]
}
{% endpaginate %}

So basically just removed the 'product'-prefix and parsed my data output ...

function loadJSONcollection() {
	console.log("triggered");
	$.ajax({
		url:	"/collections/MyCollection?view=json",
		type:	'GET'
	})
	.done(function(data) {
		var product = $.parseJSON(data);
		$(product).each(function(index){
			console.log(this.title);
		});
	})
	.fail(function(data) {})
	.always(function(data) {});
}

Now it's looping like a charm

0 Likes
New Member
3 0 0

Hi Qnav

 

Can you please help me out on the below post? appreciate your input.

 

I want build a custom order generatino page where I can present user with different UI selection based on product variants. and add items to cart based on selection.

 

https://community.shopify.com/c/Shopify-Discussion/Personalised-Order-Form-based-on-Calendar-and-Var...

 

 

0 Likes
Explorer
72 3 9

Hi,

 

I am trying to get this to happen to products that are pulled by a snippet within my product template.

 

Is there a limitation with what can be got with ajax? would it be able to update the variant options and choices prices and images?

 

Do you have an example of what you did with this?

 

Any advice would be greatly appreciated.

Thanks

0 Likes