Passing Data from theme app Extension to checkout UI Extension

Shopify Apps
1

Hello,

I have an application that has both a Theme extension and Checkout UI Extension. I would like to pass some data from the theme extension to the checkout extension.
My first thought was to use the localStorage/sessionStorage, but it seems these are not accessible from within the checkout extension. Any other way to pass the data?

Thank you,

2 Likes
2

Hi @kamsam . I’m facing the same issue, did you find a way to pass data between the two?

3

Hi @plgr

No, still haven’t found a solution. Please let me know if you do find something

Thanks,

4

Hi @kamsam and @plgr . Any idea?

5

No, and please let me know if you do find one

1 Like
6

Hi @kamsam and @plgr . I found a solution. U can add “attributes” to your cart.

My theme app:

const setCustomEmail = async (email) => {
  const formData = new FormData();
  formData.append("custom_email", email);

  await fetch("/cart/update.js", {
    method: "POST",
    body: formData
  });
};

Then in my Checkout UI extension, I use:

const { cost, buyerIdentity, shippingAddress, attributes, settings } = useApi();

U need to check “attributes” here. Be careful with testing it locally. When u go to your checkout UI extension go back to the page where your theme extension is. And then go back to the checkout page. My case:

  1. run dev server;
  2. go to “…/extensions/dev-console”;
  3. go back to the cart page (here is my theme extension);
  4. press the checkout button;
  5. be proud of yourself
3 Likes
7

Thanks @Unisol1020

This works! Had to do some minor adjustments, but the idea works.

One thing to note, this doesn’t work if you use the “buy it now” button. Any idea?

1 Like
8

that would be because when you use Buy Now button you are bypassing the cart and cart attributes and create an instanct checkout session. So, therefore your POST never gets triggered.

Hope this makes sense

1 Like
9

Any idea how we can fix it. Like, is there any alternative we can pass data in cart attribute if user go with Buy Now instead of adding product into cart.

As I can check when user go directly to checkout page with Buy Now button, still the products got added in the cart. Because when we go back to the site we can see the product is present in the cart. It simply means that the cart is updating in both the cases - Add to cart and Buy Now.

Now the question is, can’t we use cart update event to add cart attributes ?

10

I never tried using “cart update event”, but it sounds like it might work. Did you try it out? Or did you manage to find an alternative solution?

Thanks

11

This will now be supported on all stores from September the 15th. More info here:
https://shopify.dev/changelog/developer-preview-accelerated-checkout-buttons-on-storefront-now-support-shopify-functions-bundles-and-have-improved-performance