Inventory Count

[TaraOShea]

What's the best practice to monitor inventory stock when adding to cart? ie you have 2 gold rings in stock but the user adds 5 to the cart.

Where's best to capture this error? addItemById?

[tmharryfrancis]

If you use addVariant it will check the stock count of the item first, and only proceed if the user is adding <= items than are in stock.

See here - https://github.com/the-couch/slater/blob/master/packages/theme/src/scripts/lib/cart.js

[TaraOShea]

I've been trying addVariant but a inventory_quantity always returns undefined and i cant see it in the returned json anywhere - is this deprecated?

[tmharryfrancis]

No - I can still see it in the Shopify docs (https://shopify.dev/docs/themes/liquid/reference/objects/variant/#variant-inventory_quantity).

It is collected via this script on the product page

slater/packages/theme/src/snippets/product-head.liquid

Lines 36 to 41 in 43041f4

	<script class='js-product-json' type='text/template'>
	{
	"selectedOrFirstAvailableVariant": {{ current_variant.id | json }},
	"product": {{ product | json }}
	}
	</script>

Do you have this in your liquid file?

[TaraOShea]

Yep product-head is called in product.liquid, however in addVariant variant.inventory_quantity and variant.inventory_policy are undefined every-time.

This is what the variant in addVariant looks like:

available: true
barcode: ""
compare_at_price: 20000
featured_image: null
id: 37188633133207
inventory_management: "shopify"
name: "Ring - 2 / Silver"
option1: "2"
option2: "Silver"
option3: null
options: (2) ["2", "Silver"]
price: 30000
public_title: "2 / Silver"
requires_shipping: true
sku: ""
taxable: true
title: "2 / Silver"
weight: 0  

Have I missed something in setup maybe?

[tmharryfrancis]

Weird!

What do you get if you put {{ product.first_available_variant.inventory_quantity }} in product-head.liquid, does anything get returned?

[TaraOShea]

I get the product quantity! Wonder why it's not passing through??

[tmharryfrancis]

That's really weird.

I just had a look at one of my sites and I get this for the variant json:

{ "id": 307..., "title": "---", "option1": "---", "option2": null, "option3": null, "sku": "---", "requires_shipping": false, "taxable": false, "featured_image": null, "available": true, "name": "---", "public_title": "---", "options": [ "---" ], "price": 1500, "weight": 0, "compare_at_price": null, "inventory_quantity": -2, "inventory_management": null, "inventory_policy": "deny", "barcode": "", "requires_selling_plan": false, "selling_plan_allocations": [] }

But I have slightly changed the setup and am using {{ variant | json }}.

I am away from laptop so can't do anymore debugging but my next thought would be to maybe build your own json output with the values you require?

[TaraOShea]

So weird, I'm gonna keep trying to figure it out, could it be a permissions issue?

I'm able to get the current_variant.inventory_quantity property and pass it through but it doesn't update on product options update.

I tried using {{ variant | json }} in product-head and it returned undefined

[bradcerasani]

@TaraOShea did you find a workaround here?

I'm running into the same thing (undefined inventory_quantity and inventory_policy)

[bradcerasani]

Here's what I ended up going with if it helps anyone:

In product-head.liquid added the following to .js-product-json:

"variantQuantities": { {% for variant in product.variants %}"{{variant.id}}": {{variant.inventory_quantity | json}}{% if forloop.last == false %}, {% endif %} {% endfor %} }

Which should result in something like this:

"variantQuantities": { "37093018697868": 20,  "37093018730645": 0,  "37093018763420": 40,  "37093018796109": 20  }

Then in product.js:

const { selectedOrFirstAvailableVariant, product, variantQuantities } = json

product.variants = product.variants.map(variant => {
  return { ...variant, inventory_quantity: variantQuantities[variant.id] }
})

// now product variants have inventory_quantity as cart.js expects

In cart.js:

Removed variant.inventory_policy === 'deny' from numAvailable, as in my use case I never want to oversell unavailable products, and didn't want to bother investigating why inventory_policy is undefined in the product json.

[tomaszbujnowicz]

@bradcerasani Would it be possible that you could share product.js code with us? I am having some issues to have it working.

[bradcerasani]

@tomaszbujnowicz this part is unchanged from what slater bootstrapped:

let currentVariant = product.variants.filter(
  v => v.id === selectedOrFirstAvailableVariant
)[0]

form.addEventListener('submit', e => {
  e.preventDefault()
  currentVariant = product.variants.filter(
    v => v.id === parseInt(form.elements.id.value)
  )[0]

  addVariant(currentVariant, form.elements.quantity.value)
})

but previously when addVariant() (defined in cart.js) was passed currentVariant, it did not have property inventory_quantity, which is what the workaround above addresses.

[tomaszbujnowicz]

@bradcerasani Yes, it makes a lot of sense now. Thank you for a quick feedback, it helps a lot since I need exactly that functionality at this very moment ;)

[DoctorLogicProduct]

@bradcerasani I am still having an issue with this and am trying to get it to work. would it be possible to see exactly where you are editing the product js?

[bradcerasani]

@DoctorLogicProduct here's the diff in my project. variantQuantities is destructured from json (L8), then product.variants is mutated to include inventory_quantity (L10-12).

The block below (starting at L14-21) isn't necessary, but it disables the input and adds a class to variants that aren't available so I can differentiate them in the UI.

e.g.

[ActualKeith]

I looked at the json of an older store and it still outputs the compatible json. It turns out that inventory_quantity and inventory_policy have been deprecated in the json output on stores created after 12/5/2017 so worth noting that older stores will not experience this issue.

More info: Deprecation Notice