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