概要
APIリファレンス
<aside> 💡
はじめに
定期購買アプリのマイページはReactフレームワークによるSPA（シングルページアプリケーション）構成で提供されています。
そのため、開発いただくには下記をご理解いただく必要があります。
ご対応できる方がいない場合は弊社の構築チームでも対応可能ですので、別途ご相談ください。
下記リンクよりお申し込みいただいた後、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の仕様変更」や「アプリの機能アップデート」に伴い、随時内容をアップデートさせていただきます。その際にはお知らせいたしますので、ご理解の程お願いいたします。
上記ソースコードをベースに開発をします。
※プレビューについては、ローカル環境では不可となっており、都度④の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マイページが表示されないようにするためには、下記編集が必要になります。
① 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の値がある場合に該当のエリアを表示しないよう分岐を追加。
（定期購買マイページ表示時に、該当