cart/add.jsした後にチェックアウトページへ移動

Topic summary

JavaScriptのfetchを使ってcart/add.jsでカートに商品を追加した後、自動的にチェックアウトページへ遷移させる方法についての質問。

問題点:

  • 質問者は商品追加後にカートページへ遷移するコードを実装していたが、チェックアウトページへ直接移動させたいと考えていた。

解決策:

  • フルバランスの道家氏が、fetchのレスポンス処理後にdocument.location.href = "/checkout/"を設定するコード例を提示。
  • formDataに商品IDと数量を指定し、cart/add.jsへPOSTリクエストを送信後、.then()内でチェックアウトページへリダイレクトする実装。

結果:

  • 質問者は提示されたコードで問題が解決したことを報告。URLへの直接貼り付けが原因だったと気づき、正しいコード実装で意図通りの動作を実現できた。
Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
$(".linkto").on("click",function() {
    fetch(window.Shopify.routes.root + 'cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
    .then(response => {
      return response.json();
    })
    .then(() => {
      document.location.href = "/cart";
    })
    .catch((error) => {
      console.error('Error:', error);
    });
  });

タイトル通りなのですが、現在、カートへ追加したらカートページへ転送しているのですが、

チェックアウトページへそのまま転送へ進めることは可能でしょうか?

/checkoutだとだめなようで・・

Cheche1 様

はじめまして、フルバランスの道家と申します。

ご質問確認いたしました。

スムーズにカートにいけると便利ですよね

こちら、以下のコードをdevtoolsのconsoleから試したところ、
カートに商品を追加した状態で、checkoutページに遷移することができました。

お手数ですが、再度お試しいただけますと幸いです。

let formData = {
 'items': [{
  'id': 42071731110077, // 変更してください
  'quantity': 1
  }]
};

fetch(window.Shopify.routes.root + 'cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
.then(response => {
  return response.json();
})
.then(() => {
    document.location.href = "/checkout";
})
.catch((error) => {
  console.error('Error:', error);
});

なにかヒントになれば嬉しいです。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

また、なにかご質問があればいつでもご連絡ください。

フルバランス 道家

すいません!ありがとうございました。URLに直接貼り付けてたのがダメだったんですね。。
コードを通したらちゃんとcheckoutへ進みました。ありがとうございます!