Checkout UI / Need help Using the Target parameter in the useBuyerJourneyIntercept function

[LuckyLuc]

Hi, I'm developing a Checkout UI extension and I'm now trying to implement a "useBuyerJourneyIntercept" function to prevent users from continuing if they didn't finish completing a form.

So I need help in placing the error message at the right spot and I didn't find any documention on the target parameter and the only example I found is using some peudo jQuery kinda selector (see screenshot)

Is there any documentation on using that selector or a quick tutorial

Greatly appreciated!

 

[Catalin_G]

Hello @LuckyLuc ! did you ever managed to find a solution for this? Maybe @Liam can help us? Thanks

[JohnGeiger]

I am also looking for some examples, the code given in the example is extreamly specific and does not appear to be based on the the IDs or Classes around the existing fields.  I have a custom checkbox at the bottom of the payments page and it will only show the error at the top of the page. None of the targets from other areas like 

 target:
      "purchase.checkout.actions.render-before",
},

work either.

This is so badly documented to be expecting all of the devs out here to "side-grade" to checkout ui when it is clearly not ready for primetime.  Can't call it an upgrade when massive amounts of capabilities have been stripped away.

[Catalin_G]

@JohnGeigerI am not sure if this will help you, but what I ended up doing, is to make use of useBuyerJourneyIntercept and then set a state for an error message, something like this:

useBuyerJourneyIntercept((canBlockProgress) => {
      if (canBlockProgress && someConditionThatYouNeed) {
        return {
          behavior: 'block',
          reason: 'User can't perform this action (or some other reason hat you want)',
          perform: () => {
            setShowError(true);
          }
        };
      } else {
        return {
          behavior: 'allow',
          perform: () => {
            setShowError(false);
          },
        };
      }
    },
);

[khm1985]

@LuckyLuc take a look here for the supported targets in checkout.

https://shopify.dev/docs/api/functions/reference/cart-checkout-validation/graphql#supported-checkout...