Jump to content
sonuyos

Anyway to add a button in front of invoice/item to redirect it to service page or mention service id on the items?

Recommended Posts

a screenshot might be helpful here as to where you are talking about.... i'm unsure which page you're referring to! 😕

Share this post


Link to post
Share on other sites
3 minutes ago, brian! said:

a screenshot might be helpful here as to where you are talking about.... i'm unsure which page you're referring to! 😕

Invoice itself, in admin area. in every invoice.

Share this post


Link to post
Share on other sites
22 minutes ago, sonuyos said:

Invoice itself, in admin area. in every invoice.

to add a button on the left of each item on that page would be a jQuery hook (same would apply to appending the item content with the ID#) - kian is on a roll today with them, so I can leave that to him if you want to go down that path.

unless i'm missing something, you're almost certainly going to have to query the database to get the service/domain ID for each invoice item.

AdminInvoicesControlsOutput would be an alternative hook if you want to avoid using jQuery, but it would place the custom output below the buttons (top right) on the invoice page.

jZB32WC.png

Share this post


Link to post
Share on other sites
On 1/14/2020 at 7:22 PM, brian! said:

to add a button on the left of each item on that page would be a jQuery hook (same would apply to appending the item content with the ID#) - kian is on a roll today with them, so I can leave that to him if you want to go down that path.

unless i'm missing something, you're almost certainly going to have to query the database to get the service/domain ID for each invoice item.

AdminInvoicesControlsOutput would be an alternative hook if you want to avoid using jQuery, but it would place the custom output below the buttons (top right) on the invoice page.

jZB32WC.png

Actually i wanted to put something right next to the the individual items? - https://prnt.sc/qrl9vv

 

That would be like, clicking on it and then it will open the service it is related to, like how in service id we have option to view invoices, similar but opposite.

Share this post


Link to post
Share on other sites

Preview:

sample-220.png.3496987d9aab2b5f3b85362bfde0f989.png

Code:

use WHMCS\Database\Capsule;

add_hook('AdminAreaHeaderOutput', 1, function($vars)
{
    if ($vars['filename'] == 'invoices' AND $_GET['id'])
    {
        $Data = Capsule::select(Capsule::raw('SELECT id, type, relid FROM tblinvoiceitems WHERE invoiceid = "' . $_GET['id'] . '"'));
        $Data = json_encode($Data, true);

        $output .= <<<HTML
                    <script type="text/javascript">
                    	$(document).ready(function(){
                            var rel = {$Data};
                        	var rows = $('.datatable td > input[name^="itemids"]').first().closest('tbody').children('tr');

                            $.each(rows, function(i,e){
                            	$(e).children('*').last().clone().html('').insertBefore($(e).children('*').last());
                            })

                            rows.first().children('th').eq(-2).text('Meoooow!');

                            $.each(rel, function(i,e){
                                if (e.type == 'Hosting') {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = 'fa-server';
                                }
                                else if (e.type.includes('DomainRegister', 'DomainTransfer', 'Domain')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = 'fa-globe';
                                }

                                if (url)
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<a href="'+ url +'" target="_blank"><i class="fas '+ faicon +'"></i></a>');
                                }
                                else
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<img src="https://katamaze.com/templates/kata/img/stuff/nyan-cat.png" style="height: 27px;width: 100px;">');
                                }
                            })
                        })
                    </script>
HTML;

        return $output;
    }
});

For domains there's the "globe" icon and for hosting accounts "server" one. You can do the same for coupons, late fees, upgrades etc.

Edited by Kian

Share this post


Link to post
Share on other sites
On 1/23/2020 at 8:04 PM, Kian said:

Preview:

sample-220.png.3496987d9aab2b5f3b85362bfde0f989.png

Code:


use WHMCS\Database\Capsule;

add_hook('AdminAreaHeaderOutput', 1, function($vars)
{
    if ($vars['filename'] == 'invoices' AND $_GET['id'])
    {
        $Data = Capsule::select(Capsule::raw('SELECT id, type, relid FROM tblinvoiceitems WHERE invoiceid = "' . $_GET['id'] . '"'));
        $Data = json_encode($Data, true);

        $output .= <<<HTML
                    <script type="text/javascript">
                    	$(document).ready(function(){
                            var rel = {$Data};
                        	var rows = $('.datatable td > input[name^="itemids"]').first().closest('tbody').children('tr');

                            $.each(rows, function(i,e){
                            	$(e).children('*').last().clone().html('').insertBefore($(e).children('*').last());
                            })

                            rows.first().children('th').eq(-2).text('Meoooow!');

                            $.each(rel, function(i,e){
                                if (e.type == 'Hosting') {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = 'fa-server';
                                }
                                else if (e.type.includes('DomainRegister', 'DomainTransfer', 'Domain')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = 'fa-globe';
                                }

                                if (url)
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<a href="'+ url +'" target="_blank"><i class="fas '+ faicon +'"></i></a>');
                                }
                                else
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<img src="https://katamaze.com/templates/kata/img/stuff/nyan-cat.png" style="height: 27px;width: 100px;">');
                                }
                            })
                        })
                    </script>
HTML;

        return $output;
    }
});

For domains there's the "globe" icon and for hosting accounts "server" one. You can do the same for coupons, late fees, upgrades etc.

Thanks, that works marvelously ❤️

Share this post


Link to post
Share on other sites
On 1/23/2020 at 10:34 PM, Kian said:

Preview:

sample-220.png.3496987d9aab2b5f3b85362bfde0f989.png

Code:


use WHMCS\Database\Capsule;

add_hook('AdminAreaHeaderOutput', 1, function($vars)
{
    if ($vars['filename'] == 'invoices' AND $_GET['id'])
    {
        $Data = Capsule::select(Capsule::raw('SELECT id, type, relid FROM tblinvoiceitems WHERE invoiceid = "' . $_GET['id'] . '"'));
        $Data = json_encode($Data, true);

        $output .= <<<HTML
                    <script type="text/javascript">
                    	$(document).ready(function(){
                            var rel = {$Data};
                        	var rows = $('.datatable td > input[name^="itemids"]').first().closest('tbody').children('tr');

                            $.each(rows, function(i,e){
                            	$(e).children('*').last().clone().html('').insertBefore($(e).children('*').last());
                            })

                            rows.first().children('th').eq(-2).text('Meoooow!');

                            $.each(rel, function(i,e){
                                if (e.type == 'Hosting') {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = 'fa-server';
                                }
                                else if (e.type.includes('DomainRegister', 'DomainTransfer', 'Domain')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = 'fa-globe';
                                }

                                if (url)
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<a href="'+ url +'" target="_blank"><i class="fas '+ faicon +'"></i></a>');
                                }
                                else
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<img src="https://katamaze.com/templates/kata/img/stuff/nyan-cat.png" style="height: 27px;width: 100px;">');
                                }
                            })
                        })
                    </script>
HTML;

        return $output;
    }
});

For domains there's the "globe" icon and for hosting accounts "server" one. You can do the same for coupons, late fees, upgrades etc.

Hi, I managed to get this hook added and it did add a new column for me to the invoice. They're blank though and I suspect fa-server and fa-globe is the problem. Where do these images go or come from?

Share this post


Link to post
Share on other sites
Posted (edited)

Figured it out. Works for 'Hosting' but the anything *Domains* is *not* showing the fa-globe icon nor the link. 

Instead, it displays the image file per the code at the bottom OR shows the Services icon instead. Please assist 🙂

Edited by baymax

Share this post


Link to post
Share on other sites

Here's mine:

 

<?php

use WHMCS\Database\Capsule;

add_hook('AdminAreaHeaderOutput', 1, function($vars)
{
    if ($vars['filename'] == 'invoices' AND $_GET['id'])
    {
        $Data = Capsule::select(Capsule::raw('SELECT id, type, relid FROM tblinvoiceitems WHERE invoiceid = "' . $_GET['id'] . '"'));
        $Data = json_encode($Data, true);

        $output .= <<<HTML
                    <script type="text/javascript">
                    	$(document).ready(function(){
                            var rel = {$Data};
                        	var rows = $('.datatable td > input[name^="itemids"]').first().closest('tbody').children('tr');

                            $.each(rows, function(i,e){
                            	$(e).children('*').last().clone().html('').insertBefore($(e).children('*').last());
                            })

                            rows.first().children('th').eq(-2).text('Link');

                            $.each(rel, function(i,e){
                                if (e.type == 'Hosting') {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = 'fa-server';
                                }
                                else if (e.type.includes('DomainRegister', 'DomainTransfer', 'Domain')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = 'fa-globe';
                                }
                                else if (e.type.includes('Addon', 'Setup')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = 'fa-sliders-h';
                                }

                                if (url)
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<a href="'+ url +'" target="_blank"><i class="fas '+ faicon +'"></i></a>');
                                }
                             //   else
                             //   {
                             //       $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<img src="unknown.png" style="height: 16px;width: 16px;">');
                             //   }
                            })
                        })
                    </script>
HTML;

        return $output;
    }
});

 

Share this post


Link to post
Share on other sites

In my example I used FontAwesome 5 but probably your  WHMCS still uses FontAwesome 4. Open FA4 and look for the right class names to use. As a reference the "globe" icon on FA5 is:

<i class="fas fa-globe"></i>

While on FA4 is:

<i class="fa fa-globe"></i>

 

Share this post


Link to post
Share on other sites

FWIW - both versions are working for me locally in v7.10... services and domains have the correct FA icons (using either FAS or FA);

for your tweaked version, addons invoiceitems are showing the correct icon too - though technically the URL would need to be changed to clientsservices.php?aid= if you wanted to link it to the client's product addons page.

 

Share this post


Link to post
Share on other sites

Hey @Kian  @brian!

Thanks for the feedback. I fixed the URL for addons. Since you've confirmed that both versions work on the latest WHMCS, I didn't bother changing the code for that. 

What does this line do?
 

$('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<img src="unknown.png" style="height: 16px;width: 16px;">');

 

The icon is still not appearing for anything *Domains* though. If I remove the code for Addons, Domains seems to be working but not when I include the code for Addons. See below.

<?php

use WHMCS\Database\Capsule;

add_hook('AdminAreaHeaderOutput', 1, function($vars)
{
    if ($vars['filename'] == 'invoices' AND $_GET['id'])
    {
        $Data = Capsule::select(Capsule::raw('SELECT id, type, relid FROM tblinvoiceitems WHERE invoiceid = "' . $_GET['id'] . '"'));
        $Data = json_encode($Data, true);

        $output .= <<<HTML
                    <script type="text/javascript">
                    	$(document).ready(function(){
                            var rel = {$Data};
                        	var rows = $('.datatable td > input[name^="itemids"]').first().closest('tbody').children('tr');

                            $.each(rows, function(i,e){
                            	$(e).children('*').last().clone().html('').insertBefore($(e).children('*').last());
                            })

                            rows.first().children('th').eq(-2).text('Link');

                            $.each(rel, function(i,e){
                                if (e.type == 'Hosting') {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = 'fa-server';
                                }
                                else if (e.type.includes('DomainRegister', 'DomainTransfer', 'Domain')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = 'fa-globe';
                                }
                                else if (e.type.includes('Addon', 'Setup')) {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = 'fa-sliders-h';
                                }

                                if (url)
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<a href="'+ url +'" target="_blank"><i class="fas '+ faicon +'"></i></a>');
                                }
                             //   else
                             //   {
                             //       $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<img src="unknown.png" style="height: 16px;width: 16px;">');
                             //   }
                            })
                        })
                    </script>
HTML;

        return $output;
    }
});

 

Share this post


Link to post
Share on other sites
7 hours ago, baymax said:

What does this line do?

it's just a fallback image and should be shown for any invoiceitem type that isn't covered by the FA if statement - so the obvious one would be if it were a custom invoice, or an addfunds line item - under those circumstances, then it should display the "unknown" image.

it's worth noting that as you've written it in your version (and ignoring that it's commented out), the image path for unknown.png would be relative to your admin folder.

8 hours ago, baymax said:

The icon is still not appearing for anything *Domains* though. If I remove the code for Addons, Domains seems to be working but not when I include the code for Addons. See below.

what happens if you use the following...

        $output .= <<<HTML
                    <script type="text/javascript">
                    	$(document).ready(function(){
                            var rel = {$Data};
                        	var rows = $('.datatable td > input[name^="itemids"]').first().closest('tbody').children('tr');

                            $.each(rows, function(i,e){
                            	$(e).children('*').last().clone().html('').insertBefore($(e).children('*').last());
                            })

                            rows.first().children('th').eq(-2).text('Type');

                            $.each(rel, function(i,e){
                                if (e.type == 'Hosting') {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = e.type;
                                }
                                else if (e.type.includes('DomainRegister', 'DomainTransfer', 'Domain')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = e.type;
                                }
                                else if (e.type == 'Addon') {
                                    var url = 'clientsservices.php?aid=' + e.relid;
                                    var faicon = e.type;
                                }						
                                else {
                                    var faicon = e.type;
                                }

                                if (url)
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<a href="'+ url +'" target="_blank">'+ faicon +'</i></a>');
                                }
                                else
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('' + faicon + '');
                                }
                            })
                        })
                    </script>
HTML;

instead of trying to output an image, it should output the invoiceitem type as text (hyperlinked for hosting/domain/addon) - that should at least help you to determine whether domains are showing.

4H1LmAz.png

then once you get it working, you can replace the text with FA icons, images or whatever.

Share this post


Link to post
Share on other sites

So strange...  it's still working as hyperlinks for everything except Domains. Still just a text. And I've tested it on several domain invoices..

Share this post


Link to post
Share on other sites
4 hours ago, baymax said:

So strange...  it's still working as hyperlinks for everything except Domains. Still just a text. And I've tested it on several domain invoices..

on those unlinked domain items, what is it outputting in the text? DomainRegister etc or something else.

maybe for some unknown reason, it doesn't like 'includes' - if so, just split domains up into single element if statements like the others, e.g

                                else if (e.type == 'DomainRegister') {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = e.type;
                                }
                                

and then repeat for each domain option... you shouldn't really need to do this, but it should work.

Share this post


Link to post
Share on other sites
21 hours ago, brian! said:

on those unlinked domain items, what is it outputting in the text? DomainRegister etc or something else.

maybe for some unknown reason, it doesn't like 'includes' - if so, just split domains up into single element if statements like the others, e.g


                                else if (e.type == 'DomainRegister') {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = e.type;
                                }
                                

and then repeat for each domain option... you shouldn't really need to do this, but it should work.

It just outputted whatever the type was.

Your method worked 😛 THANKS BRIAN!!!!!!!!

Share this post


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