Installing on BigCommerce

<!-- Order Protection Styling -->
<link
  rel="stylesheet"
  href="https://cdn.orderprotection.com/widget/shopify/5.9.3/style.css"
/>
<!-- End of Order Protection Styling -->

<!-- Order Protection Widget -->
<script
  crossorigin
  src="https://cdn.orderprotection.com/widget/big-commerce/5.27.1/orderprotection.js"
></script>

<script defer>
  const widget = OrderProtection.createOrderProtectionWidget({
    store_url: "store-nd5f5zgf3.mybigcommerce.com",
    locations: [
      {
        sibling: {
          position: "before",
          selector: ".cart-total",
          // Uncomment the following block to apply custom styles:
          /*
            styles: {
            'width': '350px',
            'margin-left': 'auto'
            }
            */
        },
      },
    ],
    text: {
      LOGO_TEXT: "testing",
      INFORMATION_TEXT: "testing info",
    },
  });
  function updateMainCartCount() {
    const cart = widget.cart.cart;
    const cartItems = cart.lineItems;
    const hasOp = cartItems.digitalItems.some(
      (item) => item.name === "Order Protection"
    );

    if (!hasOp) return;
    const countElm = document.querySelector("[data-cart-page-title]");
    if (!countElm) return;
    const numberMatch = countElm.innerText.match(/\d+/);
    if (!numberMatch) return;
    const currentNumber = numberMatch[0];
    const newCount = widget.cart.item_count - 1;
    const newText = countElm.innerText.replace(currentNumber, newCount);
    countElm.innerText = newText;
  }

  function updateHeaderCartCount() {
    const cart = widget.cart.cart;
    const cartItems = cart.lineItems;
    const hasOp = cartItems.digitalItems.some(
      (item) => item.name === "Order Protection"
    );

    if (!hasOp) return;
    const headerCountElm = document.querySelector(
      ".countPill.countPill--positive.cart-quantity"
    );
    if (!headerCountElm) return;
    headerCountElm.innerText = widget.cart.item_count - 1;
  }

  function updateSubtotal() {
    const cart = widget.cart.cart;
    const cartItems = cart.lineItems;
    const hasOp = cartItems.digitalItems.some(
      (item) => item.name === "Order Protection"
    );

    if (!hasOp) return;

    const OpItem = cartItems.digitalItems.find(
      (item) => item.name === "Order Protection"
    );
    const totalNoOp = cart.cartAmount - OpItem.listPrice;
    const formatter = new Intl.NumberFormat(undefined, {
      style: "currency",
      currency: cart.currency.code,
    });
    const formattedSubtotal = formatter.format(totalNoOp);
    const subtotalElm = document.querySelector(".cart-total-value > span");
    const subtotalElm2 = document.querySelector(
      ".cart-total-value.cart-total-grandTotal > span"
    );
    if (subtotalElm && subtotalElm2) {
      subtotalElm.innerText = formattedSubtotal;
      subtotalElm2.innerText = formattedSubtotal;
      clearInterval(updateSubtotal);
    }
  }

  function updateCartCountAndSubtotals() {
    updateMainCartCount();
    updateHeaderCartCount();
    updateSubtotal();
  }

  widget.addPlugin({
    afterInit: () => updateCartCountAndSubtotals(),
    afterRemoveFromCart: () => updateCartCountAndSubtotals(),
    afterAddToCart: () => updateCartCountAndSubtotals(),
  });

  widget.init();

  setInterval(() => {
    widget.attach();
  });
</script>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const cartItems = document.querySelectorAll(".cart-item");
    cartItems.forEach((item) => {
      const name = item.querySelector(".cart-item-name").innerText.trim();
      if (name === "Order Protection") {
        item.style.display = "none";
      }
    });
  });
</script>

<!-- End of Order Protection Widget -->