Jump to content

Adding back the Manage button on product page.


Chris74

Recommended Posts

Six template.

On clientareaproducts.tpl -  the table containing the services is badly designed. Firstly, the entire table row is clickable, but the domain name is also linked in the first cell - and if you click on that, it takes you to the domain in a browser - not the product itself.

Without a definitive "action" button, often the clients don't even know they can click on the product to manage it. To the right is the status of the product. It seems there once was a button to manage the product but this has been  removed with a style element.

The first thing I've done is remove the hyperlink to the URL of the domain on the plan. What I want to achieve is simply to bring back the "Manage Product" button. It's already there...

<td class="responsive-edit-button" style="display: none;">
                        <a href="clientarea.php?action=productdetails&amp;id={$service.id}" class="btn btn-block btn-info">
                            {$LANG.manageproduct}
                        </a>
                    </td>

I've removed the style="display:  none;" part and cleared the template cache, but this doesn't seem to have made any difference. The button hasn't appeared.

Ideally, I'd like to display the status or the button using an IF statement to display one or the other depending on whether  the product is active or not. I guess it would be something like this...

{if $service.status eq "active"}

<td class="responsive-edit-button">
                        <a href="clientarea.php?action=productdetails&amp;id={$service.id}" class="btn btn-block btn-info">
                            {$LANG.manageproduct}
                        </a>
                    </td>
{else}

<td class="text-center"><span class="label status status-{$service.status|strtolower}">{$service.statustext}</span></td>

{/if}

 

Sadly it doesn't work. I just get the loading spinner. I'm not very clued up on this sort of thing so I'm sure I've got it wrong - but I can't be far off ?

Link to comment
Share on other sites

37 minutes ago, Chris74 said:

On clientareaproducts.tpl -  the table containing the services is badly designed. Firstly, the entire table row is clickable, but the domain name is also linked in the first cell - and if you click on that, it takes you to the domain in a browser - not the product itself.

twas ever thus. 🙄

38 minutes ago, Chris74 said:

Without a definitive "action" button, often the clients don't even know they can click on the product to manage it. To the right is the status of the product. It seems there once was a button to manage the product but this has been  removed with a style element.

weirdly they've hidden it twice in the coding - once inline in the template, and also in the css itself.... one of them is surely redundant now. headshake.gif

40 minutes ago, Chris74 said:

I've removed the style="display:  none;" part and cleared the template cache, but this doesn't seem to have made any difference. The button hasn't appeared.

because the css class used declares it as hidden too by default.

51 minutes ago, Chris74 said:

Ideally, I'd like to display the status or the button using an IF statement to display one or the other depending on whether  the product is active or not. I guess it would be something like this...

Sadly it doesn't work. I just get the loading spinner. I'm not very clued up on this sort of thing so I'm sure I've got it wrong - but I can't be far off ?

if they're going to share the same column, i'd have done it like this...

<div class="table-container clearfix">
    <table id="tableServicesList" class="table table-list hidden">
        <thead>
            <tr>
                <th></th>
                <th>{$LANG.orderproduct}</th>
                <th>{$LANG.clientareaaddonpricing}</th>
                <th>{$LANG.clientareahostingnextduedate}</th>
                <th>{$LANG.clientareastatus}</th>
            </tr>
        </thead>
        <tbody>
            {foreach key=num item=service from=$services}
                <tr onclick="clickableSafeRedirect(event, 'clientarea.php?action=productdetails&amp;id={$service.id}', false)">
                    <td class="text-center{if $service.sslStatus} ssl-info{/if}" data-element-id="{$service.id}" data-type="service"{if $service.domain} data-domain="{$service.domain}"{/if}>
                        {if $service.sslStatus}
                            <img src="{$service.sslStatus->getImagePath()}" data-toggle="tooltip" title="{$service.sslStatus->getTooltipContent()}" class="{$service.sslStatus->getClass()}"/>
                        {elseif !$service.isActive}
                            <img src="{$BASE_PATH_IMG}/ssl/ssl-inactive-domain.png" data-toggle="tooltip" title="{lang key='sslState.sslInactiveService'}">
                        {/if}
                    </td>
                    <td><strong>{$service.product}</strong>{if $service.domain}<br />{$service.domain}{/if}</td>
                    <td class="text-center" data-order="{$service.amountnum}">{$service.amount}<br />{$service.billingcycle}</td>
                    <td class="text-center"><span class="hidden">{$service.normalisedNextDueDate}</span>{$service.nextduedate}</td>
                    <td class="text-center">{if $service.rawstatus eq "active"}<a href="clientarea.php?action=productdetails&amp;id={$service.id}" class="btn btn-block btn-info">{$LANG.manageproduct}</a>{else}<span class="label status status-{$service.status|strtolower}">{$service.statustext}</span>{/if}</td>
                </tr>
            {/foreach}
        </tbody>
    </table>
    <div class="text-center" id="tableLoading">
        <p><i class="fas fa-spinner fa-spin"></i> {$LANG.loading}</p>
    </div>
</div>

wEbK1iu.png

Link to comment
Share on other sites

38 minutes ago, Chris74 said:

Tried removing  that already -  and cleared the cache,  but while the actual link no longer works, mousing over the row still changes the cursor.

try...

.table-list > tbody > tr:hover {cursor: default;}

if it doesn't work (it should though), just add !important after default to give it a little push - bear in mind that this, as written, will apply to all tablelist tables... but it sounds like you might want that anyway.

if you don't, and you only want to change the cursor on the services table, then...

.table-list#tableServicesList > tbody > tr:hover {cursor: default;}
Link to comment
Share on other sites

  • 1 month later...

I've just realised that these changes appears to cause a problem with the display of the table depending on the status of the product. The menu on left will show "active" products if you click the Active option on the menu - but now it displays an empty result in the table if you click it. Do you think there would be a way around that?

Link to comment
Share on other sites

one option would be to go back to two columns - the point being that the sidebar menu is filtering on the value of the fifth column (status) and so with "Active" effectively being changed to "Manage Product", then the Active filter term is never found...

<div class="table-container clearfix">
    <table id="tableServicesList" class="table table-list hidden">
        <thead>
            <tr>
                <th></th>
                <th>{$LANG.orderproduct}</th>
                <th>{$LANG.clientareaaddonpricing}</th>
                <th>{$LANG.clientareahostingnextduedate}</th>
                <th>{$LANG.clientareastatus}</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {foreach key=num item=service from=$services}
                <tr onclick="clickableSafeRedirect(event, 'clientarea.php?action=productdetails&amp;id={$service.id}', false)">
                    <td class="text-center{if $service.sslStatus} ssl-info{/if}" data-element-id="{$service.id}" data-type="service"{if $service.domain} data-domain="{$service.domain}"{/if}>
                        {if $service.sslStatus}
                            <img src="{$service.sslStatus->getImagePath()}" data-toggle="tooltip" title="{$service.sslStatus->getTooltipContent()}" class="{$service.sslStatus->getClass()}"/>
                        {elseif !$service.isActive}
                            <img src="{$BASE_PATH_IMG}/ssl/ssl-inactive-domain.png" data-toggle="tooltip" title="{lang key='sslState.sslInactiveService'}">
                        {/if}
                    </td>
                    <td><strong>{$service.product}</strong>{if $service.domain}<br /><a href="http://{$service.domain}" target="_blank">{$service.domain}</a>{/if}</td>
                    <td class="text-center" data-order="{$service.amountnum}">{$service.amount}<br />{$service.billingcycle}</td>
                    <td class="text-center"><span class="hidden">{$service.normalisedNextDueDate}</span>{$service.nextduedate}</td>
                    <td class="text-center"><span class="label status status-{$service.status|strtolower}">{$service.statustext}</span></td>
                    <td class="text-center">{if $service.rawstatus eq "active"}<a href="clientarea.php?action=productdetails&amp;id={$service.id}" class="btn btn-block btn-info"><i class="fas fa-wrench"></i></a>{/if}</td>
                </tr>
            {/foreach}
        </tbody>
    </table>
    <div class="text-center" id="tableLoading">
        <p><i class="fas fa-spinner fa-spin"></i> {$LANG.loading}</p>
    </div>
</div>

and to save space, I've used a FA5 icon on the button...  you could option give the column a heading if you wanted to.

Ln1es01.png

if you wanted to show the button for all products, but have it disabled for non-active services, then you could use the code below for the last <td>...

<td class="text-center"><a href="clientarea.php?action=productdetails&amp;id={$service.id}" class="btn btn-block btn-info" {if $service.rawstatus neq "active"}disabled{/if}><i class="fas fa-wrench"></i></a></td>

9xYzj8s.png

and if you wanted to remove the sort option from this "Manage" column, then...

{include file="$template/includes/tablelist.tpl" tableName="ServicesList" filterColumn="4" noSortColumns="0,5"}

I daresay you could do this in one column, but I suspect that there would have to be a hidden "status" column, and that would need additional coding in other templates or hooks.

Edited by brian!
Link to comment
Share on other sites

  • 1 year later...

Just to add to this. If you wanted to retain the ability to click on the table row but make it more obvious by changing the background colour on hover like normal Bootstrap behaviour add this to your custom.css

.table-list > tbody > tr {
    background-color: #fff;
}
.table-list > tbody > tr:nth-child(even) {
    background-color: #f8fcfd;
}
.table-list > tbody > tr:hover {
	background-color: #f5f5f5;
}
.table-list > tbody > tr > td {
    background-color: inherit;
}
.table-list > tbody > tr:nth-child(even) > td {
    background-color: inherit;
}

For some reason WHMCS's themes set the background colour on the TD cells and not on the TR row so even though the underlying row has had its background changed on hover, the TD colour overrides it to be white or blue.

This change will work across all list tables (products, domains, tickets, invoices etc) which also really should have action buttons too but that's another fight to get WHMCS to change this awful design pattern.

 

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