KTruong008
Repos
13
Followers
24
Following
26

Events

issue comment
Fetch not working for unauthenticated recommendations AJAX API

So, the suggestion of opening up access to the storefront API and its productRecommendations field popped up in a weekly discord AMA, and while the idea is awesome I'm guessing, if it's even going to be a thing, it's not going to be available to devs for at least a few months.

In the meantime, the only alternative I see is to build a proxy that calls the product recommendation API on the extension's behalf, but this also creates issues:

  1. It requires building non-Shopify infrastructure for which the extension would then depend on, which is far less safe/stable/fast than relying 100% on existing Shopify infrastructure.

  2. Calls to the product recommendation API through the proxy are still blocked by password-protected stores. All dev stores are password-protected and it can't be turned off so this makes developing any product-recommendation-related feature difficult. It may work it prod but it's a black box in dev–a recipe for disaster.

  3. Testing in prod still requires a store that has access to the checkout editor. The only way I know to do this is to become a Shopify Plus partner, or work with a Shopify Plus client to get access to a test plus store.

Becoming a partner seems heavy-handed for such a problem and will likely result in rejection, and working with a Shopify Plus client isn't always an accessible option for newer apps, plus, they could always just change their mind or say no, then we'd be left without a test Plus store again. There's also the question of whether a test Plus store can even be password-disabled, or else we'd run into the same problem with dev stores.

Maybe a test Plus store isn't required but it wouldn't hurt either for testing Plus-only features like checkout UI extensions that make use of the checkout editor. I guess the main problem here is that there needs to be some sort of dev/test store with access to the checkout editor and can be password disabled.

Alternatively, we could just not use the recommendations API, but I think this would be a loss for merchants as it's a powerful feature that can both decrease clicks needed to onboard and increase sales.

Any thoughts as to what we should do moving forward? Apply for Plus partnership? Continue with the tools currently available? Wait? @sjanczy2

Created at 1 day ago
closed issue
New protected customer requirements blocking access to dev stores and app using 2022-07 API version

Please list the package(s) involved in the issue, and include the version you are using

@shopify/checkout-ui-extensions-react v0.18.1 @shopify/checkout-ui-extensions-react v0.20.0

Describe the bug

When accessing a checkout UI extension in prod or within a dev store my app cannot render. The console showed an error reading "TypeError: Cannot read properties of undefined (reading 'customer'). I haven't changed any code for the past couple days and it was working fine before, but today this error appeared.

It seemed to be due to the new protected customer data requirements, so I upgraded my extension package from 0.18.1 to 0.20.0 and a similar error occurred:

"Uncaught ScopeNotGrantedError: Using buyer identity requires having personal customer data permissions granted to your app."

My app was installed with access to read_customer and read_shipping, and is using API version 2022-07, but the extension seems to be enforcing requirements meant for API version 2022-10:

https://shopify.dev/apps/store/data-protection/protected-customer-data

I've since requested access to the protected customer scopes in my partner dashboard but the error still persists, regardless of whether I use 2022-07 or 2022-10 API versions. It's concerning because migrating from 2022-07 to 2022-10 requires app updates and approval of the protected data request, and GA is 2 days from now so I can't provide merchants access to these features despite the docs saying otherwise.

Steps to reproduce the behavior:

  1. Create dev store with checkout extensibility enabled
  2. Create checkout ui extension that makes use of useCustomer() or useShippingAddress() extension hooks
  3. Render the extension using npm run dev

Expected behavior

The app should render as usual, having access to both useCustomer and useShippingAddress extension hooks and their resulting resources.

Screenshots

Created at 3 days ago
issue comment
New protected customer requirements blocking access to dev stores and app using 2022-07 API version

Looks like everything's working as intended then. Maybe just needs some updates to the documentation to include the part about checkout UI extensions also requiring access to make it more clear.

Created at 4 days ago
opened issue
New protected customer requirements blocking access to dev stores and app using 2022-07 API version

Please list the package(s) involved in the issue, and include the version you are using

@shopify/checkout-ui-extensions-react v0.18.1 @shopify/checkout-ui-extensions-react v0.20.0

Describe the bug

When accessing a checkout UI extension in prod or within a dev store my app cannot render. The console showed an error reading "TypeError: Cannot read properties of undefined (reading 'customer'). I haven't changed any code for the past couple days and it was working fine before, but today this error appeared.

It seemed to be due to the new protected customer data requirements, so I upgraded my extension package from 0.18.1 to 0.20.0 and a similar error occurred:

"Uncaught ScopeNotGrantedError: Using buyer identity requires having personal customer data permissions granted to your app."

My app was installed with access to read_customer and read_shipping, and is using API version 2022-07, but the extension seems to be enforcing requirements meant for API version 2022-10:

https://shopify.dev/apps/store/data-protection/protected-customer-data

I've since requested access to the protected customer scopes in my partner dashboard but the error still persists, regardless of whether I use 2022-07 or 2022-10 API versions. It's concerning because migrating from 2022-07 to 2022-10 requires app updates and approval of the protected data request, and GA is 2 days from now so I can't provide merchants access to these features despite the docs saying otherwise.

Steps to reproduce the behavior:

  1. Create dev store with checkout extensibility enabled
  2. Create checkout ui extension that makes use of useCustomer() or useShippingAddress() extension hooks
  3. Render the extension using npm run dev

Expected behavior

The app should render as usual, having access to both useCustomer and useShippingAddress extension hooks and their resulting resources.

Screenshots

Created at 4 days ago
Created at 1 week ago
Created at 1 week ago
Created at 1 week ago
issue comment
Cart state does not persist after using useApplyCartLinesChange or navigating checkout steps

When I go through the checkout steps and use useApplyCartLinesChange, I'm blocked from paying and completing checkout:

I also have block_progress set to false.

Just wanted to confirm whether this is the same issue or whether I should create a separate issue for this.

Created at 2 weeks ago
started
Created at 2 weeks ago
Created at 2 weeks ago
closed issue
[polaris.shopify.com] Make it possible to explore props interactively, on the Polaris website

Hello,

I noticed with the new docs that info that used to be there is no longer there and it makes it more difficult to use.

Specifically, with the Stack component there used to be explanations for its spacing, alignment, and distribution props along with their available values and a a brief description of what did what.

Without those descriptions it's hard to know whether I should use equalSpacing or fillEvenly or fill without manually trying each value myself, whereas before those values were clearly demonstrated within the docs. I find it much easier to see each variations within the demo than having to guess or trial and error every time.

If possible could we add those explanations/demos back?

https://polaris.shopify.com/components/stack

Created at 2 weeks ago
opened issue
Fetch not working for unauthenticated recommendations AJAX API

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/checkout-ui-extensions-react": "^0.18.1", "@shopify/cli": "3.8.0",

Describe the bug

When using fetch within the checkout ui extension the console returns an error about CORS

Access to fetch at 'https://<shopdomain>/recommendations/products.json?product_id=7800316821723&intent=related' from origin 'https://cdn.shopify.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Adding the 'no-cors' to the fetch request generates another error.

I've also updated my extension toml to allow network access and have requested and approved access from the partner dashboard for my app. I'm following the docs for using the AJAX API and product recommendations here:

https://shopify.dev/api/ajax https://shopify.dev/api/ajax/reference/product-recommendations#get-locale-recommendations-products

Steps to reproduce the behavior:

  1. Create extension
  2. Call the recommendation API within extension, using a useEffect hook

useEffect(() => { const recommendationUrl = https://checkout-sales-local.myshopify.com/recommendations/products.json?product_id=${7800316821723}&intent=related`;

fetch(recommendationUrl, {
  method: 'GET',
})
  .then((response) => response.json())
  .then((data) => {
    console.log('data: ', data);
  });

}, []);`

Expected behavior

The API call will return the recommendations

Created at 2 weeks ago
Created at 2 weeks ago
Created at 2 weeks ago
Created at 3 weeks ago
Created at 3 weeks ago
Created at 3 weeks ago
Created at 4 weeks ago
issue comment
JSX type errors caused by multiple versions of `@types/react`

Still getting this issue with CLI. 3.0 when trying to use the Banner component:

Unreachable code detected.ts(7027) 'Banner' cannot be used as a JSX component.

Created at 4 weeks ago
issue comment
[polaris.shopify.com] Sidebar navigation feedback

Thanks for providing context, it make a lot more sense now!

The new options sound great too, I'm looking forward to using them.

Also, if it's worth anything, I've been using Polaris since late 2019 and I still can't remember the name of most components :sweat_smile:. I feel towards the Polaris docs as I feel towards a cherished book–I remember the jist of certain passages but I find recall of them easier when chunked as parts of the narrative arc rather than chapter numbers.

Created at 1 month ago
Created at 1 month ago
started
Created at 1 month ago
issue comment
[polaris.shopify.com] Sidebar navigation feedback

I was just browsing the checkout ui component docs and I really liked how they laid out their components. It's similar to what I was thinking and I thought I'd just reference it here:

Created at 1 month ago
opened issue
[polaris.shopify.com] Sidebar navigation feedback

Hello Polaris team,

The new docs shines in many ways but there's one thing I miss from the old docs, and that's the ability to quickly view a group of components and see what was available for my use-case.

Right now, the sidebar is ordered alphabetically. This is tedious to read through and doesn't help as much as descriptive categories like "Actions" or "Structure".

The main layout has such categories but the images make this cumbersome to view. If I wanted to look at "Behaviour" components, or even see that such a category exists, I'd have to scroll all the way down, whereas before, I already had a birdseye view of each category from the sidebar and what they included without scrolling.

If possible it'd be great to see the sidebar organized into collapsible sections in such a way that one could see every (or most) categories with a single glance (and without scrolling). I find it much easier to navigate by category first, then individual components within the category, rather than an alphabetical list.

Thank you, Kyle

Created at 1 month ago
opened issue
[polaris.shopify.com] Props table feedback

Hello,

I noticed with the new docs that info that used to be there is no longer there and it makes it more difficult to use.

Specifically, with the Stack component there used to be explanations for its spacing, alignment, and distribution props along with their available values and a a brief description of what did what.

Without those descriptions it's hard to know whether I should use equalSpacing or fillEvenly or fill without manually trying each value myself, whereas before those values were clearly demonstrated within the docs. I find it much easier to see each variations within the demo than having to guess or trial and error every time.

If possible could we add those explanations/demos back?

https://polaris.shopify.com/components/stack

Created at 1 month ago
Created at 1 month ago
Created at 1 month ago
Created at 1 month ago
issue comment
Random performance, sometimes works fine, most of the time slow and tunnel issues

Just had similar experiences today.

Past couple days it worked fine but all of today it takes over a minute to load the page, sometimes timing out. Switched back to ngrok and page loaded instantly again. Only problem is I can only have 1 session open with ngrok.

Created at 1 month ago