Liquid for Stock count -> Language & Color (Dawn)

[jesick]

Hello community, 

I have to admit that I am a huge beginner in Shopify and coding there. 

After several hours of searching I put together this code for showing the stock of a product depending on the stock level. I am using a custom liquid (I hope that's the right word in english)

It works good so far for my products.

<DIV>
{% comment %} More than 5 in stock {% endcomment %}
{% if product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity > 5 %}
Auf Lager.


{% comment %} Greater than 1 and less than 5 in stock {% endcomment %}
{% elsif product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity <= 5 %}
Nur noch {{ product.variants.first.inventory_quantity }} auf Lager.

{% comment %} Outofstock {% endcomment %}
{% elsif product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity < 1 %}
Ausverkauft.

{% endif %}
</DIV>

I have two questions now:

- Is it possible to build in an option for the language? For example: If Language is not german, use english? 

- Is it possible to style the text depending on the if? Maybe red when the product is out of stock?

I hope someone can help me. 

[PaulNewton]

#1 - Is it possible to build in an option for the language? For example: If Language is not german, use english? 

Translations https://shopify.dev/themes/architecture/locales , https://shopify.dev/themes/architecture/locales/storefront-locale-files 

and the lang editor https://help.shopify.com/manual/online-store/themes/language/change-wording#overview-of-the-language... 

- Is it possible to style the text depending on the if? Maybe red when the product is out of stock?

Yes wrap the text in spans or paragraph tags with either the appropriate styles in the style attribute or through CSS classes

Unless you'll be using more inventory management systems you can also be more concise like so:

<div class="inventory-count">
    {% if product.variants.first.inventory_management == "shopify" %}
        {% comment %} More than 5 in stock {% endcomment %}
        {% if product.variants.first.inventory_quantity > 5 %}
        <span style="color:green;">Auf Lager.</span>

        {% comment %} Greater than 1 and less than 5 in stock {% endcomment %}
        {% elsif product.variants.first.inventory_quantity <= 5 %}
        <span>Nur noch {{ product.variants.first.inventory_quantity }} auf Lager.</span>

        {% comment %} Outofstock {% endcomment %}
        {% elsif product.variants.first.inventory_quantity < 1 %}
            <span class="low-inventory">Ausverkauft.</span>
        {% endif %}

    {% endif %}
</div>
<style type="text/css">
    .inventory-count span {
        font-weight: bold;
    }
    .low-inventory {
        color: red;
    }
</style>

[SHIBdev]

@PaulNewton I added this funcionality to my page, but i found some issue, how can it change with variants in each product? i mean, if i got some product with sizes S, M, L, XL

but M - L with more than 5 products, and S - XL with less than 5 products, the stock status doesnt change.. so how can we add this to that snippet?

[PaulNewton]

Either make the page fully reload when a variant is selected, rough examples available on the forums through search.

Or you need an advanced customization to integrate it with your themes javascript for when options are changed by users.

 Note shopify has a tutorial for some vintage themes here: https://help.shopify.com/en/manual/online-store/themes/os/customize/show-remaining-quantity 

Part the complication here is shopify don't put inventory data the frontend rest axja api so third parties cannot bulk scrape that from merchants stores.

So this means reloading the page for that 1 specific variants inventory, or purposefully putting the inventory counts in javascript or the html to be referenced by your javascript.

To get the dynamic version of this customization contact me at paull.newton+shopifyforums@gmail.com with this topic url, store url ,and theme name.