Thêm ống kinh nghiệm cho tài khoản WordPress

Nếu bạn làm hệ thống kinh nghiệm và cấp độ cho tài khoản WordPress, thì thêm ống kinh nghiệm để người dùng có thể theo dõi là việc cần thiết.

Nếu bạn đã tham khảo bài viết Hệ thống Kinh Nghiệm và Cấp Độ cho tài khoản WordPress sử dụng ACF, thì bài viết này sẽ hướng dẫn làm ống kinh nghiệm cho người dùng.

Mốc kinh nghiệm

Đầu tiên, như bài viết trước, thì bạn cần khai báo một biến mốc kinh nghiệm.

<?php
    $lvl_point = '1, 200, 500, 900, 1400, 2000, 2600, 3200, 3800, 4200, 4800, 5400, 6000, 6600, 7200, 7800, 8400, 9000, 9600, 10200, 10800, 11400, 12000, 12700, 13400, 14100, 14800, 15500, 16200, 16900, 17600, 18300, 19000, 19800, 20600, 21400, 22200, 23000, 23800, 24600, 25400, 26200, 27000, 27900, 28800, 29700, 30600, 31500, 32400, 33000, 33900, 34800, 35700, 36600, 37500, 38400, 39300, 40200, 41100, 42000, 43000, 44000, 45000, 46000, 47000, 48000, 49000, 50000, 51000, 52000';
    $user_exp = get_field('exp', 'user_' . get_current_user_id());
    if (!$user_exp) $user_exp = 0;
?>

Thêm ống kinh nghiệm

Để biết mốc tiếp theo của cấp độ, bạn sử dụng phương thức sau.

function getNextLevel(exp) {
    var upLevel = [<?php echo $lvl_point; ?>];
    var prevExp = 0;
    var nextExp = 0;
    var result = [];
    for (var i = 0; i < upLevel.length; i++) {
        if (upLevel[i] > exp) {
            if (i > 0) {
                prevExp = upLevel[i - 1];
            } else {
                prevExp = upLevel[0];
            }
            nextExp = upLevel[i];
            result[0] = prevExp;
            result[1] = nextExp;
            result[2] = i + 1;
            break;
        }
    }
    return result;
}

Sau đó, sử dụng Progress bars của Bootstrap để hiển thị ống kinh nghiệm.

var nextExp = getNextLevel(<?php echo $user_exp; ?>);
if (totalExp < 52000) {
    var currPercent = Math.round((totalExp - nextExp[0]) * 100 / (nextExp[1] - nextExp[0]));
    $('.user-info-container .nav-tabs').before('<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="' + currPercent + '" aria-valuemin="0" aria-valuemax="100" style="width: ' + currPercent + '%;">' + currPercent + '%</div><span class="pro-lvl">Cấp ' + nextExp[2] + '</span></div>');
} else {
    $('.user-info-container .nav-tabs').before('<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">100%</div></div>');
}

CSS

Bạn thêm một số CSS để tùy chỉnh lại giao diện nhé.

.progress {
    position: relative;
    background-color: #c5d9f1
}

.progress span.pro-lvl {
    line-height: 16px;
    color: #fff;
    font-size: 12px;
    margin-right: 3px;
    position: absolute;
    right: 0
}