Jump to content
Chris74

Adding back the Manage button on product page.

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 ?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
7 minutes ago, Chris74 said:

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

the onclick in the <tr>

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
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;}

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

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