マイページカスタマイズ（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結果をアップロードいただく形となります。（下記はアップロード後のファイル構成となります）

https://cf.channel.io/document/spaces/5445/articles/27069/revisions/49392/usermedia/66d04c6f4c9cc0bdb5bb

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

ベースとなるソースコードはこちらとなります。 ※「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 がない場合もございます。その場合は、インストール画面の下記部分に表示されているファイルに上記コードを追加ください。

https://cf.channel.io/document/spaces/5445/articles/27069/revisions/49386/usermedia/66d04a54566dba8546a6

よくある質問

定期購買アプリのマイページに遷移するも、その上部にShopifyマイページが常時表示されてしまう。

→こちらは通常の挙動ですので、ご安心ください。デフォルトのようにShopifyマイページが表示されないようにするためには、下記編集が必要になります。

① function_get_query_value_by_key.liquidへのスニペット追加

{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | replace:'\\\\/','/' | replace:'%20',' ' | replace:'\\\\u0026','&' -%}
{%- assign get_query_value_by_key = '' -%}
{% assign query = pageUrl | split: "?" %}
{% if query.size == 2 %}
  {% if query[1] contains "membership-card" %}
    {% assign parameter = query[1] | split: "=" %}
    {% assign get_query_value_by_key = parameter[1] %}
  {% endif %}
{% endif %}
{%- if pageUrl contains "?" -%}
  {%- assign pageQuerystring = pageUrl | split:'?' | last | replace:'=','&' -%}
  {%- assign tmp = pageQuerystring | split:'&' -%}
  {%- for kv in tmp -%}
      {%- if kv == key -%}
          {%- assign get_query_value_by_key = tmp[forloop.index] -%}
          {%- break -%}
      {%- endif -%}
  {%- endfor -%}
{%- endif -%}

② アカウントページのliquidに下記追加

hbSubscriptionPathの値がある場合に該当のエリアを表示しないよう分岐を追加。

（定期購買マイページ表示時に、該当