0

I'm trying to make an alert for when a total price in a cart is over $100.

I used a simple if statement, and when the condition is met, show alert. Below is my code inside the HTML (I'm modifying Shopify's theme). 

<script>
  function showAlert() { alert('You triggered an alert!'); }
</script>
{% if cart.total_price > 100 %}
  <script>showAlert();</script>
{% endif%}

This is close, but not quite what I want. It only shows the alert after I refresh the page. I want the alert to show right when the cart hits $100. So, when I add a product and it totals to over $100, I want the alert to show right away. How do I do this?

gnp103902348
  • 21
  • 4
  • 2
    How are items added to your cart? Based on your question, it sounds like items are added without the entire page being refreshed; if that's the case, you need to add some AJAX calls to update your total as each item is added, and then call your check after each addition. If you could post a bit more of your code that illustrates how items are added, it would help us give you a more robust answer. Good luck! – David W Jul 26 '19 at 11:04
  • Please take the [tour] (you get a badge!), have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) I also recommend Jon Skeet's [Writing the Perfect Question](https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/). You'll need to modify (or add) the JavaScript on the page. We can't help you do that without the relevant code (and the question is too broad for SO's format anyway). – T.J. Crowder Jul 26 '19 at 11:05
  • Related: https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming – Quentin Jul 26 '19 at 11:10

1 Answers1

-1

there was a method previously supported in browser now deprecated Object.watch which can be use to implement your requirement but you can you use the following poly fill for that.

  if (!Object.prototype.watch) {
        Object.defineProperty(Object.prototype, "watch", {
          enumerable: false
          , configurable: true
          , writable: false
          , value: function (prop, handler) {
            var
              oldval = this[prop]
              , newval = oldval
              , getter = function () {
                return newval;
              }
              , setter = function (val) {
                oldval = newval;
                return newval = handler.call(this, prop, oldval, val);
              }
            ;

            if (delete this[prop]) { // can't watch constants
              Object.defineProperty(this, prop, {
                get: getter
                , set: setter
                , enumerable: true
                , configurable: true
              });
            }
          }
        });
      }

    var cart = {price: 40}
    cart.watch('price', (name, prev, current) => {
 if(current > 100) {
  alert(`your price is ${current} dollars which is greater than 100`);
 }
    })
    cart.price = 140
Aimal Khan
  • 449
  • 2
  • 9