Configurable Options - Selling in pre-set blocks of quantities

[phobosdthorga]

Hello! When making use of configurable options for an attached product that you are selling, is it possible to say, sell in blocks of '1024' as you adjust the quantity slider back and forth when you're the client? This is all I wanted to know, thank you!

[brian!]

Hi,

22 hours ago, phobosdthorga said:

When making use of configurable options for an attached product that you are selling, is it possible to say, sell in blocks of '1024' as you adjust the quantity slider back and forth when you're the client?

you would need to edit the configureproduct.tpl template... I previously wrote how to do this in the tutorial thread below from 4 years ago...

basically, you need to do two things...

1. get the ID value for the configurable option.
2. alter the template to define how large the steps are on the slider - default is 1, but you can use any integer value.

if we had a configurable option slider, with an ID of '32' (which you can find out in numerous way including checking the page source)...

and wanted to allow the slider to move in increments of 1024 instead of just 1, then in v7.6.1 using standard_cart, you would edit configureproduct.tpl and change...

                                                            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);
                                                                }
                                                            });

to...

                                                            jQuery("#inputConfigOption{$configoption.id}").ionRangeSlider({
                                                                min: {$configoption.qtyminimum},
                                                                max: {$configoption.qtymaximum},
                                                                grid: true,
                                                                {if $configoption.id eq 32}
                                                                	step: "1024",
                                                                {/if}
                                                                grid_snap: setLargerMarkers ? false : true,
                                                                onChange: function() {
                                                                    if (sliderTimeoutId) {
                                                                        clearTimeout(sliderTimeoutId);
                                                                    }

                                                                    sliderTimeoutId = setTimeout(function() {
                                                                        sliderTimeoutId = null;
                                                                        recalctotals();
                                                                    }, 250);
                                                                }
                                                            });

you can easily expand that code to have different configurable option sliders incrementing at different steps (e.g one at 1024, another at 512 etc).

[phobosdthorga]

Wow, thank you so much for the wonderful post, brian! I honestly did not expect to receive such detail in reply to what I asked, but thank you! I will definitely follow up with what you have outlayed, or at least, give it to one of the individuals whom are more comfortable with web-coding at GekkoFyre Networks.

[phobosdthorga]

Okay, so what you explained worked brilliantly on my end, but the pricing did not adjust accordingly. How do I have it so the pricing is also adjusted in 1024 MB blocks also, if you know? Thank you!

[brian!]

22 hours ago, phobosdthorga said:

Okay, so what you explained worked brilliantly on my end, but the pricing did not adjust accordingly. How do I have it so the pricing is also adjusted in 1024 MB blocks also, if you know? Thank you!

it should do it automatically - take a look at the video below showing it working on a v7.6.1 dev - the only code change that i've made to the template is what I have posted above and it's adjusting the price accordingly.

https://www.screencast.com/t/FENlc5oK

if it's not working for you, and you're using the default themes (e.g Six and Standard_cart in v7.6.1), then I might need to see your WHMCS site to see what's going on... but out of the box, this should work automatically... I think only if you're using custom theme/orderform, might you run into an issue... but even that should be fixable as i'm not making the template do anything that it isn't designed to.

[phobosdthorga]

14 hours ago, brian! said:

it should do it automatically - take a look at the video below showing it working on a v7.6.1 dev - the only code change that i've made to the template is what I have posted above and it's adjusting the price accordingly.

https://www.screencast.com/t/FENlc5oK

if it's not working for you, and you're using the default themes (e.g Six and Standard_cart in v7.6.1), then I might need to see your WHMCS site to see what's going on... but out of the box, this should work automatically... I think only if you're using custom theme/orderform, might you run into an issue... but even that should be fixable as i'm not making the template do anything that it isn't designed to.

I think I might've confused you in what was meant by the original reply. The pricing does adjust accordingly, yes, but say I want the RAM to be USD$4.95 per 1024 MB block. Currently, the only way to have it at the moment as I see it is for that to be USD$4.95 per every single megabyte. Does that help explain what we mean a little better? ^ ^;;

We're using a somewhat moderately modified 'Orbit' theme as the base from Zomex, which is constantly been worked on and improved as we see fit (I hope we're not breaking any advertising guidelines by posting links to them). Our site is GekkoFyre Networks, which is reopening hopefully within the next few days to a week or so, and accepting new clientele once again in that time.

I sincerely don't mean to offend you, brian!, but can anyone here vouch for you for in the event that we need to give you SFTP access to our main web-facing space?

[brian!]

2 hours ago, phobosdthorga said:

I think I might've confused you in what was meant by the original reply. The pricing does adjust accordingly, yes, but say I want the RAM to be USD$4.95 per 1024 MB block. Currently, the only way to have it at the moment as I see it is for that to be USD$4.95 per every single megabyte. Does that help explain what we mean a little better? ^ ^;;

oh I see - you can't do that out of the box, quantities must be priced per unit... I suppose if you altered the database table structure and allowed for more decimal places, you could price them at $0.005 per MB (or whatever it would be), but that's not even worth considering.

the two easier solutions would be, if using a quantity slider, to sell them in blocks of 1GB rather than 1024MB - that's allows you to price per GB (e.g $4.95)... but if you're going to do this, you'll need to remove that additional code you added in configureproduct.tpl that moved the slider in steps of 1024 units, they now only need to move in single steps (as normal).

alternatively, you would use a dropdown and sell them in blocks of either GBs or 1024MB and price accordingly for each option.

3 hours ago, phobosdthorga said:

I sincerely don't mean to offend you, brian!, but can anyone here vouch for you for in the event that we need to give you SFTP access to our main web-facing space?

if anyone vouches for me, who vouches for them? 😛

now that I know what you're talking about, I won't need access - I didn't before, I would have just needed to see what you were seeing (in the cart) to understand the issue (if the slider wasn't working as intended).

 

[phobosdthorga]

Oh awesome! As you can see in the screenshot, what you propose should be an easy fix given the way how the module was built, we're inferring. I suppose the only way to really find out is to make the changes, create a test account, and create a test order 🙂

We just wish to do it this way because updating the price is so much easier than having to do it to a whole bunch of drop-down boxes, and the client gets/experiences a bit more configurability this way.

3 hours ago, brian! said:

if anyone vouches for me, who vouches for them? 😛

 now that I know what you're talking about, I won't need access - I didn't before, I would have just needed to see what you were seeing (in the cart) to understand the issue (if the slider wasn't working as intended).

That is a good point and I know the commercial world just loves to use blame as a militarized weapon, but I simply would have felt a bit more comfortable knowing there would have been a few individuals standing right with you (especially if they had high post counts!). That's all I meant by it 🙂

Do you yourself use WHMCS in any manner? I'd be interested in seeing what you have done with it, personally.

[brian!]

On 12/11/2018 at 14:12, phobosdthorga said:

Oh awesome! As you can see in the screenshot, what you propose should be an easy fix given the way how the module was built, we're inferring. I suppose the only way to really find out is to make the changes, create a test account, and create a test order

you shouldn't even need to do that - just add the configurable option to an existing product and test it in the cart - so making a test order should be unnecessary... except for peace of mind about the process!

On 12/11/2018 at 14:12, phobosdthorga said:

We just wish to do it this way because updating the price is so much easier than having to do it to a whole bunch of drop-down boxes, and the client gets/experiences a bit more configurability this way.

for simplicity of price updating, i'd have gone with the slider and that way you'd only have to update one price.

with more advanced coding, you could change the labels on the slider to suit your needs...

https://www.screencast.com/t/jNuvO49MrMkm

in the above screenshot, the configurable option slider is still set in GBs (Min: 0; Max: 5) and priced at £4.95 per GB... and as you can see from the video, the sliding will work and adjust the price accordingly.

of course, then you have the potential added complication that the order summary will still output in GBs - you could change that in the ordersummary.tpl template to show MB if you had to...

... but then you'd probably have to alter the viewcart templates similarly, along with possibly the invoice and email templates too.... hence why I originally said it was easier to just sell them in GBs!

On 12/11/2018 at 14:12, phobosdthorga said:

That is a good point and I know the commercial world just loves to use blame as a militarized weapon, but I simply would have felt a bit more comfortable knowing there would have been a few individuals standing right with you (especially if they had high post counts!). That's all I meant by it

that's ok - no offence was taken... though bear in mind that I didn't say I needed access, I just wanted to see the public site... over the years, i've found it quicker to actually see the public site myself rather than ask a series of questions and wait for the replies.

On 12/11/2018 at 14:12, phobosdthorga said:

Do you yourself use WHMCS in any manner?

it would take a sadist of extreme perversion to answer questions on WHMCS when they don't actually use it themselves! 🙂

i've got 2 live production WHMCS installations (probably reducing to one next year) and I think currently 9 different dev installations of various versions from v5.3 to v7.6.1... no doubt increasing to 10 after the forthcoming v7.7 beta is released. 🙄

[Businezz]

On 11/14/2018 at 10:16 AM, brian! said:

you shouldn't even need to do that - just add the configurable option to an existing product and test it in the cart - so making a test order should be unnecessary... except for peace of mind about the process!

for simplicity of price updating, i'd have gone with the slider and that way you'd only have to update one price.

with more advanced coding, you could change the labels on the slider to suit your needs...

https://www.screencast.com/t/jNuvO49MrMkm

in the above screenshot, the configurable option slider is still set in GBs (Min: 0; Max: 5) and priced at £4.95 per GB... and as you can see from the video, the sliding will work and adjust the price accordingly.

of course, then you have the potential added complication that the order summary will still output in GBs - you could change that in the ordersummary.tpl template to show MB if you had to...

... but then you'd probably have to alter the viewcart templates similarly, along with possibly the invoice and email templates too.... hence why I originally said it was easier to just sell them in GBs!

that's ok - no offence was taken... though bear in mind that I didn't say I needed access, I just wanted to see the public site... over the years, i've found it quicker to actually see the public site myself rather than ask a series of questions and wait for the replies.

it would take a sadist of extreme perversion to answer questions on WHMCS when they don't actually use it themselves! 🙂

i've got 2 live production WHMCS installations (probably reducing to one next year) and I think currently 9 different dev installations of various versions from v5.3 to v7.6.1... no doubt increasing to 10 after the forthcoming v7.7 beta is released. 🙄

Hey,

I am with the same issue, i researched for a days and i can not find any way how to display MB instead of GB, but still the server to be deployed in MB.... if that's possible. I can not open the videos has been shared. Can you share some tips how to do display GBs? Thanks!!!!

[brian!]

On 14/11/2018 at 15:16, brian! said:

it would take a sadist of extreme perversion to answer questions on WHMCS when they don't actually use it themselves! 🙂

note to self: remember what you posted in the past.... don't turn into a sadist and remain supporting this failing software when you don't have to!

19 hours ago, Businezz said:

I am with the same issue, i researched for a days and i can not find any way how to display MB instead of GB, but still the server to be deployed in MB....

if they're ordered in MB, the server is deployed in MB and you can price them per 1MB, then it might just be a case of incrementing the steps in 1024 (as per the linked tutorial)... but you'll probably find it simpler to use the dropdown option rather than the slider.

[Businezz]

4 hours ago, brian! said:

note to self: remember what you posted in the past.... don't turn into a sadist and remain supporting this failing software when you don't have to!

if they're ordered in MB, the server is deployed in MB and you can price them per 1MB, then it might just be a case of incrementing the steps in 1024 (as per the linked tutorial)... but you'll probably find it simpler to use the dropdown option rather than the slider.

I currently priced them per MB, something like $0.0030 for example. It works fine for billing the users. I couldn't see your tutorial video, i was curious about it. It seems like flash player isn't supported anymore its been a long time since i needed one 😀

Do you mind sharing those video tutorials different way? 🙂

I also found post where you had set slider in GBs....😏😏

[brian!]

19 hours ago, Businezz said:

I currently priced them per MB, something like $0.0030 for example.

wouldn't you have to alter the relevant database table structures to support that sort of pricing in config options?

19 hours ago, Businezz said:

It works fine for billing the users.

that's the important thing.

19 hours ago, Businezz said:

I couldn't see your tutorial video, i was curious about it.

almost certainly it would likely just have been the slider moving in the relevant steps etc.

19 hours ago, Businezz said:

It seems like flash player isn't supported anymore its been a long time since i needed one 😀

they were uploaded via Jing and their service was discontinued last year I think....

19 hours ago, Businezz said:

Do you mind sharing those video tutorials different way? 🙂

i'm pretty sure I downloaded all the video files before they closed, but as Flash is now effectively dead, i'm not sure it's worth me going to look for them locally.

the original video on YouTube is still linked in the thread, but that was more of a visual demonstration of steps etc.

19 hours ago, Businezz said:

I also found post where you had set slider in GBs....😏😏

so let's say your selling memory by MB, but visually want to show it by GB, e.g 0-10GB..

by default,  the slider would move in steps of 1....

with tweaks to the template, you can make it a) go up in steps of 1024, b) change the labels to GB and c) increase the number of grid points to match the GB

- note that the slider is still passing the memory value in MB to WHMCS and not in GB (charging £1 per MB per month lol)....

 

the code needed for the slider changes comes in two parts - both entered within configureproduct.tpl...

firstly, the function to convert MB to GB...

function gb_conversion (n) {
var num = (n/1024);
return num;
}

I would put that *before* the line below...

jQuery("#inputConfigOption{$configoption.id}").ionRangeSlider({

... and secondly, the conditional statement that only affects the slider for the specific configurable option...

{if $configoption.id eq 50}
step: 1024,
grid_num: 10,
postfix: " GB",
prettify: gb_conversion,
{/if}

the value of 50 is the configurable option ID value - for you it won't be 50, but to find your correct ID value, one simple way is to edit the config option in the admin area and it should open in a new window... the URL of that page will be something along the lines of...

configproductoptions.php?manageoptions=true&cid=50

that cid value is the one you need to use in the if statement instead of 50 so that your changes only affect this one slider.... additional conditional statements can be added to that other sliders behave in different ways.

the code in configureproduct.tpl should look like this...

... and if you wanted to remove the grid entirely...

{if $configoption.id eq 50}
step: 1024,
grid: false,
postfix: " GB",
prettify: gb_conversion,
{/if}

and to pre-empt you saying, "oh I don't want it to show MB in the Order Summary, I want it to show GB", then you could alter ordersummary.tpl and change...

<span class="pull-left float-left"> » {$configoption.name}: {$configoption.optionname}</span>

to...

<span class="pull-left float-left">&nbsp;&raquo; {$configoption.name}: {if $configoption.name eq "MB (Memory)"}{$configoption.optionname/1024} GB{else}{$configoption.optionname}{/if}</span>

though I will add that personally I wouldn't bother with that, because it's going to show MB at the view cart stage, in the relevant emails and on the invoice.... they could all be tweaked with hooks, but it's unnecessary work in my eyes.

[Businezz]

6 hours ago, brian! said:

wouldn't you have to alter the relevant database table structures to support that sort of pricing in config options?

that's the important thing.

almost certainly it would likely just have been the slider moving in the relevant steps etc.

they were uploaded via Jing and their service was discontinued last year I think....

i'm pretty sure I downloaded all the video files before they closed, but as Flash is now effectively dead, i'm not sure it's worth me going to look for them locally.

the original video on YouTube is still linked in the thread, but that was more of a visual demonstration of steps etc.

so let's say your selling memory by MB, but visually want to show it by GB, e.g 0-10GB..

by default,  the slider would move in steps of 1....

with tweaks to the template, you can make it a) go up in steps of 1024, b) change the labels to GB and c) increase the number of grid points to match the GB

- note that the slider is still passing the memory value in MB to WHMCS and not in GB (charging £1 per MB per month lol)....

 

the code needed for the slider changes comes in two parts - both entered within configureproduct.tpl...

firstly, the function to convert MB to GB...

function gb_conversion (n) {
var num = (n/1024);
return num;
}

I would put that *before* the line below...

jQuery("#inputConfigOption{$configoption.id}").ionRangeSlider({

... and secondly, the conditional statement that only affects the slider for the specific configurable option...

{if $configoption.id eq 50}
step: 1024,
grid_num: 10,
postfix: " GB",
prettify: gb_conversion,
{/if}

the value of 50 is the configurable option ID value - for you it won't be 50, but to find your correct ID value, one simple way is to edit the config option in the admin area and it should open in a new window... the URL of that page will be something along the lines of...

configproductoptions.php?manageoptions=true&cid=50

that cid value is the one you need to use in the if statement instead of 50 so that your changes only affect this one slider.... additional conditional statements can be added to that other sliders behave in different ways.

the code in configureproduct.tpl should look like this...

... and if you wanted to remove the grid entirely...

{if $configoption.id eq 50}
step: 1024,
grid: false,
postfix: " GB",
prettify: gb_conversion,
{/if}

and to pre-empt you saying, "oh I don't want it to show MB in the Order Summary, I want it to show GB", then you could alter ordersummary.tpl and change...

<span class="pull-left float-left"> » {$configoption.name}: {$configoption.optionname}</span>

to...

<span class="pull-left float-left">&nbsp;&raquo; {$configoption.name}: {if $configoption.name eq "MB (Memory)"}{$configoption.optionname/1024} GB{else}{$configoption.optionname}{/if}</span>

though I will add that personally I wouldn't bother with that, because it's going to show MB at the view cart stage, in the relevant emails and on the invoice.... they could all be tweaked with hooks, but it's unnecessary work in my eyes.

Hey,

Thanks for the details. I went through the community and i found your answers helpful which I've done half of the things you suggested on your last post.

I would definitely try to use it in GB and see if i can find hook to display GBs on the summary also.

[Businezz]

10 hours ago, brian! said:

wouldn't you have to alter the relevant database table structures to support that sort of pricing in config options?

that's the important thing.

almost certainly it would likely just have been the slider moving in the relevant steps etc.

they were uploaded via Jing and their service was discontinued last year I think....

i'm pretty sure I downloaded all the video files before they closed, but as Flash is now effectively dead, i'm not sure it's worth me going to look for them locally.

the original video on YouTube is still linked in the thread, but that was more of a visual demonstration of steps etc.

so let's say your selling memory by MB, but visually want to show it by GB, e.g 0-10GB..

by default,  the slider would move in steps of 1....

with tweaks to the template, you can make it a) go up in steps of 1024, b) change the labels to GB and c) increase the number of grid points to match the GB

- note that the slider is still passing the memory value in MB to WHMCS and not in GB (charging £1 per MB per month lol)....

 

the code needed for the slider changes comes in two parts - both entered within configureproduct.tpl...

firstly, the function to convert MB to GB...

function gb_conversion (n) {
var num = (n/1024);
return num;
}

I would put that *before* the line below...

jQuery("#inputConfigOption{$configoption.id}").ionRangeSlider({

... and secondly, the conditional statement that only affects the slider for the specific configurable option...

{if $configoption.id eq 50}
step: 1024,
grid_num: 10,
postfix: " GB",
prettify: gb_conversion,
{/if}

the value of 50 is the configurable option ID value - for you it won't be 50, but to find your correct ID value, one simple way is to edit the config option in the admin area and it should open in a new window... the URL of that page will be something along the lines of...

configproductoptions.php?manageoptions=true&cid=50

that cid value is the one you need to use in the if statement instead of 50 so that your changes only affect this one slider.... additional conditional statements can be added to that other sliders behave in different ways.

the code in configureproduct.tpl should look like this...

... and if you wanted to remove the grid entirely...

{if $configoption.id eq 50}
step: 1024,
grid: false,
postfix: " GB",
prettify: gb_conversion,
{/if}

and to pre-empt you saying, "oh I don't want it to show MB in the Order Summary, I want it to show GB", then you could alter ordersummary.tpl and change...

<span class="pull-left float-left"> » {$configoption.name}: {$configoption.optionname}</span>

to...

<span class="pull-left float-left">&nbsp;&raquo; {$configoption.name}: {if $configoption.name eq "MB (Memory)"}{$configoption.optionname/1024} GB{else}{$configoption.optionname}{/if}</span>

though I will add that personally I wouldn't bother with that, because it's going to show MB at the view cart stage, in the relevant emails and on the invoice.... they could all be tweaked with hooks, but it's unnecessary work in my eyes.

Everything worked in configureproduct.tpl file like you mentioned. I just couldn't get it to show in GB in ordersummary.tpl file. Is there any other way to display GB or even MB next to  each amount of Ram is selected?

Or, how do i add GB for the storage also?  I figured it out for the memory.

Thanks a lot!!!

Edited June 29, 2021 by Businezz

[brian!]

11 hours ago, Businezz said:

I would definitely try to use it in GB and see if i can find hook to display GBs on the summary also.

they're not technically difficult hooks, e.g the summary one would be a clientareapagecart that looped through the relevant array and modified it.... with regards to invoice, if you could alter the database record, then it solves having to modify the emails.... but frankly, it's a lot of work when it might just be easier to use a dropdown... not least because there is no knowing that whatever you need to do to solve it, does not get broken by a future update.

7 hours ago, Businezz said:

Or, how do i add GB for the storage also?  I figured it out for the memory.

you realised to use RAM Memory (GB) instead of MB (Memory) in the if statement ?? 😜

7 hours ago, Businezz said:

Or, how do i add GB for the storage also?  I figured it out for the memory.

I would assume it to be along the lines of...

<span class="pull-left float-left">&nbsp;&raquo; {$configoption.name}: {if $configoption.name eq "RAM Memory (MB)"}{$configoption.optionname/1024} GB{elseif $configoption.name eq "SSD Diskspace (GB)"}{$configoption.optionname} GB{else}{$configoption.optionname}{/if}</span>

[Businezz]

2 hours ago, brian! said:

they're not technically difficult hooks, e.g the summary one would be a clientareapagecart that looped through the relevant array and modified it.... with regards to invoice, if you could alter the database record, then it solves having to modify the emails.... but frankly, it's a lot of work when it might just be easier to use a dropdown... not least because there is no knowing that whatever you need to do to solve it, does not get broken by a future update.

you realised to use RAM Memory (GB) instead of MB (Memory) in the if statement ?? 😜

I would assume it to be along the lines of...

<span class="pull-left float-left">&nbsp;&raquo; {$configoption.name}: {if $configoption.name eq "RAM Memory (MB)"}{$configoption.optionname/1024} GB{elseif $configoption.name eq "SSD Diskspace (GB)"}{$configoption.optionname} GB{else}{$configoption.optionname}{/if}</span>

Thanks! Everything worked out. I just need to find a way to convert them in the confirmation emails and any other detailed page. 🙂 I hope that will be possible.

[Jade D]

Just popped in to say thanks to @brian! - without you this community would not be a community

[Jade D]

@brian! - any suggestions on how I can prevent a configurable option from being selected to a lower value than what it currently is.

Here is the scenario, client orders a vps with 60GB drive, and then performs a upgrade / downgrade of resources and changes the disk size from 60GB to 52GB, and increases other resources such as ram and cpu.

WHMCS fails to provision the upgrade / downgrade as the disk cannot be downgraded.

In the screenshot below, the slider should start at 60GB or not allow the value to be changed below 60GB

[Jade D]

Ok the issue is worse than what I initially anticipated, I see that whmcs doesn't provide the sliders for upgrade options as per below