Support onClick prop, ref on BuyNowButton

[joshbuckley182]

It would be good if we can supply our own onClick prop to be executed before (potentially async and blocking) the default behavior. Another option would be to be able to create a ref to the button, so we can trigger a click event after performing some other task.

Use case:

I need to track click events on a BuyNowButton. What I’m finding though, is the page navigation happens before the event has been sent to the tracking server. This seems like something other users of Hydrogen might also want to do too. (Note: Right now I’m capturing the click in a parent element to trigger the tracking call).

I see a few options here:

1. Create our own TrackableBuyNowButton with a similar implementation to the Hydrogen one. Pro: Easy, Con: Need to ensure we stay in-sync with the Hydrogen one
2. Have an optional onBeforeRedirect (or similar) prop on the BuyNowButton which would be executed and resolved before performing the redirect.
3. Add ref forwarding to the BuyNowButton so we can trigger a click after the tracking call has completed.

Another option would be to track the event using the beacon api, but that’s not compatible with all types of tracking.

[blittle]

Hi @joshbuckley182 this issue is tracking: Shopify/hydrogen#717

[frehner]

Released in v0.25.0

https://github.com/Shopify/hydrogen/releases/tag/%40shopify%2Fhydrogen%400.25.0