Studio CMSでは、CMSアイテムに登録したプロパティをもとに、要素の表示・非表示を切り替えられます。
この記事では、ブール値プロパティを使い、アイテムごとに手動でオン・オフを切り替える方法を説明します。
Point: Studio CMSとは
Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS（Content Management System）機能です。 モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高いコンテンツを一元管理します。
Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。
ユースケース
ブール値プロパティは、日付では決まらない「状態」の出し分けに向いています。
商品リストで、在庫切れの商品に「SOLD OUT」ラベルを表示する
イベントリストで、受付中のイベントにのみ申し込みボタンを表示する
メニューリストで、店舗限定メニューに「店舗限定」ラベルを表示する
この記事では、在庫切れの商品にのみ、商品リスト上で「売り切れ」ラベルを表示する手順を紹介します。
本記事では、1件分の商品データを「商品アイテム」と呼びます。
表示条件に使えるプロパティと活用例
表示条件に使うCMSプロパティによって、表示を切り替えられる条件が変わります。目的に合う方法を選んでください。
表示を切り替える条件 | 使うプロパティ | 活用例 |
アイテムごとに手動で切り替える | ブール値 | この記事 |
公開から一定期間だけ表示する | 公開日時 | |
画像の登録有無で切り替える | 画像 |
事前準備
この記事の手順は、商品のCMSモデルとCMSリストを作成済みであることを前提としています。次の項目が完了しているか確認してください。
CMSダッシュボードで、商品を登録します。
デザインエディタで、CMSリストを使って商品リストを作成します。リストには、1で作成したCMSモデルを紐付けます。
CMSアイテムの作成から公開までの全体像は、次の記事を参照してください。
手順 1. ブール値プロパティを設定する
CMSダッシュボードでブール値プロパティを追加し、ラベルを表示する商品アイテムを指定します。
CMSダッシュボードで対象のCMSモデルを開き、アイテムの一覧を表示します。
一覧の見出し行の右端にある[+]をクリックします。列が多い場合は、一覧を右にスクロールしてください。
[+ プロパティを追加]をクリックします。
プロパティタイプから[ブール値]を選択します。
プロパティ名を入力し、[追加]をクリックします。「在庫切れ」など、用途が分かる名前にすると、デザインエディタ上で見分けやすくなります。
[在庫切れ]列で、在庫切れの商品アイテムのトグルを有効（オン／青）にします。
手順 2. デザインエディタで「SOLD OUT」ラベルを配置する
商品リストの中に「SOLD OUT」ラベルを配置します。リストの1つ目のアイテムに配置すると、ほかのアイテムにも同じ要素が反映されます。
デザインの調整方法は、次の記事を参照してください。
手順 3. デザインエディタで表示条件を設定する
配置したラベルに、手順1で追加したブール値プロパティを使って表示条件を設定します。
「SOLD OUT」ラベルを選択します。
右パネルで[設定]を選択します。パネルが閉じている場合は、右パネルを開いてください。
[表示条件]の入力フィールドをクリックします。
プロパティリストから[在庫切れ]を選択します。
条件が[is True]になっていることを確認します。[在庫切れ]が有効な商品アイテムにのみ、ラベルが表示されます。
手順 4. 表示を確認する
ラベルが意図した商品アイテムにのみ表示されているか確認します。
関連記事
出し分け 新着 表示のカスタマイズ