configuring sliders

[snake]

I am trying to use update my products to use order forms which include sliders, but I cannot seem to figure out how I get the desired output.

 

For example I have disk space that goes from 50gb to 750gb in increments of 50GB. I have done this by creating the following configurable option:-

 

 

However this is not meaningful to end user as a slider as it just shows 1-15, whereas I obviously want it to show the amount of space 50-750

 

what is the best way to do this ?

[brian!]

the way I would do it would be to first change your Minimum Quantity to 50; change the Maximum Quantity to 750 - that will give you a slider that goes from 50-750 and by default will move in steps of 1.

 

in order to change that step value for this specific config option, you'd need to edit the configureproduct.tpl template - similar to how I described in the tutorial below, but it needs updating for v6 and standard_cart, which i'll do at the weekend.

 

http://forum.whmcs.com/showthread.php?87803-Order-Form-Slider-in-Increments

 

but basically, in standard_cart/configureproduct.tpl, you currently have this...

 

                                                        <script>
                                                           jQuery("#inputConfigOption{$configoption.id}").ionRangeSlider({
                                                               min: {$configoption.qtyminimum},
                                                               max: {$configoption.qtymaximum},
                                                               grid: true,
                                                               onFinish: function() {
                                                                   recalctotals();
                                                               }
                                                           });
                                                       </script>

you just need to change that to...

 

                                                        <script>
                                                           jQuery("#inputConfigOption{$configoption.id}").ionRangeSlider({
                                                               min: {$configoption.qtyminimum},
                                                               max: {$configoption.qtymaximum},
                                                               {if $configoption.id eq 33}
                                                               step: 50,
                                                               {/if} 
                                                               grid: true,
                                                               onFinish: function() {
                                                                   recalctotals();
                                                               }
                                                           });
                                                       </script>

 

you'll need to get the ID of your configurable option and replace '33' with it in the above code, but once done, the slider should move in steps of 50.

 

in Modern, you would change...

 

{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",
           disabled: true,
           slide: function( event, ui ) {
               jQuery("#confop"+configid).val( ui.value );
               jQuery("#confoplabel"+configid).html( ui.value );
           },
           stop: function( event, ui ) {
               recalctotals();
           }
       });
   });
   </script>
{/literal}

to..

 

{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,
           {/literal}
           {if $configoption.id eq 33}
           {literal}
           step: "50",
           {/literal}
           {/if}
           {literal} 
           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}

 

with regards to pricing, set it for whatever you want to charge per 1GB - so if 50GB is £5, 1GB is £0.10 etc and then adjust for the other billing cycles.

Edited June 30, 2016 by brian!

[webix]

Won't it be simplier to just add:

grid_snap: true,
[b]step: {$configoption.options[0]['nameonly']},[/b]
onChange: function() {

On the code?

That way the step would be directly defined on the amount itself to be priced.

 

This works perfectly for values that are higher than 2 decimal cases (0.00). But if i want by example price the step of 512 of ram to 0.50$, the slider will multiply 0.50 by 512 instead of multiply it by 1.

If someone knows a way to get this done correctly, that would be a huge feature to be implemented.

 

Regards

[brian!]

Won't it be simpler to just add:

On the code?

That way the step would be directly defined on the amount itself to be priced.

unless the config option name wasn't a number - which would result in that slider being effectively useless.

 

you could get around that with an if statement, and then only those config options with only numbers for names would slide with an increment other than one...

 

{if is_numeric($configoption.options[0]['nameonly'])} 
step: {$configoption.options[0]['nameonly']},{/if}

 

This works perfectly for values that are higher than 2 decimal cases (0.00). But if i want by example price the step of 512 of ram to 0.50$, the slider will multiply 0.50 by 512 instead of multiply it by 1.

If someone knows a way to get this done correctly, that would be a huge feature to be implemented.

you can't have fractional quantities with the sliders in WHMCS - visibly you can, but if the step/name is 1.5 and you've chosen 1675.5 qty in the slider, the cart assumes it to be 1675.0 and calculates accordingly.

 

 

and that's why I said you must price it for 1, not fractions of 1

 

btw - if you wanted to, you could not use 'step' and just add define your own number range in steps of 512...