Jump to content
Dhush

Cart template: Chage billing clycle from dropdown to radio

Recommended Posts

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.

Capture.PNG

 

{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 by Dhush

Share this post


Link to post
Share on other sites

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!

Share this post


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

rb7POra.png

or with monthly pricing breakdown enabled...

JvyvC2Y.png

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).

Share this post


Link to post
Share on other sites

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

forgot to update thread. Sorry :twisted:

Untitled.png

Share this post


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

 

rb7POra.png

 

 

or with monthly pricing breakdown enabled...

 

JvyvC2Y.png

 

 

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?

Share this post


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

Share this post


Link to post
Share on other sites

@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

Share this post


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

fGJZEpB.png

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

AwowIRC.png

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.

Share this post


Link to post
Share on other sites

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

Share this post


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

o5tUxTQ.gif

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.

Share this post


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

o5tUxTQ.gif

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.

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