Improved coupon UI

templates/backOffice/default/assets/js/coupon.js

@@ -214,10 +214,10 @@ $(function($){
     // ***********************************************
 
     $.couponManager.displayEfffect = function(optionSelected) {
-        var mainDiv = $('#coupon-type');
+        var typeDiv = $('#coupon-type');
-        mainDiv.find('.typeToolTip').html(optionSelected.data('description'));
+        typeDiv.find('.typeToolTip').html(optionSelected.data('description'));
 
-        var inputsDiv = mainDiv.find('.inputs');
+        var inputsDiv = $('.inputs', $('#coupon-inputs'));
         inputsDiv.html('<div class="loading" ></div>');
         var url = $.couponManager.urlAjaxAdminCouponDrawInputs;
         url = url.replace('couponServiceId', optionSelected.val());
@@ -248,11 +248,11 @@ $(function($){
 
     // Reload effect inputs when changing effect
     $.couponManager.onEffectChange = function() {
-        var mainDiv = $('#coupon-type');
+        var typeDiv = $('#coupon-type');
-        var optionSelected = mainDiv.find('#type option:selected');
+        var optionSelected = typeDiv.find('#type option:selected');
-        mainDiv.find('.typeToolTip').html(optionSelected.data('description'));
+        typeDiv.find('.typeToolTip').html(optionSelected.data('description'));
 
-        mainDiv.find('#type').on('change', function () {
+        typeDiv.find('#type').on('change', function () {
             var optionSelected = $('option:selected', this);
             $.couponManager.displayEfffect(optionSelected);
 

templates/backOffice/default/coupon/form.html

@@ -54,7 +54,31 @@
                                 {if $error}{$message}{/if}
                             </div>
                         {/form_field}
+                    </div>
 
+                    <div class="col-md-9">
+                        <div id="coupon-type">
+                            {form_field form=$form field='type'}
+                                <div class="form-group {if $error}has-error{/if}">
+                                    <label for="type" class="control-label">{intl l='Coupon type * :'}</label>
+                                    <select required name="{$name}" id="type" class="col-md-12 form-control">
+                                        <option value="" data-description="" data-inputName="">{intl l='Please select a coupon type'}</option>
+                                        {foreach from=$availableCoupons item=availableCoupon}
+                                            <option value="{$availableCoupon.serviceId}" data-description="{$availableCoupon.toolTip}" data-inputName="{$availableCoupon.inputName}" {if $value == $availableCoupon.serviceId}selected{/if}>
+                                                {$availableCoupon.name}
+                                            </option>
+                                        {/foreach}
+                                    </select>
+                                    {if $error}{$message}{/if}
+                                    <span class="help-block typeToolTip">{$availableCoupons.0.toolTip}</span>
+                                </div>
+                            {/form_field}
+                        </div>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col-md-3">
                         {form_field form=$form field='isEnabled'}
                             <div class="form-group {if $error}has-error{/if}">
                                 <label for="is-enabled" class="checkbox control-label">
@@ -163,23 +187,7 @@
                     </div>
 
                     <div class="col-md-3">
-                        <div id="coupon-type">
+                        <div id="coupon-inputs">
-                            {form_field form=$form field='type'}
-                                <div class="form-group {if $error}has-error{/if}">
-                                    <label for="type" class="control-label">{intl l='Coupon type * :'}</label>
-                                    <select required name="{$name}" id="type" class="col-md-12 form-control">
-                                        <option value="" data-description="" data-inputName="">{intl l='Please select a coupon type'}</option>
-                                        {foreach from=$availableCoupons item=availableCoupon}
-                                            <option value="{$availableCoupon.serviceId}" data-description="{$availableCoupon.toolTip}" data-inputName="{$availableCoupon.inputName}" {if $value == $availableCoupon.serviceId}selected{/if}>
-                                                {$availableCoupon.name}
-                                            </option>
-                                        {/foreach}
-                                    </select>
-                                    {if $error}{$message}{/if}
-                                    <span class="help-block typeToolTip">{$availableCoupons.0.toolTip}</span>
-                                </div>
-                            {/form_field}
-
                             <div class="inputs">
                                 {$couponInputsHtml nofilter}
                             </div>