マイページカスタマイズ(APIリファレンス)
はじめに
- 本機能は向けの機能となります。 ご利用にあたってはアプリ画面のよりENTERPRISEプランへ切り替え後、 こちらよりご連絡ください。
- カスタマイズには、「Shopifyの仕様変更」や「アプリの機能アップデート」に伴う保守対応が必要になります。 その際には、都度お知らせいたしますので、ご理解の程お願いいたします。
開発に必要な技術
定期購買アプリのマイページはReactフレームワークによるSPA(シングルページアプリケーション)構成で提供されています。
そのため、開発いただくには下記をご理解いただく必要があります。
- TypeScript
- Reactフレームワーク
- Ajax通信の仕組みの理解
- Nodejsのバージョンは18以上となります。
- GCPバケットへのファイルアップロード操作
- Gsuiteツール(必要に応じて)
- yarn(パッケージ管理)
ご対応できる方がいない場合は弊社の構築チームでも対応可能ですので、別途ご相談ください。
開発手順
①GCP環境の作成依頼
下記リンクよりお申し込みいただいた後、5営業日を目安に環境手配させていただきます。
※GCP内のルートディレクトリには、下記のようにマイページのコードのBuild結果をアップロードいただく形となります。(下記はアップロード後のファイル構成となります)
②開発ソースコードをダウンロード
ベースとなるソースコードはこちらとなります。
※「Shopifyの仕様変更」や「アプリの機能アップデート」に伴い、随時内容をアップデートさせていただきます。その際にはお知らせいたしますので、ご理解の程お願いいたします。
③開発/実装
上記ソースコードをベースに開発をします。
※プレビューについては、ローカル環境では不可となっており、都度④のGCP環境にアップロードの上、ご確認いただく形になります。
④GCP環境へのアップロード
- 「4.開発ソースコード提供」にある「account.zip」をダウンロードします。
- ZIPファイル解凍後、プロジェクト直下で「yarn」コマンドを実行し、nodeモジュールをインストールします。
- プロジェクト直下で「yarn build」を実行します。
- プロジェクト直下に「build」ディレクトリが出力されますので、配下のファイルを「3.GCP環境の提供」のバケットにアップロードします
※ドラッグ&ドロップによるファイル更新の場合、ファイルのキャッシュ時間が自動的に1時間と設定されるため、反映まで1時間かかります。これを避ける場合は、お手数ですがgstuilを利用してコマンドベースでアップロードください。
⑤本番環境への反映
本番環境へ反映させるにはテーマファイルの編集が必要となります。
1)テーマ内ののファイルを開く
2)下記の通りコードを編集する。
(変更前)
(変更後)
上記設定後、マイページにアクセスするとカスタマイズされたページが表示されます。
※テーマによっては、 がない場合もございます。その場合は、インストール画面の下記部分に表示されているファイルに上記コードを追加ください。
よくある質問
定期購買アプリのマイページに遷移するも、その上部にShopifyマイページが常時表示されてしまう。
→こちらは通常の挙動ですので、ご安心ください。デフォルトのようにShopifyマイページが表示されないようにするためには、下記編集が必要になります。
① function_get_query_value_by_key.liquidへのスニペット追加
② アカウントページのliquidに下記追加
hbSubscriptionPathの値がある場合に該当のエリアを表示しないよう分岐を追加。
(定期購買マイページ表示時に、該当
共通仕様2024/9/13 1:042024/9/13 1:04トークン情報取得2024/9/13 1:042024/9/13 1:35商品追加2024/9/13 1:042024/9/13 1:04商品変更2024/9/13 1:042024/9/13 1:04商品一括変更2024/9/13 1:042024/9/13 1:04商品削除2024/9/13 1:042024/9/13 1:04商品数量変更2024/9/13 1:042024/9/13 1:04契約周期(プラン)変更2024/9/13 1:042024/9/13 1:04商品販売可能確認2024/9/13 1:042024/9/13 1:04変更可能商品取得2024/9/13 1:042024/9/13 1:04解約理由取得2024/9/13 1:042024/9/13 1:04決済情報取得2024/9/13 1:042024/9/13 1:04プラングループ取得2024/9/13 1:042024/9/13 1:04プラングループ取得(商品別)2024/9/13 1:042024/9/13 1:04レコメンド商品取得2024/9/13 1:042024/9/13 1:04定期購買契約一覧取得2024/9/13 1:042024/9/13 1:04定期購買契約詳細取得2024/9/13 1:042024/9/13 1:04定期購買契約内の契約商品に紐づくプラン取得2024/9/13 1:042024/9/13 1:04今すぐ注文2024/9/13 1:042024/9/13 1:04決済方法の更新2024/9/13 1:042024/9/13 1:04次回決済のスキップ2024/9/13 1:042024/9/13 1:04次回決済のスキップ取消2024/9/13 1:042024/9/13 1:04配送先住所変更2024/9/13 1:042024/9/13 1:04お届け日変更2024/9/13 1:042024/9/13 1:04契約ステータス変更2024/9/13 1:042024/9/13 1:04マイページクーポン適用2024/9/13 1:042024/10/1 1:39マイページクーポン削除2024/10/1 1:372024/10/1 1:38定期契約注文メモ更新2024/9/13 1:042024/9/13 1:04BOX情報取得2024/9/13 1:042024/9/13 1:04BOX定期購買の商品の追加・更新・削除2024/9/13 1:042024/9/13 1:04商品追加(1顧客1契約ストア用)2024/9/13 1:042024/9/13 1:04