page icon

マイページカスタマイズ(APIリファレンス)


💡
はじめに
  • 本機能は向けの機能となります。 ご利用にあたってはアプリ画面のよりENTERPRISEプランへ切り替え後、 こちらよりご連絡ください。
  • カスタマイズには、「Shopifyの仕様変更」や「アプリの機能アップデート」に伴う保守対応が必要になります。 その際には、都度お知らせいたしますので、ご理解の程お願いいたします。
 

開発に必要な技術


定期購買アプリのマイページはReactフレームワークによるSPA(シングルページアプリケーション)構成で提供されています。
そのため、開発いただくには下記をご理解いただく必要があります。
  • TypeScript
  • Reactフレームワーク
  • Ajax通信の仕組みの理解
  • Nodejsのバージョンは18以上となります。
  • GCPバケットへのファイルアップロード操作
  • yarn(パッケージ管理)
ご対応できる方がいない場合は弊社の構築チームでも対応可能ですので、別途ご相談ください。
 

開発手順


①GCP環境の作成依頼

下記リンクよりお申し込みいただいた後、5営業日を目安に環境手配させていただきます。
※GCP内のルートディレクトリには、下記のようにマイページのコードのBuild結果をアップロードいただく形となります。(下記はアップロード後のファイル構成となります)
 

②開発ソースコードをダウンロード

ベースとなるソースコードはこちらとなります。 ※「Shopifyの仕様変更」や「アプリの機能アップデート」に伴い、随時内容をアップデートさせていただきます。その際にはお知らせいたしますので、ご理解の程お願いいたします。
 

③開発/実装

上記ソースコードをベースに開発をします。
※プレビューについては、ローカル環境では不可となっており、都度④のGCP環境にアップロードの上、ご確認いただく形になります。
 

④GCP環境へのアップロード

  1. 「4.開発ソースコード提供」にある「account.zip」をダウンロードします。
  1. ZIPファイル解凍後、プロジェクト直下で「yarn」コマンドを実行し、nodeモジュールをインストールします。
  1. プロジェクト直下で「yarn build」を実行します。
  1. プロジェクト直下に「build」ディレクトリが出力されますので、配下のファイルを「3.GCP環境の提供」のバケットにアップロードします
    1. ※ドラッグ&ドロップによるファイル更新の場合、ファイルのキャッシュ時間が自動的に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