Remove Sidebar from product detail page

[Dhush]

Hi,

 

I am new to WHMCS, can some one explain me on how to remove both the sidebars completely from client area? particularly from product details page(Manage Product).

[brian!]

you would create a .php file in /includes/hooks/ - give it a filename and add the following code to it...

 

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimarySidebar', 1, function(MenuItem $primarySidebar)
{
   if (!is_null($primarySidebar->getChild('Service Details Overview'))) {
            $primarySidebar->removeChild('Service Details Overview');
   }
   if (!is_null($primarySidebar->getChild('Service Details Actions'))) {
            $primarySidebar->removeChild('Service Details Actions');
   }    

});

and that will remove both sidebars.

Edited August 6, 2016 by brian!

[Dhush]

thank you Brain,

Is the above code removes only from product details page or from whole client area?

 

- - - Updated - - -

 

Ignore my above comments,

This works great...

[twhiting9275]

That would be only from the product details page.

Ideally, you don't want to remove that, because it contains details. If what you're after (I'm guessing by the highlighted area) is removing the cancellation link, do that by going to admin -> setup -> general settings -> other, untick 'show cancellation link', then save

[Dhush]

Hi,

 

can you tell me how can i place "overview" menu including sub-menus in main nav bar?

 

Thank you..

[brian!]

do you mean you want to have the sidebar (overview & actions) within the menu navbar ?

 

there are a number of ways to do this - exactly how will depend on if you want to do this only on the 'productdetails' page or if you need to do it elsewhere too.

[Dhush]

I need this only on product details page.

[brian!]

but do you need both the "Information" link and "Actions" sidebar... or just the info link in the navbar?

[Dhush]

I think both will be nice, because if someone looking to cancel their service it will be easy.

So having both overview amd action will be good.

 

Thanks

Edited August 9, 2016 by Dhush

[jagathks]

By placing addchild in nav bar you can achieve this!

 

refer hook section for more...

Edited August 10, 2016 by jagathks

[brian!]

I think both will be nice, because if someone looking to cancel their service it will be easy.

So having both overview and action will be good.

it is possible to move the sidebars to the navbar - it's relatively simple to do, but it can/will get complicated when you need to fine tune it.

 

as you only want to do this on one page, here's what you need to do.

 

step 1 - delete the above hook file... for this method to work, we do not want to remove the sidebar via the action hook method.

step 2 - in /templates/six (or your custom template based on six)/header.tpl change the following at the end of the file...

 

<section id="main-body" class="container">

   <div class="row">
       {if !$inShoppingCart && ($primarySidebar->hasChildren() || $secondarySidebar->hasChildren())}
           {if $primarySidebar->hasChildren()}
               <div class="col-md-9 pull-md-right">
                   {include file="$template/includes/pageheader.tpl" title=$displayTitle desc=$tagline showbreadcrumb=true}
               </div>
           {/if}
           <div class="col-md-3 pull-md-left sidebar">
               {include file="$template/includes/sidebar.tpl" sidebar=$primarySidebar}
           </div>
       {/if}
       <!-- Container for main page display content -->
       <div class="{if !$inShoppingCart && ($primarySidebar->hasChildren() || $secondarySidebar->hasChildren())}col-md-9 pull-md-right{else}col-xs-12{/if} main-content">
           {if !$primarySidebar->hasChildren() && !$showingLoginPage && !$inShoppingCart && $templatefile != 'homepage'}
               {include file="$template/includes/pageheader.tpl" title=$displayTitle desc=$tagline showbreadcrumb=true}
           {/if}

to...

 

<section id="main-body" class="container">

   <div class="row">
       {if !$inShoppingCart && ($primarySidebar->hasChildren() || $secondarySidebar->hasChildren()) && $templatefile neq 'clientareaproductdetails'}
           {if $primarySidebar->hasChildren()}
               <div class="col-md-9 pull-md-right">
                   {include file="$template/includes/pageheader.tpl" title=$displayTitle desc=$tagline showbreadcrumb=true}
               </div>
           {/if}
           <div class="col-md-3 pull-md-left sidebar">
               {include file="$template/includes/sidebar.tpl" sidebar=$primarySidebar}
           </div>
       {/if}
       <!-- Container for main page display content -->
       <div class="{if !$inShoppingCart && ($primarySidebar->hasChildren() || $secondarySidebar->hasChildren()) && $templatefile neq 'clientareaproductdetails'}col-md-9 pull-md-right{else}col-xs-12{/if} main-content">
           {if !$primarySidebar->hasChildren() && !$showingLoginPage && !$inShoppingCart && $templatefile != 'homepage' || $templatefile eq 'clientareaproductdetails'}
               {include file="$template/includes/pageheader.tpl" title=$displayTitle desc=$tagline showbreadcrumb=true}
           {/if}

this removes the entire sidebar from only the "Product Details" page in the client area, and adjusts the output width.

 

step 3 - now we can move the sidebar to the navbar and to do this, we make another change to header.tpl by replacing...

 

                <ul class="nav navbar-nav">

                   {include file="$template/includes/navbar.tpl" navbar=$primaryNavbar}

               </ul>

with...

 

                <ul class="nav navbar-nav">
                   {if $templatefile eq 'clientareaproductdetails'}{include file="$template/includes/navbar.tpl" navbar=$primarySidebar}{/if}
                   {include file="$template/includes/navbar.tpl" navbar=$primaryNavbar}
               </ul>

if you do that, then the sidebars will now appear (and work!) in the navbar...

 

as shown in the above example, i've put the 'sidebar' at the beginning of the navbar - using this method, you really only have four places where you can add it - at the beginning/end of either the primary (1/2) or secondary navbars (3/4)...

 

what you cannot do, before you even ask me about doing it(!), is place these sidebar(s) anywhere within an existing navbar, e.g within the "Services" dropdown... it's probably not impossible, but would either require some clever array manipulation in PHP or complex Smarty template edits - neither of which I fancy wasting any of my time on!

 

if you needed to put these sidebar links in a specific spot, then it would be easier to add additional links to the navbar using an action hook - but you would need to recreate the links in the hook, rather than embedding a pre-existing sidebar into the navbar as we are doing here.

 

so the above code places the sidebar in the (1) location in the navbar - if you wanted it at the end of the navbar (2), you would use...

 

                <ul class="nav navbar-nav">
                   {include file="$template/includes/navbar.tpl" navbar=$primaryNavbar}
                   {if $templatefile eq  'clientareaproductdetails'}{include file="$template/includes/navbar.tpl"  navbar=$primarySidebar}{/if}
               </ul>

and you'll somethink see this...

 

if you wanted it around the secondary navbar (3 or 4), then you would edit the code below instead in a similar way...

 

                <ul class="nav navbar-nav navbar-right">
                   {include file="$template/includes/navbar.tpl" navbar=$secondaryNavbar}
               </ul>

also, for those reading this thread and interested in using the idea in other pages, you can do so - either adding primary and/or secondary sidebars to the navbar... the product details page only uses a primary sidebar, but other pages have both... some primary sidebars aren't suitable for this method, e.g filter sidebars - I can see why they don't work, and if I ever write a proper tutorial about this, i'll look into it finding a possible fix (but as I say some of them will never be suitable for navbar).... I think all the secondary sidebars that i've tested this with have behaved correctly.

 

I should also mention that, as far as WHMCS is concerned, these are still sidebars and can therefore still be manipulated via action hooks... e.g on that first image where you have "Overview" / "Actions" / "Home", it's a little weird to have "Home" third, so if you wanted to move it to first, what you could do is use a hook to remove it from the navbar, and then another hook (in the same file) to add a "Home" link to the top of the primary sidebar... which would effectively move the "Home" link from 3rd to 1st.

 

that's where it can get a little complicated - moving the child menuitems is easy, but for others planning on using this method more widely, you should really plan which menus you want and where and then write the hooks to do that... and also check that there is enough space in the navbar to show both the default navbars and these sidebars together (on some there isn't).

 

finally, and slightly off-topic, but someone once asked me about showing the Product Categories (Product Groups) from the cart in the navbar instead - this method can be used to do that...

 

                <ul class="nav navbar-nav">
                   {if $filename eq 'cart'}{include file="$template/includes/navbar.tpl" navbar=$secondarySidebar}{/if}                
                   {include file="$template/includes/navbar.tpl" navbar=$primaryNavbar}
               </ul>

and you'll see...

 

with this method, "Categories" and "Actions" will work... "Change Currency" won't - but you don't need it to anyway as i've previously described how to move the currency to the notification box.

 

http://forum.whmcs.com/showthread.php?115658-currency-selector-on-header-tpl&p=467638#post467638

 

what you would do is similar to the above method - you'd hide the sidebar in the template and then use a hook to remove the "Choose Currency" sidebar - that would remove it from the navbar too.

 

as I said previously, i'll probably write this up into a tutorial at some point and explore the issues more thoroughly.

 

- - - Updated - - -

 

By placing addchild in nav bar you can achieve this!

refer hook section for more...

that's the usual way to add links!

[Dhush]

Thank you @Brain,

 

I like option 2, look great for me.

 

but i don't want to mess with my tpl files, can i achieve it through hooks?

As i am new to WHMCS, i takes some time to learn. help me on this.

 

Thanks again.

[brian!]

I like option 2, look great for me.

but I don't want to mess with my tpl files, can I achieve it through hooks?

it depends exactly what you want to do...

 

if you want to embed these existing sidebars into the navbar, then I think template editing would be the only way - you might be able to do some parts of the process via hooks, but there'd likely need to be template edits at some point... i'll take another look, but I just can't see it... worst case scenario, it's just one file that needs tweaking and if you rename your template, these changes won't be overwritten during an update.

 

if you only want to use hooks, then you can do so - but the problem will be that you won't necessarily know which functions are available for the selected product... e.g if it's a cPanel hosting product, the Actions sidebar would have links to cPanel and Webmail; if the product can be up/downgraded; if it has configurable options; if it has downloads... you can code to check for all these things and add the child links in if they're applicable to the product, but it's a lot of coding!

 

for example, here's a simple action hook that adds an "Overview" tab to the navbar, only on the products details page, with one "Information" link (which is effectively linking back to itself lol) - it's very basic but over 30 lines long... if you were to add in all the options that might be needed for an "Actions" menu, it would be even longer...

 

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
{

   $filename = APP::getCurrentFileName();
   $action = $_GET['action'];

   $service = Menu::context("service");
   $serviceid = $service->id;

   if ($filename=='clientarea' && $action=='productdetails') {

       $primaryNavbar->addChild('Overview', array(
                       'label' => Lang::trans("overview"),
                       'order' => '30',
                       'icon' => 'fa-star'
       ));

       $primaryNavbar->getChild('Overview')
                       ->addChild('Information', array(
                       'label' => Lang::trans("information"),
                       'uri' => 'clientarea.php?action=productdetails&id='.$serviceid.'#tabOverview'
       ));
   }

});

?>

i'm not even sure whether which options are available to each product type is documented anywhere - so if you're new to WHMCS, it's probably going to be easier to just edit the header.tpl template and embed the sidebar - WHMCS have already done the coding for those different product conditions, so it seems pointless to try to reproduce it manually in the navbar with a hook (unless you needed to make changes to it in some way).

[Dhush]

@Brain, thanks for your detailed explaination and guidence.

then i'll go for template edit. Thanks for your guidence.

[system53]

Can I make it only on the specific module that uses the Product-Details page.

 

For example, we use a special module for the product.

I don't want these products to appear in the sidebar

But I want to appear in other products

[brian!]

Can I make it only on the specific module that uses the Product-Details page.

For example, we use a special module for the product.

I don't want these products to appear in the sidebar

But I want to appear in other products

the devil is in the detail with things like this - but you should be able to exclude anything if you can find a way to identify it in the hook.

[system53]

For example, we use a special module for the product.

I don't want these products to appear in the sidebar

But I want to appear in other products

the devil is in the detail with things like this - but you should be able to exclude anything if you can find a way to identify it in the hook.

 

Thank you Brian

How Can I do this

Can you give a sample code

[brian!]

Can you give a sample code

not without seeing what you want to remove.

 

can you post a screenshot and highlight what you want to remove?

[system53]

not without seeing what you want to remove.

 

can you post a screenshot and highlight what you want to remove?

 

"provisioning module" on a module I'm working.

"provisioning module" module-defined products.

I don't want the sidebar to appear on the Product Details page.

 

Visual like the following

 

 

As I said, I don't want sidebar to appear on these two

[brian!]

so, for certain products, you want to remove both those sidebars ?

[system53]

so, for certain products, you want to remove both those sidebars ?

 

Yes.

Just the products that I want to remove the custom module uses.

 

For example,

"cpanel" in the module look.

but "plesk" module to appear.

 

 

Currently, the "provisioning module" a module we are working on.

 

I don't want to appear in the products defined in this module

 

But if any other product in is defined in another module

for example,

"cpanel module"

then look at the side options I want to make

[brian!]

the post below might demonstrate how to check if it's a cpanel product...

 

https://forum.whmcs.com/showthread.php?104894-Login-to-cPanel-amp-Webmail-on-Client-Product-Details&p=435091#post435091

 

there would be other ways if you want to check for specific products...

 

it's possible, if you remove both sidebars for a specific product, they'll be a space on the right hand side where they used to be.

[system53]

the post below might demonstrate how to check if it's a cpanel product...

 

https://forum.whmcs.com/showthread.php?104894-Login-to-cPanel-amp-Webmail-on-Client-Product-Details&p=435091#post435091

 

there would be other ways if you want to check for specific products...

 

it's possible, if you remove both sidebars for a specific product, they'll be a space on the right hand side where they used to be.

 

I couldn't think

 

Now tell me;

 

I am using the following code

 

HOOKS/ PHP

 

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimarySidebar', 1, function(MenuItem $primarySidebar)
{
   if (!is_null($primarySidebar->getChild('Service Details Overview'))) {
            $primarySidebar->removeChild('Service Details Overview');
   }
   if (!is_null($primarySidebar->getChild('Service Details Actions'))) {
            $primarySidebar->removeChild('Service Details Actions');
   }    

});

 

This code is removing all the side options on the Product Details page

The side menu is the removal of only certain modules or products.

[brian!]

as an example, let's say that you want to remove the two sidebars for a product with an ID of 45 (e.g pid = 45)...

 

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimarySidebar', 1, function(MenuItem $primarySidebar)
{
   $service = Menu::context('service');  
   $pid = $service->packageid;

   if ($pid == '45') {

       if (!is_null($primarySidebar->getChild('Service Details Actions'))) {
                    $primarySidebar->removeChild('Service Details Actions');
       }
       if (!is_null($primarySidebar->getChild('Service Details Overview'))) {
                    $primarySidebar->removeChild('Service Details Overview');
       }
   }
});

with the above hook active, when a product with an ID of 45 is shown on the productdetails page, it will remove the two sidebars (and adjust page width if there are no other sidebars) - for all other products it won't.

 

of course, there are more options available than just PID - you could identify by a product group (or groups); by a server; a module or many many other options - most of which are listed in the documentation...

 

http://docs.whmcs.com/Client_Area_Sidebars_Cheatsheet

http://docs.whmcs.com/classes/7.0/WHMCS/Product/Product.html

http://docs.whmcs.com/classes/7.0/WHMCS/Service/Service.html

[system53]

as an example, let's say that you want to remove the two sidebars for a product with an ID of 45 (e.g pid = 45)...

 

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimarySidebar', 1, function(MenuItem $primarySidebar)
{
   $service = Menu::context('service');  
   $pid = $service->packageid;

   if ($pid == '45') {

       if (!is_null($primarySidebar->getChild('Service Details Actions'))) {
                    $primarySidebar->removeChild('Service Details Actions');
       }
       if (!is_null($primarySidebar->getChild('Service Details Overview'))) {
                    $primarySidebar->removeChild('Service Details Overview');
       }
   }
});

with the above hook active, when a product with an ID of 45 is shown on the productdetails page, it will remove the two sidebars (and adjust page width if there are no other sidebars) - for all other products it won't.

 

of course, there are more options available than just PID - you could identify by a product group (or groups); by a server; a module or many many other options - most of which are listed in the documentation...

 

http://docs.whmcs.com/Client_Area_Sidebars_Cheatsheet

http://docs.whmcs.com/classes/7.0/WHMCS/Product/Product.html

http://docs.whmcs.com/classes/7.0/WHMCS/Service/Service.html

 

 

Thank you, Brian

Well, for certain groups of it, how I do it.

Edited January 18, 2017 by system53