Help Please: Cloudflare Workers Breaks Add to Cart [Wordpress]

When clicking “Add to Cart”, the page is refreshed - and nothing happens. See for yourself

I have 100% narrowed down the issue to the Worker Code below.

The issue is related to the headers returned when pricing-mode=on cookie is enabled. I can tell because when accessing: ellasbubbles .com/walk-in-tubs/accessories/heated-seat-and-backrest-for-walk-in-bathtub-heated-seat-and-backrest-for-tubs/ (which does not require the cookie to show add to cart functionality), the add to cart function works fine.

However, when accessing: ellasbubbles .com/walk-in-tubs/stainless-steel-door/elite-acrylic-hydro-massage-walk-in-bathtub-with-inward-swing-door-thermostatic-faucet-2-dual-drain-price/ (where the cookie IS set), the add to cart function does not work.

I am thinking it might be worth disabling the worker on the button click and/or on the url used to “Add to Cart” - any guidance is appreciated!

addEventListener('fetch', event => {
    event.passThroughOnException()
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  let cookies = request.headers.get('Cookie') || ""
  const country = request.cf.country
  const url = new URL(request.url)
  let response = await fetch(request);
  response = new Response(response.body, response);

if (url.searchParams.has("ajax-wc")) {
  return fetch(request)
}

  else if ((country != 'US' && country !='CA')) {
response.headers.set('Set-Cookie', "pricing-mode=on;max-age=604800;Path=/");
return response;
}

else if ((url.search.includes("gclid")) || (url.search.includes("bing")) || (url.search.includes("fbclid")) || (url.pathname.includes("pricing"))) {
response.headers.set('Set-Cookie', "pricing-mode=on;max-age=604800;Path=/");
return response;
}

  else if ((cookies.includes("pricing-mode=on"))) {
    const response = await fetch(request)
    const type = response.headers.get("Content-Type") || "";
    if (!type.startsWith("text/html")) {
     return response;
   }
    var html = await response.text()
    
    // Inject scripts
	const customPricing = '<style type="text/css">.price,.price-wrapper,.single_add_to_cart_button,.quantity,#welcome-notice, #price-match, .wcct_custom_text_wrap, .wcct_countdown_timer_wrap, .badge-container, .wcct_custom_text_wrap, .wcct_timer_wrap, #hide-catalog, #wcpay-payment-request-wrapper, #wcpay-payment-request-button-separator, #menu-item-64460, #menu-item-64457, .message__container locale--US {display: block!important} #show-catalog {visibility: hidden!important;}#pewc-per-product-label, #pewc-per-product-total, #pewc-grand-total-label, #pewc-grand-total, #pewc-group-64059, #pewc-group-64060 {display: inline!important;} </style></body>'
  html = html.replace( /<\/body>/ , customPricing)

    // return modified response
       return new Response(html, response)
}
 else {
     return fetch(request)
  }
}
else if (url.searchParams.has("add-to-cart")) {
return Response.redirect(destinationURL, statusCode);
}

Although, I do not think this will work in your case…

Please access ellasbubbles .com/walk-in-tub-pricing to add the cookie; then click on a Walk In Tub product; this does not work

When you click “Add to Cart,” the website refreshes, but nothing happens. View it for yourself

Pricing-mode=on cookies deliver headers that are problematic. Adding products to the cart does not require cookies.
you cannot add to cart (where the cookie IS set).

I wonder if it would make sense to disable the worker on button clicks and “Add to Cart” URLs.