inventory message not showing

[kitdang]

Matt,

I have products with variant. When one size is out of stock, the add to cart button is gray out. However, I do not see the inv_long message on the product screen. How do I get it to display? Is there some setting i need prior for this to work?

<mvt:if expr="l.settings:product:inv_active OR l.settings:attributemachine:product:inv_active">
<div id="inventory-message" class="x-product-layout-purchase__inventory-message">
<link itemprop="availability" href="http://schema.org/&mvt:product:inv_short;">
<div class="x-messages x-messages--info">&mvt:product:inv_long;</div>
<div class="x-messages x-messages--info">&mvt:product:inv_short;</div>
</div>
</mvt:if>

[Matt Zimmermann]

There is an update, which will be going out soon, that addresses this.

In User Interface -> PROD -> Product Display Layout, find this:

                    <mvt:if expr="l.settings:product:inv_active OR l.settings:attributemachine:product:inv_active">
                        <div id="inventory-message" class="x-product-layout-purchase__inventory-message">
                            <link itemprop="availability" href="http://schema.org/&mvt:product:inv_short;">
                            <div class="x-messages x-messages--info">&mvt:product:inv_long;</div>
                        </div>
                    </mvt:if>

and replace it with this:

                    <mvt:if expr="l.settings:product:inv_active OR l.settings:attributemachine:product:inv_active">
                        <link itemprop="availability" href="http://schema.org/&mvt:product:inv_short;">
                    </mvt:if>
                    <div id="inventory-message" class="x-product-layout-purchase__inventory-message"><mvt:if expr="l.settings:product:inv_active OR l.settings:attributemachine:product:inv_active">&mvt:product:inv_long;</mvt:if></div>

Then, in User Interface -> CSS Resources -> theme-styles, add this:

    .x-product-layout-purchase__inventory-message:not(:empty){
        margin-bottom: 1rem;
        padding: 0.75em 0;
        color: #307962;
        font-size: 0.8125rem;
        border: 0 none;
    }

[kitdang]

Hi Matt,

Is there a way I can make 'sold out' a red color with an icon in the front and an 'in stock' green with a check mark icon?

[Matt Zimmermann]

Yes. You would have to switch to using the long inventory messages in Catalog -> Inventory and replace your Out Of Stock and In Stock messages with something like this:

<span class="u-color-red">
    <span class="u-icon-cross"></span>&nbsp;Sold Out
</span>

<span class="u-color-green">
    <span class="u-icon-check"></span>&nbsp;In Stock
</span>

[kitdang]

Hi Matt,

Thanks for the code. I have follow your instruction and change out the inventory messages in Catalog -> Inventory. However, It's still using the short inventory message. I also notice your previous code is using &mvt:product:inv_long; variable already. Am I not calling it correctly?

<div id="inventory-message" class="x-product-layout-purchase__inventory-message"><mvt:if expr="l.settings:product:inv_active OR l.settings:attributemachine:product:inv_active">&m vt:product:inv_long;</mvt:if></div>

[Matt Zimmermann]

Oops, forgot one step. You'll have to set the product page to display the long message:

User Interface -> PROD -> Attribute Machine -> Inventory Message: Long

[kitdang]

That works. Thank you