マイページカスタマイズ（APIリファレンス）

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

開発に必要な技術

定期購買アプリのマイページはReactフレームワークによるSPA（シングルページアプリケーション）構成で提供されています。

そのため、開発いただくには下記をご理解いただく必要があります。

TypeScript
Reactフレームワーク
Ajax通信の仕組みの理解
Nodejsのバージョンは18以上となります。
GCPバケットへのファイルアップロード操作
Gsuiteツール（必要に応じて）
yarn（パッケージ管理）

ご対応できる方がいない場合は弊社の構築チームでも対応可能ですので、別途ご相談ください。

開発手順

①GCP環境の作成依頼

下記リンクよりお申し込みいただいた後、5営業日を目安に環境手配させていただきます。

https://huckleberry-inc.channel.io/support-bots/107495

※GCP内のルートディレクトリには、下記のようにマイページのコードのBuild結果をアップロードいただく形となります。（下記はアップロード後のファイル構成となります）

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

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

account.zip

③開発/実装

上記ソースコードをベースに開発をします。

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

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

「４．開発ソースコード提供」にある「account.zip」をダウンロードします。
ZIPファイル解凍後、プロジェクト直下で「yarn」コマンドを実行し、nodeモジュールをインストールします。
プロジェクト直下で「yarn build」を実行します。
プロジェクト直下に「build」ディレクトリが出力されますので、配下のファイルを「３．GCP環境の提供」のバケットにアップロードします

※ドラッグ＆ドロップによるファイル更新の場合、ファイルのキャッシュ時間が自動的に1時間と設定されるため、反映まで1時間かかります。これを避ける場合は、お手数ですがgstuilを利用してコマンドベースでアップロードください。

※アップロード時のコマンドは下記となります。詳しいインストールや操作方法はこちらをご参照ください。

yarn build && gsutil cp -r build/* gs://{{バケットのURL}} && gsutil setmeta -r -h 'Cache-Control:no-store' gs://{{バケットのURL}}

// 例） test.myshopify-com.mypage-st.huckleberry-inc.com の場合
yarn build && gsutil cp -r build/* gs://test.myshopify-com.mypage-st.huckleberry-inc.com && gsutil setmeta -r -h 'Cache-Control:no-store' gs://test.myshopify-com.mypage-st.huckleberry-inc.com

⑤本番環境への反映

本番環境へ反映させるにはテーマファイルの編集が必要となります。

１）テーマ内のhuckleberry-subscription-customer-portal.liquidのファイルを開く

２）下記の通りコードを編集する。

（変更前）

<div id="huckleberry-subscription-customer-portal-wrap">

（変更後）

<div id="huckleberry-subscription-customer-portal-wrap-experimental">

上記設定後、マイページにアクセスするとカスタマイズされたページが表示されます。

※テーマによっては、huckleberry-subscription-customer-portal.liquid がない場合もございます。その場合は、インストール画面の下記部分に表示されているファイルに上記コードを追加ください。

よくある質問

Q. プレビューでの動作確認は可能ですか？

恐れ入りますが、プレビューでの動作確認機能は現在ございません。つきましては、お手数ですが、都度GCPにアップロードいただく形で動作確認をお願いいたします。

目次