Add better handling for out-of-stock items

[lightstrike]

I hit this error when trying to add a SM Unisex Dark Deploy Tee:

Maybe it's out of stock?

[coreyward]

Hey @lightstrike, I suspect you're right about it being out of stock. When I pull up the site the variant you selected isn't even an option:

[jlengstorf]

@lightstrike Yeah, it looks like @coreyward is right. We've got an order in to get things back into stock, so sit tight. We're also about to start working on #123 to clean up the UX on the store, which should address this and other annoying bugs we've spotted since it first launched.

[chiumax]

It works for me, is this still an issue. Is the fix supposed to be removing the ability to select these items or the fact that the sidebar still charges for these items.

[jlengstorf]

@dumblole Ideally, the UI of the store would show items as disabled rather than letting you get all the way to checkout before telling you it's sold out. Shopify returns items with "variants" (the sizes, etc.) that each have an inventory count attached, so we need to check if the variant has >=1 in inventory, and disable the option if not.

[chiumax]

Alright @jlengstorf thanks for clearing it up, I'll take a look when I come home from school later today. I'd appreciate a couple of pointers if it wouldn't bother you too much.

[jlengstorf]

@dumblole Of course!

A few key pieces of code:

The product details are loaded here:

store.gatsbyjs.org/src/components/Store/ProductListings.js

Lines 29 to 33 in df6969a

	variants {
	shopifyId
	title
	price
	}

There’s an availableForSale field that will tell you whether or not each variant is in stock. Add that to the query. (Try it out in GraphiQL while running gatsby develop to see it working.)

Products with multiple variants (e.g. sizes) are set up here:

store.gatsbyjs.org/src/components/ProductPreview/AddToCart.js

Lines 122 to 126 in df6969a

	{variants.map(variant => (
	<option value={variant.shopifyId} key={variant.shopifyId}>
	{variant.title}
	</option>
	))}

We need to add a check for whether or not that option is available for sale, and disable it if not.

Finally, for products with one variant (i.e. stickers and socks) we need to disable the whole product, probably by disabling the "add to cart" button and changing the text to "sold out". This will require the most refactoring, but I believe it's all contained in AddToCart.

Let me know if you need any additional pointers!

[chiumax]

@jlengstorf Thanks for the opportunity for contributing. Thanks for the really really helpful pointers - I don't think I would've figured out the code. Even though I added like 3 lines of code, I have learned a lot. Nevertheless, there's a lot I still have to learn.

[AlexanderProd]

How do you currently handle updating the site when something is bought and the Shopify inventory changes? I couldn't find any dynamic availability checking of the items so I'm assuming you're rebuilding and redeploying the site everytime a purchase happens to keep the inventory up to date? @jlengstorf

[jlengstorf]

@AlexanderProd You're correct. Shopify has webhooks support, so we use that to trigger a Netlify rebuild whenever inventory changes.

[abohannon]

@jlengstorf does triggering a build every inventory change cause you to blow through your build minutes in Netlify? I imagine a busy store, even with incremental builds, would exceed the quota pretty quickly?

[jlengstorf]

@abohannon it definitely could, yeah. a way to handle that without rebuilding every time is a client-side inventory check