Watcher Plugin ​

The widget may not always appear the first time a user adds an item to their cart, or it may disappear or display incorrect pricing when the user updates the quantity. This is where the Watcher Plugin comes in handy. It ensures that the widget is always visible and accurately reflects the current cart state, even during these edge cases.

Implementation Example ​

Go to the theme.liquid file where you initialized the widget and paste this observer code underneath.

<script defer>
  const widget = OrderProtection.createOrderProtectionWidget();
  widget.addRenderLocation("order-protection-drawer");
  widget.init();

  const observer = new OrderProtection.Plugins.WatchChangesPlugin(
    {
      callback: function () {
        widget.init();
      },
      element: document.querySelector("#cart-drawer"),
    },
    null
  );
</script>

The WatchChangesPlugin accepts an object that includes a callback function to execute when changes are detected in the specified element. In this case, the element being monitored is document.querySelector("#cart-drawer"). When this element changes it will reinitialize the widget.