FROM CACHE - en_header

Custom message when there is 0 items in stock [Supply theme]

Solved
adios
Tourist
14 0 2

Hello,

 

I am using Supply theme and if there are some items (variants of items) in stock the message says "Only X items left!" (standard theme feature).

What I wanted to have is custom message when there is 0 items in stock.

 

For example:

There are 5 items (variants of items) in stock so message says:

"Only 5 items left!" (as it is now)

 

There is 0 items in stock so message would say:

"Item available from a supplier. Allow 2-3 weeks to deliver"

 

Here is a code for standard "only x items left" feature inserted.

 

  {% if section.settings.product_quantity_message%}
          <div id="variantQuantity-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity < 10 and variant.inventory_quantity > 0 %} is-visible{% endif %}">
              {% include 'svg-definitions' with 'stock-icon' %}
              {% if variant.inventory_management and variant.inventory_quantity < 10 and variant.inventory_quantity > 0 %}
                {% assign qty = variant.inventory_quantity %}
                <span id="variantQuantity-{{ section.id }}__message">{{ 'products.product.only_left' | t: count: qty }}</span>
              {% endif %}
          </div>

 

Could please anyone help?

 

Thank you.

 

Regards

 

Accepted Solution (1)

Accepted Solutions
Ninthony
Shopify Partner
2272 342 968

This is an accepted solution.

Replace my previous code with this, didn't anticipate a selector changing it:

 

          if (variant.inventory_management) {
            // Show how many items are left, if below 10
            if (variant.inventory_quantity < 10 && variant.inventory_quantity >= 0 && this.settings.stockSetting == 'true') {
              if (variant.inventory_quantity == 0){
              let alert = '<span id="variantQuantity-product-template__message">Item available from a supplier. Allow 2-3 weeks to deliver.</span>'
              this.settings.selectors.$variantQuantityMessage.html(alert);
              this.settings.selectors.$variantQuantity.addClass('is-visible');
              }else{
              this.settings.selectors.$variantQuantityMessage.html(theme.strings.product.only_left.replace('1', variant.inventory_quantity));
              this.settings.selectors.$variantQuantity.addClass('is-visible');
              console.log('goodbye');
              }
            }
          }

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 25 (25)
Ninthony
Shopify Partner
2272 342 968

Go into Online Store > Actions > Edit Code 

 

Then navigate to your Locales folder and open your en.default.json. Scroll to around line 310 and locate the "product" object and change the "sold_out" text to whatever you want. 

 

changemessage.jpg

 

result.jpg

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
BrianAtWork
Shopify Partner
245 59 168

Hi @adios,

 

Welcome to the Shopify Community!

 

I understand that you want to have a custom message show when there is 0 items in stock.

 

I may be able to help you with this. I've updated your code to show the message, but please do verify that it works as intended.

 

Note: For the code to work, you must have these options checked for the 0 inventory products:

 

Screen Shot 2019-08-29 at 9.50.48 AM.png

 

Try this code:

 

{% if section.settings.product_quantity_message or variant.inventory_management and variant.inventory_quantity <= 0 and variant.available %}
  <div id="variantQuantity-{{ section.id }}" class="variant-quantity is-visible">
  {% include 'svg-definitions' with 'stock-icon' %}
  {% assign qty = variant.inventory_quantity %}
  {% if variant.inventory_management and variant.inventory_quantity < 10 and variant.inventory_quantity > 0 %}
    <span id="variantQuantity-{{ section.id }}__message">{{ 'products.product.only_left' | t: count: qty }}</span>
  {% elsif variant.inventory_management and variant.inventory_quantity <= 0 %}
    <span id="variantQuantity-{{ section.id }}__message">Item available from a supplier. Allow 2-3 weeks to deliver.</span>
  {% endif %}
  </div>
{% endif %}

Let me know if this works or if you need further help!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

adios
Tourist
14 0 2

Hi @BrianAtWork,

 

All the options are checked and code was pasted, but regrettably the message does not show up.

 

Here is the product with one of variants in stock and others out of stock.

 

Thank you for the support.

 

Regards

BrianAtWork
Shopify Partner
245 59 168

Hi @adios,

 

That is odd – the code is working for my test store.

 

Your products may be set up differently.

 

Your store would need to be accessed and your products analyzed, in order to make the appropriate changes to the code.

 

If you're interested in working together, please send me a private message or email. I'm sure @Ninthony would be willing to help you too. You may also hire help from the Shopify Experts Marketplace.

 

Cheers!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

adios
Tourist
14 0 2

Thank you for the help.

 

Btw, I have noticed that when I am refreshing the product page I can see the message but approx after one sec it disappears. I have even managed to make a screenshot:

 

msg.JPG

 

 

 

BrianAtWork
Shopify Partner
245 59 168

@adios Sounds like an app or a theme script is overriding the product description after page load. This could also be due to the placement of your code. Depends on your theme and the apps you have installed.

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

Ninthony
Shopify Partner
2272 342 968

I'd be happy to help. For my solution, I was under the impression that you wouldn't need the add to cart button and that they were being informed that they could purchase it from the supplier directly. You can shoot me a message on here and if you want to let me know exactly what it is you need to do I can get back to you.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
adios
Tourist
14 0 2

Hello @Ninthony,

 

I would need that customers could use "add to cart" button, but before they add product to a basket they would be advised that the lead time is 2-3 weeks for the particular item (item variant).

 

As you could see above there is an information with button but unfortunately the info disappears.

Ninthony
Shopify Partner
2272 342 968

Can you provide a link to your store? It's got to be some kind of javascript that's hiding it which would need to be tracked down. 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
adios
Tourist
14 0 2
Ninthony
Shopify Partner
2272 342 968

Can't find a sold out product, any chance you can provide that link?

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
adios
Tourist
14 0 2

I guess you did not understand me correctly.

 

There are three types of products in my store:

 

1. In stock (everything is ok, the left in stock quantity is show)

2. 0 items in stock (I would need message with lead time appeared here as items can be ordered from supplier)

3. Sold out (everything is ok, sold out means that supplier do not have it in their warehouse either (it could not be ordered at this time))

 

Hope you understand what I have in mind.

 

Thank you for your time.

Ninthony
Shopify Partner
2272 342 968

Ok well can you link me to a product that has 0 items in stock, I can't find one.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
adios
Tourist
14 0 2
Ninthony
Shopify Partner
2272 342 968

Brian's code is correct, but yeah there's some evaluation conflict taking place. Make sure you duplicate your theme before making any changes. This edit requires you change the theme.js.liquid file -- which you CANNOT revert to an older version of. So if something gets screwed up, you'll need a separate backup theme to pull your working file from. I'd also suggest saving you theme.js.liquid in a notepad document. 

 

After backing up, open your theme.js.liquid file on your non-live theme and locate the following code:

 

          if (variant.inventory_management) {
            // Show how many items are left, if below 10
            if (variant.inventory_quantity < 10 && variant.inventory_quantity >= 0 && this.settings.stockSetting == 'true') {
              this.settings.selectors.$variantQuantityMessage.html(theme.strings.product.only_left.replace('1', "Hello"));
              this.settings.selectors.$variantQuantity.addClass('is-visible');
            }
          }

Replace that code with this:

 

          if (variant.inventory_management) {
            // Show how many items are left, if below 10
            if (variant.inventory_quantity < 10 && variant.inventory_quantity >= 0 && this.settings.stockSetting == 'true') {
              if (variant.inventory_quantity == 0){
              this.settings.selectors.$variantQuantity.addClass('is-visible');
              }else{
              this.settings.selectors.$variantQuantityMessage.html(theme.strings.product.only_left.replace('1', variant.inventory_quantity));
              this.settings.selectors.$variantQuantity.addClass('is-visible');
              }
            }
          }

Preview that theme and test it. Check all your other products to be sure everything is working the way you want it before you make this live. 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
adios
Tourist
14 0 2

Everything working like a treat if product is without.

But if product has more than one variant the message says that all variants are in stock.

 

As for example lets take this product. (Silver one is not in stock, all other variants are in stock)

If I choose Black, and then Silver, it says that it is in stock.

But if I refresh the browser, Silver is shown with lead time.

 

I remember I had the same issue with inventory qty in Minimal theme when there is different qties in stock for different product variants.

 

Hope you understand what I mean.

Ninthony
Shopify Partner
2272 342 968

This is an accepted solution.

Replace my previous code with this, didn't anticipate a selector changing it:

 

          if (variant.inventory_management) {
            // Show how many items are left, if below 10
            if (variant.inventory_quantity < 10 && variant.inventory_quantity >= 0 && this.settings.stockSetting == 'true') {
              if (variant.inventory_quantity == 0){
              let alert = '<span id="variantQuantity-product-template__message">Item available from a supplier. Allow 2-3 weeks to deliver.</span>'
              this.settings.selectors.$variantQuantityMessage.html(alert);
              this.settings.selectors.$variantQuantity.addClass('is-visible');
              }else{
              this.settings.selectors.$variantQuantityMessage.html(theme.strings.product.only_left.replace('1', variant.inventory_quantity));
              this.settings.selectors.$variantQuantity.addClass('is-visible');
              console.log('goodbye');
              }
            }
          }

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
adios
Tourist
14 0 2

@Ninthony many thanks! Works great now.

 

Please message me or leave your PayPal here, I will drop you few dollars for the help 🙂

 

Cheers

Ninthony
Shopify Partner
2272 342 968

I messaged you with my PayPal, thank you -- I appreciate it.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄