I want to notify customer when ALLOW OVERSELLING IN ON

Solved

I want to notify customer when ALLOW OVERSELLING IN ON

CPHAGEN_Nordic
Explorer
50 0 6

Hi community,

 

My website is https://cphagen.com/ and uses Cascade.


I need a solution to display a little text below "add to cart" when "Continue selling when out of stock" is activated and the item is not in stock (0 in inventory).

 

This would help us clarify the situation with our customers by, for example, suggesting that a longer period for delivery might be applied.

 

Can anyone help me?

 

Thank you all. 

 

 

 

Accepted Solutions (2)
IanDesign
Shopify Partner
13 3 4

This is an accepted solution.

Hi CPHAGEN_Nordic,

 

That's because the code you are trying to use has an error in it. Use this instead:

{% if current_variant.inventory_policy == 'continue' and current_variant.inventory_quantity == 0 %}
 <div class="mt1">
   <p>Out of stock - Delivery time may be longer</p>
 </div>
{% endif %}

 

I put a <div> with the class "mt1" around the message so there is some margin between message and add to cart button. You should probably also use the same styles that you use for the inventory message when a product is in stock so the design is consistent. To do that replace the <p></p> tags with <h4></h4>.

 

Also, see image below showing where to put the code – the new code is in the green box, put it after the code in the red box to show message under the add to cart button. I haven't seen your product__top-section.liquid file but I assume you'll have code in there the same as or similar to the code in the red box.

 

Screenshot 2023-04-19 at 21.48.40.png

Hope that helps and and if I get some time a little later, I'll message you about the other issue you have.

 

Thanks!

Ian

IAN MICHIE
Shopify Design | Development
w: ianmichie.com

View solution in original post

IanDesign
Shopify Partner
13 3 4

This is an accepted solution.

@CPHAGEN_Nordic 

 

Oh you want to display the message depending on the variant selected. This gets a little more complicated because you need to reload the page when a different variant is selected. But it can be done.

 

  •  First - Add class "refresh-button" to variant selector. Scroll up a bit from from where you added the other code, see screenshot below for the spot:

Screenshot 2023-04-20 at 0.30.12.png

  • Next, paste this script at the bottom of the product__top-section.liquid file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function($){
  $(".refresh-button").on("change", function(){
  var refreshint = setInterval(function(){
  location.reload();
  }, 1000); }); });
</script>

 

Now try choosing different variants on your product page, page should reload when doing so. If it works, then I'll mail you one extra step that will just tidy up the bottom of the product__top-section.liquid file. It's not necessary, just a bit of housekeeping.

 

Hope it works for you!

Ian

IAN MICHIE
Shopify Design | Development
w: ianmichie.com

View solution in original post

Replies 14 (14)

Weaverse
Shopify Partner
73 23 32

Hi @CPHAGEN_Nordic 

You can try to use this code to display a message when "Continue selling when out of stock" is activated and the item is not in stock:

{% if variant.inventory_policy == "continue" and variant.inventory_quantity == 0 %}
<p>Out of stock - Delivery time may be longer</p> 
{% endif %}

This will check if the inventory policy is set to "continue" and if the inventory quantity is 0, and if so, it will display the message "Out of stock - Delivery time may be longer" below the "add to cart" button.

Let me know if you have any other questions!

Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Theme Customizer for Shopify Hydrogen
Join our Weaverse + Hydrogen community: Weaverse Community
CPHAGEN_Nordic
Explorer
50 0 6

Hello @Weaverse !  🙂 

Thank you very much for your answer.

 

Can you please tell me where to introduce this code?

I will try it once I know where to copy that 🙂

 

Thank you again!

Good day

Weaverse
Shopify Partner
73 23 32

Hi @CPHAGEN_Nordic 

The code should be added to the relevant section of your theme where the product details are rendered. In some cases, this might be in the product.liquid file, but it could also be in a section or another template file, depending on your theme's structure. You can try to search for the "add to cart" button code in your theme's files and add the above code below it.

I hope this helps.

Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Theme Customizer for Shopify Hydrogen
Join our Weaverse + Hydrogen community: Weaverse Community
CPHAGEN_Nordic
Explorer
50 0 6

Not really, I am afraid 😞

@ExpertRookie maybe can help on this?

 

Thank you!!!

 

 

IanDesign
Shopify Partner
13 3 4

Hey CPHAGEN,

 

In Cascade, you would add the code to the add-to-cart-button.liquid file, which is in the "Snippets" folder of the theme code.

Screenshot below showing the file.

 

Screenshot 2023-04-18 at 4.19.36.png


Good luck!

Ian 

IAN MICHIE
Shopify Design | Development
w: ianmichie.com
CPHAGEN_Nordic
Explorer
50 0 6

Hi!

I do not have add-to-cart-button.liquid.

 

I really don't know where to paste this.

Thanks for your message! 🙂 

IanDesign
Shopify Partner
13 3 4

Hi,

 

You must be using an older version of Cascade. It's changed a fair bit over the last 3 years but if you have a product__top-section.liquid file in the snippets folder you would add the code in there.

 

If you've got that file look for the <div> with the "add-to-cart-container" class, and the <button> inside that. Code might look like this:

 

 <div class="add-to-cart-container mt3 {% unless current_variant.available %}hide-pay-buttons{% endunless %}  {% if enable_payment_button %}cta-content--pay-buttons{% endif %}" data-add-to-cart-container>
                <button
                  class="btn border--none btn--add-to-cart relative color-scheme--{{ section_color }} {% if enable_payment_button %}bg--transparent color--{{ section_color }}-text border--{{ section_color }}-text hv--{{ section_color }}-accent hv--border--{{ section_color }}-accent {% else %}border--none bg--{{ section_color }}-text color--{{ section_color }}-text--overlay hover-bg--{{ section_color }}{% endif %} p1 full--w block"
                  type="submit"
                  name="add"
                  id="AddToCart--{{ module_id }}"
                  data-add-to-cart
                  {% unless current_variant.available %}disabled="disabled"{% endunless %}>
                    <span class="add-to-cart-text" data-add-to-cart-text>
                      {% if current_variant.available %}
                        {{ 'products.product.add_to_cart' | t }}
                      {% else %}
                        {{ 'products.product.sold_out' | t }}
                      {% endif %}
                    </span>
                    {%- unless settings.open_modal_on_add_to_cart  %}
                    <div class="spinner {% if enable_payment_button %}color--{{ section_color }}-text{% else %}color--{{ section_color }}-background{% endif %}"></div>
                    {%- endunless -%}
                </button>
                {% if enable_payment_button %}
                  <div class="mt2 payment-button-wrapper color--{{ section_color }}">{{ form | payment_button }}</div>
                {% endif %}
              </div>

 

Hope that helps!

IAN MICHIE
Shopify Design | Development
w: ianmichie.com
CPHAGEN_Nordic
Explorer
50 0 6

Hi @IanDesign ,
Unfortunately, it is not working.
Thanks for your help anyway.

 

Maybe you can help me with this?
https://community.shopify.com/c/shopify-design/conflict-with-sorting-and-filtering-products-on-mobil... 

 

Good day

IanDesign
Shopify Partner
13 3 4

This is an accepted solution.

Hi CPHAGEN_Nordic,

 

That's because the code you are trying to use has an error in it. Use this instead:

{% if current_variant.inventory_policy == 'continue' and current_variant.inventory_quantity == 0 %}
 <div class="mt1">
   <p>Out of stock - Delivery time may be longer</p>
 </div>
{% endif %}

 

I put a <div> with the class "mt1" around the message so there is some margin between message and add to cart button. You should probably also use the same styles that you use for the inventory message when a product is in stock so the design is consistent. To do that replace the <p></p> tags with <h4></h4>.

 

Also, see image below showing where to put the code – the new code is in the green box, put it after the code in the red box to show message under the add to cart button. I haven't seen your product__top-section.liquid file but I assume you'll have code in there the same as or similar to the code in the red box.

 

Screenshot 2023-04-19 at 21.48.40.png

Hope that helps and and if I get some time a little later, I'll message you about the other issue you have.

 

Thanks!

Ian

IAN MICHIE
Shopify Design | Development
w: ianmichie.com
CPHAGEN_Nordic
Explorer
50 0 6

YESSSSS!!! 🙂
It worked.

Thank you so much.

CPHAGEN_Nordic
Explorer
50 0 6

@IanDesign 

 

To be honest, I notice a problem now.

 

IF a specific variant has inventory >0 , the text is shown anyway.

 

It seems that your suggested code is more product-related than variant-related?

 

Any way to solve this and make it perfect? 🙂

 

Thanksss!!!

IanDesign
Shopify Partner
13 3 4

This is an accepted solution.

@CPHAGEN_Nordic 

 

Oh you want to display the message depending on the variant selected. This gets a little more complicated because you need to reload the page when a different variant is selected. But it can be done.

 

  •  First - Add class "refresh-button" to variant selector. Scroll up a bit from from where you added the other code, see screenshot below for the spot:

Screenshot 2023-04-20 at 0.30.12.png

  • Next, paste this script at the bottom of the product__top-section.liquid file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function($){
  $(".refresh-button").on("change", function(){
  var refreshint = setInterval(function(){
  location.reload();
  }, 1000); }); });
</script>

 

Now try choosing different variants on your product page, page should reload when doing so. If it works, then I'll mail you one extra step that will just tidy up the bottom of the product__top-section.liquid file. It's not necessary, just a bit of housekeeping.

 

Hope it works for you!

Ian

IAN MICHIE
Shopify Design | Development
w: ianmichie.com
CPHAGEN_Nordic
Explorer
50 0 6

Worked like a charm!

Even if it's a bit slower now 🙂

 

Thank you so much!!!

 

fonefunshop
Visitor
1 0 0

i am realy struggling to get this to work, i hope you can help me please?

 

i have products on 0 stock

 

these products have the "Continue selling when out of stock" option ticked

here is an example

https://www.fonefunshop.com/products/tsop48-u02482-socket-adapter-for-up-828?_pos=1&_sid=f292996c8&_...

 

i have Dawn template

 

i couldnt find the templates you mentioned in my theme via the edit code section

 

so i added the code by using the edit teplate feature, and added a liquid code section just above the quantity selecter section

Screenshot_1.jpg

 

it doesnt display the message, if i put ssome plain text in this section it displays that ok, so i have the right spot

 

any help is appreciated, as im tearing my hair out 😞