If Quantity selected = X, show message

Highlighted
Shopify Expert
90 0 28

I need to show a different message on product pages based on the product quantity someone selects. So if someone wants to buy 5 of product1, they'll see message X or if they want to buy 2 of product1, they'll see message Y, etc.

If possible, I'd like the message to show on the product page before a customer clicks on "Add to Cart" so it would immediately change when a customer selects different quantites.

I tried things like {% if products.product.quantity == '1' %}testing{% endif %} on the products page, but that's not working. What's the correct liquid for this?

0 Likes
Highlighted
Shopify Expert
90 0 28

Can someone please tell me what to do for this?

0 Likes
Highlighted
Excursionist
18 0 5

I do not know the code for this, but I know you can pay a Shopify Expert to do it for you. If you call Shopify and request one they will get you in touch with one!

Connor Beebe President and Founder www.StickerGuys.ca Connor@StickerGuys.ca Love Feedback! Send a Contact Us really easily on my site, or email me! Will provide Discounts and free products for quality feedback of my store.
0 Likes
Highlighted
Shopify Expert
90 0 28

I'm aware I can pay a Shopify Expert to do this, but I just need a little line of code so I was hoping someone on here could help me.

0 Likes
Highlighted
Shopify Expert
9887 100 1728

Amy - this won't be a line of code, especially if your theme adds fancy plus and minus controls on both sides of the field like a few do. Seeing a product page with quantity field, along with the theme name will go a long way to giving forum members something to work with.

I'd assume that you'll need to:

  • Bind a change event to the quantity input field (or select menu depending on theme).
  • Modify the code that handle thes plus / minus buttons so that it too can fire the same message function
  • Add some html / css to the theme for the message to go (or you could do this dynamically with JavaScript
  • Add other js to remove the message under certain conditions.

Code like this won't work...

{% if products.product.quantity == '1' %}testing{% endif %} 

... since that's Liquid and is rendered server side. Since you're needing to do something based on user action you need to use client side script - JavaScript.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Shopify Expert
90 0 28

Ah, ok. Sounds like it'll be more complex than we thought. The theme used is Supply, and this is an example of a product page:
http://www.buildingnewfoundations.com/collections/event-collection/products/add-ons

 

0 Likes
Highlighted
Shopify Partner
1353 24 230

Taking from where Jason left, that is the way to do it. The code you are looking is under assets/ajaxify.js. The function that gets called when the quantity changes is  

      $('.js--qty-adjuster').on('click', function() {
        var el = $(this),
            id = el.data('id'),
            qtySelector = el.siblings('.js--num'),
            qty = parseInt( qtySelector.val() );

        // Add or subtract from the current quantity
        if (el.hasClass('js--add')) {
          qty = qty + 1;
        } else {
          qty = qty - 1;
          if (qty <= 1) qty = 1;
        }

        // Update the input's number
        qtySelector.val(qty);
      });

 You have the new quantity there: qty. You need to add a conditional rule and set up the text, something like this:

      $('.js--qty-adjuster').on('click', function() {
        var el = $(this),
            id = el.data('id'),
            qtySelector = el.siblings('.js--num'),
            qty = parseInt( qtySelector.val() );

        // Add or subtract from the current quantity
        if (el.hasClass('js--add')) {
          qty = qty + 1;
        } else {
          qty = qty - 1;
          if (qty <= 1) qty = 1;
        }

        // Update the input's number
        qtySelector.val(qty);
        
        if (qty > 5) {
          $('#MyTextElement').text('text for over 5');
        } else if (qty > 2) {
          $('#MyTextElement').text('text for over 2');
        } else {
          $('#MyTextElement').text('default message);
        }

      });

Where MyTextElement is the ID of the message element.

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
Shopify Expert
90 0 28

Unfortunately, it doesn't look like that code works. I tried it as is and then tried changing a few things to see if that would work, but nothing is showing up after I add that code.

0 Likes
Highlighted
Shopify Partner
1353 24 230

That code works. 

What error do you get, look into DevTools console.

Did you added an element with id="MyTextElement"?

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
Shopify Expert
90 0 28

Ok, now it's working. Right after I posted this, I noticed there was something missing. Thank you! Question though - is there a way to tell it to show something by default before clicking the + or - quantity? Even if I make it if (qty = 1) , it won't show anything until the + or - is clicked.

0 Likes