4. コード編集を用いたバッジ表示について
※本機能はコード編集が可能な場合のみご利用いただけます。CSSおよびLiquidの知識が必要となりますのでご注意ください。
使用できるバッジ用のClassは以下の通りです。
未読バッジ
指定しているブログに未読があればバッジが付与されます。
class="monjia-badge montapp-badge_all"
各グループバッジ
指定しているブログ内かつ、設定画面で指定したグループに未読がある場合にバッジが付与されます。
class="monjia-badge montapp-badge_a"
class="monjia-badge montapp-badge_b"
class="monjia-badge montapp-badge_c"
設置場所はテーマによって異なりますので、テーマのコードを調査していただき、必要な場所へ挿入をお願いいたします。
Dawnのヘッダメニューに表示する場合の例
①前提条件
対象ファイル①：header-dropdown-menu.liquid（PC用）
対象ファイル②：header-drawer.liquid（スマホ用）
対象ブログ：ニュース（ハンドルはmonjia-notificationsを指定）
対象リンク：バッジをつけたいブログ：ニュースへのリンクが「お知らせ」という名前でメインメニューにある
②コードの挿入箇所の確認
対象部分はメニューを呼び出しているfor文を確認して推定します。
{%- for link in section.settings.menu.links -%}
実際にリンクになる<a>タグを見つけます。
<a id="HeaderDrawer-{{ link.handle }}" href="{{ link.url }}"
class="menu-drawer__menu-item list-menu__item link link--text focus-inset
{% if link.current %} menu-drawer__menu-item--active{% endif %}
"
{% if link.current %} aria-current="page"{% endif %}
>
{{ link.title | escape }}
</a>
↑ここでリンクタイトルを表示してリンクが付与されています。
③条件式とコードを挿入
1. もし、リンク先がMonjiaの指定するハンドルなら
⇨ if link.url =="/blogs/monjia-notifications"
2.メニューの表示名の部分に
⇨ { link.title | escape }}
3.未読があればバッジを表示するClassを追加する
⇨ class="monjia-badge monjia-badge_all"
といった作りにしたいので以下のようにコードを編集します。
{ link.title | escape }}
▼
{% if link.url =="/blogs/monjia-notifications" %}
<div class="monjia-badge monjia-badge_all"> {{ link.title | escape }} </div>
{% else %}
{{ link.title | escape }}
{% endif %}
④判定とコード
これで、if文が成立したとき（リンクのハンドルが通知ブログの場合）は以下のようなタグになります。
<div class="monjia-badge monjia-badge_all">{ link.title | escape }} </div>
また、if文が成立しなかったとき（他のリンクの場合）は元のままになります。
{ link.title | escape }}
⑤実際の動作
ログインしていて、未読のブログがあると「お知らせ」（リンク先のハンドルがmonjia-notificationsになっているもの）にバッジがつきました。
グループについて
指定するClassの末尾のAllをグループにすると、そのグループに指定されているものに未読があった場合のみバッジが表示されます。
以下のような場合を例とします。
- 新商品に関する通知がグループBに入っている
- メインメニューに商品一覧へのリンクがある
この場合、商品一覧ページにセグメント通知を追加します。
メインメニューのコードを編集します。前述の「お知らせ」にバッジを付ける設定にさらに加える形で、商品一覧にバッジを表示しようとする場合は下記のようになります。
{% if link.url =="/blogs/monjia-notifications" %}
<div class="monjia-badge monjia-badge_all"> {{ link.title | escape }} </div>
{% elsif link.url =="/collections/all" %}
<div class="monjia-badge monjia-badge_b"> {{ link.title | escape }} </div>
{% else %}
{{ link.title | escape }}
{% endif %}
このようにすることで、リンク先が「/blogs/monjia-notifications」ならブログ内の全ての記事の未読判定を、リンク先が「/collections/all」ならグループbの中から未読判定を行い、それぞれバッジが表示されるようになります。
実際の画面で見ると、両方にバッジがついているのが確認できます。
このお知らせを開くと既読になり、以降は表示されなくなります。
全体のお知らせの中にはまだ未読があるので「お知らせ」にはバッジがついたままになります。
