アプリ開発においてのカスタムアプリのストアフロントAPIの実装について

[O-KUN]

NEXT+Shopifyで開発を進めております。
ストアフロントAPIを実行するためにshopify-buyのライブラリを使用して商品一覧取得API、カート追加API(shopify-buyのAdding Line Items)まで実装ができている状態です。

チェックアウト移行は、カート追加API実行時に取得できるwebUrlからShopifyの情報画面に遷移しているのですが、全てShopifyの方でチェックアウトまで進めた場合のカートに戻るボタンが、途中からShopifyの情報画面に遷移した場合には表示されないのですが表示方法と遷移先の指定方法をご教授いただきたいです。

また、購入完了画面の買い物を続けるボタンの表示方法と遷移先の指定方法もご教授いただきたいと思っております。

全てShopifyの方でチェックアウトまで進めた場合

全てShopifyの方でチェックアウトまで進めた場合

購入完了画面

 

[株式会社フルバランス]

O-KUN　様

お世話になっております。

一案ですが、カートに戻るボタンがないときは以下の要素を作成・挿入すればよいと思います。

<a class="step__footer__previous-link" href="https://〇〇.myshopify.com/cart">
　　<svg focusable="false" aria-hidden="true" class="icon-svg icon-svg--color-accent icon-svg--size-10 previous-link__icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
　　　　<path d="M8 1L7 0 3 4 2 5l1 1 4 4 1-1-4-4"></path>
　　</svg>
　　<span class="step__footer__previous-link-content">カートに戻る</span>
</a>

手順としては、

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で作成した要素);

冗長となり恐縮ですが、ご検討いただけますと幸いです。

株式会社フルバランス　ドウケ