*This feature can only be used if code editing is possible. Please note that knowledge of CSS and Liquid is required.

 

The classes for badges that can be used are as follows.

 

unread badge

A badge will be given if the specified blog is unread.

class="monjia-badge montapp-badge_all"

 

Each group badge

A badge will be given if there are unread posts in the specified blog and in the group specified on the settings screen.

class="monjia-badge montapp-badge_a"

class="monjia-badge montapp-badge_b"

class="monjia-badge montapp-badge_c"

 

The installation location differs depending on the theme, so please research the theme code and insert it where you need it.

 

Example of displaying in Dawn's header menu

 

①Prerequisites

Target file ①: header-dropdown-menu.liquid (for PC)

Target file ②: header-drawer.liquid (for smartphones)

 

Target blog: News (specify the "URL and handle" as monjia-notifications)

 

Target link: Blog you want to badge: A link to news is in the main menu with the name "Notifications"

 

② Check the insertion point of the code

The target part is estimated by checking the for statement that calls the menu.

{%- for link in section.settings.menu.links -%}

 

Find the <a> tag that actually becomes the link.

<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>

↑Here, the link title is displayed and the link is attached.

 

③ Insert conditional expression and code

1. If the link destination is the handle specified by Monjia

⇨ if link.url =="/blogs/monjia-notifications"

 

2. In the display name part of the menu

⇨ { link.title | escape }}

 

3. Add a class to display a badge if there are unread items

⇨ class="monjia-badge monjia-badge_all"

 

I would like to create something like this, so edit the code as shown below.

 

{ 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 %}

 

④Determining whether to display

When the if statement is true (if the link handle is a notification blog), the tag will be as follows.

<div class="monjia-badge monjia-badge_all"> { link.title | escape }} </div>

 

Also, if the if statement does not hold (for other links), the original link will remain.

{ link.title | escape }}

 

 

About the group

If you group All at the end of the specified Class, the badge will be displayed only if there are unread items specified in that group.

For example, consider the following case.

• New product notifications are in group B
• There is a link to the product list on the main menu

 

1.Add a segment notification to the product listing page.

 

2.Edit the main menu code. In addition to the settings for adding badges to notifications mentioned above, if you want to display badges on the product list, do the following.

{% 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 %}

3.If the link destination is "/blogs/monjia-notifications", all articles in the blog will be judged as unread, If the link destination is "/collections/all", unread messages will be judged from group b, and a badge will be displayed for each.

4.When you open this notification, it will be marked as read and will no longer be displayed.

 

Return to manual top