Slider Stepping

[sweethome]

probably was asked many times before 🙂

How can I have custom steps in the order slider, which only allows steps of 1.

We need it for CPU/RAM and any other sliders in which custom steps are required..

thanks,

Justin

 

[brian!]

17 hours ago, sweethome said:

How can I have custom steps in the order slider, which only allows steps of 1.

 

[sweethome]

that's a 2014 thread...

It also doesn't help setting different steps to different configurable options... For example I'd like to have:

1,2,4,6,8,12,16,24,32,48,64,96,128GB For RAM

2,4,8,16,24,32 for CPU cores

2,4,6,8,16 cores for SQL licenses

1,2,3,4,5 for dedicated IPs

10,50,100,200,300,400,500,700,1000 Mbit/sec for Traffic

 

I'm willing to pay for this hack if someone can provide a quick fix for it...

 

thanks,

Justin

 

 

 

 

[brian!]

Hi Justin,

18 hours ago, sweethome said:

that's a 2014 thread...

and your point ? for this issue, standard_cart won't have changed so much in those 7 years that this wouldn't work....  at worst, you might not need to use literal anymore.

you've been around WHMCS as long as I have, do you think the core code of WHMCS was written last month ??

18 hours ago, sweethome said:

It also doesn't help setting different steps to different configurable options... For example I'd like to have:

1,2,4,6,8,12,16,24,32,48,64,96,128GB For RAM

2,4,8,16,24,32 for CPU cores

2,4,6,8,16 cores for SQL licenses

1,2,3,4,5 for dedicated IPs

10,50,100,200,300,400,500,700,1000 Mbit/sec for Traffic

then that's just a series of if statements based on the configoption id values with each returning different values...

18 hours ago, sweethome said:

I'm willing to pay for this hack if someone can provide a quick fix for it...

for any fix, they would need to know the relevant configoption id values - in your case, you can't use step values, you would likely need to define arrays of values for each.... or don't use sliders for these, but dropdown values instead.

[brian!]

Justin,

On 09/04/2021 at 17:54, sweethome said:

It also doesn't help setting different steps to different configurable options... For example I'd like to have:

1,2,4,6,8,12,16,24,32,48,64,96,128GB For RAM

to give you a working example of how to do this in v8+, there is a jQuery block in configureproduct.tpl that controls the sliders...

                                                    jQuery("#inputConfigOption{$configoption.id}").ionRangeSlider({
                                                            min: {$configoption.qtyminimum},
                                                            max: {$configoption.qtymaximum},
                                                            grid: true,
                                                            grid_snap: setLargerMarkers ? false : true,
                                                            onChange: function() {
                                                                if (sliderTimeoutId) {
                                                                    clearTimeout(sliderTimeoutId);
                                                                }
                                                                sliderTimeoutId = setTimeout(function() {
                                                                    sliderTimeoutId = null;
                                                                    recalctotals();
                                                                }, 250);
                                                            }
                                                        });

you just need to define an array of values that will be needed for your steps - so in the case of your GB configurable option, it would be...

var gb_values = [1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128];

... and then nest an if statement inside the jQuery so that these changes only apply to this particular configurable option..

{if $configoption.id eq 49}
	values: gb_values,
{/if}

so the whole block of code becomes....

                                                        var gb_values = [1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128];
                                                        jQuery("#inputConfigOption{$configoption.id}").ionRangeSlider({
                                                            min: {$configoption.qtyminimum},
                                                            max: {$configoption.qtymaximum},
                                                            grid: true,
                                                            grid_snap: setLargerMarkers ? false : true,
                                                            {if $configoption.id eq 49}
                                                              values: gb_values,
                                                            {/if}
                                                            onChange: function() {
                                                                if (sliderTimeoutId) {
                                                                    clearTimeout(sliderTimeoutId);
                                                                }
                                                                sliderTimeoutId = setTimeout(function() {
                                                                    sliderTimeoutId = null;
                                                                    recalctotals();
                                                                }, 250);
                                                            }
                                                        });

and i'm assuming that a) you're setting min/max qty values in the setup (e.g 1 -> 128) and b) you're charging the same price per GB - if you're not, then it's not a quantity-based slider and you would likely need to use a dropdown with separately priced values.

... and to get the configoption id value, one way iis to view the view the source code of the relevant slider element and the value to use will be mentioned a number of times - in this case, it's 49.

and then you just repeat as necessary for the other sliders - though I wouldn't particularly bother for the dedicated IP slider if it's only going to move in steps of 1 as it will do that anyway by default.