[ShopifyApp]注文情報から商品バリエーション毎の売上個数と売上額をリスト化・最終的にはLiquidで「売れ筋商品ランキング」セクション化を目指す💎　Remixでアプリ作成 #11

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

ShopifyAPIを使ったアプリで注文情報を取得してみる練習。注文情報から商品のバリエーション毎に合計の売上数と売上高をまとめて一覧で表示する。期間で絞ったり、数量＆売上をそれぞれ数字が高い順、低い順で並べ替えできたりページネーションをつけられるようになります！

既存のレポート分析の画面があるのでアプリは必要ないのですが、開発の練習にはなリますよ＾＾

🐝今回のゴール

#shopifyアプリ開発#今日の積み木

商品の売れ筋ランキングのアプリに向けて
まずは管理画面から。

注文情報を取得して
バリエーションごとに一覧化。
数量と売上額は並べ替えできる。
期間も絞れる♪

次はliquidに埋め込み pic.twitter.com/4GRDymqPcB

— まりん@Shopify専門エンジニア🇦🇺 (@crowd37cord) November 5, 2024

👉それぞれの機能の特徴

1. ソート機能

• 数量と売上額で並び替え可能

• クリックごとに昇順/降順を切り替え

• ソート状態を視覚的に表示（▲▼）

1. ページネーション機能

• URLパラメータでページ管理

• 1ページ20件ずつ表示

• 前/次ページボタンの表示制御

• 現在の表示件数情報の提供

1. 日付フィルター機能

• 期間を柔軟に指定可能

• クイックフィルターボタン（7/30/90日）

• カスタム期間の指定

• フィルタークリア機能

1. データテーブル表示

• Shopify Polaris UIの使用

• 数値の日本語フォーマット

• 合計行の表示

• レスポンシブなデザイン

これらの機能は相互に連携していて、例えば日付フィルターを変更するとページネーションがリセットされ、新しいデータに対してソートが適用される。

🐝実装手順

🔸事前準備　パッケージインストール

下記ご参照ください

まりん | Shopifyフロントエンジニア+SNSマーケティング｜note

✅Step1 .envファイル作成

SHOPIFY_API_KEY=あなたのAPIキー
SHOPIFY_API_PASSWORD=あなたのAPIトークン
SHOPIFY_STORE_NAME=ストア名

（例）
SHOPIFY_API_KEY=ccw33gxxxxxxxxxxx
SHOPIFY_API_PASSWORD=shpat_xxxxxxxxxx
SHOPIFY_STORE_NAME=abcshop
 (abcshop.myshopify.comの場合、.myshopify.comの前のところ)

---

【ご購入前のご注意】
※返金&サポート&コメント返信はしておりません。メンバーシップの「スタンダードプラン」でのみ対応しています。（ライトではコメント不可）
※コードのみのご紹介で解説などはしておりません。
※2024.11時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりうまく動作しない可能性はあるかもしれません。

---

✅Step2  api._index.jsxを下記のコードに差し替え

🔸まずは全体のコードはこちら