[Series Tự học WHMCS] Themes - Phần 4: Navigation 2019-10-12

WHM.vn cho ra mắt series tự học WHMCS giúp bạn thuận lợi hơn trong việc tìm hiểu và học tập về WHMCS

Tags:
  1. Trung
    NAVIGATION​


    Có 2 thanh navigation trong WHMCS giao diện của người dùng. Thanh navigation chính chứa phần lớn menu và nổi bên trái thanh navigation phụ. Thanh navigation phụ chứa các mục cụ thể của người dùng và thay đổi nếu khách hàng đăng nhập vào WHMCS. Khi khách chưa đăng nhập thì navigation phụ chứa liên kết đăng nhập và khi khách hàng đăng nhập thì menu phụ sẽ liên kết đến tài khoản của khách hàng.

    Chế độ Responsive được kích hoạt khi giao diện người dùng WHMCS được xem trên một thiết bị nhỏ hơn như điện thoại hoặc máy tính bảng. Lúc đó, WHMCS sẽ thu gọn thành điều hướng và menu gập sẽ hiện ra.

    Các thành phần trong navigation menu được điều khiển bởi lập trình cho phép các Modules và Hooks tương tác với nhau trong navigation menu.

    Giao diện của thanh navigation có thể được tùy chỉnh thông qua các tệp mẫu như header.tpl và navbar.tpl (nằm trong /includes/).

    Hướng dẫn này sẽ coi rằng bạn đã quen với việc tạo vào sử dụng các tệp Hook trong WHMCS.

    TÌM TÊN MENU

    Mọi mục menu có một tên duy nhất được sử dụng để tìm nó. Bạn sẽ cần tên này để thao tác với chúng. Để dễ dàng hơn, chúng tôi đã đặt tên của từng mục menu trong nguồn HTML của trang, điều đó có nghĩa là có thể truy xuất bằng tùy chọn “Kiểm tra”(Inspect Element) có sẵn trong hầu hết các trình duyệt hiện đại. Một ví dụ về điều này được hiển thị dưới đây:


    [​IMG]​


    Khi bạn có tên menu mà bạn muốn thao tác, trong ví dụ trên là “Thông tin thanh toán”(Billing Information), bạn có thể thao tác với nó theo các cách sau.

    THAY ĐỔI NHÃN VĂN BẢN CỦA MỘT MỤC MENU

    Tất cả các mục menu được cung cấp theo mặc đinh, sử dụng tên hiển thị được cài đặt trước bởi tệp ngôn ngữ. Chỉ cần tìm kiếm trong tệp ngôn ngữ đang hoạt động của bạn cho văn bản hiển thị trong nhãn menu và bạn có thể điều chỉnh/thay đổi nó theo yêu cầu.

    Ngoài ra, bạn có thể chỉnh sửa văn bản hiển thị thông một hook như sau:

    <?php

    use WHMCS\View\Menu\Item as MenuItem;

    add_hook('ClientAreaPrimarySidebar', 1, function(MenuItem $primarySidebar)
    {
    $primarySidebar->getChild("My Account")
    ->getChild("Billing Information")
    ->setLabel("Custom Text Here");    ​
    });

    Lưu ý rằng, đầu tiên chúng tôi truy xuất mục menu “My Account” (Tài khoản của tôi), tiếp theo là mục “Billing Information” (Thông tin thanh toán) là mục con trong đó. Logic này nên được áp dụng cho tất cả các mục menu thả xuống.

    THAY ĐỔI ĐỊA ĐIỂM MỤC MENU LIÊN KẾT ĐẾN

    Bạn có thể thay đổi vị trí một mục menu để sử dụng phương thức setUri. Ví dụ: Nếu chúng đang sử dụng một hệ thống bên ngoài để kiểm soát các thông báo của mình, chúng tôi có thể làm một số việc như sau:

    <?php

    use WHMCS\View\Menu\Item as MenuItem;

    add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
    {
    $navItem = $primaryNavbar->getChild('Support');
    if (is_null($navItem)) {
    return;
    }
    $navItem = $navItem->getChild('Announcements');
    if (is_null($navItem)) {
    return;
    }
    $navItem->setUri('https://www.example.com/3rdpartyblogsystem');    ​
    });

    SẮP XẾP LẠI CÁC MỤC MENU

    Bạn có thể thay đổi thứ tự hiển thị của các mục menu như sau:

    <?php

    use WHMCS\View\Menu\Item as MenuItem;

    add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
    {
    $navItem = $primaryNavbar->getChild('Support');
    if (is_null($navItem)) {
    return;
    }
    $navItem = $navItem->getChild('Announcements');
    if (is_null($navItem)) {
    return;
    }
    $navItem->setOrder(1);    ​
    });

    CÁC CƠ CẤU HỖ TRỢ SAU ĐÂY CŨNG KHẢ DỤNG:

    // Moves a menu item up one position
    $primaryNavbar->getChild('Support')->getChild('Announcements')->moveUp();
    // Moves a menu item down one position
    $primaryNavbar->getChild('Support')->getChild('Announcements')->moveDown();
    // Moves a menu item to the first position
    $primaryNavbar->getChild('Support')->getChild('Announcements')->moveToFront();
    // Moves a menu item to the last position
    $primaryNavbar->getChild('Support')->getChild('Announcements')->moveToBack();


    THÊM MỤC MENU

    Bạn có thể thêm 1 liên kết mới vào navigation mới như sau:

    <?php

    use WHMCS\View\Menu\Item as MenuItem;

    add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
    {
    $primaryNavbar->addChild('Menu Name')
    ->setUri('https://www.example.com/')
    ->setOrder(70);    ​
    });

    THÊM MỤC MENU CON

    Bạn có thể thêm các mục menu bổ sung như sau:

    <?php
    use WHMCS\View\Menu\Item as MenuItem;
    add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
    {
    if (!is_null($primaryNavbar->getChild('Support'))) {
    $primaryNavbar->getChild('Support')
    ->addChild('Emergency Contacts', array(
    'label' => Lang::trans('emergencyContacts'),
    'uri' => 'emergency.php',
    'order' => '100',    ​
    ));​
    }
    });

    Để thêm một mục menu có điều kiện dựa trên trạng thái đăng nhập ở giao diện người dùng, bạn có thể dùng

    <?php

    use WHMCS\View\Menu\Item as MenuItem;

    add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
    {
    $client = Menu::context('client');

    // only add menu item when no client logged in
    if (is_null($client)) {
    $primaryNavbar->addChild('Example')
    ->setUri('https://www.example.com/')
    ->setOrder(100);    ​
    }​
    });

    ẨN/XÓA MỘT MỤC MENU

    Bạn có thể xác một mục menu bằng cách:

    <?php

    use WHMCS\View\Menu\Item as MenuItem;

    add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
    {
    if (!is_null($primaryNavbar->getChild('Support'))) {
    $primaryNavbar->getChild('Support')->removeChild('Announcements');​
    }​
    });

    Bài viết được tham khảo và lược dịch từ: https://developers.whmcs.com/