Adding back the Manage button on product page.

[Chris74]

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 ?

[brian!]

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.

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>

[Chris74]

That's perfect, thanks Brian. Do you know what makes the entire row clickable?

[brian!]

7 minutes ago, Chris74 said:

That's perfect, thanks Brian. Do you know what makes the entire row clickable?

the onclick in the <tr>

[Chris74]

4 minutes ago, brian! said:

the onclick in the <tr>

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

[brian!]

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;}

[Chris74]

Ahh yes, thats great, thanks again!

[Chris74]

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?

[brian!]

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.

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>

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 October 24, 2019 by brian!

[Chris74]

Brian you truly are a legend! Thank you once again.

[aegisdesign]

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.

 

[Synister]

Nice, Thanks Ive been wanting to add a manage button/icon back for awhile.

Question.

Is there a way to make the Service List default to Active Service on top/Inactive Service on bottom.