HubSpot モジュール：動的な商品カタログを構築する「製品リスティングモジュール」の解説

HubSpotのCRM内で管理している製品情報を、そのままWebサイトのコンテンツとして活用できるのが「製品リスティングモジュール」です。データの一元管理とサイト表示の自動化を同時に実現します。

1. 目的

本モジュールの主な目的は、「CRMの製品データベースをサイトへ直結させ、常に最新の情報を手間なく表示させること」です。

• 自動更新: CRM側で価格や在庫状況を変更すれば、サイト上の表示もリアルタイムに更新されます。
• 条件ベースの表示: 「特定のカテゴリー」や「一定の価格帯」などの条件を設定するだけで、表示する商品を自動でフィルタリングできます。
• レスポンシブ対応: デバイスの画面幅に合わせて、グリッドの列数を自動調整する機能が備わっています。

2. ユースケース

• 動的な商品一覧: 全製品の中から「新着アイテム」や「おすすめ商品」といった属性が一致するものだけを抽出して表示します。
• 価格別カタログ: 予算に合わせて検討できるよう、最低価格や最高価格のフィルターをかけた製品リストを構築します。
• 高機能な閲覧体験: 大量の製品がある場合でも、ページネーション機能によりユーザーが快適に商品を探せるインターフェースを提供します。

3. 実装と操作ステップ

新規ページの作成から、提供されたコードの適用、現場での運用設定までの全工程を解説します。

ステップ1：ページ作成とモジュールの配置

HubSpot管理画面の「コンテンツ」メニューから新しいページ（ランディングページなど）を立ち上げます。エディター左側のサイドバーで作成したモジュール名を検索し、編集エリアへドラッグ＆ドロップして配置します。

ステップ2：デザインマネージャーでのコード適用

高度な動的機能を有効にするため、デザインマネージャーで以下の作業を行います。

• ファイルの準備: デザインマネージャーで新規モジュールを作成します。
• コードの貼り付け: 公開されているソースコードを、それぞれの該当箇所（HTML/HubL、CSS、JS）へそのままコピー＆ペーストして保存・公開します。

ステップ3：エディターでの運用・カスタマイズ

コードが適用された後は、編集画面のサイドパネルからノーコードで詳細を調整できます。

• フィルタリング: 表示したい製品の属性や条件（AND/OR）を設定します。
• 価格設定: 価格の最小・最大値を入力し、リストを動的に更新します。
• レイアウトと表示項目: リスト形式かグリッド形式かを選択し、画像・タイトル・説明文・価格などの表示/非表示をスイッチで切り替えます。
• デザイン調整: カードの背景色、ボタンの色、文字サイズなどをブランドに合わせて微調整し、最後に「公開」して完了です。

‍

モジュールのソースコード

HubSpotのDesign Managerで「新規モジュール」を作成し、以下のコードをそれぞれの箇所に貼り付けてください。

1. fields.json

フィールド定義です。繰り返しフィールド（Items）と、スタイル設定用フィールド（Styles）で構成されています。

[
 {
  "children": [
   {
    "default": {
     "property": null
    },
    "display_width": null,
    "id": "21a1316c-97b0-d7b0-8ee9-f1efd1b620f0",
    "label": "filter_property_1",
    "locked": false,
    "name": "filter_property_1",
    "object_type": "PRODUCT",
    "required": false,
    "type": "crmobjectproperty"
   },
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "ded3e59b-bc30-df2b-c324-df0578a634a3",
    "label": "filter_value_1",
    "locked": false,
    "name": "filter_value_1",
    "required": false,
    "type": "text"
   },
   {
    "default": {
     "property": null
    },
    "display_width": null,
    "id": "fe270e45-324c-4f9c-6830-fe9255855798",
    "label": "filter_property_2",
    "locked": false,
    "name": "filter_property_2",
    "object_type": "PRODUCT",
    "required": false,
    "type": "crmobjectproperty"
   },
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "d2d46f8b-e173-83cb-6342-68f7e591e0d0",
    "label": "filter_value_2",
    "locked": false,
    "name": "filter_value_2",
    "required": false,
    "type": "text"
   },
   {
    "choices": [
     [ "AND", "AND" ],
     [ "OR", "OR" ]
    ],
    "display": "select",
    "display_width": null,
    "id": "8b122895-a6f5-fd3e-2645-9996bad396fb",
    "label": "filter_operator",
    "locked": false,
    "multiple": false,
    "name": "filter_operator",
    "preset": null,
    "reordering_enabled": true,
    "required": false,
    "type": "choice"
   }
  ],
  "default": {
   "filter_property_1": { "property": null },
   "filter_property_2": { "property": null }
  },
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "6c676894-4452-8dcd-d0d5-e8e478880c93",
  "label": "product_filter_group",
  "locked": false,
  "name": "product_filter_group",
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "children": [
   {
    "default": { "property": null },
    "display_width": null,
    "id": "dbe0096f-2834-624c-7fd2-2da6002978eb",
    "label": "price_property",
    "locked": false,
    "name": "price_property",
    "object_type": "PRODUCT",
    "required": false,
    "type": "crmobjectproperty"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "12722c90-e78d-06aa-7830-cb92a141c7e9",
    "label": "price_min",
    "locked": false,
    "name": "price_min",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "246d9b50-f891-a890-b2f7-7122b46a6818",
    "label": "price_max",
    "locked": false,
    "name": "price_max",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "05ec04ed-0e36-1636-7f64-c9f4945885d3",
    "label": "price-unit",
    "locked": false,
    "name": "price_unit",
    "required": false,
    "type": "text"
   }
  ],
  "default": {
   "price_property": { "property": null }
  },
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "8782bd12-7864-08e6-6f22-145c61d170c2",
  "label": "price_filter_group",
  "locked": false,
  "name": "price_filter_group",
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "children": [
   {
    "choices": [ [ "list", "List" ], [ "grid", "Grid" ] ],
    "display": "select",
    "display_width": null,
    "id": "87578ceb-e94e-1bc4-8e69-48d06b174075",
    "label": "layout_type",
    "locked": false,
    "multiple": false,
    "name": "layout_type",
    "preset": null,
    "reordering_enabled": true,
    "required": false,
    "type": "choice"
   },
   {
    "choices": [ [ "2", "2列" ], [ "3", "3列" ], [ "4", "4列" ] ],
    "display": "select",
    "display_width": null,
    "id": "73b1c3a2-da54-250c-2b04-02cc44a2d356",
    "label": "grid_columns",
    "locked": false,
    "multiple": false,
    "name": "grid_columns",
    "preset": null,
    "reordering_enabled": true,
    "required": false,
    "type": "choice"
   },
   {
    "default": false,
    "display": "checkbox",
    "display_width": null,
    "id": "74a27f7c-f47b-dad7-b921-af66d047bdcb",
    "label": "show_title",
    "locked": false,
    "name": "show_title",
    "required": false,
    "type": "boolean"
   },
   {
    "default": { "property": null },
    "display_width": null,
    "id": "c456fdc6-bdad-63a1-a815-3564a70c176c",
    "label": "title_property",
    "locked": false,
    "name": "title_property",
    "object_type": "PRODUCT",
    "required": false,
    "type": "crmobjectproperty"
   },
   {
    "default": false,
    "display": "checkbox",
    "display_width": null,
    "id": "b18438bd-b826-0a50-a526-fc6301d9afbf",
    "label": "show_description",
    "locked": false,
    "name": "show_description",
    "required": false,
    "type": "boolean"
   },
   {
    "default": { "property": null },
    "display_width": null,
    "id": "1ba9c3ef-d6c5-89d5-e8f1-6ff0b6e5e2ac",
    "label": "description_property",
    "locked": false,
    "name": "description_property",
    "object_type": "PRODUCT",
    "required": false,
    "type": "crmobjectproperty"
   },
   {
    "default": false,
    "display": "checkbox",
    "display_width": null,
    "id": "b4fa6914-d231-04da-5a0f-4e0da2404ea6",
    "label": "show_price",
    "locked": false,
    "name": "show_price",
    "required": false,
    "type": "boolean"
   },
   {
    "default": false,
    "display": "checkbox",
    "display_width": null,
    "id": "f464ac0f-6414-be32-d65c-b273bfa1bcc5",
    "label": "show_image",
    "locked": false,
    "name": "show_image",
    "required": false,
    "type": "boolean"
   },
   {
    "default": { "property": null },
    "display_width": null,
    "id": "7443ac36-a521-b738-8a30-548f8c4fa6ea",
    "label": "image_property",
    "locked": false,
    "name": "image_property",
    "object_type": "PRODUCT",
    "required": false,
    "type": "crmobjectproperty"
   },
   {
    "choices": [
     [ "1:1", "1:1" ], [ "4:3", "4:3" ], [ "16:9", "16:9" ], [ "3:4", "3:4" ], [ "custom", "custom" ]
    ],
    "display": "select",
    "display_width": null,
    "id": "65cd2a7a-c23b-85a4-0843-893a32095c1e",
    "label": "image_size",
    "locked": false,
    "multiple": false,
    "name": "image_size",
    "preset": null,
    "reordering_enabled": true,
    "required": false,
    "type": "choice",
    "visibility": {
     "controlling_field_path": "display_group.show_image",
     "controlling_value_regex": "true",
     "operator": "EQUAL"
    }
   },
   {
    "default": false,
    "display": "checkbox",
    "display_width": null,
    "id": "aaf6e609-42a1-3a14-c28f-80bc22f07951",
    "label": "show_button",
    "locked": false,
    "name": "show_button",
    "required": false,
    "type": "boolean"
   },
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "37dbbd32-9900-9441-2449-8fa65a91740a",
    "label": "button_text",
    "locked": false,
    "name": "button_text",
    "required": false,
    "type": "text"
   },
   {
    "default": { "property": null },
    "display_width": null,
    "id": "eec8ee75-487f-b2be-fe91-726ae5a899f1",
    "label": "button_url_property",
    "locked": false,
    "name": "button_url_property",
    "object_type": "PRODUCT",
    "required": false,
    "type": "crmobjectproperty"
   },
   {
    "default": false,
    "display": "checkbox",
    "display_width": null,
    "id": "e2151b1d-9f11-39d7-e234-4458a27af46c",
    "label": "show_rating",
    "locked": false,
    "name": "show_rating",
    "required": false,
    "type": "boolean"
   },
   {
    "default": { "property": null },
    "display_width": null,
    "id": "1816232f-8ee0-4d18-df38-7485d4f8d46a",
    "label": "rating_property",
    "locked": false,
    "name": "rating_property",
    "object_type": "PRODUCT",
    "required": false,
    "type": "crmobjectproperty"
   },
   {
    "default": 200,
    "display": "text",
    "display_width": null,
    "id": "3e9d25f9-ac21-3c32-0964-1f86c9251006",
    "label": "image_height",
    "locked": false,
    "max": 500,
    "min": 100,
    "name": "image_height",
    "required": false,
    "step": 1,
    "type": "number",
    "visibility": {
     "controlling_field_path": "display_group.image_size",
     "controlling_value_regex": "custom",
     "operator": "EQUAL"
    }
   }
  ],
  "default": {
   "show_title": false,
   "title_property": { "property": null },
   "show_description": false,
   "description_property": { "property": null },
   "show_price": false,
   "show_image": false,
   "image_property": { "property": null },
   "show_button": false,
   "button_url_property": { "property": null },
   "show_rating": false,
   "rating_property": { "property": null },
   "image_height": 200
  },
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "cf272e81-e968-0b27-0cda-8c982e467642",
  "label": "display_group",
  "locked": false,
  "name": "display_group",
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "children": [
   {
    "default": { "color": null, "opacity": null },
    "display_width": null,
    "id": "60c1119d-7f87-c270-f434-993283d3d37f",
    "label": "title_color",
    "locked": false,
    "name": "title_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "6413ec2e-0eed-1523-6f6d-c8ff72145966",
    "label": "title_font_size",
    "locked": false,
    "name": "title_font_size",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "default": { "color": null, "opacity": null },
    "display_width": null,
    "id": "12dcca28-8f40-9388-fd05-5357e2085b10",
    "label": "description_color",
    "locked": false,
    "name": "description_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "b48859e4-238b-7232-d093-6bbbe219d406",
    "label": "description_font_size",
    "locked": false,
    "name": "description_font_size",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "default": { "color": null, "opacity": null },
    "display_width": null,
    "id": "7c51472f-60d4-9076-8dd7-7cb93fceb4d2",
    "label": "price_color",
    "locked": false,
    "name": "price_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "27d76c08-d9ed-31c8-c4d3-e735e09314dd",
    "label": "price_font_size",
    "locked": false,
    "name": "price_font_size",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "default": { "color": null, "opacity": null },
    "display_width": null,
    "id": "9c745c5a-240a-3aa0-9429-a2e65ff8a858",
    "label": "card_border_color",
    "locked": false,
    "name": "card_border_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "de7dd7b4-9810-344c-ff7f-ede282ea2165",
    "label": "card_border_width",
    "locked": false,
    "name": "card_border_width",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "default": { "color": null, "opacity": null },
    "display_width": null,
    "id": "cc87fa3a-e84a-7f1f-e1d5-6edc648431f3",
    "label": "card_background_color",
    "locked": false,
    "name": "card_background_color",
    "required": false,
    "type": "color"
   },
   {
    "default": { "color": null, "opacity": null },
    "display_width": null,
    "id": "23b4f959-7d5e-859a-41df-e472ce9927b0",
    "label": "button_background_color",
    "locked": false,
    "name": "button_background_color",
    "required": false,
    "type": "color"
   },
   {
    "default": { "color": null, "opacity": null },
    "display_width": null,
    "id": "f6e6c5e2-20af-303f-67a7-8b928236fd96",
    "label": "button_text_color",
    "locked": false,
    "name": "button_text_color",
    "required": false,
    "type": "color"
   },
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "992e0bc9-9f2d-b9ac-adf0-9d19ad7cc20e",
    "label": "card-min-width",
    "locked": false,
    "name": "card_min_width",
    "required": false,
    "type": "text"
   },
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "c497ac8d-2ca1-5e35-f945-4c5888e6d158",
    "label": "card-min-height",
    "locked": false,
    "name": "card_min_height",
    "required": false,
    "type": "text"
   }
  ],
  "default": {
   "title_color": { "color": null, "opacity": null },
   "description_color": { "color": null, "opacity": null },
   "price_color": { "color": null, "opacity": null },
   "card_border_color": { "color": null, "opacity": null },
   "card_background_color": { "color": null, "opacity": null },
   "button_background_color": { "color": null, "opacity": null },
   "button_text_color": { "color": null, "opacity": null }
  },
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "f0838e20-1194-3a8b-bcbc-266f097f8276",
  "label": "style_group",
  "locked": false,
  "name": "style_group",
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "display": "text",
  "display_width": null,
  "id": "91126f3c-411d-92e9-440e-53f662bda0ad",
  "label": "products_limit",
  "locked": false,
  "name": "products_limit",
  "required": false,
  "step": 1,
  "type": "number"
 },
 {
  "children": [
   {
    "default": false,
    "display": "checkbox",
    "display_width": null,
    "id": "8b0f7adc-48da-ac5f-63db-a2ad6962ac32",
    "label": "show_pagination",
    "locked": false,
    "name": "show_pagination",
    "required": false,
    "type": "boolean"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "49e2b49e-26ce-e5e0-c20e-0247d4deb39b",
    "label": "items_per_page",
    "locked": false,
    "name": "items_per_page",
    "required": false,
    "step": 1,
    "type": "number"
   }
  ],
  "default": { "show_pagination": false },
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "cf3fe3d9-26f9-e23e-7f5c-c43df4bc70e4",
  "label": "pagination_group",
  "locked": false,
  "name": "pagination_group",
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 }
]