bmsmithvb Posted April 5, 2014 Share Posted April 5, 2014 Hello, I am trying to configure a slider (using quantity) on the type of configurable option. For example, I am trying to configure a slider for RAM. I want folks to be able to increase (or decrease) by 512 MB at a time. I've set the min and max on the configuration option but I cannot seem to make it work in blocks of 512, it only wants to go up or down by increments of 1. Is anyone familiar with how to do this? 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted April 6, 2014 Share Posted April 6, 2014 Is anyone familiar with how to do this? well, i've just figured out how to do it. it does get a little more involved if you have multiple configurable option sliders changing by different amounts, but I would think that could be fixed with some Smarty code... i'd have to have a play with that. however, I have to say that if it's a viable option for you, it would be much simpler to sell the RAM in whole GB and then the quantity can go up in ones without needing to hack a template. the consequence of going up in say blocks of 512MB, is that by using the slider / quantity method, you will effectively have to price your RAM per 1MB (e.g if they're ordering 512MB, they're actually ordering 512 x 1MB - and so 512 x whatever your RAM quantity price is). so the slider can go move in blocks of 512, but your pricing structure wouldn't allow for rounded figures.. (e.g $10 for 512MB, $20 for 1024MB)... using the slider/quantity method, if you charge $0.01 per MB - 512MB would cost $5.12; 1024MB would be $10.24 etc if that pricing structure is inconvenient for you, then you could tweak the slider to change in fractional blocks... e.g sell RAM in GB, but move in blocks of 0.5 (0.5GB = 512MB; 1GB = 1024MB etc)... if you went down that road, then you would set your quantity prices per 1GB - so if 1GB was $10; 0.5GB would be $5. btw - what order form template are you using? i've quickly tried this in Comparison, but I suspect it would work in the other order forms that allow sliders. 0 Quote Link to comment Share on other sites More sharing options...
bmsmithvb Posted April 6, 2014 Author Share Posted April 6, 2014 well, i've just figured out how to do it. it does get a little more involved if you have multiple configurable option sliders changing by different amounts, but I would think that could be fixed with some Smarty code... i'd have to have a play with that. however, I have to say that if it's a viable option for you, it would be much simpler to sell the RAM in whole GB and then the quantity can go up in ones without needing to hack a template. the consequence of going up in say blocks of 512MB, is that by using the slider / quantity method, you will effectively have to price your RAM per 1MB (e.g if they're ordering 512MB, they're actually ordering 512 x 1MB - and so 512 x whatever your RAM quantity price is). so the slider can go move in blocks of 512, but your pricing structure wouldn't allow for rounded figures.. (e.g $10 for 512MB, $20 for 1024MB)... using the slider/quantity method, if you charge $0.01 per MB - 512MB would cost $5.12; 1024MB would be $10.24 etc if that pricing structure is inconvenient for you, then you could tweak the slider to change in fractional blocks... e.g sell RAM in GB, but move in blocks of 0.5 (0.5GB = 512MB; 1GB = 1024MB etc)... if you went down that road, then you would set your quantity prices per 1GB - so if 1GB was $10; 0.5GB would be $5. btw - what order form template are you using? i've quickly tried this in Comparison, but I suspect it would work in the other order forms that allow sliders. Thanks. We're using Modern Cart. 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted April 6, 2014 Share Posted April 6, 2014 can I ask what you intend to charge for the RAM? - I don't need to know currency, just some figures so I can play with this locally tomorrow. also, 512MB is going to be the minimum ? 0MB not an option ?? I ask because if the starting point is 512MB, then this would virtually be a compulsory option and so its cost would automatically be added to the base price. 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted April 10, 2014 Share Posted April 10, 2014 I'll start with some disappointing news - although we can manipulate the sliders to move in fractional amounts (0.5, 1, 1.5 etc), WHMCS will only accept integers (whole quantities) - so my previous suggestion of selling RAM in 0.5GB amounts is unfortunately not workable with the current version of WHMCS (v5.3.6). however, you didn't ask about doing that - so that will have no impact on you! http://docs.whmcs.com/Addons_and_Configurable_Options#Slider The slider provides a graphical method for clients to specify a quantity. As above choose the Quantity option type, a minimum and maximum quantity must be supplied and used in conjunction with the Comparison, Modern or Slider order form templates. The above documentation page currently makes no mention that you can, by default, also use sliders with the Comparison order form template - you can! in fact, you could probably get them working with the other templates, it would just be a case of making js and css modifications - certainly web20cart can be modified to use them (as shown below). As previously stated, by default the sliders will go up in single steps - which is useful for small quantities, but not so for larger amounts. the jQuery code that controls these sliders is situated in the configureproduct.tpl template in either the Comparison, Modern or Slider order form template folders - it is the same in each of them. {literal} <script> jQuery(function() { {/literal} var configid = '{$configoption.id}'; var configmin = {$configoption.qtyminimum}; var configmax = {$configoption.qtymaximum}; var configval = {if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}; {literal} jQuery("#slider"+configid).slider({ min: configmin, max: configmax, value: configval, range: "min", slide: function( event, ui ) { jQuery("#confop"+configid).val( ui.value ); jQuery("#confoplabel"+configid).html( ui.value ); }, stop: function( event, ui ) { recalctotals(); } }); }); </script> {/literal} one of the jQuery options that is not currently used by WHMCS is the 'step' option - this is the incremental value used to move the sliders... by default, it is equal to 1 and because it isn't declared otherwise in the script, it will use this value. however, we can change it by simply adding the 'step' option to the code. let's say we want all sliders to move in increments of 10 instead on 1, we would simply add the following to the jQuery code. {literal} <script> jQuery(function() { {/literal} var configid = '{$configoption.id}'; var configmin = {$configoption.qtyminimum}; var configmax = {$configoption.qtymaximum}; var configval = {if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}; {literal} jQuery("#slider"+configid).slider({ min: configmin, max: configmax, value: configval, range: "min", step: "10", slide: function( event, ui ) { jQuery("#confop"+configid).val( ui.value ); jQuery("#confoplabel"+configid).html( ui.value ); }, stop: function( event, ui ) { recalctotals(); } }); }); </script> {/literal} note the line - step: "10", - simply adding this option will change the steps used to move the sliders. in practice, it is unlikely that we would want to have all the sliders moving at the same rate - we may want some to move by 1, others by 25 - perhaps even by 512 ! in order to do this, we will need need to add some Smarty tags into the above jQuery code - this will require us to use {literal} tags to come out of the jQuery code, then enter our Smarty tags and finally use {literal} again to return to jQuery. in the example video below, which shows a test product and uses the "Modern" order form template, there are three sliders - the first ("Year Length") uses the default step of 1; the second ("Memory MB") uses steps of 512; and the third ("Memory GB") uses steps of 0.5 - which as I mentioned earlier currently has no practical use with WHMCS, but i'll include it anyway! [video=youtube_share;p2Pwege8yjU] in order for this modification to work, we need to obtain the value of $configoption.id - this will tell jQuery which configuration option is being used at that time. There are a number of ways to obtain this information - you could add {debug} to your template and a popup window will be shown listing the smarty variables and arrays being used... though you may not want to do this on a live site. an alternative method is to view the source of your page in your browser and you should see some code similar to... <table width="90%"><tr><td width="30" id="confoplabel9" class="configoplabel">1</td><td><div id="slider9"></div></td></tr></table> <input type="hidden" name="configoption[9]" id="confop9" value="1" /> the above is the code used for the first slider - Year Length - and because it moves in singles step, we don't need to modify the jQuery code for it... it's $configoption.id value is "9" - as shown by.. name="configoption[9]" similarly, for the second slider, the page source is shown below and reveals the $configoption.id value for the slider to be "14"... name="configoption[14]" <table width="90%"><tr><td width="30" id="confoplabel14" class="configoplabel">0</td><td><div id="slider14"></div></td></tr></table> <input type="hidden" name="configoption[14]" id="confop14" value="0" /> to save time, i'll tell you that in my demo product, the $configoption.id for the third slider is "15". now that we have the three $configoption.id values, we can create our smarty code. as previously mentioned, we can ignore modifying the first slider as we want it to move as normal in steps of 1 - for the other two slider, we can use the following code... {if $configoption.id eq 14} {literal} step: "512", {/literal} {elseif $configoption.id eq 15} {literal} step: "0.5", {/literal} {/if} with this in place, the second slider will move in steps of 512, and the third in steps of 0.5 (which WHMCS will round down!). if we now add this to the jQuery code, we get the following.. {literal} <script> jQuery(function() { {/literal} var configid = '{$configoption.id}'; var configmin = {$configoption.qtyminimum}; var configmax = {$configoption.qtymaximum}; var configval = {if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}; {literal} jQuery("#slider"+configid).slider({ min: configmin, max: configmax, value: configval, range: "min", {/literal} {if $configoption.id eq 14} {literal} step: "512", {/literal} {elseif $configoption.id eq 15} {literal} step: "0.5", {/literal} {/if} {literal} slide: function( event, ui ) { jQuery("#confop"+configid).val( ui.value ); jQuery("#confoplabel"+configid).html( ui.value ); }, stop: function( event, ui ) { recalctotals(); } }); }); </script> {/literal} one other option you could add, which is shown in the video, is adding animation to the sliders - to do this, you simply add... animate: "fast", or animate: "slow", - if you want to add this for all sliders, then you would add the copy towards the top with the other options; if you wanted to only animate specific sliders, then you would add the option inside the appropriate {if} statement. e.g., to add fast animation to all sliders... {literal} <script> jQuery(function() { {/literal} var configid = '{$configoption.id}'; var configmin = {$configoption.qtyminimum}; var configmax = {$configoption.qtymaximum}; var configval = {if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}; {literal} jQuery("#slider"+configid).slider({ min: configmin, max: configmax, value: configval, range: "min", animate: "fast", {/literal} {if $configoption.id eq 14} {literal} step: "512", {/literal} {elseif $configoption.id eq 15} {literal} step: "0.5", {/literal} {/if} {literal} slide: function( event, ui ) { jQuery("#confop"+configid).val( ui.value ); jQuery("#confoplabel"+configid).html( ui.value ); }, stop: function( event, ui ) { recalctotals(); } }); }); </script> {/literal} in the long-term, it would be useful if WHMCS allowed the quantity option to include a "step" variable in the configuration option popup window as that would remove the need for these template edits... if you're interested in them doing that, then you may want to start a feature request for it @ http://requests.whmcs.com/ hopefully that has helped to answer your original question. at some future point, I may return to this topic and write a more detailed tutorial on the sliders - i've discovered a few additional features and tricks that I won't have time to go into here. 1 Quote Link to comment Share on other sites More sharing options...
KyneticWeb Posted April 10, 2014 Share Posted April 10, 2014 Wow! Awesome find Brian! This will certainly come in handy. Love your work and please.. keep it up! 0 Quote Link to comment Share on other sites More sharing options...
WHMCS Support Manager WHMCS John Posted April 15, 2014 WHMCS Support Manager Share Posted April 15, 2014 Hi, I'm sure other users will find this valuable, so I have moved it to the User Contributions forum and changed the title slightly. 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted April 16, 2014 Share Posted April 16, 2014 Hi,I'm sure other users will find this valuable, so I have moved it to the User Contributions forum and changed the title slightly. "increments" sounds so much better than "intervals" - I wish i'd thought of that when writing it! 0 Quote Link to comment Share on other sites More sharing options...
druptech Posted August 29, 2014 Share Posted August 29, 2014 (edited) Some more options if you want use RAM = MB and Storage = GB etc.. at end of slider as well as some description for the options something like bellow image. {foreach from=$configurableoptions item=configoption} <div class="control-group"> <label class="control-label">{$configoption.optionname}:</label> <div class="controls"> {if $configoption.optiontype eq 1} <span class="help-block"> {if $configoption.optionname eq 'Control Panel'}<span style="color:#006603;">We strongly recommend minimum 1024 MB RAM and 50GB Storage for <strong>cPanel</strong> control panel for good performance.</span>{elseif $configoption.optionname eq 'Control Panels'}<span style="color:#006603;">We strongly recommend minimum 2 core cpu, 2048 MB (2GB) RAM and 50 GB Storage for <strong>Parallels Plesk Panel for Windows</strong> and cPanel support only Linux distributions with minium 1024 (1GB) RAM</span>{elseif $configoption.optionname eq 'Operating Systems'}<span style="color:#006603;">We strongly recommend at least 2GB of RAM and 50GB Storage on Windows OS's{elseif $configoption.optionname eq 'Operating System'}Select: <strong>Cantos 32 bit</strong> if RAM less than 4096 MB for <strong>cPanel</strong> control panel</span>{elseif $configoption.optionname eq 'Management'}cPanel OR Plesk control panel selected Virtual servers with recommended configuration are included General Management Services by default without any additional cost. If not require you may seclect bellow options{else}{/if} </span> <select class="m-wrap span4" name="configoption[{$configoption.id}]" onchange="recalctotals()"> {foreach key=num2 item=options from=$configoption.options} <option value="{$options.id}"{if $configoption.selectedvalue eq $options.id} selected="selected"{/if}>{$options.name}</option> {/foreach} </select> {elseif $configoption.optiontype eq 2} {foreach key=num2 item=options from=$configoption.options} <label class="radio"><input type="radio" name="configoption[{$configoption.id}]" id="co{$options.id}" value="{$options.id}"{if $configoption.selectedvalue eq $options.id} checked="checked"{/if} onclick="recalctotals()" /> {$options.name}</label><br /> {/foreach} {elseif $configoption.optiontype eq 3} <label class="checkbox"><input type="checkbox" name="configoption[{$configoption.id}]" id="co{$configoption.options.0.id}" value="1"{if $configoption.selectedqty} checked{/if} onclick="recalctotals()" /> {$configoption.options.0.name}</label> {elseif $configoption.optiontype eq 4} {if $configoption.qtymaximum} {literal} <script> jQuery(function() { {/literal} var configid = '{$configoption.id}'; var configmin = {$configoption.qtyminimum}; var configmax = {$configoption.qtymaximum}; var configval = {if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}; var stepval = {if $configoption.optionname eq 'Storage'}10{elseif $configoption.optionname eq 'Remote Backup Storage'}10{elseif $configoption.optionname eq 'RAM'}256{else}1{/if}; {literal} jQuery( "#slider"+configid ).slider({ min: configmin, max: configmax, value: configval, range: "min", step: stepval, slide: function( event, ui ) { jQuery( "#confop"+configid ).val( ui.value ); jQuery( "#confoplabel"+configid ).html( ui.value ); recalctotals(); } }); }); </script> {/literal} <table width="100%"> <tr> <td><div id="slider{$configoption.id}"></div> <span class="help-block" style="text-transform:uppercase; color: #ccc;">{if $configoption.optionname eq 'Processor'}each core included minimum 2.26GHz cpu power{elseif $configoption.optionname eq 'RAM'}equal to burstable/swap memory included{elseif $configoption.optionname eq 'Memory'}equal to brastable memory included{elseif $configoption.optionname eq 'Storage'}RAID 10 storage array with enterprise drives{elseif $configoption.optionname eq 'IPs'}Each vps includes 1 IP address{elseif $configoption.optionname eq 'IP Address'}Each vps includes 1 IP4, Justification required for more{elseif $configoption.optionname eq 'Additional IPs'}Each vps includes 2 IP address{elseif $configoption.optionname eq 'Bandwidth'}Included unmetered bandwidth at 10mbit uplink port{elseif $configoption.optionname eq 'Port Speed'}upgrade your bandwidth port speed{elseif $configoption.optionname eq 'Remote Backup Storage'}Weekly Remote ftp backup for cPanel accounts{elseif $configoption.optionname eq 'Backup Storage'}RAID 10 protected remote ftp backup storage{else}{/if}</span> </td> <td width="54px" id="confoplabel{$configoption.id}" class="configoplabel">{if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}</td> <td width="40px">{if $configoption.optionname eq 'Memory'}GB{elseif $configoption.optionname eq 'RAM'}MB{elseif $configoption.optionname eq 'Storage'}GB{elseif $configoption.optionname eq 'Processor'}core{elseif $configoption.optionname eq 'Additional IPs'}+2 IPs{elseif $configoption.optionname eq 'IPs'}+1 IPs{elseif $configoption.optionname eq 'IP Address'}+1 IPs{elseif $configoption.optionname eq 'Bandwidth'}TB{elseif $configoption.optionname eq 'Port Speed'}+10 MBPS{elseif $configoption.optionname eq 'Backup Storage'}GB{elseif $configoption.optionname eq 'Remote Backup Storage'}GB{elseif $configoption.optionname eq 'Control Panel'}cPanel{else}{/if}</td> </tr> </table> <input type="hidden" name="configoption[{$configoption.id}]" id="confop{$configoption.id}" value="{if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}" /> {else} <input class="m-wrap" type="text" name="configoption[{$configoption.id}]" value="{$configoption.selectedqty}" size="5" onkeyup="recalctotals()" style="width:54px;"/> <span class="help-inline">x {$configoption.options.0.name}</span> {/if} {/if} </div> </div> {/foreach} Note: Please do not use just copy and paste its just an idea how to implement and can easily understand how to use in any of whmcs themes. Some css styling maybe be required. This code its tested only in our whmcs ace theme only Edited August 29, 2014 by druptech 0 Quote Link to comment Share on other sites More sharing options...
Chad Posted September 19, 2014 Share Posted September 19, 2014 Where should that code be placed druptech? 0 Quote Link to comment Share on other sites More sharing options...
druptech Posted October 22, 2014 Share Posted October 22, 2014 Where should that code be placed druptech? Sorry didn't notice your massage "configureproduct.tpl" in any of order from 0 Quote Link to comment Share on other sites More sharing options...
Caiman Posted June 22, 2022 Share Posted June 22, 2022 Greetings, Can I view the configurable options for every order from the admin area and if yes where? 0 Quote Link to comment Share on other sites More sharing options...
VNIT Posted July 18, 2022 Share Posted July 18, 2022 I found it working fine, can anyone add it to the hook instead of editing the template file? 0 Quote Link to comment Share on other sites More sharing options...
Jeffersons-ZT Posted March 25, 2023 Share Posted March 25, 2023 Is there a way to use the slider with different prices based on the values selected? So for example a selection of 10 for be at $1 but if you select 20 it would be $0.90 and then again 30 for $0.80.... 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.