[Bug]: Cart API returns HTML instead of JSON

[wiebekaai]

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme

Expected behavior

1. Send cart add request with Accept: application/json header
2. Get JSON cart object and status 200

Actual behavior

1. Send cart add request with Accept: application/json header
2. Status 302 and returns HTML

Verbose output

Verbose output does not show output related to /cart/add

Reproduction steps

1. Start shopify theme dev
2. Open local `http://127.0.0.1:9292/
3. Add product to cart (see example code below)
4. See network tab (our other code throws exception because it expects JSON)

const form = event.target;

        form.toggleAttribute('data-loading', true);

        errors.textContent = '';
        errors.toggleAttribute('data-active', false);

        const formData = new FormData(form);

        formData.append('sections', this.hasAttribute('data-main-cart') ? ['main-cart'] : ['cart-drawer']);
        formData.append('sections_url', window.location.pathname);

        await fetch(routes.cart_add_url, {
          method: 'POST',
          body: formData,
          headers: {
            'X-Requested-With': 'XMLHttpRequest',
            Accept: 'application/json',
          },
        })
          .then((r) => r.json())
          .then((r) => {
            if (r.errors) {
              errors.textContent = r.errors;
              errors.toggleAttribute('data-active', true);
            } else {
              publish('cartUpdate', r);
            }
          });

Operating System

MacOS 14.6.1 (23G93)

Shopify CLI version (check your project's package.json if you're not sure)

@shopify/cli/3.68.0 darwin-arm64 node-v22.6.0

Shell

zsh

Node version (run node -v if you're not sure)

v22.6.0

What language and version are you using in your application?

No response

[wiebekaai]

Update: it does work with appending .js to the URL. But I'd rather use the URL directly returned from routes.cart_add_url.

[karreiro]

👋 Hey @wiebekaai,

Thank you for reporting this! The #4570 fix also covers the use case reported here, as it targets the /cart/... prefix (and it has worked locally for me on Dawn).

But to be sure, can you test it in your project with the nightly version that includes this patch? 0.0.0-nightly-20241003194158.

Thank you!

[wiebekaai]

@karreiro thanks for the quick response. I installed it w/ npm i -g @shopify/[email protected] and it gave exactly the same results unfortunately.

[karreiro]

Thank you for the feedback, @wiebekaai. I've retried the following JavaScript in the 3.68.1 version (it's pretty much like the one you linked the description, without handling the errors variable), and the /cart/add has responded as expected, as we may notice in the GIF below.

If you're still experiencing this issue in the most recent release, please feel free to re-open this issue with --verbose output, so we may debug if the requests in your store are having an unexpected behavior at the platform level. However, the 3.68.1 seems to fix the issue for /cart/add endpoints as we may noticed below.

form.toggleAttribute('data-loading', true);

const formData = new FormData(form);

formData.append('sections', form.hasAttribute('data-main-cart') ? ['main-cart'] : ['cart-drawer']);
formData.append('sections_url', window.location.pathname);

await fetch(routes.cart_add_url, {
  method: 'POST',
  body: formData,
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    Accept: 'application/json',
  },
})
  .then((r) => {
    r.json()
  })
  .then((r) => {
    console.log(r)
    publish('cartUpdate', r);
  });

Thanks again for reporting!