Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Unable to check variant inventory quantity using store front api by javascript SDK in shopify

Solved

Unable to check variant inventory quantity using store front api by javascript SDK in shopify

Suneel
Tourist
14 0 1

I want to check variant inventory quantity using store front api by javascript SDK in shopify.

But in this sdk there is no api for check variant inventory quanity.

I have use product fetch api

// Fetch a single product by ID

const productId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=';

client.product.fetch(productId).then((product) => {

// Do something with the product

console.log(product);

});

But using this api I get only product available or not status.

So please help me how to check variant inventory quantity.

Accepted Solution (1)
c10s
Shopify Partner
67 12 27

This is an accepted solution.

Here's a working version: https://codesandbox.io/s/sharp-antonelli-4hzkc?file=/src/index.js

I used v2.11.0 but I believe it should work the same on v2.1.0.

console output is:

Moringa Tablet Default Title 200
Shatavari Tablet Default Title 200
Karela Tablets Default Title 200
Ginger Tablet Default Title 200
Trifala Tablet Default Title 200
Wheat Grass Tablet Default Title 200
Neem Tablet Default Title 200
Ashwagandha Tablet Default Title 200
Herbal Hair Oil Default Title 200
Mahanarayan Oil Default Title 200

View solution in original post

Replies 10 (10)

c10s
Shopify Partner
67 12 27

I believe you'll need to expand the SDK to get it to return the quantityAvailable field on the variant.

Suneel
Tourist
14 0 1

I have already checked with Expanding the SDK but not getting variant quantity so please give some example how to do it. how to get variant inventory quantity using store front api by javascript SDK.

c10s
Shopify Partner
67 12 27

 

const productsQuery = client.graphQLClient.query((root) => {
  root.addConnection('products', {args: {first: 10}}, (product) => {
    product.add('title')
    product.addConnection('variants', {args: {first: 10}}, (variant) => {
      variant.add('quantityAvailable')
    })
  })
})

client.graphQLClient.send(productsQuery).then(({model, data}) => {
  model.products.forEach((product) => {
    product.variants.forEach((variant) => {
      // Inventory available for the variant
      console.log(variant.quantityAvailable)
    })
  })
})

Your access token also needs unauthenticated_read_product_inventory permissions.

 

Suneel
Tourist
14 0 1

I have given that permission unauthenticated_read_product_inventory to access token.

I have used you given code but I get error "No field of name "quantityAvailable" found on type "ProductVariant" in schema" please check this error.

I am not understand what is this why I face this error. please see this screenshot: https://nimb.ws/pt8SMg

and please explain one more thing how to check the inventory of specific variant id?

screenshot-localhost-2021.06.15-18_20_28.png

c10s
Shopify Partner
67 12 27

Can you post the code you're currently using?

Suneel
Tourist
14 0 1

I am testing on the development store and it is the code. please check

First I used javascript SDK file then add code. 

<script src="https://sdks.shopifycdn.com/js-buy-sdk/v2/latest/index.umd.min.js"></script>

<script type="text/javascript">

const client = ShopifyBuy.buildClient({
      domain: 'sr-test-demo1.myshopify.com',
      storefrontAccessToken: '428097587d43b5c47be2e3da41d16093'
    });
    
    const productsQuery = client.graphQLClient.query((root) => {
  root.addConnection('products', {args: {first: 10}}, (product) => {
    product.add('title')
    product.addConnection('variants', {args: {first: 10}}, (variant) => {
      variant.add('quantityAvailable')
    })
  })
});
 
client.graphQLClient.send(productsQuery).then(({model, data}) => {
  model.products.forEach((product) => {
    product.variants.forEach((variant) => {
      // Inventory available for the variant
      console.log(variant.quantityAvailable)
    })
  })
});
</script>
c10s
Shopify Partner
67 12 27

Make sure you use the unoptimized bundle: https://sdks.shopifycdn.com/js-buy-sdk/2.0.1/index.unoptimized.umd.min.js

Showing 200 units available for each variant.

Suneel
Tourist
14 0 1

I have tried to use given javascript SDK link but there showing same error "No field of name "quantityAvailable" found on type "ProductVariant" in schema"

I have used this 

<script src="https://sdks.shopifycdn.com/js-buy-sdk/2.0.1/index.unoptimized.umd.min.js"></script>

c10s
Shopify Partner
67 12 27

This is an accepted solution.

Here's a working version: https://codesandbox.io/s/sharp-antonelli-4hzkc?file=/src/index.js

I used v2.11.0 but I believe it should work the same on v2.1.0.

console output is:

Moringa Tablet Default Title 200
Shatavari Tablet Default Title 200
Karela Tablets Default Title 200
Ginger Tablet Default Title 200
Trifala Tablet Default Title 200
Wheat Grass Tablet Default Title 200
Neem Tablet Default Title 200
Ashwagandha Tablet Default Title 200
Herbal Hair Oil Default Title 200
Mahanarayan Oil Default Title 200
Suneel
Tourist
14 0 1

Thanks

using 2.11.0 it is working fine.