Jump to content

Customisation of Standard Cart Order Form

Ugyen

By Ugyen
in Developer Corner

 Share

Recommended Posts

Ugyen Junior Member

Ugyen

Posted
Posted (edited)

Hi WHMCS Community,

 

I would like to change the Standard order form monthy and yearly pricing from dropdown menu to Option so that our clients and see directly in one look... no need to spend their time in clicking dropdown menu to see yearly price.

 

I have shared my code here:

 

ConfigureProduct.tpl

 

{include file="orderforms/standard_cart/common.tpl"}

<script>
var _localLang = {
   'addToCart': '{$LANG.orderForm.addToCart|escape}',
   'addedToCartRemove': '{$LANG.orderForm.addedToCartRemove|escape}'
}
</script>

<div id="order-standard_cart">

   <div class="row">

       <div class="pull-md-right col-md-12">

           <div class="header-lined">
               <h1>{$LANG.orderconfigure}</h1>
           </div>

       </div>


       <div class="col-md-12 pull-md-right">

           {include file="orderforms/standard_cart/sidebar-categories-collapsed.tpl"}

           <form id="frmConfigureProduct" onsubmit="catchEnter(event);">
               <input type="hidden" name="configure" value="true" />
               <input type="hidden" name="i" value="{$i}" />

               <div class="row">
                   <div class="col-md-8">

                       <p>{$LANG.orderForm.configureDesiredOptions}</p>

                       <div class="product-info">
                           <p class="product-title">{$productinfo.name}</p>
                           <p>{$productinfo.description}</p>
                       </div>

                       <div class="alert alert-danger hidden" role="alert" id="containerProductValidationErrors">
                           <p>{$LANG.orderForm.correctErrors}:</p>
                           <ul id="containerProductValidationErrorsList"></ul>
                       </div>

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

                       {if $productinfo.type eq "server"}
                           <div class="sub-heading">
                               <span>{$LANG.cartconfigserver}</span>
                           </div>

                           <div class="field-container">

                               <div class="row">
                                   <div class="col-sm-6">
                                       <div class="form-group">
                                           <label for="inputHostname">{$LANG.serverhostname}</label>
                                           <input type="text" name="hostname" class="form-control" id="inputHostname" value="{$server.hostname}" placeholder="servername.yourdomain.com">
                                       </div>
                                   </div>
                                   <div class="col-sm-6">
                                       <div class="form-group">
                                           <label for="inputRootpw">{$LANG.serverrootpw}</label>
                                           <input type="password" name="rootpw" class="form-control" id="inputRootpw" value="{$server.rootpw}">
                                       </div>
                                   </div>
                               </div>

                               <div class="row">
                                   <div class="col-sm-6">
                                       <div class="form-group">
                                           <label for="inputNs1prefix">{$LANG.serverns1prefix}</label>
                                           <input type="text" name="ns1prefix" class="form-control" id="inputNs1prefix" value="{$server.ns1prefix}" placeholder="ns1">
                                       </div>
                                   </div>
                                   <div class="col-sm-6">
                                       <div class="form-group">
                                           <label for="inputNs2prefix">{$LANG.serverns2prefix}</label>
                                           <input type="text" name="ns2prefix" class="form-control" id="inputNs2prefix" value="{$server.ns2prefix}" placeholder="ns2">
                                       </div>
                                   </div>
                               </div>

                           </div>
                       {/if}

                       {if $configurableoptions}
                           <div class="sub-heading">
                               <span>{$LANG.orderconfigpackage}</span>
                           </div>
                           <div class="product-configurable-options" id="productConfigurableOptions">
                               <div class="row">
                                   {foreach $configurableoptions as $num => $configoption}
                                       {if $configoption.optiontype eq 1}
                                           <div class="col-sm-6">
                                               <div class="form-group">
                                                   <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label>
                                                   <select name="configoption[{$configoption.id}]" id="inputConfigOption{$configoption.id}" class="form-control">
                                                       {foreach key=num2 item=options from=$configoption.options}
                                                           <option value="{$options.id}"{if $configoption.selectedvalue eq $options.id} selected="selected"{/if}>
                                                               {$options.name}
                                                           </option>
                                                       {/foreach}
                                                   </select>
                                               </div>
                                           </div>
                                       {elseif $configoption.optiontype eq 2}
                                           <div class="col-sm-6">
                                               <div class="form-group">
                                                   <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label>
                                                   {foreach key=num2 item=options from=$configoption.options}
                                                       <br />
                                                       <label>
                                                           <input type="radio" name="configoption[{$configoption.id}]" value="{$options.id}"{if $configoption.selectedvalue eq $options.id} checked="checked"{/if} />
                                                           {if $options.name}
                                                               {$options.name}
                                                           {else}
                                                               {$LANG.enable}
                                                           {/if}
                                                       </label>
                                                   {/foreach}
                                               </div>
                                           </div>
                                       {elseif $configoption.optiontype eq 3}
                                           <div class="col-sm-6">
                                               <div class="form-group">
                                                   <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label>
                                                   <br />
                                                   <label>
                                                       <input type="checkbox" name="configoption[{$configoption.id}]" id="inputConfigOption{$configoption.id}" value="1"{if $configoption.selectedqty} checked{/if} />
                                                       {if $configoption.options.0.name}
                                                           {$configoption.options.0.name}
                                                       {else}
                                                           {$LANG.enable}
                                                       {/if}
                                                   </label>
                                               </div>
                                           </div>
                                       {elseif $configoption.optiontype eq 4}
                                           <div class="col-sm-12">
                                               <div class="form-group">
                                                   <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label>
                                                   {if $configoption.qtymaximum}
                                                       {if !$rangesliderincluded}
                                                           <script type="text/javascript" src="{$BASE_PATH_JS}/ion.rangeSlider.min.js"></script>
                                                           <link href="{$BASE_PATH_CSS}/ion.rangeSlider.css" rel="stylesheet">
                                                           <link href="{$BASE_PATH_CSS}/ion.rangeSlider.skinModern.css" rel="stylesheet">
                                                           {assign var='rangesliderincluded' value=true}
                                                       {/if}
                                                       <input type="text" name="configoption[{$configoption.id}]" value="{if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}" id="inputConfigOption{$configoption.id}" class="form-control" />
                                                       <script>
                                                           var sliderTimeoutId = null;

                                                           jQuery("#inputConfigOption{$configoption.id}").ionRangeSlider({
                                                               min: {$configoption.qtyminimum},
                                                               max: {$configoption.qtymaximum},
                                                               grid: true,
                                                               grid_snap: true,
                                                               onChange: function() {
                                                                   if (sliderTimeoutId) {
                                                                       clearTimeout(sliderTimeoutId);
                                                                   }

                                                                   sliderTimeoutId = setTimeout(function() {
                                                                       sliderTimeoutId = null;
                                                                       recalctotals();
                                                                   }, 250);
                                                               }
                                                           });
                                                       </script>
                                                   {else}
                                                       <div>
                                                           <input type="number" name="configoption[{$configoption.id}]" value="{if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}" id="inputConfigOption{$configoption.id}" min="{$configoption.qtyminimum}" onchange="recalctotals()" onkeyup="recalctotals()" class="form-control form-control-qty" />
                                                           <span class="form-control-static form-control-static-inline">
                                                               x {$configoption.options.0.name}
                                                           </span>
                                                       </div>
                                                   {/if}
                                               </div>
                                           </div>
                                       {/if}
                                       {if $num % 2 != 0}
                                           </div>
                                           <div class="row">
                                       {/if}
                                   {/foreach}
                               </div>
                           </div>

                       {/if}

                       {if $customfields}

                           <div class="sub-heading">
                               <span>{$LANG.orderadditionalrequiredinfo}</span>
                           </div>

                           <div class="field-container">
                               {foreach $customfields as $customfield}
                                   <div class="form-group">
                                       <label for="customfield{$customfield.id}">{$customfield.name}</label>
                                       {$customfield.input}
                                       {if $customfield.description}
                                           <span class="field-help-text">
                                               {$customfield.description}
                                           </span>
                                       {/if}
                                   </div>
                               {/foreach}
                           </div>

                       {/if}

                       {if $addons}

                           <div class="sub-heading">
                               <span>{$LANG.cartavailableaddons}</span>
                           </div>

                           <div class="row addon-products">
                               {foreach $addons as $addon}
                                   <div class="col-sm-{if count($addons) > 1}6{else}12{/if}">
                                       <div class="panel panel-default panel-addon{if $addon.status} panel-addon-selected{/if}">
                                           <div class="panel-body">
                                               <label>
                                                   <input type="hidden" name="addons[{$addon.id}]"{if $addon.status} checked{/if} />
                                                   {$addon.name}									
                                               </label><br />
                                               {$addon.description}
                                           </div>
                                           <div class="panel-price">
                                               {$addon.pricing}
                                           </div>

                                       </div>
                                   </div>
                               {/foreach}
                           </div>

                       {/if}

                       <div class="alert alert-warning info-text-sm">
                           <i class="fa fa-question-circle"></i>
                           {$LANG.orderForm.haveQuestionsContact} <a href="contact.php" target="_blank" class="alert-link">{$LANG.orderForm.haveQuestionsClickHere}</a>
                       </div>

                   </div>
                   <div class="col-md-4" id="scrollingPanelContainer">

                       <div id="orderSummary">
                           <div class="order-summary">
                               <div class="loader" id="orderSummaryLoader">
                                   <i class="fa fa-fw fa-refresh fa-spin"></i>
                               </div>
                               <h2>{$LANG.ordersummary}</h2>
                               <div class="summary-container" id="producttotal"></div>
                           </div>
                           <div class="text-center">
                               <button type="button" id="btnCompleteProductConfig" class="btn btn-primary btn-lg" onclick="addtocart()">
                                   {$LANG.continue}
                                   <i class="fa fa-arrow-circle-right"></i>
                               </button>
                           </div>
                       </div>

                   </div>

               </div>

           </form>
       </div>
   </div>
</div>

<script>recalctotals();</script>

 

 

Ordersummary.tpl

 

<span class="product-name">{$producttotals.productinfo.name}</span>
<span class="product-group">{$producttotals.productinfo.groupname}</span>

<div class="clearfix">
   <span class="pull-left">{$producttotals.productinfo.name}</span>
   <span class="pull-right">{$producttotals.pricing.baseprice}</span>
</div>

{foreach $producttotals.configoptions as $configoption}
   {if $configoption}
       <div class="clearfix">
           <span class="pull-left"> » {$configoption.name}: {$configoption.optionname}</span>
           <span class="pull-right">{$configoption.recurring}{if $configoption.setup} + {$configoption.setup} {$LANG.ordersetupfee}{/if}</span>
       </div>
   {/if}
{/foreach}

{foreach $producttotals.addons as $addon}
   <div class="clearfix">
       <span class="pull-left">+ {$addon.name}</span>
       <span class="pull-right">{$addon.recurring}</span>
   </div>
{/foreach}

{if $producttotals.pricing.setup || $producttotals.pricing.recurring || $producttotals.pricing.addons}
   <div class="summary-totals">
       {if $producttotals.pricing.setup}
           <div class="clearfix">
               <span class="pull-left">{$LANG.cartsetupfees}:</span>
               <span class="pull-right">{$producttotals.pricing.setup}</span>
           </div>
       {/if}
       {foreach from=$producttotals.pricing.recurringexcltax key=cycle item=recurring}
           <div class="clearfix">
               <span class="pull-left">{$cycle}:</span>
               <span class="pull-right">{$recurring}</span>
           </div>
       {/foreach}
       {if $producttotals.pricing.tax1}
           <div class="clearfix">
               <span class="pull-left">{$carttotals.taxname} @ {$carttotals.taxrate}%:</span>
               <span class="pull-right">{$producttotals.pricing.tax1}</span>
           </div>
       {/if}
       {if $producttotals.pricing.tax2}
           <div class="clearfix">
               <span class="pull-left">{$carttotals.taxname2} @ {$carttotals.taxrate2}%:</span>
               <span class="pull-right">{$producttotals.pricing.tax2}</span>
           </div>
       {/if}
   </div>
{/if}

<div class="total-due-today">
   <span class="amt">{$producttotals.pricing.totaltoday}</span>
   <span>{$LANG.ordertotalduetoday}</span>
</div>
{if $taxrate}
               <p> {$LANG.invoicestaxindicator}</p>
           {/if}

{if $tax eq "SEK0.00kr."}
           {$LANG.invoicesvat} 
{/if}

 

Also attached screenshot so that you can see my issue here is in order summary no price change when i click monthly and yearly option.

 

Looking forward hearing from you.

 

With Best regards,

 

Ugyenoption.pngoption.png

Edited by Ugyen
add screenshot for further details of issue
0
Link to comment
Share on other sites
Ugyen Junior Member

Ugyen

Posted
  • Author
Posted

Hi WHMCS Community,

 

Any sollutions for above mentioned issue.... I would like to add input ratio option in standard cart orderform and when i click ratio option it should display correctly in order summary. Looking forward hearing from you all.

 

With best regards,

 

Ugyen.

0
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated

  I accept