テーマ: Next.js＋Shopifyのヘッドレス構成で、shopify-buy（Storefront API用JS SDK）を用いた商品一覧・カート追加まで実装済み。checkoutはwebUrlでShopifyのチェックアウト画面へ遷移。
課題: 1) 途中からShopifyチェックアウトへ遷移した場合に「カートに戻る」ボタンが表示されない。表示方法と遷移先の指定方法を知りたい。2) 購入完了（サンクス）画面の「買い物を続ける」ボタンの表示方法と遷移先の指定方法も知りたい。
最新の提案: 「カートに戻る」ボタンが無い場合は、/cart へのリンク要素をDOMに動的挿入する案。手順は以下。
補足: UI差異と完了画面の様子は添付スクリーンショットが前提資料。
状況: 「カートに戻る」対策の実装案は提示済み。一方、購入完了画面の「買い物を続ける」ボタンの具体的な表示・遷移指定は未回答で、解決は継続中。
NEXT+Shopifyで開発を進めております。
ストアフロントAPIを実行するためにshopify-buyのライブラリを使用して商品一覧取得API、カート追加API(shopify-buyのAdding Line Items)まで実装ができている状態です。
チェックアウト移行は、カート追加API実行時に取得できるwebUrlからShopifyの情報画面に遷移しているのですが、全てShopifyの方でチェックアウトまで進めた場合のカートに戻るボタンが、途中からShopifyの情報画面に遷移した場合には表示されないのですが表示方法と遷移先の指定方法をご教授いただきたいです。
また、購入完了画面の買い物を続けるボタンの表示方法と遷移先の指定方法もご教授いただきたいと思っております。
全てShopifyの方でチェックアウトまで進めた場合
全てShopifyの方でチェックアウトまで進めた場合
購入完了画面
O-KUN 様
お世話になっております。
一案ですが、カートに戻るボタンがないときは以下の要素を作成・挿入すればよいと思います。
[
カートに戻る
](https://〇〇.myshopify.com/cart)
手順としては、
1.上記の要素を作成する。
→createElementでできると思います。
2.「カートに戻るボタン」がないか判定する。
→以下で要素取得できます。
const target = document.getElementsByClassName('step__footer__previous-link')[0];
3.2の要素がないとき、1の要素を親要素に追加する。
→親要素の取得は以下でできます。
const parent = document.getElementsByClassName('step__footer')[0];
要素の追加は以下でできるかと思います。
parent.appendChild(1で作成した要素);
冗長となり恐縮ですが、ご検討いただけますと幸いです。
株式会社フルバランス ドウケ