Question

我正在尝试提醒购物车中的总价超过100美元。

我使用了一个简单的if语句，当条件满足时，显示警报。下面是我在HTML内的代码（我正在修改Shopify的主题）。

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

这很接近，但不是我想要的。仅在刷新页面后显示警报。我希望警报在购物车达到$ 100时立即显示。因此，当我添加产品并总计超过100美元时，我希望警报立即显示。我该怎么做？

Answer 1

以前曾经在浏览器中支持的方法现在已弃用Object.watch，该方法可用于实现您的要求，但您可以为此使用以下多边形填充。

  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

满足条件时如何立即显示警报？

1 个答案: