FROM CACHE - jp_header

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

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

 

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

 

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

 

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

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

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

途中からShopifyの情報画面に遷移した場合.png

購入完了画面

購入完了画面.png

1件の返信1

株式会社フルバランス
Shopify Partner
1508 542 675

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

 

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

 

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

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス