指定するCMSアイテムにのみバッジを表示する方法
これら機能を利用した要素の表示・非表示の整理は、CMSダッシュボードにて行うため管理しやすくなります。
ユースケース
下記のようなケースで利用できます。
商品リストや詳細ページ上に、新着商品に限定して「NEW」バッジを表示する
イベントのリストや詳細ページ上に、開催中のイベントに限定して申し込みボタンを表示する
この記事では、表示条件とブール値プロパティを使って、新着商品を掲載している記事詳細ページと商品リスト上に、「NEW」バッジを表示する手順をご紹介します。
Tips：その他プロパティを使った場合でも、同様に表示・非表示の切り替えを設定することが可能です。詳しくは下記記事をご覧ください。
指定する期間中のみ、CMSアイテムに「NEW」バッジを表示する方法
設定手順
1. 事前準備
次の記事を参考に、バッジを表示させる記事詳細ページと記事リストの作成を事前に行なってください。
2. ブール値プロパティの設定
ブール値プロパティを追加します。
アイテム一覧を右にスクロールして[+]をクリックし、[ブール値]を追加します。プロパティ名は「NEWバッジ」とします。アイテムごとに有効・無効を設定します。
「NEW」バッジを表示したいアイテムのブール値を有効（青）にします。
3. 「NEW」バッジの配置
記事詳細ページまたは記事リストに「NEW」バッジを配置します。
画面左側の追加パネルから、テキストボックスをドラッグ&ドロップで配置します。
「NEW」と入力します。 テキストボックスをダブルクリックまたは画面左側の設定パネルを開き、編集します。
フォントサイズ、色、背景色などのスタイルを調整します。
4. 表示条件の設定
「NEW」バッチを選択します。
画面右側の設定パネルを開き、[表示条件を設定]をクリックします。
表示条件を設定します。
プロパティからブール値の[NEWバッジ]を選択し、[is True]を設定します。
5. 動作確認
ライブプレビューURLにアクセスします。
指定したアイテムにのみ「NEW」バッジが表示されているか確認します。
CMSアイテムのステータスが[公開中]であることを確認し、問題がなければ[公開]ボタンをクリックしてサイトを更新します。
出し分け 新着 表示のカスタマイズ