Inventory status block

[eugenekasimov]

PR Summary:

This PR adds an Inventory block to the main-product section. The block allows you to display/hide an amount of items in stock. You can also set a threshold to display "In stock" or "Low stock" status. If stock is 0 then "Out of stock" is displayed. For unavailable variants nothing will be displayed.

Internal Figma

Why are these changes introduced?

Fixes #870

What approach did you take?

• I utilized the renderProductInfo () and setUnavailable functions to update the inventory stock upon variant selection or hide the block if the varian is not available or is sold out.
• I included the inventory in the [product form <noscript> wrapper] to ensure the inventory quantity is displayed when JS is disabled.
• I added .product--no-media .product__inventory as an additional declaration in the [section-main-product.css] to center the inventory block for products with no media/images.

Decision log

#	Decision	Alternatives	Rationale	Downsides
1	When the variant is set to continue selling we're showing In stock	We could show a different string like backorder	There are too many different scenario as for why a merchant might set their product to continue selling so we don't want to take a guess this way	Saying in stock can be odd as products with an inventory above 0 and lower than the threshold set in the editor setting will show as Low stock. Going from one to the other seem weird

Testing steps/scenarios

• When you test please make sure you choose a product where at least one variant has a few items in stock, one variant has stock 0 and one of the variants is not available. A good example will be Louise Slide Sandal.
• Test at least one product with variant that has 0 in stock but with check-box on Continue selling when out of stock in Admin. A good example will be Louise Slide Sandal. Size 36 and 41. It's supposed to show In stock.
• When you test, switch randomly variants to make sure that Inventory status changes icon status/quantity or disappears if there is no stock or the variant is not available. Don't forget to test with Show Inventory count setting off.
• Test a product as a featured product.
• Test a product through quick-add-module.
• Make sure that text style applies when you change it in the block settings.
• Turn off JS in a browser and make sure that you still can see quantity of each variant.

Demo links

Editor

[lucianosousa]

I wonder if we could move this product.selected_or_first_available_variant.inventory_management == 'shopify' check to the backend level.

Do you see any advantage on it?

The code would look like:

{%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.shopify_inventory_managed? -%}

[YoannJailin]

Hi Eugene! Here are the updates i told you about : Figma

My recommendation would be :

• - Use a range slider instead of the counter 0 to 100 (step : 1, default 10)
• - 0 = always « In stock »
• - If stock is superior to threshold, « In stock »
• - If stock = threshold, « Low stock »
• - If stock is inferior to threshold, « Low stock »
• - Since the main request is to show the inventory count (and not the status) I would check « Show inventory » by default.
• - We did some updates on the settings order and content.

Also, we did a quick updates on the orange and green status UI!

[metamoni]

Not sure what's causing this, but I'm seeing different things displayed for two different products 🤔

The stock indicator is hidden for some variants/sizes of the Louise Slide Sandal, which is what we expect. But for some variants/sizes, the price gets hidden completely. Also, for Shoe Test variant product I'm seeing "not quantity" for variants that aren't in stock.

30-31-ww779-r16tt.mp4

[YoannJailin]

@eugenekasimov can we update the threshold slider name to "Low inventory threshold"?

[eugenekasimov]

Not sure what's causing this, but I'm seeing different things displayed for two different products 🤔

The stock indicator is hidden for some variants/sizes of the Louise Slide Sandal, which is what we expect. But for some variants/sizes, the price gets hidden completely. Also, for Shoe Test variant product I'm seeing "not quantity" for variants that aren't in stock.

30-31-ww779-r16tt.mp4

Thanks for paying attention to this. This "issue" not related to this PR, but I have already brought it up to designers so they know about it. When some existing variant has stock 0 then you see sold out, but sometimes there is a variant which doesn't exist for selected option (but you still see it because it exist for another option) and then you see just empty space without price.

That "not quantity" is just a label that is set in admin, it's just a coincidence that it says "quantity". Normally it could be "color" or whatever.

[ludoboludo]

Looking good 👌

[ludoboludo]

I wonder if we should keep showing the container to prevent the jumping of the white space. I know you're not into that weird white space but that would match the current approach.
And when we have some decisions taken on that other issue you created that talks about it we can change the approach if needed 🤔

[eugenekasimov]

I still feel that I don't want to keep extra whitespace dedicated for this Inventory block. But honestly, it's something that we can easily change at any time. I suggest we don't take much time on this so far.

[ludoboludo]

Yeah I think we can keep the whitespace for now to match what we currently have and then we can revisit later if we want to avoid the white space.

[eugenekasimov]

Okay, I changed class .hidden to visually-hidden and add attribute aria-hidden.

[YoannJailin]

Hey, i think it would be better to remove all the white space when a block disappears (even for price) but i agree we can just keep the current logic for now (keeping the white space like for prices). Let's just fix that issue later, for every block.

[ludoboludo]

I wonder if this info bit is actually useful 🤔 Maybe it's just me though 😅
Choose 0 to always show the status as 'in stock' if the variant is available.

[eugenekasimov]

Does it seem too obvious for you? Is that what you mean?

[ludoboludo]

I just find it a bit confusing. I think the wording could be better. But maybe it's only confusing to me. cc: @YoannJailin

[YoannJailin]

@ludoboludo how about this one?
« Shows low stock status when quantity is below the threshold. Choose 0 to always show in stock if the product is available. »
I wonder if it's not confusing to refer to the variant.

[ludoboludo]

I even wonder if it needs help text ? Or maybe something to explain how this value they're using is used.
Anything below the threshold set will show a low stock status unless it's 0.

[ludoboludo]

Good a few more comments in a couple extra scenarios. Let me know if you want to pair to discuss them "in person"

[baldurh]

Continuing with my earlier comment and looking at the code a bit more I realise there is a lot of repeated code here. Mainly the svg code but this in general hard to read and understand. I also think there is a bug in the current implementation. If you have a product with negative inventory you will still go into the in-stock or low-stock condition, becauseinventory_quantity != 0 will match negative numbers and you’ll never reach the ‘continue selling’ condition (in stock), unless the inventory is at exactly 0.

Below is an example of how this could look like if we move the conditional logic into a liquid tag:
_{Note: I understand this is few lines longer, but personally I feel this is more readable. Also, I have not run this}

{%- if product.selected_or_first_available_variant.inventory_management == 'shopify' -%}
  {%- liquid
    assing variant = product.selected_or_first_available_variant
    assign inventory_quantity = variant.inventory_quantity
    assign show_inventory_quantity = block.settings.show_inventory_quantity
    assign inventory_threshold = block.settings.inventory_threshold
    assign in_stock = false
    assign low_stock = false
    assign continue_selling = false
    assign color_in_stock_rgb = '62, 214, 96'
    assign color_low_stock_rgb = '238, 148, 65'
    assign color_sold_out_rgb = '200, 200, 200'
    assign color = ''
    assign text = ''
    
    if inventory_quantity > 0
      assign in_stock = true
      if inventory_quantity <= inventory_threshold
        assign low_stock = true
      endif
    endif

    if variant.inventory_policy == 'continue'
      assign continue_selling = true
    endif

    if in_stock
      assign color = color_in_stock_rgb
      assign text = 'products.product.inventory_in_stock' | t
      if low_stock
        assign color = color_low_stock_rgb
        if show_inventory_quantity
          assign text = 'products.product.inventory_low_stock_show_count' | t: quantity: inventory_quantity
        else
          assign text = 'products.product.inventory_low_stock' | t
        endif
      elsif show_inventory_quantity
        assign text = 'products.product.inventory_in_stock_show_count' | t: quantity: inventory_quantity
      endif
    elsif continue_selling
      assign color = color_in_stock_rgb
      assign text = 'products.product.inventory_in_stock' | t
    else
      assign color = '200, 200, 200'
      assign text = 'products.product.inventory_out_of_stock' | t
    endif
  -%}
  <svg width="15" height="15" role="presentation">
    <circle cx="7.5" cy="7.5" r="7.5" fill="rgb({{- color -}}, 0.3)"/>
    <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb({{- color -}})"/>
  </svg>
  {{- text -}}
{%- endif -%}

[eugenekasimov]

Hey @baldurh thanks a lot for your suggestions. We will definitely keep them in mind for the future improvement because they make sence. For now my prioritize will be inventory_quantity != 0 because it affects the functionality. Really good catch. Thanks a lot!

[baldurh]

Sounds good 😊 glad to help!

[ludoboludo]

Works well 👌 Didn't notice any bugs.

I have one small suggestion and I can re approve once it's been implemented, if decided to be necessary.

[ludoboludo]

Just a small thing but on most of our SVGs we now have aria-hidden="true" and removed the the role="presentation" recently so maybe we should follow the same pattern here: #2037

[ludoboludo]

We should try and add this change before we merge 👍

[eugenekasimov]

Sure, I'll do it now. Thanks Ludo.

[metamoni]

I've tested this and it to work well for me 👍

[ludoboludo]

Looks good on my end 🤔 👍 🎉