This article provides a guide for how to customize WHMCS order form cart template for improved compatibility with VPS Reseller WHMCS module.

Why Should You Customize Order Form Cart Template?

Customizing the order form cart template for your Cloud VPS products (configured with Rad Cloud server module) offers several benefits.

First, by removing extra required fields on the order form template provides your clients a better checkout experience. Your clients may not be prepared to input many arbitrary values (which have no bearing or effect on the server/service; i.e. useless additional configurations). By removing these from their checkout experience, they will be more likely to complete the order (reduced abandoned carts) while also providing them with a more efficient checkout experience (increasing customer satisfaction).

Secondly, in certain scenarios, some values entered by the client could break automated workflows (auto-provisioning cannot complete due to generated error). By removing these fields, we are able to ensure that their values are compatible with our expected automation workflows and do not result in failed service provisioning (when all other requirements have been met for our auto-provisioning flow).

So, for improved customer experience as well as improved administration experience, we recommend to modify the order form assigned to products configured with the Rad Cloud server module.

Customize WHMCS Order Form Cart Template

In order to improve compatibility with VPS Reseller WHMCS module, we recommend you customize WHMCS order form cart template.

Before (standard_cart template):

After (Customized Order Form):

Edit configureproduct.tpl:

• Open your order form template's configureproduct.tpl file in your preferred text editor (for this guide, we will be using standard_cart order form template, which is located at /path/to/whmcs/templates/orderforms/standard_cart/configureproduct.tpl).
• Find the following in configureproduct.tpl:

                          {if $productinfo.type eq "server"}
                              <div class="sub-heading">
                                  <span class="primary-bg-color">{$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.example.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}

• Replace the above section with the following:

                          {if $productinfo.type eq "server"}
                              <div class="sub-heading">
                                  <span class="primary-bg-color">{$LANG.cartconfigserver}</span>
                              </div>
  
                              <div class="field-container">
  
                                  <div class="row">
                                      <div class="col-sm-12">
                                          <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.example.com">
                                          </div>
                                      </div>
                                      <div class="col-sm-12" style="display:none">
                                          <div class="form-group">
                                              <label for="inputRootpw">{$LANG.serverrootpw}</label>
                                              <input type="password" name="rootpw" class="form-control" id="inputRootpw" value="{"@#$*123456789abcdefghkmnpqrstwxyzABCDEFGHKMNPQRSTUVWXYZ"|str_shuffle|truncate:16:""}">
                                          </div>
                                      </div>
                                  </div>
  
                                  <div class="row" style="display:none">
                                      <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="notapplicable" placeholder="notapplicable">
                                          </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="notapplicable" placeholder="notapplicable">
                                          </div>
                                      </div>
                                  </div>
  
                              </div>
                          {/if}

• Add the following line to the end of the configureproduct.tpl file, directly before the <script>recalctotals();</script>:

  <script>$("#inputHostname").val("vpssrv-{$smarty.now}-"+((new Date()).getMonth()+1).toString()+(new Date()).getDate()+parseInt(Math .random()*(999+1),10)+".us.vpsdemo.us");</script>
  <script>
    recalctotals();
  </script>

• You may replace the ".us.vpsdemo.us" string with a similar string (a fully qualified domain name preceded by a '.' - for example: '.something.domain.tld').
• Save the configureproduct.tpl file.

Conclusion

You now know how to customize WHMCS order form cart template for use with WHMCS VPS Reseller module.