Cart template: Chage billing clycle from dropdown to radio

Dhush · July 19, 2017

Hi,

I want to change my billing cycle option on cart (configoption) page from dropdown to radio. I know this is available on Modern template, bu i need this also in Standard cart.

I have edited the template but "Order summary" is not updating.

@Brain can you help me with this?

Thank you.

{if $pricing.type eq "recurring"}
<h3>{$LANG.cartchoosecycle}</h3>
<div class="billingcycle">
<table width="100%" cellspacing="0" cellpadding="0" class="configtable">
   {if $pricing.monthly}
       <tr>
           <td class="radiofield">
               <input type="radio" name="billingcycle" id="cycle1" value="monthly"{if $billingcycle eq "monthly"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value){else}recalctotals(){/if}" />
           </td>
           <td class="fieldarea">
               <label for="cycle1" class="radio-inline">{$pricing.monthly}</label>
           </td>
       </tr>
   {/if}
   {if $pricing.quarterly}
       <tr>
           <td class="radiofield">
               <input type="radio" name="billingcycle" id="cycle2" value="quarterly"{if $billingcycle eq "quarterly"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value){else}recalctotals(){/if}" />
           </td>
           <td class="fieldarea">
               <label for="cycle2" class="radio-inline">{$pricing.quarterly}</label>
           </td>
       </tr>
   {/if}
   {if $pricing.semiannually}
       <tr>
           <td class="radiofield">
               <input type="radio" name="billingcycle" id="cycle3" value="semiannually"{if $billingcycle eq "semiannually"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value){else}recalctotals(){/if}" />
           </td>
           <td class="fieldarea">
               <label for="cycle3" class="radio-inline">{$pricing.semiannually}</label>
           </td>
       </tr>
   {/if}
   {if $pricing.annually}
       <tr>
           <td class="radiofield">
               <input type="radio" name="billingcycle" id="cycle4" value="annually"{if $billingcycle eq "annually"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value){else}recalctotals(){/if}" />
           </td>
           <td class="fieldarea">
               <label for="cycle4" class="radio-inline">{$pricing.annually}</label>
           </td>
       </tr>
   {/if}
   {if $pricing.biennially}
       <tr>
           <td class="radiofield">
               <input type="radio" name="billingcycle" id="cycle5" value="biennially"{if $billingcycle eq "biennially"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value){else}recalctotals(){/if}" />
           </td>
           <td class="fieldarea">
               <label for="cycle5" class="radio-inline">{$pricing.biennially}</label>
           </td>
       </tr>
   {/if}
   {if $pricing.triennially}
       <tr>
           <td class="radiofield">
               <input type="radio" name="billingcycle" id="cycle6" value="triennially"{if $billingcycle eq "triennially"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value){else}recalctotals(){/if}" />
           </td>
           <td class="fieldarea">
               <label for="cycle6" class="radio-inline">{$pricing.triennially}</label>
           </td>
       </tr>
   {/if}
</table>
</div>
{/if}

Edited July 19, 2017 by Dhush

Dhush · July 20, 2017

Hi,

can some on shed some light?

@Brain please...

Dhush · July 21, 2017

Yet to get help on this....

AffordableDomainsCanada · July 21, 2017

If you find you are getting no response, it may be that this task is more time consuming then we think. I know it seems simple but it may not be.

You may find a faster solution if you post the Service/Offers and request section and hire a developer to complete this task for you!

Searching the forums may also prove successful!

brian! · July 21, 2017

If you find you are getting no response, it may be that this task is more time consuming then we think. I know it seems simple but it may not be.

or constantly bumping a thread for an responses really annoying... and usually pushes the poster to the bottom of my todo list - or, on some occasions, completely off of it!

{if $pricing.type eq "recurring"}
   <div class="field-container">
       <div class="form-group" id="productConfigurableOptions">
           <div class="row">
               <div class="col-md-12">
                   <label for="inputBillingcycle">{$LANG.cartchoosecycle}</label>
               </div>
               {if $pricing.monthly}
                   <div class="col-md-6">
                       <input type="radio" name="billingcycle" id="cycle1" value="monthly"{if $billingcycle eq "monthly"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" />
                       <label for="cycle1" class="radio-inline">{$pricing.monthly}</label>
                   </div>
               {/if}
               {if $pricing.quarterly}
                   <div class="col-md-6">
                       <input type="radio" name="billingcycle" id="cycle2" value="quarterly"{if $billingcycle eq "quarterly"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" />
                       <label for="cycle2" class="radio-inline">{$pricing.quarterly}</label>
                   </div>
               {/if}
               {if $pricing.semiannually}
                   <div class="col-md-6">                                    
                       <input type="radio" name="billingcycle" id="cycle3" value="semiannually"{if $billingcycle eq "semiannually"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" />
                       <label for="cycle3" class="radio-inline">{$pricing.semiannually}</label>
                   </div>
               {/if}
               {if $pricing.annually}
                   <div class="col-md-6">
                       <input type="radio" name="billingcycle" id="cycle4" value="annually"{if $billingcycle eq "annually"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" />
                       <label for="cycle4" class="radio-inline">{$pricing.annually}</label>
                   </div>    
               {/if}
               {if $pricing.biennially}
                   <div class="col-md-6">
                       <input type="radio" name="billingcycle" id="cycle5" value="biennially"{if $billingcycle eq "biennially"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" />
                       <label for="cycle5" class="radio-inline">{$pricing.biennially}</label>
                   </div>    
               {/if}                                
               {if $pricing.triennially}
                   <div class="col-md-6">
                       <input type="radio" name="billingcycle" id="cycle6" value="triennially"{if $billingcycle eq "triennially"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" />
                       <label for="cycle6" class="radio-inline">{$pricing.triennially}</label>
                   </div>    
               {/if}            
           </div>                                    
       </div>
   </div>
{/if}

or with monthly pricing breakdown enabled...

which demonstrates how you'll have to test your layout using multiple languages to ensure that the divs are wide enough to accommodate the content. :idea:

and in answer to your next question, yes the output for each cycle can be modified - just add a {debug} to the template and you can see what variables are available for you to use directly (or manipulate to your own needs using Smarty).

Dhush · July 25, 2017

Thank you, i already did it in other way, now its working great.

forgot to update thread. Sorry :twisted:

Md Rasel Khan · November 30, 2020

On 7/21/2017 at 9:29 PM, brian! said:

or constantly bumping a thread for an responses really annoying... and usually pushes the poster to the bottom of my todo list - or, on some occasions, completely off of it!


{if $pricing.type eq "recurring"}
   <div class="field-container">
       <div class="form-group" id="productConfigurableOptions">
           <div class="row">
               <div class="col-md-12">
                   <label for="inputBillingcycle">{$LANG.cartchoosecycle}</label>
               </div>
               {if $pricing.monthly}
                   <div class="col-md-6">
                       <input type="radio" name="billingcycle" id="cycle1" value="monthly"{if $billingcycle eq "monthly"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" />
                       <label for="cycle1" class="radio-inline">{$pricing.monthly}</label>
                   </div>
               {/if}
               {if $pricing.quarterly}
                   <div class="col-md-6">
                       <input type="radio" name="billingcycle" id="cycle2" value="quarterly"{if $billingcycle eq "quarterly"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" />
                       <label for="cycle2" class="radio-inline">{$pricing.quarterly}</label>
                   </div>
               {/if}
               {if $pricing.semiannually}
                   <div class="col-md-6">                                    
                       <input type="radio" name="billingcycle" id="cycle3" value="semiannually"{if $billingcycle eq "semiannually"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" />
                       <label for="cycle3" class="radio-inline">{$pricing.semiannually}</label>
                   </div>
               {/if}
               {if $pricing.annually}
                   <div class="col-md-6">
                       <input type="radio" name="billingcycle" id="cycle4" value="annually"{if $billingcycle eq "annually"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" />
                       <label for="cycle4" class="radio-inline">{$pricing.annually}</label>
                   </div>    
               {/if}
               {if $pricing.biennially}
                   <div class="col-md-6">
                       <input type="radio" name="billingcycle" id="cycle5" value="biennially"{if $billingcycle eq "biennially"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" />
                       <label for="cycle5" class="radio-inline">{$pricing.biennially}</label>
                   </div>    
               {/if}                                
               {if $pricing.triennially}
                   <div class="col-md-6">
                       <input type="radio" name="billingcycle" id="cycle6" value="triennially"{if $billingcycle eq "triennially"} checked{/if} onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" />
                       <label for="cycle6" class="radio-inline">{$pricing.triennially}</label>
                   </div>    
               {/if}            
           </div>                                    
       </div>
   </div>
{/if}

or with monthly pricing breakdown enabled...

which demonstrates how you'll have to test your layout using multiple languages to ensure that the divs are wide enough to accommodate the content. :idea:

and in answer to your next question, yes the output for each cycle can be modified - just add a {debug} to the template and you can see what variables are available for you to use directly (or manipulate to your own needs using Smarty).

Is there any way by adding hook?

brian! · November 30, 2020

11 hours ago, Md Rasel Khan said:

Is there any way by adding hook?

I suspect you could do it using JS in a hook... if you really had to. 😎

Md Rasel Khan · November 30, 2020

1 minute ago, brian! said:

I suspect you could do it using JS in a hook... if you really had to. 😎

Ha ha! No need... 🤓

BlueAngelHost · December 22, 2020

@Brian can you please update this code to display billing cycle to display from drop-down to radio, as the code you shared in 2017 in this post is no more working with the latest WHMCS version.

thanks in advance

brian! · December 23, 2020

13 hours ago, BlueAngelHost said:

can you please update this code to display billing cycle to display from drop-down to radio, as the code you shared in 2017 in this post is no more working with the latest WHMCS version.

when you say latest version, are you talking about the v8.1 betas ? because the above code would still work in v8.0.4 standard cart...

in fact, even when I view it on v8.1 RC1, it still works..

possibly, if the content of each radio button needed to be wider, then you might need to use 1 column rather than 2 - but that's just changing the six references of col-md-6 to col-md-12 in the code of the cycles.

BlueAngelHost · December 23, 2020

the code shows the billing cycle in radio format but the price for the configurable option do not update in the order summary

https://prnt.sc/w8ri2w

in the above image the billing cycle is set to monthly for a dedicated server which has default RAM of 16 GB which I change to 32GB from the Ram configurable option and the price is +20 for the server, but this price did not updated in summary neither the price updated.

so that's why I though the code is from 2017 maybe it is no longer working the current stable release.

I checked this with other products also like for shared hosting, VPS and Dedicated server and this is the same for all configurable options. i,e if I buy an IP with the shared hosting, it doesn't add up in the summary neither the price adds up.

waiting for your kind reply

brian! · December 24, 2020

15 hours ago, BlueAngelHost said:

the code shows the billing cycle in radio format but the price for the configurable option do not update in the order summary

for me, testing in v8 or even v8.1, the order summary is updated - both for the main price and any configurable options...

in the above, the produced is priced 10/20/30/40/50/60 and one config option is 1/2/3/4/5/6

15 hours ago, BlueAngelHost said:

in the above image the billing cycle is set to monthly for a dedicated server which has default RAM of 16 GB which I change to 32GB from the Ram configurable option and the price is +20 for the server, but this price did not updated in summary neither the price updated.

I can see the config option price isn't being updated visually on the page - as it's Xmas Eve (and i'm definitely not JS coding for the next few days!), i'm tempted to say the quick fix would be to remove the price from the select options (which is a simple change of variable used in the template), but if it's also not updating the order summary for you, then that might be a JS issue with your install.

Msonliy · September 13, 2021

On 12/24/2020 at 6:28 PM, brian! said:

for me, testing in v8 or even v8.1, the order summary is updated - both for the main price and any configurable options...

in the above, the produced is priced 10/20/30/40/50/60 and one config option is 1/2/3/4/5/6

I can see the config option price isn't being updated visually on the page - as it's Xmas Eve (and i'm definitely not JS coding for the next few days!), i'm tempted to say the quick fix would be to remove the price from the select options (which is a simple change of variable used in the template), but if it's also not updating the order summary for you, then that might be a JS issue with your install.

Hello, is there any progress

Thank you for help.

pRieStaKos · September 14, 2021

You should check Brian’s signature…

He is off

Edited September 14, 2021 by pRieStaKos

Msonliy · September 14, 2021

Thank you information...

Did you find a solution for this issue?

Msonliy · September 14, 2021

43 minutes ago, pRieStaKos said:

You should check Brian’s signature…

He is off

brian! · October 3, 2021

On 13/09/2021 at 14:36, Msonliy said:

Hello, is there any progress

to be honest, I can't remember if I got around to fixing it - it was 10 months ago!

weelow · April 6, 2022

I am stuck on the same issue, if anyone found a solution for updating the order summary using radio buttons please share your success.

Cart template: Chage billing clycle from dropdown to radio

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Important Information