Jump to content

WHMCS Template Issues / Requests


Mandalorian

Recommended Posts

Dear WHMCS Users,

Hope you're enjoying the holidays. The next WHMCS update is around the corner, so I sent this message to WHMCS support fix the following issues in TwentyOne template in the upcoming release. These issues are detrimental to the user experience. I also highlighted some small improvements that can make a big difference.

ISSUE # 1 - DUPLICATE CURRENCY DROPDOWN ON MOBILE & TABLET SCREENS

On mobile/tablet screens order product page, there are two "choose currency" drop downs. When user clicks on the first "choose currency" dropdown, it is empty. The first dropdown is also useless, as there's a second currency dropdown below that which works unlike the first dropdown. The second dropdown also takes up extra space on small screens. Please advise how to remove the first useless dropdown, or fix it in the upcoming release. Please see the screenshot here: https://snipboard.io/CVYA5e.jpg

ISSUE # 2 - NON RESPONSIVE DOMAIN SETTINGS IN CLIENT AREA

On mobile/tablets screens, the Domain Settings page (/clientarea.php?action=domains) is not responsive. You can see in the screenshot below that some of the domain options and dropdowns are going outside the screen area. Screenshot here:  https://snipboard.io/eHk0LX.jpg

ISSUE #3 - TEMPLATE HEADER TAKING TOO MUCH SPACE

On TwentyOne, instead of a single header row, there are three header rows which take up too much space on a device. For example, on TwentyOne template header, the top row/bar is for "Notifications" and a useless "Logged in as" link. Below that, there's Logo, Search, and Cart Header Bar. And then there is a third row which has a Menu Bar, and logged in User bar. 

WHMCS can improve TwentyOne template and save valuable screen space, by having all these elements on a single Header bar (logo, cart, menu, notifications, and logged in user). The top bar with "Logged in as" is totally useless. Six template header was much cleaner and better organized in that respect.

REQUEST #4 - LOGIN SCREEN

Current Login screen can be modernised by adding options to add images on the side, promo slide-shows, and latest updates. An example can be seen here: https://platform.cloudways.com/login?ref_id=web_navbar

REQUEST #5 - LOGGED IN USER PHOTO

Pull users photo from their social media, and give the option to add their own photo and display it in client area below the welcome greeting. 

REQUEST #6 - MARKET CONNECT PROMO BANNERS INSIDE CLIENT AREA

TwentyOne template can improve client area user experience manifold by simply providing an easy way to edit existing Promo Banners, and adding new custom banners. Please consider this. 

REQUEST #7 - MARKET CONNECT PRODUCT SELECTION FOR WHMCS USERS

Market Connect products are not really useful for WHMCS users. I know many WHMCS users and hardly anyone is using any of them. Please do add features (fixing upgrade of products with configurable options and others) that will add real value to WHMCS and help its users.

On a separate note, WHMCS users will want to promote Market Connect products only if they can be PRIVATE LABELLED.  For example, you guys are adding NORD VPN to Market Connect. If it can be private labelled/white labelled, I'd love to offer it to my clients.

These improvements won't take much time but they'd really help improve user experience on WHMCS.

Happy holidays!

Edited by Mandalorian
Link to comment
Share on other sites

I don’t think the team is targeting to improve user experience.

Your report is an addition to many other (old enough) reports/requests from users that left the community, as no one listens anymore.

The path you should take it to use your own template (with many modifications) or get a commercial template to do your job.

…but worth trying. 😃

Link to comment
Share on other sites

anyway who looking for quick solution
this hook will fix ISSUE # 1

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaSecondarySidebar', 1, function (MenuItem $secondarySidebar) {
   $secondarySidebar->removeChild('Choose Currency');
});

 

Edited by AladdinJ
Link to comment
Share on other sites

10 hours ago, AladdinJ said:

anyway who looking for quick solution
this hook will fix ISSUE # 1


use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaSecondarySidebar', 1, function (MenuItem $secondarySidebar) {
   $secondarySidebar->removeChild('Choose Currency');
});

 

Hey Aladdin 🙂 Thanks, buddy!! 

I tried your hook but the duplicate/extra Choose Currency menu still shows on mobile and tablet screens.
Please could you check and re-post the hook?

Happy holidays!

Link to comment
Share on other sites

Hello @Mandalorian
that's strange it's works with me ,

this is without the hook

image.png.1910a610dea111f4bc57ae4f12efc662.png

this is with the hook

image.png.b3d9ccb43d1f29a6efba3bca0b84ecd4.png
if you meant you want remove even that small box

I have wrote additional hook , will also remove this box

image.png.22e588a267460d6cb17cd2c3f4b14aa2.png

// Remove Small box for currency on Mobile
add_hook('ClientAreaPageCart', 1, function($vars) {
    add_hook('ClientAreaFooterOutput', 1, function($vars) {
    $return = '
<script>
const SCbox = document.querySelector("select[name=currency]");
SCbox.remove();
</script>
';
    return $return;
    }); 
});


you shoud use both hooks , that will make changing currency from footer only

this is final result 

image.png.8f8ccdc18d9723bd9a62167d1c329c0a.png

 

Edited by AladdinJ
added another hook
Link to comment
Share on other sites

4 hours ago, AladdinJ said:

Hello @Mandalorian
that's strange it's works with me ,

this is without the hook

image.png.1910a610dea111f4bc57ae4f12efc662.png

this is with the hook

image.png.b3d9ccb43d1f29a6efba3bca0b84ecd4.png
if you meant you want remove even that small box

I have wrote additional hook , will also remove this box

image.png.22e588a267460d6cb17cd2c3f4b14aa2.png


// Remove Small box for currency on Mobile
add_hook('ClientAreaPageCart', 1, function($vars) {
    add_hook('ClientAreaFooterOutput', 1, function($vars) {
    $return = '
<script>
const SCbox = document.querySelector("select[name=currency]");
SCbox.remove();
</script>
';
    return $return;
    }); 
});


you shoud use both hooks , that will make changing currency from footer only

this is final result 

image.png.8f8ccdc18d9723bd9a62167d1c329c0a.png

 

Thanks @AladdinJ 

None of these hooks work on my TwentyOne template. Not sure why. Are you using TwentyOne too?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated