Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.
Solved

fetchWithProducts() not returning tags

Joe_Tacconelli
Shopify Partner
3 1 1

I am using the js-buy-sdk (https://shopify.github.io/js-buy-sdk/index.html) and the following code is not returning tags with the products.

 

client.collection.fetchWithProducts(collectionId).then((collection) => {
  // Do something with the collection  console.log(collection);  console.log(collection.products);
});

Is there something I need to add?

 

Thanks

Accepted Solution (1)

Joe_Tacconelli
Shopify Partner
3 1 1

This is an accepted solution.

I found the answer. It seems like you can't do that with fetchWithProducts(), but if you make a custom query you can. Here is the code I found

 

const query = client.graphQLClient.query((root) => {
   root.addConnection('products', {
      args: { first: 250, query: "collection_type:{{name of collection}}" }
   }, (Product) => {
Product.add('title'); Product.add('tags');// Add fields to be returned Product.addConnection('variants', { args: { first: 250 } }, (variants) => {
variants.add('product'); variants.add('title'); variants.add('price'); variants.add('sku'); }); });
}); client.graphQLClient.send(query).then(({ model, data }) => { console.log(model); });

Hope this helps anyone else.

View solution in original post

Replies 5 (5)

Joe_Tacconelli
Shopify Partner
3 1 1

This is an accepted solution.

I found the answer. It seems like you can't do that with fetchWithProducts(), but if you make a custom query you can. Here is the code I found

 

const query = client.graphQLClient.query((root) => {
   root.addConnection('products', {
      args: { first: 250, query: "collection_type:{{name of collection}}" }
   }, (Product) => {
Product.add('title'); Product.add('tags');// Add fields to be returned Product.addConnection('variants', { args: { first: 250 } }, (variants) => {
variants.add('product'); variants.add('title'); variants.add('price'); variants.add('sku'); }); });
}); client.graphQLClient.send(query).then(({ model, data }) => { console.log(model); });

Hope this helps anyone else.

calvchum
Visitor
1 0 0

Helpful answer but frustrating that there isn't a way to do it with fetchAll(). looks like I'll have to refactor my code to graphQL (shopify are pretty much forcing this to happen)

WebEnvy
Tourist
6 0 0

As an FYI you have to do the same for metafields (one you have Whitelisted them)
https://help.shopify.com/en/api/guides/metafields/storefront-api-metafields#expose-metafields-to-the...

 
 product.addConnection('metafields', {args: {first: 20}}, (metafield) => {
            metafield.add('namespace')
            metafield.add('key')
            metafield.add('value')
          });
JAM-Team
Tourist
4 0 2

Ehy @Joe_Tacconelli well done about the solution but can you please be more precise about:

query: "collection_type:{{name of collection}}"


 With name I guess you mean the slug. Filtering by category-slug for us is really important because doing so we avoid fetch all products.
Btw I can't implement your example as-is.

Supposing we have a cat. slug best-products how should I implement it?
Something like query: "collection_type:{{best-products}}"  or query: "collection_type: best-products"

Without query prop. is working fine of course.
Thanks!

Spencer_Snyder
Shopify Partner
2 0 1

I created a package here that is just a fork of the original SDK with tags on products by default. Everything else is exactly the same. 

No need to do all the other crap. Just install this. 

https://www.npmjs.com/package/shopify-buy-with-tags