styling

check_configure_nextcloud.tpl

@@ -0,0 +1,163 @@
+<script>
+    function checkUserName ( username, pid) {
+        var nameRegex = /^[a-zA-Z0-9\-]+$/;
+	var validUsername = username.match(nameRegex);
+        if(validUsername == null) {
+            console.log("Invalid Username: "+username);
+            $(customFields[4]).prop("disabled",true);
+            $(customFields[5]).prop("disabled",true);
+            $(customFields[2]).addClass('has-error');
+            $(customFields[2]).css('background-color', '#f003');;
+            $("#hintHead").text('Der Benutzername darf nur Klein- bzw. Grossbuchstaben (ohne Umlaute), Zahlen und den Bindestrich enthalten.');
+            $("#hintLength").text('');
+            $("#hintNumeric").text('');
+            $("#hintSymbols").text('');
+            $("#hintUpperLower").text('');
+            return;
+        }
+        var xhttp = new XMLHttpRequest();
+        var success = false;
+        console.log("UserName: " + username);
+        xhttp.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                if( this.responseText.trim() == 'yes') {
+                    console.log("Response: " + this.responseText);
+                    $(customFields[4]).prop("disabled",false);
+                    $(customFields[5]).prop("disabled",true);
+                    $(customFields[2]).addClass('has-success');
+                    $(customFields[2]).css('background-color', '#0f03');;
+                    $("#hintHead").text('');
+                    $("#hintLength").text('');
+                    $("#hintNumeric").text('');
+                    $("#hintSymbols").text('');
+                    $("#hintUpperLower").text('');
+                } else if (this.responseText.trim() == 'no') {
+                    console.log("Response: " + this.responseText);
+                    $(customFields[4]).prop("disabled",true);
+                    $(customFields[5]).prop("disabled",true);
+                    $(customFields[2]).addClass('has-error');
+                    $(customFields[2]).css('background-color', '#f003');;
+                    $("#hintHead").text('Benutzername ' + $(customFields[2]).val() + ' nicht verfügbar!');
+                    $("#hintLength").text('');
+                    $("#hintNumeric").text('');
+                    $("#hintSymbols").text('');
+                    $("#hintUpperLower").text('');
+                } else if (this.responseText.trim() == 'invalid') {
+                    console.log("Response: " + this.responseText);
+                    $(customFields[4]).prop("disabled",true);
+                    $(customFields[5]).prop("disabled",true);
+                    $(customFields[2]).addClass('has-error');
+                    $(customFields[2]).css('background-color', '#f003');;
+                    $("#hintHead").text('Der Benutzername darf nur Klein- bzw. Grossbuchstaben (ohne Umlaute), Zahlen und den Bindestrich enthalten.');
+                    $("#hintLength").text('');
+                    $("#hintNumeric").text('');
+                    $("#hintSymbols").text('');
+                    $("#hintUpperLower").text('');
+                } else {
+                    console.log("Response: " + this.responseText);
+                    $(customFields[4]).prop("disabled",true);
+                    $(customFields[5]).prop("disabled",true);
+                    $(customFields[2]).addClass('has-error');
+                    $(customFields[2]).css('background-color', '#f003');;
+                    $("#hintHead").text('Bei der Abfrage ist ein Fehler aufgetreten, es kann nicht fortgefahren werden. Bitte kontaktieren Sie den Support');
+                    $("#hintLength").text('');
+                    $("#hintNumeric").text('');
+                    $("#hintSymbols").text('');
+                    $("#hintUpperLower").text('');
+                }
+            }
+        };
+        xhttp.open("GET", "modules/servers/nextcloud/nextcloudUserAvailable.php?name=" + username + '&pid=' + pid, true);
+        xhttp.send();
+    };
+    jQuery(document).ready(function(){
+        customFields = $("*[id^='customfield']");
+        $("#btnCompleteProductConfig").prop("disabled",true);
+        $(customFields[4]).val('');
+        $(customFields[5]).val('');
+        if ($(customFields[2]).val().length > 0) {
+            checkUserName( $(customFields[2]).val(), {$productinfo['pid']});
+        }
+        $(customFields[4]).prop("disabled",true);
+        $(customFields[5]).prop("disabled",true);
+        $(customFields[2]).blur(function () {
+            checkUserName( $(customFields[2]).val(), {$productinfo['pid']});
+        });
+        $(customFields[4]).focus (function () {
+            $("#hintHead").text('Tipps für ein gutes Passwort');
+            $("#hintLength").text('Benutzen Sie mindestens 8 Zeichen');
+            $("#hintNumeric").text('Benutzen Sie mindestens eine Zahl');
+            $("#hintSymbols").text('Benutzen Sie auch mindestens eines der folgenden Symbole (# $ ! % + - etc...)');
+            $("#hintUpperLower").text('Benutzen Sie Groß- und Kleinschreibung');
+        });
+        $(customFields[4]).keyup(function () {
+            var pwlengthOK = false;
+            var numericOK = false;
+            var symbolsOK = false;
+            var upperOK = false;
+            var pw = $(customFields[4]).val();
+            var pwlength = (pw.length);
+            if (pwlength > 7) {
+                pwlengthOK = true;
+                $("#hintLength").text('');
+            } else {
+                pwlengthOK = false;
+                $("#hintLength").text('Benutzen Sie mindestens 8 Zeichen');
+            }
+            var numeric = pw.replace(/[0-9]/g, "");
+            var numnumeric = (pw.length - numeric.length);
+            if (numnumeric > 0) {
+                numericOK = true;
+                $("#hintNumeric").text('');
+            } else {
+                numericOK = false;
+                $("#hintNumeric").text('Benutzen Sie mindestens eine Zahl');
+            }
+            var symbols = pw.replace(/\W/g, "");
+            var numsymbols = (pw.length - symbols.length);
+            if (numsymbols > 0) {
+                symbolsOK = true;
+                $("#hintSymbols").text('');
+            } else {
+                symbolsOK = false;
+                $("#hintSymbols").text('Benutzen Sie auch mindestens ein Symbol oder Sonderzeichen (# $ ! % & + - etc...)');
+            }
+            var upper = pw.replace(/[A-Z]/g, "");
+            var numupper = (pw.length - upper.length);
+            var lower = pw.replace(/[a-z]/g, "");
+            var numlower = (pw.length - lower.length);
+            if ((numupper > 0) && (numlower > 0)) {
+                upperlowerOK = true;
+                $("#hintUpperLower").text('');
+            } else {
+                upperlowerOK = false;
+                $("#hintUpperLower").text('Benutzen Sie Groß- und Kleinschreibung');
+            }
+            $(customFields[4]).removeClass('has-error has-warning has-success');
+            if (pwlengthOK && numericOK && symbolsOK && upperlowerOK) {
+                $(customFields[5]).prop("disabled",false);
+                $(customFields[4]).addClass('has-success');
+                $(customFields[4]).css('background-color', '#0f03');;
+                $("#hintHead").text('');
+            } else {
+                $(customFields[5]).prop("disabled",true);
+                $(customFields[4]).addClass('has-error');
+                $(customFields[4]).css('background-color', '#f003');;
+                $("#hintHead").text('Tipps für ein gutes Passwort');
+            }
+        });
+        $(customFields[5]).keyup(function () {
+            if ($(customFields[5]).val() == $(customFields[4]).val()) {
+                $("#btnCompleteProductConfig").prop("disabled",false);
+                $(customFields[5]).addClass('has-success');
+                $(customFields[5]).css('background-color', '#0f03');;
+                $("#hintHead").text('');
+            } else {
+                $("#btnCompleteProductConfig").prop("disabled",true);
+                $(customFields[5]).addClass('has-error');
+                $(customFields[5]).css('background-color', '#f003');;
+                $("#hintHead").text('Passworte stimmen nicht überein!');
+            }
+        });
+    });
+</script>

check_configure_seafile.tpl

@@ -0,0 +1,172 @@
+{*
+This is the check orderform template for the seafile product
+This template requires a list of custom fields in exact this order:
+
+firstname|Vorname               -> customfields[0]
+lastname|Nachname               -> customfields[1]
+login|Login E-Mail              -> customfields[2]
+password|Passwort               -> customfields[3]
+pwrepeat|Passwort wiederholen   -> customfields[4]
+*}
+<script>
+    function checkUserName ( username, pid) {
+        {literal}
+	    var nameRegex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
+	{/literal}
+	var validUsername = username.match(nameRegex);
+        if(validUsername == null) {
+            console.log("Invalid E-Mail: "+username);
+            $(customFields[3]).prop("disabled",true);
+            $(customFields[4]).prop("disabled",true);
+            $(customFields[2]).addClass('has-error');
+            $(customFields[2]).css('background-color', '#f003');;
+            $("#hintHead").text('Bitte eine gültige E-Mail-Adresse angeben.');
+            $("#hintLength").text('');
+            $("#hintNumeric").text('');
+            $("#hintSymbols").text('');
+            $("#hintUpperLower").text('');
+            return;
+        } 
+        var xhttp = new XMLHttpRequest();
+        var success = false;
+        console.log("UserName: " + username);
+        xhttp.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                if( this.responseText.trim() == 'yes') {
+                    console.log("Response: " + this.responseText);
+	    	    $(customFields[2]).addClass('has-success');
+                    $(customFields[2]).css('background-color', '#0f03');;
+                    $(customFields[3]).prop("disabled",false);
+                    $(customFields[4]).prop("disabled",true);
+
+                    $("#hintHead").text('');
+                    $("#hintLength").text('');
+                    $("#hintNumeric").text('');
+                    $("#hintSymbols").text('');
+                    $("#hintUpperLower").text('');
+                    $(customFields[3]).focus();
+                } else if (this.responseText.trim() == 'no') {
+                    console.log("Response: " + this.responseText);
+		    $(customFields[2]).addClass('has-error');
+                    $(customFields[2]).css('background-color', '#f003');;
+                    $(customFields[3]).prop("disabled",true);
+                    $(customFields[4]).prop("disabled",true);
+
+                    $("#hintHead").text('E-Mail Account ' + $(customFields[2]).val() + ' nicht verfügbar!');
+                    $("#hintLength").text('');
+                    $("#hintNumeric").text('');
+                    $("#hintSymbols").text('');
+                    $("#hintUpperLower").text('');
+                } else if (this.responseText.trim() == 'invalid') {
+                    console.log("Response: " + this.responseText);
+		    $(customFields[2]).addClass('has-error');
+                    $(customFields[2]).css('background-color', '#f003');;
+                    $(customFields[3]).prop("disabled",true);
+                    $(customFields[4]).prop("disabled",true);
+
+                    $("#hintHead").text('E-Mail Adresse ' + $(customFields[2]).val() + ' nicht valide! HACKER!');
+                    $("#hintLength").text('');
+                    $("#hintNumeric").text('');
+                    $("#hintSymbols").text('');
+                    $("#hintUpperLower").text('');
+                }
+            }
+        };
+        xhttp.open("GET", "modules/servers/seafile/seafileAddressAvailable.php?username=" + username + '&pid=' + pid, true);
+        xhttp.send();
+    }
+
+    jQuery(document).ready(function(){
+        customFields = $("*[id^='customfield']");
+        $("#btnCompleteProductConfig").prop("disabled",true);
+        $(customFields[3]).val('');
+        $(customFields[4]).val('');
+        if ($(customFields[2]).val().length > 0) {
+            checkUserName( $(customFields[2]).val(), {$productinfo['pid']});
+        }
+        $(customFields[3]).prop("disabled",true);
+        $(customFields[4]).prop("disabled",true);
+        $(customFields[2]).blur(function () {
+            checkUserName( $(customFields[2]).val(), {$productinfo['pid']});
+        });
+        $(customFields[3]).focus (function () {
+            $("#hintHead").text('Tipps für ein gutes Passwort');
+            $("#hintLength").text('Benutzen Sie mindestens 8 Zeichen');
+            $("#hintNumeric").text('Benutzen Sie mindestens eine Zahl');
+            $("#hintSymbols").text('Benutzen Sie auch mindestens eines der folgenden Symbole (# $ ! % + - etc...)');
+            $("#hintUpperLower").text('Benutzen Sie Groß- und Kleinschreibung');
+        });
+        
+        // Check password in first password field
+        $(customFields[3]).keyup(function () {
+            var pwlengthOK = false;
+            var numericOK = false;
+            var symbolsOK = false;
+            var upperOK = false;
+            var pw = $(customFields[3]).val();
+            var pwlength = (pw.length);
+            if (pwlength > 7) {
+                pwlengthOK = true;
+                $("#hintLength").text('');
+            } else {
+                pwlengthOK = false;
+                $("#hintLength").text('Benutzen Sie mindestens 8 Zeichen');
+            }
+            var numeric = pw.replace(/[0-9]/g, "");
+            var numnumeric = (pw.length - numeric.length);
+            if (numnumeric > 0) {
+                numericOK = true;
+                $("#hintNumeric").text('');
+            } else {
+                numericOK = false;
+                $("#hintNumeric").text('Benutzen Sie mindestens eine Zahl');
+            }
+            var symbols = pw.replace(/\W/g, "");
+            var numsymbols = (pw.length - symbols.length);
+            if (numsymbols > 0) {
+                symbolsOK = true;
+                $("#hintSymbols").text('');
+            } else {
+                symbolsOK = false;
+                $("#hintSymbols").text('Benutzen Sie auch mindestens ein Symbol oder Sonderzeichen (# $ ! % & + - etc...)');
+            }
+            var upper = pw.replace(/[A-Z]/g, "");
+            var numupper = (pw.length - upper.length);
+            var lower = pw.replace(/[a-z]/g, "");
+            var numlower = (pw.length - lower.length);
+            if ((numupper > 0) && (numlower > 0)) {
+                upperlowerOK = true;
+                $("#hintUpperLower").text('');
+            } else {
+                upperlowerOK = false;
+                $("#hintUpperLower").text('Benutzen Sie Groß- und Kleinschreibung');
+            }
+            $(customFields[3]).removeClass('has-error has-warning has-success');
+            if (pwlengthOK && numericOK && symbolsOK && upperlowerOK) {
+                $(customFields[4]).prop("disabled",false);
+                $(customFields[3]).addClass('has-success');
+                $(customFields[3]).css('background-color', '#0f03');;
+                $("#hintHead").text('');
+            } else {
+                $(customFields[4]).prop("disabled",true);
+                $(customFields[3]).addClass('has-error');
+                $(customFields[3]).css('background-color', '#f003');;
+                $("#hintHead").text('Tipps für ein gutes Passwort');
+            }
+        });
+        
+        $(customFields[4]).keyup(function () {
+            if ($(customFields[4]).val() == $(customFields[3]).val()) {
+                $("#btnCompleteProductConfig").prop("disabled",false);
+                $(customFields[4]).addClass('has-success');
+                $(customFields[4]).css('background-color', '#0f03');;
+                $("#hintHead").text('');
+            } else {
+                $("#btnCompleteProductConfig").prop("disabled",true);
+                $(customFields[4]).addClass('has-error');
+                $(customFields[4]).css('background-color', '#f003');;
+                $("#hintHead").text('Passworte stimmen nicht überein!');
+            }
+        });
+    });
+</script>

check_configure_thurvserver.tpl

@@ -4,20 +4,20 @@
         $("#btnCompleteProductConfig").prop("disabled",true);
         $(customFields[2]).val('');
         $(customFields[3]).val('');
-        $(customFields[3]).prop("disabled",true);
-        $(customFields[2]).focus (function () {
+        $(customFields[4]).prop("disabled",true);
+        $(customFields[3]).focus (function () {
             $("#hintHead").text('Tipps für ein gutes Passwort');
             $("#hintLength").text('Benutzen Sie mindestens 8 Zeichen');
             $("#hintNumeric").text('Benutzen Sie mindestens eine Zahl');
             $("#hintSymbols").text('Benutzen Sie auch mindestens eines der folgenden Symbole (# $ ! % + - etc...)');
             $("#hintUpperLower").text('Benutzen Sie Groß- und Kleinschreibung');
         });
-        $(customFields[2]).keyup(function () {
+        $(customFields[3]).keyup(function () {
             var pwlengthOK = false;
             var numericOK = false;
             var symbolsOK = false;
             var upperOK = false;
-            var pw = $(customFields[2]).val();
+            var pw = $(customFields[3]).val();
             var pwlength = (pw.length);
             if (pwlength > 7) {
                 pwlengthOK = true;
@@ -68,7 +68,7 @@
                 $("#hintHead").text('Tipps für ein gutes Passwort');
             }
         });
-        $(customFields[3]).keyup(function () {
+        $(customFields[4]).keyup(function () {
             if ($(customFields[3]).val() == $(customFields[2]).val()) {
                 $("#btnCompleteProductConfig").prop("disabled",false);
                 $(customFields[3]).addClass('has-success');

checkout.tpl

@@ -6,10 +6,10 @@
         // Do not enforce state input client side
         var stateNotRequired = true;
     </script>
-	<script type="text/javascript" src="{$WEB_ROOT}/templates/orderforms/{$carttpl}/js/intlTelInput.min.js"></script>
+    <script type="text/javascript" src="{$WEB_ROOT}/templates/orderforms/{$carttpl}/js/intlTelInput.min.js"></script>
     <script type="text/javascript" src="{$WEB_ROOT}/templates/orderforms/{$carttpl}/js/scripts.min.js?v={$versionHash}"></script>
-    <script type="text/javascript" src="{$BASE_PATH_JS}/StatesDropdown.js"></script>
-    <script type="text/javascript" src="{$BASE_PATH_JS}/PasswordStrength.js"></script>
+    <script type="text/javascript" src="{$orderform.assetPath.js}/StatesDropdown.js"></script>
+    <script type="text/javascript" src="{$orderform.assetPath.js}/PasswordStrength.js"></script>
 
     <script>
         window.langPasswordStrength = "{$LANG.pwstrength}";
@@ -897,8 +897,8 @@
         var stateNotRequired = true;
     </script>
     {include file="orderforms/{$carttpl}/common.tpl"}
-    <script type="text/javascript" src="{$BASE_PATH_JS}/StatesDropdown.js"></script>
-    <script type="text/javascript" src="{$BASE_PATH_JS}/PasswordStrength.js"></script>
+    <script type="text/javascript" src="{$orderform.assetPath.js}/StatesDropdown.js"></script>
+    <script type="text/javascript" src="{$orderform.assetPath.js}/PasswordStrength.js"></script>
     <script>
         window.langPasswordStrength = "{$LANG.pwstrength}";
         window.langPasswordWeak = "{$LANG.pwstrengthweak}";
@@ -1648,7 +1648,7 @@
 </div>
 </div>
 
-<script type="text/javascript" src="{$BASE_PATH_JS}/jquery.payment.js"></script>
+<script type="text/javascript" src="{$orderform.assetPath.js}/jquery.payment.js"></script>
 
 
 

configure_nextcloud.tpl

@@ -0,0 +1,528 @@
+{*
+This is the orderform template for the nextcloud product
+This template requires a list of custom fields in exact this order:
+
+firstname|Vorname		-> customfields[0]
+lastname|Nachname		-> customfields[1]
+username|Benutzername		-> customfields[2]
+email|E-Mail-Addresse		-> customfields[3]
+password|Passwort		-> customfields[4]
+pwrepeat|Passwort wiederholen	-> customfields[5]
+*}
+
+
+{include file="orderforms/{$carttpl}/common.tpl"}
+
+<script>
+var _localLang = {
+    'addToCart': '{$LANG.orderForm.addToCart|escape}',
+    'addedToCartRemove': '{$LANG.orderForm.addedToCartRemove|escape}'
+}
+</script>
+
+{if file_exists("templates/orderforms/{$carttpl}/layouts/head.tpl")}
+	{include file="templates/orderforms/{$carttpl}/layouts/head.tpl"}
+{/if}
+
+<div id="order-standard_cart">
+
+    <div class="row">
+
+        <div class="col-md-12">
+	    {if file_exists("templates/orderforms/{$carttpl}/layouts/head.tpl")}
+	    {else}
+        	<div class="header-lined">
+            	    <h1>{$LANG.orderconfigure}</h1>
+        	</div>
+	    {/if}
+	    {include file="orderforms/{$carttpl}/sidebar-categories-collapsed.tpl"}
+        </div>
+
+        <div class="col-md-12">
+
+            <form id="frmConfigureProduct">
+                <input type="hidden" name="configure" value="true" />
+                <input type="hidden" name="i" value="{$i}" />
+
+                <div class="row ajaxcart_cont">
+                    <div class="col-md-8 col-lg-9">
+
+                        <h3>{$LANG.orderForm.configureDesiredOptions}</h3>
+
+                        <div class="panel panel-default">
+				<div class="panel-body">
+				    <table width="100%" height="100%">
+					<tr>
+					    <td valign="top" style="padding-right: 50px;">
+						{$features = "<br />"|explode:$productinfo.description}
+						<p class="product-title" style="margin-bottom: -2px;  font-size:120%;"><strong><i>{$productinfo.group_name}</i> - {$productinfo.name}</strong></p>
+						{foreach $features as $feature}
+							{$featureParts = ":"|explode:$feature}
+							{$featureTrim = $feature|trim}
+							{if !$featureTrim|strstr:':' && $featureTrim ne '' && $featureTrim ne ' ' && $featureTrim ne '  '}
+							    {$feature}<br />
+							{/if}
+						{/foreach}
+						<br />
+						<!-- {$productinfo.description} -->
+						<table class="plan-features{if $block.flisticon == "check-list"} check-list{elseif $block.flisticon == "check-circle"} check-circle{elseif $block.flisticon == "check-square"} check-square{elseif $block.flisticon == "arrows"} arrows{else}{/if}" style="padding-top:0px; padding-bottom: 15px;" id="PlanLists{$kk + 1}">
+						    {foreach $features as $feature}
+							{$featureParts = ":"|explode:$feature}
+							{if $featureParts|@count > 1}
+							    <tr>
+                                    	                    <td style="padding-right: 33px;"><b>{$featureParts[0]}:</b></td>
+                                        	                <td>
+                                                	            {if $featureParts[1]|trim == "Ja"} <i class="far fa-check-square" style="font-size:14px"></i>
+                                                        	    {elseif $featureParts[1]|trim == "Nein"} <i class="far fa-square" style="font-size:14px"></i>
+	                                                            {elseif $featureParts[1]|trim == "Optional"} <i class="fas fa-plus" style="font-size:14px"></i>
+    	                                                        {else}
+		                                                        {$featureParts[1]}
+    	        	                                            {/if}
+                        	                                </td>
+							{/if}
+						    {/foreach}
+						</table>
+					    </td>
+					    <td valign="top" style="text-align:left;">
+                                                {*
+                                                    Product Icon set by its group id
+                                                    -----------------------------------------
+                                                    Mailhosting                     => gid=1
+                                                    Thurfiles Private Hosting       => gid=2
+                                                    Nextcloud Private Hosting       => gid=3
+                                                    ThurVServer                     => gid=4
+                                                    ThurVCloud                      => gid=5
+                                                    Groupware Hosting               => gid=7
+                                                    Mailhosting mit Nextcloud       => gid=8
+                                                    Nextcloud Business Hosting	    => gid=9
+                                                    Thurfiles Business Hosting	    => gid=10
+                                                *}
+						<img src="/templates/croster/thurdata/productgroups/{$productinfo.gid}.svg" class="img-fluid" style="height:150px;">
+					    </td>
+					</tr>
+    				    </table>
+				</div>
+                        </div>
+
+                        <div class="alert alert-danger w-hidden" role="alert" id="containerProductValidationErrors">
+                            <p>{$LANG.orderForm.correctErrors}:</p>
+                            <ul id="containerProductValidationErrorsList"></ul>
+                        </div>
+
+                        {if $pricing.type eq "recurring"}
+                            <div class="field-container">
+                                <div class="form-group">
+                                    <label for="inputBillingcycle">{$LANG.cartchoosecycle}</label><br />
+                                    <select name="billingcycle" id="inputBillingcycle" class="form-control" onchange="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}">
+                                        {if $pricing.monthly}
+                                            <option value="monthly"{if $billingcycle eq "monthly"} selected{/if}>
+                                                {$pricing.monthly}
+                                            </option>
+                                        {/if}
+                                        {if $pricing.quarterly}
+                                            <option value="quarterly"{if $billingcycle eq "quarterly"} selected{/if}>
+                                                {$pricing.quarterly}
+                                            </option>
+                                        {/if}
+                                        {if $pricing.semiannually}
+                                            <option value="semiannually"{if $billingcycle eq "semiannually"} selected{/if}>
+                                                {$pricing.semiannually}
+                                            </option>
+                                        {/if}
+                                        {if $pricing.annually}
+                                            <option value="annually"{if $billingcycle eq "annually"} selected{/if}>
+                                                {$pricing.annually}
+                                            </option>
+                                        {/if}
+                                        {if $pricing.biennially}
+                                            <option value="biennially"{if $billingcycle eq "biennially"} selected{/if}>
+                                                {$pricing.biennially}
+                                            </option>
+                                        {/if}
+                                        {if $pricing.triennially}
+                                            <option value="triennially"{if $billingcycle eq "triennially"} selected{/if}>
+                                                {$pricing.triennially}
+                                            </option>
+                                        {/if}
+                                    </select>
+                                </div>
+                            </div>
+                        {/if}
+
+                        {if count($metrics) > 0}
+                            <div class="sub-heading">
+                                <span>{$LANG.metrics.title}</span>
+                            </div>
+
+                            <p>{$LANG.metrics.explanation}</p>
+
+                            <ul>
+                                {foreach $metrics as $metric}
+                                    <li>
+                                        {$metric.displayName}
+                                        -
+                                        {if count($metric.pricing) > 1}
+                                            {$LANG.metrics.startingFrom} {$metric.lowestPrice} / {if $metric.unitName}{$metric.unitName}{else}{$LANG.metrics.unit}{/if}
+                                            <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#modalMetricPricing-{$metric.systemName}">
+                                                {$LANG.metrics.viewPricing}
+                                            </button>
+                                        {elseif count($metric.pricing) == 1}
+                                            {$metric.lowestPrice} / {if $metric.unitName}{$metric.unitName}{else}{$LANG.metrics.unit}{/if}
+                                            {if $metric.includedQuantity > 0} ({$metric.includedQuantity} {$LANG.metrics.includedNotCounted}){/if}
+                                        {/if}
+                                        {include file="$template/usagebillingpricing.tpl"}
+                                    </li>
+                                {/foreach}
+                            </ul>
+
+                            <br>
+                        {/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-12">
+                                                <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-12">
+                                                <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-12">
+                                                <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="{$orderform.assetPath.js}/ion.rangeSlider.min.js"></script>
+                                                            <link href="{$orderform.assetPath.css}/ion.rangeSlider.css" rel="stylesheet">
+                                                            <link href="{$orderform.assetPath.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;
+                                                            var sliderRangeDifference = {$configoption.qtymaximum} - {$configoption.qtyminimum};
+                                                            // The largest size that looks nice on most screens.
+                                                            var sliderStepThreshold = 25;
+                                                            // Check if there are too many to display individually.
+                                                            var setLargerMarkers = sliderRangeDifference > sliderStepThreshold;
+
+                                                            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);
+                                                                }
+                                                            });
+                                                        </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}
+			{*
+			This requires a list of custom fields in exact this order:
+			
+			firstname|Vorname		-> customfields[0]
+			lastname|Nachname		-> customfields[1]
+			username|Benutzername		-> customfields[2]
+			email|E-Mail-Addresse		-> customfields[3]
+			password|Passwort		-> customfields[4]
+			pwrepeat|Passwort wiederholen	-> customfields[5]
+			*}
+
+
+                        {if $customfields}
+                            <div class="sub-heading">
+                                <span>{$LANG.orderadditionalrequiredinfo}</span>
+                            </div>
+                            <div class="field-container">
+                            <table width="100%" border="0" cellpadding="10" cellspacing="0" class="table table-borderless">
+                              <!-- Vorname und Nachname -->
+                              <tr>
+                                <td align='left'>
+                                    <div class="form-group">
+                                        <label for="customfield{$customfields[0].id}">{$customfields[0].name}</label>
+                                        {$customfields[0].input}
+                                        {if $customfields[0].description}
+                                            <span class="field-help-text">
+                                                {$customfields[0].description}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                </td>
+                                <td></td>
+                                <td align='left'>
+                                    <div class="form-group">
+                                        <label for="customfield{$customfields[1].id}">{$customfields[1].name}</label>
+                                        {$customfields[1].input}
+                                        {if $customfields[1].description}
+                                            <span class="field-help-text">
+                                                {$customfields[1].description}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                </td>
+                              </tr>
+                              <!-- Benutzername und E-Mail Adresse -->
+                              <tr>
+                                <td align='left'>
+                                    <div class="form-group">
+                                        <label for="customfield{$customfields[2].id}">{$customfields[2].name}</label>
+                                        {$customfields[2].input}
+                                        {if $customfields[2].description}
+                                            <span class="field-help-text">
+                                                {$customfields[2].description}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                </td>
+                                <td style="vertical-align:middle;margin:0;padding:0;">
+                                </td>
+                                <td align='left'>
+                                    <div class="form-group">
+                                        <label for="customfield{$customfields[3].id}">{$customfields[3].name}</label>
+                                        {$customfields[3].input}
+                                        {if $customfields[3].description}
+                                            <span class="field-help-text">
+                                                {$customfields[3].description}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                </td>
+                              </tr>
+                              
+                              <!-- Passwort und Passwort wiederholen -->
+                              <tr>
+                                <td align='left'>
+                                    <div class="form-group">
+                                        <label for="customfield{$customfields[4].id}">{$customfields[4].name}</label>
+                                        {$customfields[4].input}
+                                        {if $customfields[4].description}
+                                            <span class="field-help-text" onclick="this.previousElementSibling.type='text';this.innerHTML='';">
+                                                <text style="cursor:pointer;">&#x1F441;</text>&nbsp;{$customfields[4].description}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                </td>
+                                <td></td>
+                                <td align='left'>
+                                    <div class="form-group">
+                                        <label for="customfield{$customfields[5].id}">{$customfields[5].name}</label>
+                                        {$customfields[5].input}
+                                        {if $customfields[5].description}
+                                            <span class="field-help-text">
+                                                {$customfields[5].description}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                </td>
+                              </tr>
+
+                            </table>
+                            </div>
+                            <div class="alert alert-info">
+                                <div id='hints'>
+                                    <strong id='hintHead'></strong>
+                                    <div id='hintLength'></div>
+                                    <div id='hintNumeric'></div>
+                                    <div id='hintSymbols'></div>
+                                    <div id='hintUpperLower'></div>
+                                </div>
+                            </div>
+                        {/if}
+
+                        {if $addons || count($addonsPromoOutput) > 0}
+
+                            <div class="sub-heading">
+                                <span>{$LANG.cartavailableaddons}</span>
+                            </div>
+
+                            {foreach $addonsPromoOutput as $output}
+                                <div>
+                                    {$output}
+                                </div>
+                            {/foreach}
+							
+							
+                            <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">
+                                               <input type="checkbox" name="addons[{$addon.id}]"{if $addon.status} checked{/if} />
+                                                <span class="panel-addon-name">{$addon.name}</span>
+												<span class="panel-addon-price">{$addon.pricing}</span>
+                                                <p class="text-muted">{$addon.description}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                {/foreach}
+                            </div>
+
+                        {/if}
+
+                        <div class="alert alert-warning text-center">
+                            <i class="fas 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 col-lg-3">
+						<div  id="sidebar">
+							<div class="sidebar__inner blocks cartsummary">
+								<div>
+									<div class="order-summary">
+										<div class="loader" id="orderSummaryLoader">
+											<i class="fas fa-fw fa-sync fa-spin"></i>
+										</div>
+										<h2>{$LANG.ordersummary}</h2>
+										<div class="summary-container" id="producttotal"></div>
+									</div>
+									<div class="text-center">
+										 <button type="submit" id="btnCompleteProductConfig" class="btn btn-primary btn-lg">
+											{$LANG.continue}
+											<i class="fas fa-arrow-circle-right"></i>
+										</button>
+									</div>
+								</div>
+							</div>
+						</div>
+                    </div>
+
+                </div>
+
+            </form>
+        </div>
+    </div>
+</div>
+
+{if file_exists("templates/orderforms/{$carttpl}/layouts/foot.tpl")}
+	{include file="templates/orderforms/{$carttpl}/layouts/foot.tpl"}
+{/if}
+
+
+<script language="javascript">
+	recalctotals();
+</script>
+
+
+<script type="text/javascript" src="{$WEB_ROOT}/templates/orderforms/{$carttpl}/js/ResizeSensor.js"></script>
+<script type="text/javascript" src="{$WEB_ROOT}/templates/orderforms/{$carttpl}/js/jquery.sticky-sidebar.min.js"></script>
+
+<script>
+    jQuery('#sidebar').stickySidebar({
+        topSpacing: 60,
+        bottomSpacing: 60,
+        minWidth: 992,
+        containerSelector: '.ajaxcart_cont',
+        innerWrapperSelector: '.sidebar__inner'
+    });
+</script>

configure_privat_mail.tpl

@@ -39,10 +39,58 @@ var _localLang = {
                         <h3>{$LANG.orderForm.configureDesiredOptions}</h3>
 
                         <div class="panel panel-default">
-							<div class="panel-body">
-								<p class="product-title"><strong><i>{$productinfo.group_name}</i> - {$productinfo.name}</strong></p>
-								<p>{$productinfo.description}</p>
-							</div>
+				<div class="panel-body">
+				    <table width="100%" height="100%">
+					<tr>
+					    <td valign="top" style="padding-right: 50px;">
+						{$features = "<br />"|explode:$productinfo.description}
+						<p class="product-title" style="margin-bottom: -2px;  font-size:120%;"><strong><i>{$productinfo.group_name}</i> - {$productinfo.name}</strong></p>
+						{foreach $features as $feature}
+							{$featureParts = ":"|explode:$feature}
+							{$featureTrim = $feature|trim}
+							{if !$featureTrim|strstr:':' && $featureTrim ne '' && $featureTrim ne ' ' && $featureTrim ne '  '}
+							    {$feature}<br />
+							{/if}
+						{/foreach}
+						<br />
+						<!-- {$productinfo.description} -->
+						<table class="plan-features{if $block.flisticon == "check-list"} check-list{elseif $block.flisticon == "check-circle"} check-circle{elseif $block.flisticon == "check-square"} check-square{elseif $block.flisticon == "arrows"} arrows{else}{/if}" style="padding-top:0px; padding-bottom: 15px;" id="PlanLists{$kk + 1}">
+						    {foreach $features as $feature}
+							{$featureParts = ":"|explode:$feature}
+							{if $featureParts|@count > 1}
+							    <tr>
+                                    	                    <td style="padding-right: 33px;"><b>{$featureParts[0]}:</b></td>
+                                        	                <td>
+                                                	            {if $featureParts[1]|trim == "Ja"} <i class="far fa-check-square" style="font-size:14px"></i>
+                                                        	    {elseif $featureParts[1]|trim == "Nein"} <i class="far fa-square" style="font-size:14px"></i>
+	                                                            {elseif $featureParts[1]|trim == "Optional"} <i class="fas fa-plus" style="font-size:14px"></i>
+    	                                                        {else}
+		                                                        {$featureParts[1]}
+    	        	                                            {/if}
+                        	                                </td>
+							{/if}
+						    {/foreach}
+						</table>
+					    </td>
+					    <td valign="top" style="text-align:left;">
+                                                {*
+                                                    Product Icon set by its group id
+                                                    -----------------------------------------
+                                                    Mailhosting                     => gid=1
+                                                    Thurfiles Private Hosting       => gid=2
+                                                    Nextcloud Private Hosting       => gid=3
+                                                    ThurVServer                     => gid=4
+                                                    ThurVCloud                      => gid=5
+                                                    Groupware Hosting               => gid=7
+                                                    Mailhosting mit Nextcloud       => gid=8
+                                                    NextCloud Business Hosting      => gid=9
+                                                    Thurfiles Business Hosting	    => gid=10
+                                                *}
+						<img src="/templates/croster/thurdata/productgroups/{$productinfo.gid}.svg" class="img-fluid" style="height:150px;">
+					    </td>
+					</tr>
+    				    </table>
+				</div>
                         </div>
 
                         <div class="alert alert-danger w-hidden" role="alert" id="containerProductValidationErrors">
@@ -217,9 +265,9 @@ var _localLang = {
                                                     <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">
+                                                            <script type="text/javascript" src="{$orderform.assetPath.js}/ion.rangeSlider.min.js"></script>
+                                                            <link href="{$orderform.assetPath.css}/ion.rangeSlider.css" rel="stylesheet">
+                                                            <link href="{$orderform.assetPath.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" />
@@ -313,7 +361,7 @@ var _localLang = {
                                     </div>
                                 </td>
                                 <td style="vertical-align:middle;margin:0;padding:0;">
-                                    <font size=+2px>@</font>
+                            	    <font size=+2px>@</font>
                                 </td>
                                 <td align='left'>
                                     <div class="form-group">

configure_seafile.tpl

@@ -0,0 +1,513 @@
+{*
+This is the orderform template for the seafile product
+This template requires a list of custom fields in exact this order:
+
+firstname|Vorname		-> customfields[0]
+lastname|Nachname		-> customfields[1]
+login|Login E-Mail		-> customfields[2]
+password|Passwort		-> customfields[3]
+pwrepeat|Passwort wiederholen	-> customfields[4]
+*}
+
+
+{include file="orderforms/{$carttpl}/common.tpl"}
+
+<script>
+var _localLang = {
+    'addToCart': '{$LANG.orderForm.addToCart|escape}',
+    'addedToCartRemove': '{$LANG.orderForm.addedToCartRemove|escape}'
+}
+</script>
+
+{if file_exists("templates/orderforms/{$carttpl}/layouts/head.tpl")}
+	{include file="templates/orderforms/{$carttpl}/layouts/head.tpl"}
+{/if}
+
+<div id="order-standard_cart">
+
+    <div class="row">
+
+        <div class="col-md-12">
+	    {if file_exists("templates/orderforms/{$carttpl}/layouts/head.tpl")}
+	    {else}
+        	<div class="header-lined">
+            	    <h1>{$LANG.orderconfigure}</h1>
+        	</div>
+	    {/if}
+	    {include file="orderforms/{$carttpl}/sidebar-categories-collapsed.tpl"}
+        </div>
+
+        <div class="col-md-12">
+
+            <form id="frmConfigureProduct">
+                <input type="hidden" name="configure" value="true" />
+                <input type="hidden" name="i" value="{$i}" />
+
+                <div class="row ajaxcart_cont">
+                    <div class="col-md-8 col-lg-9">
+
+                        <h3>{$LANG.orderForm.configureDesiredOptions}</h3>
+
+                        <div class="panel panel-default">
+				<div class="panel-body">
+				    <table width="100%" height="100%">
+					<tr>
+					    <td valign="top" style="padding-right: 50px;">
+						{$features = "<br />"|explode:$productinfo.description}
+						<p class="product-title" style="margin-bottom: -2px;  font-size:120%;"><strong><i>{$productinfo.group_name}</i> - {$productinfo.name}</strong></p>
+						{foreach $features as $feature}
+							{$featureParts = ":"|explode:$feature}
+							{$featureTrim = $feature|trim}
+							{if !$featureTrim|strstr:':' && $featureTrim ne '' && $featureTrim ne ' ' && $featureTrim ne '  '}
+							    {$feature}<br />
+							{/if}
+						{/foreach}
+						<br />
+						<!-- {$productinfo.description} -->
+						<table class="plan-features{if $block.flisticon == "check-list"} check-list{elseif $block.flisticon == "check-circle"} check-circle{elseif $block.flisticon == "check-square"} check-square{elseif $block.flisticon == "arrows"} arrows{else}{/if}" style="padding-top:0px; padding-bottom: 15px;" id="PlanLists{$kk + 1}">
+						    {foreach $features as $feature}
+							{$featureParts = ":"|explode:$feature}
+							{if $featureParts|@count > 1}
+							    <tr>
+                                    	                    <td style="padding-right: 33px;"><b>{$featureParts[0]}:</b></td>
+                                        	                <td>
+                                                	            {if $featureParts[1]|trim == "Ja"} <i class="far fa-check-square" style="font-size:14px"></i>
+                                                        	    {elseif $featureParts[1]|trim == "Nein"} <i class="far fa-square" style="font-size:14px"></i>
+	                                                            {elseif $featureParts[1]|trim == "Optional"} <i class="fas fa-plus" style="font-size:14px"></i>
+    	                                                        {else}
+		                                                        {$featureParts[1]}
+    	        	                                            {/if}
+                        	                                </td>
+							{/if}
+						    {/foreach}
+						</table>
+					    </td>
+					    <td valign="top" style="text-align:left;">
+                                                {*
+                                                    Product Icon set by its group id
+                                                    -----------------------------------------
+                                                    Mailhosting                     => gid=1
+                                                    Thurfiles Private Hosting       => gid=2
+                                                    Nextcloud Private Hosting       => gid=3
+                                                    ThurVServer                     => gid=4
+                                                    ThurVCloud                      => gid=5
+                                                    Groupware Hosting               => gid=7
+                                                    Mailhosting mit Nextcloud       => gid=8
+                                                    Nextcloud Business Hosting	    => gid=9
+                                                    Thurfiles Business Hosting	    => gid=10
+                                                *}
+						<img src="/templates/croster/thurdata/productgroups/{$productinfo.gid}.svg" class="img-fluid" style="height:150px;">
+					    </td>
+					</tr>
+    				    </table>
+				</div>
+                        </div>
+
+                        <div class="alert alert-danger w-hidden" role="alert" id="containerProductValidationErrors">
+                            <p>{$LANG.orderForm.correctErrors}:</p>
+                            <ul id="containerProductValidationErrorsList"></ul>
+                        </div>
+
+                        {if $pricing.type eq "recurring"}
+                            <div class="field-container">
+                                <div class="form-group">
+                                    <label for="inputBillingcycle">{$LANG.cartchoosecycle}</label><br />
+                                    <select name="billingcycle" id="inputBillingcycle" class="form-control" onchange="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}">
+                                        {if $pricing.monthly}
+                                            <option value="monthly"{if $billingcycle eq "monthly"} selected{/if}>
+                                                {$pricing.monthly}
+                                            </option>
+                                        {/if}
+                                        {if $pricing.quarterly}
+                                            <option value="quarterly"{if $billingcycle eq "quarterly"} selected{/if}>
+                                                {$pricing.quarterly}
+                                            </option>
+                                        {/if}
+                                        {if $pricing.semiannually}
+                                            <option value="semiannually"{if $billingcycle eq "semiannually"} selected{/if}>
+                                                {$pricing.semiannually}
+                                            </option>
+                                        {/if}
+                                        {if $pricing.annually}
+                                            <option value="annually"{if $billingcycle eq "annually"} selected{/if}>
+                                                {$pricing.annually}
+                                            </option>
+                                        {/if}
+                                        {if $pricing.biennially}
+                                            <option value="biennially"{if $billingcycle eq "biennially"} selected{/if}>
+                                                {$pricing.biennially}
+                                            </option>
+                                        {/if}
+                                        {if $pricing.triennially}
+                                            <option value="triennially"{if $billingcycle eq "triennially"} selected{/if}>
+                                                {$pricing.triennially}
+                                            </option>
+                                        {/if}
+                                    </select>
+                                </div>
+                            </div>
+                        {/if}
+
+                        {if count($metrics) > 0}
+                            <div class="sub-heading">
+                                <span>{$LANG.metrics.title}</span>
+                            </div>
+
+                            <p>{$LANG.metrics.explanation}</p>
+
+                            <ul>
+                                {foreach $metrics as $metric}
+                                    <li>
+                                        {$metric.displayName}
+                                        -
+                                        {if count($metric.pricing) > 1}
+                                            {$LANG.metrics.startingFrom} {$metric.lowestPrice} / {if $metric.unitName}{$metric.unitName}{else}{$LANG.metrics.unit}{/if}
+                                            <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#modalMetricPricing-{$metric.systemName}">
+                                                {$LANG.metrics.viewPricing}
+                                            </button>
+                                        {elseif count($metric.pricing) == 1}
+                                            {$metric.lowestPrice} / {if $metric.unitName}{$metric.unitName}{else}{$LANG.metrics.unit}{/if}
+                                            {if $metric.includedQuantity > 0} ({$metric.includedQuantity} {$LANG.metrics.includedNotCounted}){/if}
+                                        {/if}
+                                        {include file="$template/usagebillingpricing.tpl"}
+                                    </li>
+                                {/foreach}
+                            </ul>
+
+                            <br>
+                        {/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-12">
+                                                <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-12">
+                                                <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-12">
+                                                <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="{$orderform.assetPath.js}/ion.rangeSlider.min.js"></script>
+                                                            <link href="{$orderform.assetPath.css}/ion.rangeSlider.css" rel="stylesheet">
+                                                            <link href="{$orderform.assetPath.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;
+                                                            var sliderRangeDifference = {$configoption.qtymaximum} - {$configoption.qtyminimum};
+                                                            // The largest size that looks nice on most screens.
+                                                            var sliderStepThreshold = 25;
+                                                            // Check if there are too many to display individually.
+                                                            var setLargerMarkers = sliderRangeDifference > sliderStepThreshold;
+
+                                                            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);
+                                                                }
+                                                            });
+                                                        </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}
+			{*
+			This requires a list of custom fields in exact this order:
+			
+			firstname|Vorname		-> customfields[0]
+			lastname|Nachname		-> customfields[1]
+			login|Login E-Mail		-> customfields[2]
+			password|Passwort		-> customfields[3]
+			pwrepeat|Passwort wiederholen	-> customfields[4]
+			*}
+
+
+                        {if $customfields}
+                            <div class="sub-heading">
+                                <span>{$LANG.orderadditionalrequiredinfo}</span>
+                            </div>
+                            <div class="field-container">
+                            <table width="100%" border="0" cellpadding="10" cellspacing="0" class="table table-borderless">
+                              <!-- Vorname und Nachname -->
+                              <tr>
+                                <td align='left'>
+                                    <div class="form-group">
+                                        <label for="customfield{$customfields[0].id}">{$customfields[0].name}</label>
+                                        {$customfields[0].input}
+                                        {if $customfields[0].description}
+                                            <span class="field-help-text">
+                                                {$customfields[0].description}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                </td>
+                                <td></td>
+                                <td align='left'>
+                                    <div class="form-group">
+                                        <label for="customfield{$customfields[1].id}">{$customfields[1].name}</label>
+                                        {$customfields[1].input}
+                                        {if $customfields[1].description}
+                                            <span class="field-help-text">
+                                                {$customfields[1].description}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                </td>
+                              </tr>
+                              <!-- Benutzername und E-Mail Adresse -->
+                              <tr>
+                                <td align='left' colspan="3">
+                                    <div class="form-group">
+                                        <label for="customfield{$customfields[2].id}">{$customfields[2].name}</label>
+                                        {$customfields[2].input}
+                                        {if $customfields[2].description}
+                                            <span class="field-help-text">
+                                                {$customfields[2].description}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                </td>
+                              </tr>
+                              
+                              <!-- Passwort und Passwort wiederholen -->
+                              <tr>
+                                <td align='left'>
+                                    <div class="form-group">
+                                        <label for="customfield{$customfields[3].id}">{$customfields[3].name}</label>
+                                        {$customfields[3].input}
+                                        {if $customfields[3].description}
+                                            <span class="field-help-text" onclick="this.previousElementSibling.type='text';this.innerHTML='';">
+                                                <text style="cursor:pointer;">&#x1F441;</text>&nbsp;{$customfields[3].description}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                </td>
+                                <td></td>
+                                <td align='left'>
+                                    <div class="form-group">
+                                        <label for="customfield{$customfields[4].id}">{$customfields[4].name}</label>
+                                        {$customfields[4].input}
+                                        {if $customfields[4].description}
+                                            <span class="field-help-text">
+                                                {$customfields[4].description}
+                                            </span>
+                                        {/if}
+                                    </div>
+                                </td>
+                              </tr>
+
+                            </table>
+                            </div>
+                            <div class="alert alert-info">
+                                <div id='hints'>
+                                    <strong id='hintHead'></strong>
+                                    <div id='hintLength'></div>
+                                    <div id='hintNumeric'></div>
+                                    <div id='hintSymbols'></div>
+                                    <div id='hintUpperLower'></div>
+                                </div>
+                            </div>
+                        {/if}
+
+                        {if $addons || count($addonsPromoOutput) > 0}
+
+                            <div class="sub-heading">
+                                <span>{$LANG.cartavailableaddons}</span>
+                            </div>
+
+                            {foreach $addonsPromoOutput as $output}
+                                <div>
+                                    {$output}
+                                </div>
+                            {/foreach}
+							
+							
+                            <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">
+                                               <input type="checkbox" name="addons[{$addon.id}]"{if $addon.status} checked{/if} />
+                                                <span class="panel-addon-name">{$addon.name}</span>
+												<span class="panel-addon-price">{$addon.pricing}</span>
+                                                <p class="text-muted">{$addon.description}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                {/foreach}
+                            </div>
+
+                        {/if}
+
+                        <div class="alert alert-warning text-center">
+                            <i class="fas 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 col-lg-3">
+						<div  id="sidebar">
+							<div class="sidebar__inner blocks cartsummary">
+								<div>
+									<div class="order-summary">
+										<div class="loader" id="orderSummaryLoader">
+											<i class="fas fa-fw fa-sync fa-spin"></i>
+										</div>
+										<h2>{$LANG.ordersummary}</h2>
+										<div class="summary-container" id="producttotal"></div>
+									</div>
+									<div class="text-center">
+										 <button type="submit" id="btnCompleteProductConfig" class="btn btn-primary btn-lg">
+											{$LANG.continue}
+											<i class="fas fa-arrow-circle-right"></i>
+										</button>
+									</div>
+								</div>
+							</div>
+						</div>
+                    </div>
+
+                </div>
+
+            </form>
+        </div>
+    </div>
+</div>
+
+{if file_exists("templates/orderforms/{$carttpl}/layouts/foot.tpl")}
+	{include file="templates/orderforms/{$carttpl}/layouts/foot.tpl"}
+{/if}
+
+
+<script language="javascript">
+	recalctotals();
+</script>
+
+
+<script type="text/javascript" src="{$WEB_ROOT}/templates/orderforms/{$carttpl}/js/ResizeSensor.js"></script>
+<script type="text/javascript" src="{$WEB_ROOT}/templates/orderforms/{$carttpl}/js/jquery.sticky-sidebar.min.js"></script>
+
+<script>
+    jQuery('#sidebar').stickySidebar({
+        topSpacing: 60,
+        bottomSpacing: 60,
+        minWidth: 992,
+        containerSelector: '.ajaxcart_cont',
+        innerWrapperSelector: '.sidebar__inner'
+    });
+</script>

configure_thurvcloud.tpl

@@ -0,0 +1,401 @@
+{include file="orderforms/{$carttpl}/common.tpl"}
+
+<script>
+var _localLang = {
+    'addToCart': '{$LANG.orderForm.addToCart|escape}',
+    'addedToCartRemove': '{$LANG.orderForm.addedToCartRemove|escape}'
+}
+</script>
+
+{if file_exists("templates/orderforms/{$carttpl}/layouts/head.tpl")}
+	{include file="templates/orderforms/{$carttpl}/layouts/head.tpl"}
+{/if}
+
+<div id="order-standard_cart">
+
+    <div class="row">
+
+        <div class="col-md-12">
+			{if file_exists("templates/orderforms/{$carttpl}/layouts/head.tpl")}
+			{else}
+            <div class="header-lined">
+                <h1>{$LANG.orderconfigure}</h1>
+            </div>
+			{/if}
+			
+			{include file="orderforms/{$carttpl}/sidebar-categories-collapsed.tpl"}
+
+        </div>
+
+        <div class="col-md-12">
+
+            <form id="frmConfigureProduct">
+                <input type="hidden" name="configure" value="true" />
+                <input type="hidden" name="i" value="{$i}" />
+
+                <div class="row ajaxcart_cont">
+                    <div class="col-md-8 col-lg-9">
+
+                        <h3>{$LANG.orderForm.configureDesiredOptions}</h3>
+
+                        <div class="panel panel-default">
+				<div class="panel-body">
+                                    <table width="100%" height="100%">
+                                        <tr>
+                                            <td valign="top" style="padding-right: 50px;">
+                                                {$features = "<br />"|explode:$productinfo.description}
+                                                <p class="product-title" style="margin-bottom: -2px;  font-size:120%;"><strong><i>{$productinfo.group_name}</i> - {$productinfo.name}</strong></p>
+                                                {foreach $features as $feature}
+                                                        {$featureParts = ":"|explode:$feature}
+                                                        {$featureTrim = $feature|trim}
+                                                        {if !$featureTrim|strstr:':' && $featureTrim ne '' && $featureTrim ne ' ' && $featureTrim ne '  '}
+                                                            {$feature}<br />
+                                                        {/if}
+                                                {/foreach}
+                                                <br />
+                                                <!-- {$productinfo.description} -->
+                                                <table class="plan-features{if $block.flisticon == "check-list"} check-list{elseif $block.flisticon == "check-circle"} check-circle{elseif $block.flisticon == "check-square"} check-square{elseif $block.flisticon == "arrows"} arrows{else}{/if}" style="padding-top:0px; padding-bottom: 15px;" id="PlanLists{$kk + 1}">
+                                                    {foreach $features as $feature}
+                                                        {$featureParts = ":"|explode:$feature}
+                                                        {if $featureParts|@count > 1}
+                                                            <tr>
+                                                            <td style="padding-right: 33px;"><b>{$featureParts[0]}:</b></td>
+                                                                <td>
+                                                                    {if $featureParts[1]|trim == "Ja"} <i class="far fa-check-square" style="font-size:14px"></i>
+                                                                    {elseif $featureParts[1]|trim == "Nein"} <i class="far fa-square" style="font-size:14px"></i>
+                                                                    {elseif $featureParts[1]|trim == "Optional"} <i class="fas fa-plus" style="font-size:14px"></i>
+                                                                {else}
+                                                                        {$featureParts[1]}
+                                                                    {/if}
+                                                                </td>
+                                                        {/if}
+                                                    {/foreach}
+                                                </table>
+                                            </td>
+                                            <td valign="top" style="text-align:left;">
+                                        	{*
+                                        	    Product Icon set by its group id
+                                        	    -----------------------------------------
+	                                            Mailhosting                     => gid=1
+    		                                    Thurfiles Private Hosting       => gid=2
+            		                            Nextcloud Private Hosting       => gid=3
+                    		                    ThurVServer                     => gid=4
+                            		            ThurVCloud		            => gid=5
+                                    		    Groupware Hosting               => gid=7
+                                        	    Mailhosting mit Nextcloud       => gid=8
+                                        	    Nextcloud Business Hosting      => gid=9
+                                        	    Thurfiles Business Hosting	    => gid=10
+                                        	*}
+                                                <img src="/templates/croster/thurdata/productgroups/{$productinfo.gid}.svg" class="img-fluid" style="height:150px;">
+                                            </td>
+                                        </tr>
+                                    </table>
+					<!-- <p class="product-title"><strong><i>{$productinfo.group_name}</i> - {$productinfo.name}</strong></p>
+					<p>{$productinfo.description}</p> -->
+				</div>
+                        </div>
+
+                        <div class="alert alert-danger w-hidden" role="alert" id="containerProductValidationErrors">
+                            <p>{$LANG.orderForm.correctErrors}:</p>
+                            <ul id="containerProductValidationErrorsList"></ul>
+                        </div>
+
+                        {if $pricing.type eq "recurring"}
+                            <div class="field-container">
+                                <div class="form-group">
+                                    <label for="inputBillingcycle">{$LANG.cartchoosecycle}</label><br />
+                                    <select name="billingcycle" id="inputBillingcycle" class="form-control" onchange="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}">
+					<script language="javascript" src="feeds/thurdata/producttotalpricing.php?pid={$productinfo.pid}"></script>
+                                    </select>
+                                </div>
+                            </div>
+                        {/if}
+
+                        {if count($metrics) > 0}
+                            <div class="sub-heading">
+                                <span>{$LANG.metrics.title}</span>
+                            </div>
+
+                            <p>{$LANG.metrics.explanation}</p>
+
+                            <ul>
+                                {foreach $metrics as $metric}
+                                    <li>
+                                        {$metric.displayName}
+                                        -
+                                        {if count($metric.pricing) > 1}
+                                            {$LANG.metrics.startingFrom} {$metric.lowestPrice} / {if $metric.unitName}{$metric.unitName}{else}{$LANG.metrics.unit}{/if}
+                                            <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#modalMetricPricing-{$metric.systemName}">
+                                                {$LANG.metrics.viewPricing}
+                                            </button>
+                                        {elseif count($metric.pricing) == 1}
+                                            {$metric.lowestPrice} / {if $metric.unitName}{$metric.unitName}{else}{$LANG.metrics.unit}{/if}
+                                            {if $metric.includedQuantity > 0} ({$metric.includedQuantity} {$LANG.metrics.includedNotCounted}){/if}
+                                        {/if}
+                                        {include file="$template/usagebillingpricing.tpl"}
+                                    </li>
+                                {/foreach}
+                            </ul>
+
+                            <br>
+                        {/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-12">
+                                                <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-12">
+                                                <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-12">
+                                                <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="{$orderform.assetPath.js}/ion.rangeSlider.min.js"></script>
+                                                            <link href="{$orderform.assetPath.css}/ion.rangeSlider.css" rel="stylesheet">
+                                                            <link href="{$orderform.assetPath.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;
+                                                            var sliderRangeDifference = {$configoption.qtymaximum} - {$configoption.qtyminimum};
+                                                            // The largest size that looks nice on most screens.
+                                                            var sliderStepThreshold = 25;
+                                                            // Check if there are too many to display individually.
+                                                            var setLargerMarkers = sliderRangeDifference > sliderStepThreshold;
+
+                                                            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);
+                                                                }
+                                                            });
+                                                        </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 || count($addonsPromoOutput) > 0}
+
+                            <div class="sub-heading">
+                                <span>{$LANG.cartavailableaddons}</span>
+                            </div>
+
+                            {foreach $addonsPromoOutput as $output}
+                                <div>
+                                    {$output}
+                                </div>
+                            {/foreach}
+							
+							
+                            <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">
+                                               <input type="checkbox" name="addons[{$addon.id}]"{if $addon.status} checked{/if} />
+                                                <span class="panel-addon-name">{$addon.name}</span>
+												<span class="panel-addon-price">{$addon.pricing}</span>
+                                                <p class="text-muted">{$addon.description}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                {/foreach}
+                            </div>
+
+                        {/if}
+
+                        <div class="alert alert-warning text-center">
+                            <i class="fas 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 col-lg-3">
+						<div  id="sidebar">
+							<div class="sidebar__inner blocks cartsummary">
+								<div>
+									<div class="order-summary">
+										<div class="loader" id="orderSummaryLoader">
+											<i class="fas fa-fw fa-sync fa-spin"></i>
+										</div>
+										<h2>{$LANG.ordersummary}</h2>
+										<div class="summary-container" id="producttotal"></div>
+									</div>
+									<div class="text-center">
+										 <button type="submit" id="btnCompleteProductConfig" class="btn btn-primary btn-lg">
+											{$LANG.continue}
+											<i class="fas fa-arrow-circle-right"></i>
+										</button>
+									</div>
+								</div>
+							</div>
+						</div>
+                    </div>
+
+                </div>
+
+            </form>
+        </div>
+    </div>
+</div>
+
+{if file_exists("templates/orderforms/{$carttpl}/layouts/foot.tpl")}
+	{include file="templates/orderforms/{$carttpl}/layouts/foot.tpl"}
+{/if}
+
+
+<script language="javascript">
+	recalctotals();
+</script>
+
+
+<script type="text/javascript" src="{$WEB_ROOT}/templates/orderforms/{$carttpl}/js/ResizeSensor.js"></script>
+<script type="text/javascript" src="{$WEB_ROOT}/templates/orderforms/{$carttpl}/js/jquery.sticky-sidebar.min.js"></script>
+
+<script>
+    jQuery('#sidebar').stickySidebar({
+        topSpacing: 60,
+        bottomSpacing: 60,
+        minWidth: 992,
+        containerSelector: '.ajaxcart_cont',
+        innerWrapperSelector: '.sidebar__inner'
+    });
+</script>

configure_thurvserver.tpl

@@ -39,10 +39,58 @@ var _localLang = {
                         <h3>{$LANG.orderForm.configureDesiredOptions}</h3>
 
                         <div class="panel panel-default">
-							<div class="panel-body">
-								<p class="product-title"><strong><i>{$productinfo.group_name}</i> - {$productinfo.name}</strong></p>
-								<p>{$productinfo.description}</p>
-							</div>
+				<div class="panel-body">
+                                    <table width="100%" height="100%">
+                                        <tr>
+                                            <td valign="top" style="padding-right: 50px;">
+                                                {$features = "<br />"|explode:$productinfo.description}
+                                                <p class="product-title" style="margin-bottom: -2px;  font-size:120%;"><strong><i>{$productinfo.group_name}</i> - {$productinfo.name}</strong></p>
+                                                {foreach $features as $feature}
+                                                        {$featureParts = ":"|explode:$feature}
+                                                        {$featureTrim = $feature|trim}
+                                                        {if !$featureTrim|strstr:':' && $featureTrim ne '' && $featureTrim ne ' ' && $featureTrim ne '  '}
+                                                            {$feature}<br />
+                                                        {/if}
+                                                {/foreach}
+                                                <br />
+                                                <!-- {$productinfo.description} -->
+                                                <table class="plan-features{if $block.flisticon == "check-list"} check-list{elseif $block.flisticon == "check-circle"} check-circle{elseif $block.flisticon == "check-square"} check-square{elseif $block.flisticon == "arrows"} arrows{else}{/if}" style="padding-top:0px; padding-bottom: 15px;" id="PlanLists{$kk + 1}">
+                                                    {foreach $features as $feature}
+                                                        {$featureParts = ":"|explode:$feature}
+                                                        {if $featureParts|@count > 1}
+                                                            <tr>
+                                                            <td style="padding-right: 33px;"><b>{$featureParts[0]}:</b></td>
+                                                                <td>
+                                                                    {if $featureParts[1]|trim == "Ja"} <i class="far fa-check-square" style="font-size:14px"></i>
+                                                                    {elseif $featureParts[1]|trim == "Nein"} <i class="far fa-square" style="font-size:14px"></i>
+                                                                    {elseif $featureParts[1]|trim == "Optional"} <i class="fas fa-plus" style="font-size:14px"></i>
+                                                                {else}
+                                                                        {$featureParts[1]}
+                                                                    {/if}
+                                                                </td>
+                                                        {/if}
+                                                    {/foreach}
+                                                </table>
+                                            </td>
+                                            <td valign="top" style="text-align:left;">
+                                                {*
+                                                    Product Icon set by its group id
+                                                    -----------------------------------------
+                                                    Mailhosting                     => gid=1
+                                                    Thurfiles Private Hosting       => gid=2
+                                                    Nextcloud Private Hosting       => gid=3
+                                                    ThurVServer                     => gid=4
+                                                    ThurVCloud		            => gid=5
+                                                    Groupware Hosting               => gid=7
+                                                    Mailhosting mit Nextcloud       => gid=8
+                                                    Nextcloud Business Hosting	    => gid=9
+                                                    Thurfiles Business Hosting	    => gid=10
+                                                *}
+                                                <img src="/templates/croster/thurdata/productgroups/{$productinfo.gid}.svg" class="img-fluid" style="height:150px;">
+                                            </td>
+                                        </tr>
+                                    </table>
+				</div>
                         </div>
 
                         <div class="alert alert-danger w-hidden" role="alert" id="containerProductValidationErrors">
@@ -217,9 +265,9 @@ var _localLang = {
                                                     <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">
+                                                            <script type="text/javascript" src="{$orderform.assetPath.js}/ion.rangeSlider.min.js"></script>
+                                                            <link href="{$orderform.assetPath.css}/ion.rangeSlider.css" rel="stylesheet">
+                                                            <link href="{$orderform.assetPath.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" />

configureproduct.tpl

@@ -2,12 +2,39 @@
 route configureproduct by gorupname
 *}
 
-{if $productinfo.group_name=='Mailhosting' || $productinfo.group_name=='Mailhosting mit NextCloud'}
+{* 
+Mailhosting 			=> gid=1
+ThurFiles Private Hosting	=> gid=2
+Nextcloud Hosting		=> gid=3
+ThurVServer			=> gid=4
+ThurVCloud Private		=> gid=5
+Groupware Hosting		=> gid=7
+Mailhosting mit Nextcloud 	=> gid=8
+ThurVCloud Business		=> gid=9
+ThurFiles Business Hosting	=> gid=10
+
+*}
+
+{if $productinfo.gid === 1 || $productinfo.gid === 8}
     {include file='./configure_privat_mail.tpl'}
     {include file='./check_configure_privat_mail.tpl'}
-{elseif $productinfo.group_name=='ThurVServer'}
+{elseif $productinfo.gid === 2}
+    {include file='./configure_seafile.tpl'}
+    {include file='./check_configure_seafile.tpl'}
+{elseif $productinfo.gid === 3}
+    {include file='./configure_nextcloud.tpl'}
+    {include file='./check_configure_nextcloud.tpl'}
+{elseif $productinfo.gid === 4}
     {include file='./configure_thurvserver.tpl'}
     {include file='./check_configure_thurvserver.tpl'}
+{elseif $productinfo.gid === 5}
+    {include file='./configure_thurvcloud.tpl'}
 {else}
     {include file='./configureproduct_default.tpl'}
 {/if}
+
+
+{* {elseif $productinfo.gid === 3} 
+    {include file='./configure_nextcloud.tpl'}
+    {include file='./check_configure_nextcloud.tpl'}
+*}

configureproduct_default.tpl

@@ -39,10 +39,60 @@ var _localLang = {
                         <h3>{$LANG.orderForm.configureDesiredOptions}</h3>
 
                         <div class="panel panel-default">
-							<div class="panel-body">
-								<p class="product-title"><strong><i>{$productinfo.group_name}</i> - {$productinfo.name}</strong></p>
-								<p>{$productinfo.description}</p>
-							</div>
+				<div class="panel-body">
+                                    <table width="100%" height="100%">
+                                        <tr>
+                                            <td valign="top" style="padding-right: 50px;">
+                                                {$features = "<br />"|explode:$productinfo.description}
+                                                <p class="product-title" style="margin-bottom: -2px;  font-size:120%;"><strong><i>{$productinfo.group_name}</i> - {$productinfo.name}</strong></p>
+                                                {foreach $features as $feature}
+                                                        {$featureParts = ":"|explode:$feature}
+                                                        {$featureTrim = $feature|trim}
+                                                        {if !$featureTrim|strstr:':' && $featureTrim ne '' && $featureTrim ne ' ' && $featureTrim ne '  '}
+                                                            {$feature}<br />
+                                                        {/if}
+                                                {/foreach}
+                                                <br />
+                                                <!-- {$productinfo.description} -->
+                                                <table class="plan-features{if $block.flisticon == "check-list"} check-list{elseif $block.flisticon == "check-circle"} check-circle{elseif $block.flisticon == "check-square"} check-square{elseif $block.flisticon == "arrows"} arrows{else}{/if}" style="padding-top:0px; padding-bottom: 15px;" id="PlanLists{$kk + 1}">
+                                                    {foreach $features as $feature}
+                                                        {$featureParts = ":"|explode:$feature}
+                                                        {if $featureParts|@count > 1}
+                                                            <tr>
+                                                            <td style="padding-right: 33px;"><b>{$featureParts[0]}:</b></td>
+                                                                <td>
+                                                                    {if $featureParts[1]|trim == "Ja"} <i class="far fa-check-square" style="font-size:14px"></i>
+                                                                    {elseif $featureParts[1]|trim == "Nein"} <i class="far fa-square" style="font-size:14px"></i>
+                                                                    {elseif $featureParts[1]|trim == "Optional"} <i class="fas fa-plus" style="font-size:14px"></i>
+                                                                {else}
+                                                                        {$featureParts[1]}
+                                                                    {/if}
+                                                                </td>
+                                                        {/if}
+                                                    {/foreach}
+                                                </table>
+                                            </td>
+                                            <td valign="top" style="text-align:left;">
+                                        	{*
+                                        	    Product Icon set by its group id
+                                        	    -----------------------------------------
+	                                            Mailhosting                     => gid=1
+    		                                    Thurfiles Private Hosting       => gid=2
+            		                            Nextcloud Private Hosting       => gid=3
+                    		                    ThurVServer                     => gid=4
+                            		            ThurVCloud		            => gid=5
+                                    		    Groupware Hosting               => gid=7
+                                        	    Mailhosting mit Nextcloud       => gid=8
+                                        	    Nextcloud Business Hosting      => gid=9
+                                        	    Thurfiles Business Hosting	    => gid=10
+                                        	*}
+                                                <img src="/templates/croster/thurdata/productgroups/{$productinfo.gid}.svg" class="img-fluid" style="height:150px;">
+                                            </td>
+                                        </tr>
+                                    </table>
+					<!-- <p class="product-title"><strong><i>{$productinfo.group_name}</i> - {$productinfo.name}</strong></p>
+					<p>{$productinfo.description}</p> -->
+				</div>
                         </div>
 
                         <div class="alert alert-danger w-hidden" role="alert" id="containerProductValidationErrors">
@@ -217,9 +267,9 @@ var _localLang = {
                                                     <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">
+                                                            <script type="text/javascript" src="{$orderform.assetPath.js}/ion.rangeSlider.min.js"></script>
+                                                            <link href="{$orderform.assetPath.css}/ion.rangeSlider.css" rel="stylesheet">
+                                                            <link href="{$orderform.assetPath.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" />
@@ -377,4 +427,4 @@ var _localLang = {
         containerSelector: '.ajaxcart_cont',
         innerWrapperSelector: '.sidebar__inner'
     });
-</script>
+</script>

css/ion.rangeSlider.css

@@ -150,7 +150,7 @@ Build date: 2019-12-19 16:51:02
 .irs--flat .irs-bar {
   top: 25px;
   height: 12px;
-  background-color: #ed5565;
+  background-color: #0273d4;
 }
 .irs--flat .irs-bar--single {
   border-radius: 4px 0 0 4px;
@@ -174,7 +174,7 @@ Build date: 2019-12-19 16:51:02
   width: 2px;
   height: 100%;
   margin-left: -1px;
-  background-color: #da4453;
+  background-color: #014885;
 }
 .irs--flat .irs-handle.state_hover > i:first-child,
 .irs--flat .irs-handle:hover > i:first-child {
@@ -199,7 +199,7 @@ Build date: 2019-12-19 16:51:02
   line-height: 1.333;
   text-shadow: none;
   padding: 1px 5px;
-  background-color: #ed5565;
+  background-color: #0273d4;
   border-radius: 4px;
 }
 .irs--flat .irs-from:before,
@@ -215,7 +215,7 @@ Build date: 2019-12-19 16:51:02
   margin-left: -3px;
   overflow: hidden;
   border: 3px solid transparent;
-  border-top-color: #ed5565;
+  border-top-color: #0273d4;
 }
 .irs--flat .irs-grid-pol {
   background-color: #e1e4e9;
@@ -312,8 +312,8 @@ Build date: 2019-12-19 16:51:02
 .irs--modern .irs-bar {
   top: 25px;
   height: 5px;
-  background: #20b426;
-  background: linear-gradient(to bottom, #20b426 0%, #18891d 100%);
+  background: #0273d4;
+  background: linear-gradient(to bottom, #0273d4 0%, #18891d 100%);
 }
 .irs--modern .irs-bar--single {
   border-radius: 5px 0 0 5px;
@@ -398,7 +398,7 @@ Build date: 2019-12-19 16:51:02
   line-height: 1.333;
   text-shadow: none;
   padding: 1px 5px;
-  background-color: #20b426;
+  background-color: #0273d4;
   color: white;
   border-radius: 5px;
 }
@@ -415,7 +415,7 @@ Build date: 2019-12-19 16:51:02
   margin-left: -3px;
   overflow: hidden;
   border: 3px solid transparent;
-  border-top-color: #20b426;
+  border-top-color: #0273d4;
 }
 .irs--modern .irs-grid {
   height: 25px;

css/ion.rangeSlider.skinFlat.css

@@ -0,0 +1,106 @@
+/* Ion.RangeSlider, Flat UI Skin
+// css version 2.0.3
+// © Denis Ineshin, 2014    https://github.com/IonDen
+// ===================================================================================================================*/
+
+/* =====================================================================================================================
+// Skin details */
+
+.irs-line-mid,
+.irs-line-left,
+.irs-line-right,
+.irs-bar,
+.irs-bar-edge,
+.irs-slider {
+    background: url(../img/sprite-skin-flat.png) repeat-x;
+}
+
+.irs {
+    height: 40px;
+}
+.irs-with-grid {
+    height: 60px;
+}
+.irs-line {
+    height: 12px; top: 25px;
+}
+    .irs-line-left {
+        height: 12px;
+        background-position: 0 -30px;
+    }
+    .irs-line-mid {
+        height: 12px;
+        background-position: 0 0;
+    }
+    .irs-line-right {
+        height: 12px;
+        background-position: 100% -30px;
+    }
+
+.irs-bar {
+    height: 12px; top: 25px;
+    background-position: 0 -60px;
+}
+    .irs-bar-edge {
+        top: 25px;
+        height: 12px; width: 9px;
+        background-position: 0 -90px;
+    }
+
+.irs-shadow {
+    height: 3px; top: 34px;
+    background: #000;
+    opacity: 0.25;
+}
+.lt-ie9 .irs-shadow {
+    filter: alpha(opacity=25);
+}
+
+.irs-slider {
+    width: 16px; height: 18px;
+    top: 22px;
+    background-position: 0 -120px;
+}
+.irs-slider.state_hover, .irs-slider:hover {
+    background-position: 0 -150px;
+}
+
+.irs-min, .irs-max {
+    color: #999;
+    font-size: 10px; line-height: 1.333;
+    text-shadow: none;
+    top: 0; padding: 1px 3px;
+    background: #e1e4e9;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.irs-from, .irs-to, .irs-single {
+    color: #fff;
+    font-size: 10px; line-height: 1.333;
+    text-shadow: none;
+    padding: 1px 5px;
+    background: #0273d4;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+.irs-from:after, .irs-to:after, .irs-single:after {
+    position: absolute; display: block; content: "";
+    bottom: -6px; left: 50%;
+    width: 0; height: 0;
+    margin-left: -3px;
+    overflow: hidden;
+    border: 3px solid transparent;
+    border-top-color: #0273d4;
+}
+
+
+.irs-grid-pol {
+    background: #e1e4e9;
+}
+.irs-grid-text {
+    color: #999;
+}
+
+.irs-disabled {
+}

css/ion.rangeSlider.skinHTML5.css

@@ -0,0 +1,124 @@
+/* Ion.RangeSlider, Simple Skin
+// css version 2.0.3
+// © Denis Ineshin, 2014    https://github.com/IonDen
+// © guybowden, 2014        https://github.com/guybowden
+// ===================================================================================================================*/
+
+/* =====================================================================================================================
+// Skin details */
+
+.irs {
+    height: 55px;
+}
+.irs-with-grid {
+    height: 75px;
+}
+.irs-line {
+    height: 10px; top: 33px;
+    background: #EEE;
+    background: linear-gradient(to bottom, #DDD -50%, #FFF 150%); /* W3C */
+    border: 1px solid #CCC;
+    border-radius: 16px;
+    -moz-border-radius: 16px;
+}
+    .irs-line-left {
+        height: 8px;
+    }
+    .irs-line-mid {
+        height: 8px;
+    }
+    .irs-line-right {
+        height: 8px;
+    }
+
+.irs-bar {
+    height: 10px; top: 33px;
+    border-top: 1px solid #428bca;
+    border-bottom: 1px solid #428bca;
+    background: #428bca;
+    background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); /* W3C */
+}
+    .irs-bar-edge {
+        height: 10px; top: 33px;
+        width: 14px;
+        border: 1px solid #428bca;
+        border-right: 0;
+        background: #428bca;
+        background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); /* W3C */
+        border-radius: 16px 0 0 16px;
+        -moz-border-radius: 16px 0 0 16px;
+    }
+
+.irs-shadow {
+    height: 2px; top: 38px;
+    background: #000;
+    opacity: 0.3;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+}
+.lt-ie9 .irs-shadow {
+    filter: alpha(opacity=30);
+}
+
+.irs-slider {
+    top: 25px;
+    width: 27px; height: 27px;
+    border: 1px solid #AAA;
+    background: #DDD;
+    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%); /* W3C */
+    border-radius: 27px;
+    -moz-border-radius: 27px;
+    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+    cursor: pointer;
+}
+
+.irs-slider.state_hover, .irs-slider:hover {
+    background: #FFF;
+}
+
+.irs-min, .irs-max {
+    color: #333;
+    font-size: 12px; line-height: 1.333;
+    text-shadow: none;
+    top: 0;
+    padding: 1px 5px;
+    background: rgba(0,0,0,0.1);
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+}
+
+.lt-ie9 .irs-min, .lt-ie9 .irs-max {
+    background: #ccc;
+}
+
+.irs-from, .irs-to, .irs-single {
+    color: #fff;
+    font-size: 14px; line-height: 1.333;
+    text-shadow: none;
+    padding: 1px 5px;
+    background: #428bca;
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+}
+.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
+    background: #999;
+}
+
+.irs-grid {
+    height: 27px;
+}
+.irs-grid-pol {
+    opacity: 0.5;
+    background: #428bca;
+}
+.irs-grid-pol.small {
+    background: #999;
+}
+
+.irs-grid-text {
+    bottom: 5px;
+    color: #99a4ac;
+}
+
+.irs-disabled {
+}

css/ion.rangeSlider.skinModern.css

@@ -0,0 +1,116 @@
+/* Ion.RangeSlider, Modern Skin
+// css version 2.0.3
+// © Denis Ineshin, 2014    https://github.com/IonDen
+// ===================================================================================================================*/
+
+/* =====================================================================================================================
+// Skin details */
+
+.irs-line-mid,
+.irs-line-left,
+.irs-line-right,
+.irs-bar,
+.irs-bar-edge,
+.irs-slider {
+    background: url(../img/sprite-skin-modern.png) repeat-x;
+}
+
+.irs {
+    height: 50px;
+}
+.irs-with-grid {
+    height: 70px;
+}
+.irs-line {
+    height: 6px; top: 25px;
+}
+    .irs-line-left {
+        height: 6px;
+        background-position: 0 -30px;
+    }
+    .irs-line-mid {
+        height: 6px;
+        background-position: 0 0;
+    }
+    .irs-line-right {
+        height: 6px;
+        background-position: 100% -30px;
+    }
+
+.irs-bar {
+    height: 6px; top: 25px;
+    background-position: 0 -60px;
+}
+    .irs-bar-edge {
+        top: 25px;
+        height: 6px; width: 6px;
+        background-position: 0 -90px;
+    }
+
+.irs-shadow {
+    height: 5px; top: 25px;
+    background: #000;
+    opacity: 0.25;
+}
+.lt-ie9 .irs-shadow {
+    filter: alpha(opacity=25);
+}
+
+.irs-slider {
+    width: 11px; height: 18px;
+    top: 31px;
+    background-position: 0 -120px;
+}
+.irs-slider.state_hover, .irs-slider:hover {
+    background-position: 0 -150px;
+}
+
+.irs-min, .irs-max {
+    color: #999;
+    font-size: 10px; line-height: 1.333;
+    text-shadow: none;
+    top: 0; padding: 1px 3px;
+    background: #e1e4e9;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.irs-from, .irs-to, .irs-single {
+    color: #fff;
+    font-size: 10px; line-height: 1.333;
+    text-shadow: none;
+    padding: 1px 5px;
+    background: #0273d4;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+.irs-from:after, .irs-to:after, .irs-single:after {
+    position: absolute; display: block; content: "";
+    bottom: -6px; left: 50%;
+    width: 0; height: 0;
+    margin-left: -3px;
+    overflow: hidden;
+    border: 3px solid transparent;
+    border-top-color: #0273d4;
+}
+
+.irs-grid {
+    height: 34px;
+}
+.irs-grid-pol {
+    background: #c0c0c0;
+}
+.irs-grid-text {
+    bottom: 12px;
+    color: #c0c0c0;
+}
+
+.irs-disable-mask {
+
+}
+.irs-disabled {
+
+}
+.lt-ie9 .irs-disabled {
+
+}

css/ion.rangeSlider.skinNice.css

@@ -0,0 +1,102 @@
+/* Ion.RangeSlider, Nice Skin
+// css version 2.0.3
+// © Denis Ineshin, 2014    https://github.com/IonDen
+// ===================================================================================================================*/
+
+/* =====================================================================================================================
+// Skin details */
+
+.irs-line-mid,
+.irs-line-left,
+.irs-line-right,
+.irs-bar,
+.irs-bar-edge,
+.irs-slider {
+    background: url(../img/sprite-skin-nice.png) repeat-x;
+}
+
+.irs {
+    height: 40px;
+}
+.irs-with-grid {
+    height: 60px;
+}
+.irs-line {
+    height: 8px; top: 25px;
+}
+    .irs-line-left {
+        height: 8px;
+        background-position: 0 -30px;
+    }
+    .irs-line-mid {
+        height: 8px;
+        background-position: 0 0;
+    }
+    .irs-line-right {
+        height: 8px;
+        background-position: 100% -30px;
+    }
+
+.irs-bar {
+    height: 8px; top: 25px;
+    background-position: 0 -60px;
+}
+    .irs-bar-edge {
+        top: 25px;
+        height: 8px; width: 11px;
+        background-position: 0 -90px;
+    }
+
+.irs-shadow {
+    height: 1px; top: 34px;
+    background: #000;
+    opacity: 0.15;
+}
+.lt-ie9 .irs-shadow {
+    filter: alpha(opacity=15);
+}
+
+.irs-slider {
+    width: 22px; height: 22px;
+    top: 17px;
+    background-position: 0 -120px;
+}
+.irs-slider.state_hover, .irs-slider:hover {
+    background-position: 0 -150px;
+}
+
+.irs-min, .irs-max {
+    color: #999;
+    font-size: 10px; line-height: 1.333;
+    text-shadow: none;
+    top: 0; padding: 1px 3px;
+    background: rgba(0,0,0,0.1);
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+.lt-ie9 .irs-min, .lt-ie9 .irs-max {
+    background: #ccc;
+}
+
+.irs-from, .irs-to, .irs-single {
+    color: #fff;
+    font-size: 10px; line-height: 1.333;
+    text-shadow: none;
+    padding: 1px 5px;
+    background: rgba(0,0,0,0.3);
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
+    background: #999;
+}
+
+.irs-grid-pol {
+    background: #99a4ac;
+}
+.irs-grid-text {
+    color: #99a4ac;
+}
+
+.irs-disabled {
+}

css/ion.rangeSlider.skinSimple.css

@@ -0,0 +1,102 @@
+/* Ion.RangeSlider, Simple Skin
+// css version 2.0.3
+// © Denis Ineshin, 2014    https://github.com/IonDen
+// ===================================================================================================================*/
+
+/* =====================================================================================================================
+// Skin details */
+
+.irs-line-mid,
+.irs-line-left,
+.irs-line-right,
+.irs-bar,
+.irs-bar-edge,
+.irs-slider {
+    background: url(../img/sprite-skin-simple.png) repeat-x;
+}
+
+.irs {
+    height: 40px;
+}
+.irs-with-grid {
+    height: 60px;
+}
+.irs-line {
+    height: 6px; top: 25px;
+}
+    .irs-line-left {
+        height: 6px;
+        background-position: 0 -30px;
+    }
+    .irs-line-mid {
+        height: 6px;
+        background-position: 0 0;
+    }
+    .irs-line-right {
+        height: 6px;
+        background-position: 100% -30px;
+    }
+
+.irs-bar {
+    height: 6px; top: 25px;
+    background-position: 0 -60px;
+}
+    .irs-bar-edge {
+        top: 25px;
+        height: 6px; width: 7px;
+        background-position: 0 -90px;
+    }
+
+.irs-shadow {
+    height: 1px; top: 34px;
+    background: #000;
+    opacity: 0.75;
+}
+.lt-ie9 .irs-shadow {
+    filter: alpha(opacity=75);
+}
+
+.irs-slider {
+    width: 8px; height: 15px;
+    top: 21px;
+    background-position: 0 -120px;
+}
+.irs-slider.state_hover, .irs-slider:hover {
+    background-position: 0 -150px;
+}
+
+.irs-min, .irs-max {
+    color: #c0c0c0;
+    font-size: 10px; line-height: 1.333;
+    text-shadow: none;
+    top: 0; padding: 1px 3px;
+    background: rgba(0,0,0,0.1);
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+.lt-ie9 .irs-min, .lt-ie9 .irs-max {
+    background: #3654b0;
+}
+
+.irs-from, .irs-to, .irs-single {
+    color: #000;
+    font-size: 10px; line-height: 1.333;
+    text-shadow: none;
+    padding: 1px 5px;
+    background: rgba(255,255,255,0.8);
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
+    background: #d8dff3;
+}
+
+.irs-grid-pol {
+    background: #777;
+}
+.irs-grid-text {
+    color: #e0e0e0;
+}
+
+.irs-disabled {
+}

viewcart.tpl

@@ -184,7 +184,7 @@
             var stateNotRequired = true;
         </script>
         {include file="orderforms/{$carttpl}/common.tpl"}
-        <script type="text/javascript" src="{$BASE_PATH_JS}/StatesDropdown.js"></script>
+        <script type="text/javascript" src="{$orderform.assetPath.js}/StatesDropdown.js"></script>
     {/if}
 
     {if $cartitems > 0}