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

Solved
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.

0 Likes
c10s
Shopify Partner
41 7 6

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

0 Likes
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.

0 Likes
c10s
Shopify Partner
41 7 6

 

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.

 

0 Likes
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

0 Likes
c10s
Shopify Partner
41 7 6

Can you post the code you're currently using?

0 Likes
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>
0 Likes
c10s
Shopify Partner
41 7 6

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.

0 Likes
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>

0 Likes
c10s
Shopify Partner
41 7 6

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