Cloudflare Developers•3y ago

Right now I have built a website that

Right now I have built a website that hides pricing unless a cookie is present. I am using cloudflare workers to restore pricing information through styling when the cookie is present. However, this worker is breaking the "Add to Cart" functionality on my side

14 Replies

RetardOP•3y ago

https://stackoverflow.com/questions/74523465/cloudflare-worker-prevents-add-to-cart-from-working-on-first-attempt-wordpress

Stack Overflow

Cloudflare Worker Prevents Add to Cart from Working on First Attemp...

I am currently working on a Cloudflare Worker Script that will restore all pricing information if the user has accesses the pricing mode page, which applies a unique "pricing-mode" ON Coo...

RetardOP•3y ago

I am not sure if the code that I have written is "beautiful" but I have also been told that I can simply use HTMLRewriter instead Then again, I also believe I have solved this issue By using a php redirect on amount log script I guess, can someone please just verify that my Worker Script is written correctly?

Unknown User•3y ago

Message Not Public

RetardOP•3y ago

So all in all, my worker script is breaking my add to cart button. Not sure how to get support here in this discord but I can even tip someone for their time

RetardOP•3y ago

Try a product like this: https://ellasbubbles.com/shop/walk-in-tubs/accessories/4-fold-tempered-glass-shower-screen-for-walk-in-tub-accessories/

Ella's Bubbles

4-Fold Tempered Glass Shower Screen for Walk-In Tubs

This is brand new product just launched by Ella’s Bubbles and is very convenient alternative to regular shower curtains. This is probably the best and most convenient screen option for walk-in tubs found anywhere.

RetardOP•3y ago

Notice that you need to add it to your cart twice If I disable my worker script, this is resolved..

zsmooth•3y ago

Sorry @Spoleto - i had to step away but will take a look at this when I’m back at my computer later

RetardOP•3y ago

Really appreciate that man, I would love to compensate you for your time or leave a review in any manner I’m also still working on this as you can tell I converted my issue from not being to add the main product to cart at all, to needing to click add to cart twice on accessory pages lol I appreciate it @zsmooth Maybe even HTMLRewriter would solve this, either that or I’m thinking somehow disabling the worker from running on button click

Unknown User•3y ago

Message Not Public

zsmooth•3y ago

@Spoleto i can't find an "add to cart" button on https://discord.com/channels/595317990191398933/1044362373563174963/1044390352351678515

RetardOP•3y ago

Here try this outside of discord: https://ellasbubbles.com/walk-in-tubs/accessories/ella-shower-column-kit-for-walk-in-tub-deck-mount-faucets/

Ella's Bubbles

Shower Column Kit for Deck Mounted Walk-In Tub Faucets

Ella Shower Column Kit for Walk-In Tubs features a column that holds a large overhead rain shower and an adjustable slider for the hand shower.

RetardOP•3y ago

Somehow things seem to be working for me, I’ve done absolutely nothing with the worker script 😭😭😭 Do you mind maybe still educating me on a better way to have wrote that script? @zsmooth

zsmooth•3y ago

well I would have used https://developers.cloudflare.com/workers/runtime-apis/html-rewriter/ for sure, just to be safer with the html updating. in your code, if someone were to add an html comment that said

<!-- remove the following before </body>!!! -->

<!-- remove the following before </body>!!! -->

, then your code would break because it would inject the script right there. HTMLRewriter actually parses the HTML and gives you some triggers when to fire to add/remove elements. So you would listen for the body element, then call append() on it which puts content right before the closing tag. So it'd be something like this:

class BodyHandler {
  element(element) {
    element.append('<script>...</script>')
  }
}

// in your function where you inject the script:
const res = await fetch(request);
const newResponse = new HTMLRewriter().on('body', new BodyHandler()).transform(res);

class BodyHandler {
  element(element) {
    element.append('<script>...</script>')
  }
}

// in your function where you inject the script:
const res = await fetch(request);
const newResponse = new HTMLRewriter().on('body', new BodyHandler()).transform(res);

RetardOP•3y ago

And to confirm I can append CSS the same way? Can you merge this with my current code for example? I’m sure I can gamble with it for 2 hours but just to save me the time? Happy Thanksgiving and holidays @zsmooth You’re a good lad! 🤙🏽 Hey @zsmooth, I’m wondering if you can help me merge 2 worker scripts into one and possible touch up my replace <body> code For instance I’d like to apply custom CSS AND apply a cookie in some cases, and I’m not so sure how to combine those with different responses And/or if I can just have 2 async functions as the same worker on the same paths I can tip you for your time as well

Gaming

Programming

Right now I have built a website that