laybuy.twig (3966B)
1 <form id="laybuy-form" action="{{ action }}" method="post" class="form form-horizontal"> 2 <div> 3 <h3>{{ heading_title }}</h3> 4 </div> 5 <div class="form-group"> 6 <label for="down-payment" class="col-sm-2">{{ entry_initial }}</label> 7 <div class="col-sm-3"> 8 <select name="INIT" id="input-down-payment" class="form-control"> 9 {% for percent in initial_payments %} 10 <option value="{{ percent }}">{{ percent }}%</option> 11 {% endfor %} 12 </select> 13 </div> 14 </div> 15 <div class="form-group"> 16 <label for="months" class="col-sm-2">{{ entry_months }}</label> 17 <div class="col-sm-3"> 18 <select name="MONTHS" id="input-months" class="form-control"> 19 {% for month in months %} 20 {% if month.value == 3 %} 21 <option value="{{ month.value }}" selected="selected">{{ month.label }}</option> 22 {% else %} 23 <option value="{{ month.value }}">{{ month.label }}</option> 24 {% endif %} 25 {% endfor %} 26 </select> 27 </div> 28 </div> 29 </form> 30 <div class="table-responsive"> 31 <h3>{{ text_plan_preview }}</h3> 32 <table class="table table-responsive table-condensed" id="payment-table"> 33 <thead> 34 <th>{{ text_payment }}</th> 35 <th>{{ text_due_date }}</th> 36 <th class="text-right">{{ text_amount }}</th> 37 </thead> 38 <tbody> 39 <tr> 40 <td></td> 41 <td></td> 42 <td></td> 43 </tr> 44 </tbody> 45 </table> 46 </div> 47 <p style="font-size: 1.3em">{{ text_delivery_msg }}</p> 48 <p style="font-size: 1.3em">{{ text_fee_msg }}</p> 49 <div class="buttons"> 50 <div class="pull-right"> 51 <input type="submit" form="laybuy-form" value="{{ button_confirm }}" id="button-confirm" class="btn btn-primary" data-loading-text="{{ text_loading }}"> 52 </div> 53 </div> 54 <script type="text/javascript"><!-- 55 $(document).ready(function() { 56 $('#laybuy-form').on('change', 'select', function() { 57 calculate($('#input-down-payment').val(), $('#input-months').val()); 58 }); 59 60 var symbol_left = "{{ currency_symbol_left }}"; 61 var symbol_right = "{{ currency_symbol_right }}"; 62 var order = {{ order_info|json_encode() }}; 63 var total = parseFloat(parseFloat({{ total }}) * parseFloat(order.currency_value)).toFixed(4); 64 65 calculate($('#input-down-payment').val(), $('#input-months').val()); 66 67 function calculate(dp, months) { 68 var down_payment = getPercent(dp, total); 69 70 var remainder = total - down_payment; 71 72 var payments = getPayments(remainder, months); 73 payments[0] = { 74 payment: '{{ text_downpayment }}', 75 dueDate: '{{ text_today }}', 76 amount: parseFloat(down_payment).toFixed(2) 77 }; 78 79 replaceRows(payments); 80 } 81 82 function getPercent(percent, value) { 83 var result = (percent / 100) * value; 84 85 return result.toFixed(4); 86 } 87 88 function getPayments(amount, months) { 89 var payment_amount = amount / months; 90 91 var payments = {}; 92 93 for (i = 1; i <= months; i++) { 94 var new_date = new Date(); 95 96 new_date.setMonth(new_date.getMonth() + i); 97 98 payments[i] = { 99 payment: '{{ text_month }} ' + i, 100 dueDate: ('0' + new_date.getDate()).slice(-2) + '/' + ('0' + (new_date.getMonth() + 1)).slice(-2) + '/' + new_date.getFullYear(), 101 amount: parseFloat(payment_amount).toFixed(2) 102 } 103 } 104 105 return payments; 106 } 107 108 function replaceRows(payments) { 109 $('#payment-table').find('tbody').html(''); 110 111 for (payment in payments) { 112 addRow(payments[payment]); 113 } 114 } 115 116 function addRow(payment) { 117 var row; 118 119 row = '<tr>'; 120 row += '<td>' + payment.payment + '</td>'; 121 row += '<td>' + payment.dueDate + '</td>'; 122 row += '<td class="text-right">' + symbol_left + payment.amount + symbol_right + '</td>'; 123 row += '</tr>'; 124 125 $('#payment-table').find('tbody').append(row); 126 } 127 }); 128 //--></script> 129 <script type="text/javascript"><!-- 130 $('#button-confirm').on('click', function() { 131 $('#button-confirm').button('loading'); 132 }); 133 //--></script>