Slider problem

[nmo0ory]

hello

in my whmcs i have a custom cart

but in the new one there is no Slider in the Configurable Options

can any one tell me how can i add it ?

[brian!]

http://docs.whmcs.com/Addons_and_Configurable_Options#Slider

 

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, Slider or Modern order form templates.

if your custom cart is based on the Comparison, Modern or Slider templates, then it should be able to use sliders.

 

if the custom cart is not based on any of the three, then you might be able to make it use sliders by taking the first four lines of code from configureproduct.tpl of any of the above three templates and adding it to your own configureproduct.tpl in your custom order form template folder...

 

<script type="text/javascript" src="includes/jscript/jqueryui.js"></script>
<script type="text/javascript" src="templates/orderforms/modern/js/main.js"></script>
<link rel="stylesheet" type="text/css" href="templates/orderforms/modern/style.css" />
<link rel="stylesheet" type="text/css" href="includes/jscript/css/ui.all.css" />

[nmo0ory]

i think its based on "order-web20cart"

 

in the 4 first line i have just this

 

<link rel="stylesheet" type="text/css" href="templates/orderforms/{$carttpl}/style.css" />

<div id="order-web20cart">

[brian!]

ok, web20cart is one of those templates that can't handle sliders by default.

 

however, adding the previous four lines I mentioned to the top of the configureproduct.tpl file, should be a start... actually, you don't need to replace the existing style.css file, so just replace your top line with...

 

<script type="text/javascript" src="includes/jscript/jqueryui.js"></script>
<script type="text/javascript" src="templates/orderforms/modern/js/main.js"></script>
<link rel="stylesheet" type="text/css" href="includes/jscript/css/ui.all.css" />
<link rel="stylesheet" type="text/css" href="templates/orderforms/{$carttpl}/style.css" />

web20cart can be forced to use sliders if you want it to - I wrote a tutorial about using an advanced feature of sliders at the link below and about 80 seconds in the video, you'll see sliders working using the web20cart template.

 

http://forum.whmcs.com/showthread.php?87803-Order-Form-Slider-in-Increments&p=371114#post371114

 

if I remember correctly, all I did to get sliders working in web20cart was to add the four lines above to the start of web20cart/configureproduct.tpl and then copied the slider jquery code from modern/configureproduct.tpl and pasted it into web20cart/configureproduct.tpl

 

so in web20cart/configureproduct.tpl, your custom cart should currently have the following...

 

{elseif $configoption.optiontype eq 4}
<input type="text" name="configoption[{$configoption.id}]" value="{$configoption.selectedqty}" size="5">
x {$configoption.options.0.name}
{/if}</td>
</tr>
{/foreach}
</table>
</div>
{/if}

if you replace that with the following, then the sliders should work...

 

{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};
       {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}
<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}
{/if}
{/if}
</td></tr>
{/foreach}
</table>
</div>
{/if}

[nmo0ory]

thanks ! now its work