カスタムストアフロント作成

​

カスタムストアフロントとは？

​

活用例

• クーポンをポップアップで表示させるのではなく、「クーポン一覧画面」として別ページで用意したい場合
• ポップアップ表示デザインを大幅に変更したい場合
• Shopifyと外部サービスをつなぎこみを行っており、外部サービス側でクーポン一覧画面を表示したい場合

​

注意点

• コードに関する質問に関しては、テーマによって、詳細が異なるため回答が難しいです
• 有償での対応となります

​

エンジニア向け実装ガイド

​

概要

​

メタフィールド情報

• namespace: discount-deck
• key: discount-code-list (全Extension共通)
• type: json

​

圧縮データ例(メタフィールドに入っている実際の値)

{
  "c": "H4sIAAAAAAAAA6WSzW6DMBCEXyXyGaq1FwL4lqTKoZemooeqVQ8WsailxKAAVaMo..."
}

​

技術要件

​

必須ライブラリ

​

事前準備: npm導入（React/TypeScript環境）

npm install pako
npm install --save-dev @types/pako

import * as pako from 'pako';

​

データ変換フロー

​

フロントエンド実装の流れ

1. メタフィールドから圧縮データを取得
2. Base64デコード + gzip展開
3. 短縮形データ（JSON）を取得
4. 開始前・終了後のクーポンを除いて表示（下の「独自実装で必要な処理」を参照）

​

各段階のデータ形式

​

1. 圧縮データ（メタフィールドに保存されている形式）

{
  "c": "H4sIAAAAAAAAA6WSzW6DMBCEXyXyGaq1FwL4lqTKoZemooeqVQ8WsailxKAAVaMo..."
}

​

2. 短縮形データ（gzip展開後）

​

独自実装で必要な処理

​

開始前・終了後のクーポンを表示しない（必須）

• 開始日時 sa が現在の日時以前
• 終了日時 ea が null（期限なし）、または現在の日時以降

// data は gzip 展開後の JSON（短縮キーのまま）
const now = Date.now();
const visibleDiscounts = data.d.filter((discount) =>
  new Date(discount.sa).getTime() <= now &&
  (!discount.ea || new Date(discount.ea).getTime() >= now)
);

​

取得するときの注意

• テーマでは Liquid の customer.metafields.discount-deck.discount-code-list、マイページの拡張では Customer Account API で読み取れます。アプリブロックも同じ方法で読み取っています
• ログインしていないお客様のクーポンは取得できません。アプリブロックでは、ログインを促す案内を表示しています
• メタフィールドがない場合や、絞り込んだ結果が0件の場合は、「利用可能なクーポンがありません」のような表示をご用意ください

​

参考情報

​

短縮キーマッピング

​

タイプマッピング