指定期間中のみ特定の要素を表示する方法
CMSの「公開日時」プロパティを基準に設定する表示条件の「〜から , 日/週間/月間/年間」を使って、特定の期間のみ要素を表示することができます。
ユースケース
本記事で紹介する方法を活用すると、下記のような設定が可能です。
公開日から1週間以内の新着ブログ記事に「NEW」バッジを表示
期間限定価格の商品に3日間だけバッチを表示
キャンペーン商品に1ヶ月間「おすすめ」マークを表示
この記事では、ブログ記事を掲載している記事リスト上に、公開日から1週間以内の新着記事にのみ「NEW」バッジを表示する手順をご紹介します。
Tips：現状、公開日以外に日付情報を持ち表示条件が設定できるプロパティはありません。特定の日付から指定期間中に要素を表示させたい場合は、公開日を編集する必要があります。
設定手順
事前準備
次の記事を参考に、バッジを表示させる記事詳細ページと記事リストの作成を事前に行なってください。
Step 1. エディタで「NEW」バッジの配置
記事詳細ページまたは記事リストに「NEW」バッジを配置します。
画面左側の追加パネルから、テキストボックスをドラッグ&ドロップで配置します。
「NEW」と入力します。 テキストボックスをダブルクリックまたは画面左側の設定パネルを開き、編集します。
フォントサイズ、色、背景色などのスタイルを調整します。
Step 2. エディタで表示条件の設定
「NEW」バッチを選択します。
画面右側の設定パネルを開き、[表示条件を設定]をクリックします。
表示条件を設定します。 プロパティから[公開日時]を選択し、期間を[1] [週間]と設定します。
Step 3. 動作確認
ライブプレビューで確認します。
ライブプレビューで公開日時から指定した期間内のアイテムにのみ「NEW」バッジが表示されているか確認します。
CMSダッシュボードにて記事の公開日時を変更することが可能です。必要に応じて変更し、表示の確認を行なってください。
公開サイトで確認します。
CMSアイテムのステータスが「公開中」であることを確認の上、問題がなければサイトの公開・更新を行い、公開サイトへ反映します。
関連記事