Configurable Options different price per time period

[WEBPC]

I am setting up a product with two quantity configurable options. Each of these options has a different cost for each billing period (e.g $1 when billed monthly, $4 when billed 6monthly, $2 when billed annually)

 

When we test. In the cart ' x {option} $Amt' that appears to the right of the field you enter the amount in always shows the amount from the smallest billing cycle for the product, even if you select another billing cycle. The amount shown in the Order Summary though uses the correct amount and shows the correct total.

 

Shouldn't the ' x {option} $Amt' update when a differing billing period is chosen for the product?

 

TIA

Antony

[brian!]

which order form template are you using?

[WEBPC]

we are using 'modern'

[brian!]

Hi Antony,

 

I can reproduce this - though it doesn't necessarily always give you the amount from the smallest billing cycle... e.g., if you were to select "Annually" and then refresh the page, it will show the amount for the annual billing cycle.

 

the output of the price variable isn't linked to the javascript and so doesn't update when changing cycles.

 

I can think of three solutions to this - there may be more, but one of these should help your situation.

 

1. you could modify the modern/configureproduct.tpl template to remove the (possibly incorrect) price next to the quantity box.

 

line ~93...

 

<input type="text" name="configoption[{$configoption.id}]" value="{$configoption.selectedqty}" size="5" onkeyup="recalctotals()" /> x {$configoption.options.0.name}

change to...

 

<input type="text" name="configoption[{$configoption.id}]" value="{$configoption.selectedqty}" size="5" onkeyup="recalctotals()" /> x {$configoption.options.0.nameonly}

 

2. if you wanted to remove the "x {option} $Amt" text entirely...

 

<input type="text" name="configoption[{$configoption.id}]"  value="{$configoption.selectedqty}" size="5" onkeyup="recalctotals()"  />

 

3. because you are using "Modern", if you are able to give your configurable option(s) "Maximum Allowed" values (more than 0), it will change from a quantity box into a slider.

 

sliders don't show the amount next to them, so removes the chance of the 'wrong' amount being shown next to it.

[WEBPC]

Hi Brian

Thanks very much for the suggestions, would have taken me hours to track the line down in the templates. Went with the first option.

Bit off topic but from a best practices point of view I assume that its better to copy the standard templates then amend the copy? Not sure what happens to the standard templates on an upgrade.

Antony

[brian!]

Hi Anthony,

 

yes - copy the template folder and rename it to something else... when you do an update that includes template changes, they would be overwritten if you keep the folder name the same.

[WEBPC]

OK not sure what I have done now.

But the configurable options when set to quantity are no longer updating the qty or prices in the order summary.

Also the validation of the fields isn't working as it always says '{option name} has a minimum requirement of {number} and a maximum of unlimited'

Both the qty/price updating and validation work if I put a maximum value into the configurable options definition.

I am seeing this whether I use the copy/modified template or one of the original templates.

Surely, uploading a new order template folder via ftp wouldn't break everything would it?

TIA

Antony

[brian!]

OK not sure what I have done now.

But the configurable options when set to quantity are no longer updating the qty or prices in the order summary.

 

Also the validation of the fields isn't working as it always says '{option name} has a minimum requirement of {number} and a maximum of unlimited'

that's sounds like a javascript/jquery error.

 

Both the qty/price updating and validation work if I put a maximum value into the configurable options definition.

I am seeing this whether I use the copy/modified template or one of the original templates.

Surely, uploading a new order template folder via ftp wouldn't break everything would it?

it shouldn't do - perhaps a js file got corrupted on upload?

 

I would suggest first clearing your template cache... this will just remove the temporary template files stored by whmcs.

 

utilities -> system -> system cleanup -> empty template cache

 

then upload a clean copy of "modern" (from the latest full download or your current version) to the order form templates, and either change your default order form template to use it, or change the order form template used by the product group for this product - remember, if you've selected to use another template for the product group, this will override your default order form template.

 

that should get you back to square one - then it's a case of starting the above modification again.

 

I suspect this is nothing serious happening here, you've probably just made an incorrect template tweak - hopefully with a clean "modern" template uploaded, things will function as normal again.

[WEBPC]

Brian

You are going to be sorry you responded to this thread

When I made the changes the only touch to the server was to download the order template modern to my local machine. I changed the name of the folder on my local machine to webpc-modern. Then made the change to configureproduct.tpl and finally uploaded the whole webpc-modern folder to the \whmcs\templates\orderforms location on the server.

So I would think that the original core order templates should not have been corrupted.

I tried clearing the template cache and it still doesn't work. Highly frustrating!!

Do any of the core order templates NOT use jquery?

Your patience is appreciated.

Antony

[brian!]

Antony,

 

Do any of the core order templates NOT use jquery?

I think Boxes, Cart and Vertical Steps don't use any js...

 

perhaps take a look at the site in Chrome/Firefox and see if there are any errors - js references missing etc..

[ethical]

just wondering if anyone got this working with modern which IMO is the nicest of all the order forms. I tried the suggestion above to try removing the price but it didn't work for me. (the price still remained and yes I was editing the correct file) and no it wasn't cache as i tried in different browsers too and yes i tried the utilities cleanup template cache thing too.

[brian!]

it should work as I would have re-tested the code before posting... are you *sure* you're editing the correct template and the product group wasn't assigned to use another one?

[ethical]

Hi Brian thanks for your reply. I am sure i am editing the correct order template (my own copy of modern)

 

file: /templates/orderforms/mymodern/configureproduct.tpl

 

changing this:

<table width="90%"><tr><td width="30" id="confoplabel{$configoption.id}" class="configoplabel">{if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}</td><td><div id="slider{$configoption.id}"></div></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 type="text" name="configoption[{$configoption.id}]" value="{$configoption.selectedqty}" size="5" onkeyup="recalctotals()" /> x {$configoption.options.0.name}

 

to this

 

<table width="90%"><tr><td width="30" id="confoplabel{$configoption.id}" class="configoplabel">{if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}</td><td><div id="slider{$configoption.id}"></div></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 type="text" name="configoption[{$configoption.id}]" value="{$configoption.selectedqty}" size="5" onkeyup="recalctotals()" /> x {$configoption.options.0.nameonly}

only change is the last line changing name to nameonly

 

but I have no idea what you mean by if the product group is assigned to use a different template? I dont have any product bundles if that's what you mean)??

 

i didn't try your 3rd solution about the slider, as I wasnt really sure how?

 

but seriously cant WHMCS fix this? i mean they can get the mini cart on the right to update, so why not this too??

 

thanks for your help!

John

[brian!]

Hi John,

 

only change is the last line changing name to nameonly

just tried it again on the 'modern' template and it works.

 

but I have no idea what you mean by if the product group is assigned to use a different template? I dont have any product bundles if that's what you mean)??

 

http://docs.whmcs.com/Products_and_Services#Product_Groups

 

Products are organised on the order form by group, as each group has a separate page, this means products can be split into categories or across several pages for ease of display. For example you may wish to list your shared hosting plans on a separate page to the reseller plans.

 

Under normal circumstances all product groups will use the system default order form template specified in the general settings. However if you wish to use a different template for just this group, select it from the Order Form Template option here.

I would suspect that if you're editing the template and not seeing changes in the output (i.e the removal of the config price), and assuming it's not a cache issue, then you must be editing the wrong template - i.e the product with the config option is assigned to a product group that is using another order-form template (probably the standard 'modern' template as opposed to your custom version).

 

i didn't try your 3rd solution about the slider, as I wasn't really sure how?

in the config option, if you give it a maximum quantity greater than 0, it should switch from a quantity box to a slider - it would do with 'Modern', but whether it would with your custom Modern , I don't know.

 

but seriously cant WHMCS fix this? i mean they can get the mini cart on the right to update, so why not this too??

thankfully, I don't have to answer that as I don't work for them!

 

one solution to get the configuration price to auto-update when changing billing cycles is to make the following change in modern/configureproduct.tpl ~ line 19...

 

{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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value)"{/if} /></td><td class="fieldarea"><label for="cycle1">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value)"{/if} /></td><td class="fieldarea"><label for="cycle2">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value)"{/if} /></td><td class="fieldarea"><label for="cycle3">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value)"{/if} /></td><td class="fieldarea"><label for="cycle4">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value)"{/if} /></td><td class="fieldarea"><label for="cycle5">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value)"{/if} /></td><td class="fieldarea"><label for="cycle6">{$pricing.triennially}</label></td></tr>{/if}
</table>
</div>
{/if}

to...

 

{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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value), recalctotals();window.location.reload();"{/if} /></td><td class="fieldarea"><label for="cycle1">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value), recalctotals();window.location.reload();"{/if} /></td><td class="fieldarea"><label for="cycle2">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value), recalctotals();window.location.reload();"{/if} /></td><td class="fieldarea"><label for="cycle3">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value), recalctotals();window.location.reload();"{/if} /></td><td class="fieldarea"><label for="cycle4">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, recalctotals();window.location.reload();"{/if} /></td><td class="fieldarea"><label for="cycle5">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, recalctotals();window.location.reload();"{/if} /></td><td class="fieldarea"><label for="cycle6">{$pricing.triennially}</label></td></tr>{/if}
</table>
</div>
{/if}

it's basically the same, except each cycle now has recalctotals();window.location.reload(); as part of the onclick - meaning it will update the order summary and refresh the page - this will allow the configuration price for the selected cycle to be shown rather than the original one.

 

it only needs to refresh if using quantity boxes - if only sliders are being used, as no config price is shown, it doesn't need to update and so wouldn't require the window.location.reload(); code.

 

{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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value), recalctotals();"{/if} /></td><td class="fieldarea"><label for="cycle1">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value), recalctotals();"{/if} /></td><td class="fieldarea"><label for="cycle2">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value), recalctotals();"{/if} /></td><td class="fieldarea"><label for="cycle3">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, this.value), recalctotals();"{/if} /></td><td class="fieldarea"><label for="cycle4">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, recalctotals();"{/if} /></td><td class="fieldarea"><label for="cycle5">{$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}{if $configurableoptions} onclick="updateConfigurableOptions({$i}, recalctotals();"{/if} /></td><td class="fieldarea"><label for="cycle6">{$pricing.triennially}</label></td></tr>{/if}
</table>
</div>
{/if}

Edited November 1, 2014 by brian!

[ethical]

well i should have installed v .10 as this actually fixes the issue! configurable products now update the price when the term is changed. yea thanks whmcs!