1BANNER 123
5/5 - (238 bình chọn)

Chào mọi người, dịch bệnh căng quá nên rảnh không có gì làm, ngồi vọc vọc lại 1 số dự án thì thầy 1 tính năng khá hay mà newbie chắc ít người biết. Và quyết định mình sẽ chia sẻ cho mọi người cách để hiển thị số lượng thông báo.

Không biết giải thích như thế nào, mọi người nhìn video dưới đây để biết rõ hơn nhé.

Hiển thị 5 thông báo

Bắt tay vào làm thôi.

Cách làm sẽ gồm các bước sau:

  • Tạo 1 menu hiển thị cái chuông thông báo.
  • Tạo ux_block hiển thị danh sách các thông báo.
  • Thêm JQUERY để hiển thị số lượng thông báo

Tạo menu hiển thị icon cái chuông.

Các bạn vào menu và tạo một menu như hình dưới đây nhé.

Tạo menu với nhãn điều hướng là thông báo.

Rồi các bạn thêm icon cho nó nhé.

Các bạn lưu ý giúp mình các thông số ở khoanh màu đỏ nhé.

Menu này các bạn đính kèm vào top menu nha. Nếu như không còn menu nào trống thì chịu khó tạo thêm nhé.

Thiết lập hiển thị ở topbat menu.

Sau đó chúng ta sẽ kéo nó ra vị trí muốn hiển thị.

Kéo top bar menu ra vị trí muốn hiển thị

Và kết quả của chúng ta như sau:

Hiển thị trên thanh header

Cái chữ thông báo đó lát nữa chúng ta css display none cho nó là được.

Tạo ux_block thông báo.

Các bạn vào UX_Block tạo 1 post mới tên là thông báo. Sau đó các bạn cấu hình tùy thích. Ở đây thì mình cấu hình như thế này.

Tạo list 4 thông báo

CÁC BẠN NHỚ ĐẶT CLASS CHO CÁC LIST THÔNG BÁO NÀY Ở ĐÂY MÌNH ĐẶT LÀ thong-bao-item. Bước này rất quan trọng nhé.

Đặt class để lát dùng

Hoặc các bạn dán đoạn code dưới này vào UX_Block rồi chỉnh sửa nhé.

[featured_box img="5543" pos="left" class="thong-bao-item"]

Nhập mã HAPPY83  tại trang thanh toán để giảm ngay 83k với mỗi đơn hàng trên 499k

[/featured_box]
[featured_box img="5543" pos="left" class="thong-bao-item"]

Nhập mã HAPPY83  tại trang thanh toán để giảm ngay 83k với mỗi đơn hàng trên 499k

[/featured_box]
[featured_box img="5543" pos="left" class="thong-bao-item"]

Nhập mã HAPPY83  tại trang thanh toán để giảm ngay 83k với mỗi đơn hàng trên 499k

[/featured_box]
[featured_box img="5543" pos="left" class="thong-bao-item"]

Nhập mã HAPPY83  tại trang thanh toán để giảm ngay 83k với mỗi đơn hàng trên 499k

[/featured_box]

Sau khi tạo UX_Block này rùi, các bạn quay lại menu và gọi nó ra tại vị trí menu thông báo nhé.

Thêm block thông báo vào menu.

Thêm JQUERY để đếm số lượng thông báo.

Mặc định thì nó sẽ không hiển thị số lượng thông báo, các bạn thêm đoạn JQUERY giúp mình nhé.

<script>
jQuery(document).ready(function ($) {
$(document).ready(function(){
		var a = $('.menu-thongbao .thong-bao-item').length;
		$('.menu-thongbao .nav-top-link').before('<span class="alert-num">'+a+'</span>');
	})
})
</script>

Các bạn copy và dán đoạn code trên tại

Vị trí dán đoạn script

Và một chút CSS cho nó đẹp mắt nữa nhé.

<style>
.alert-num {
    background: red;
    color: #fff;
    padding: 3px 7px;
    border-radius: 100%;
    font-size: 11px;
    position: absolute;
    top: 0;
    right: -5px;
}
.menu-hide {
    display: none;
}
</style>

Như vậy là xong, các bạn tận hưởng thành quả của mình đi nhé.

Chúc các bạn thành công