divido.twig (10807B)
1 <style> 2 .divido-calculator { 3 padding:10px 20px 20px 20px; 4 text-shadow:none; 5 -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px; 6 -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px; 7 -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px; 8 -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px; 9 box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px; 10 -webkit-border-radius: 5px; 11 -moz-border-radius: 5px; 12 -ms-border-radius: 5px; 13 -o-border-radius: 5px; 14 border-radius: 5px; 15 border: 1px solid #555; 16 border-color: #d9d7ce #c8c6c1 #B0AEA6; 17 margin:20px; 18 } 19 20 #divido-checkout { 21 margin:0px; 22 } 23 24 .divido-calculator h1 { 25 color: white; 26 font-size: 24px; 27 } 28 29 @media screen and (min-width: 550px) { 30 .divido-calculator h1 { 31 font-size: 33px; 32 } 33 } 34 35 .divido-calculator dl { 36 width: 100%; 37 overflow: hidden; 38 padding: 0; 39 margin: 0 40 } 41 42 .divido-calculator dt,.divido-calculator dd { 43 float: left; 44 padding: 2px 0px; 45 margin: 0 46 } 47 48 49 .divido-calculator > dl > dt, .divido-calculator > dl > dd { 50 min-width: 150px; 51 } 52 53 .divido-calculator > dl > dt, .divido-calculator > dl > dd { 54 width: 100%; 55 } 56 57 .divido-calculator > dl > dt { 58 margin-bottom: 20px; 59 } 60 61 @media screen and (min-width: 960px) { 62 .divido-calculator > dl > dt, .divido-calculator > dl > dd { 63 width: 50%; 64 } 65 66 .divido-calculator > dl > dt { 67 margin-bottom: auto; 68 } 69 } 70 71 .divido-calculator div.divido-info dl dt, .divido-calculator div.divido-info dl dd { 72 width: 100%; 73 } 74 .divido-calculator div.divido-info dl dd { 75 padding-left: 5px; 76 } 77 @media screen and (min-width: 350px) { 78 .divido-calculator div.divido-info dl dt { 79 width: 70%; 80 } 81 .divido-calculator div.divido-info dl dd { 82 width: 30%; 83 } 84 } 85 @media screen and (min-width: 450px) { 86 .divido-calculator div.divido-info dl dt, .divido-calculator div.divido-info dl dd { 87 width: 50%; 88 } 89 } 90 @media screen and (min-width: 550px) { 91 .divido-calculator div.divido-info dl dt { 92 width: 40%; 93 } 94 .divido-calculator div.divido-info dl dd { 95 width: 60%; 96 } 97 } 98 99 @media screen and (min-width: 1080px) { 100 .divido-calculator div.divido-info dl dt { 101 width: 30%; 102 } 103 .divido-calculator div.divido-info dl dd { 104 width: 70%; 105 } 106 } 107 108 .divido-calculator input[type=range]{ 109 -webkit-appearance: none; 110 display:inline-block; 111 width:80%; 112 border:0px; 113 padding:0px; 114 } 115 116 @media screen and (min-width: 450px) { 117 .divido-calculator input[type=range]{ 118 width:85%; 119 } 120 } 121 122 @media screen and (min-width: 550px) { 123 .divido-calculator input[type=range]{ 124 width:90%; 125 } 126 } 127 128 .divido-calculator select { 129 text-transform: none; 130 width: 100%; 131 } 132 133 @media screen and (min-width: 960px) { 134 .divido-calculator select { 135 width: 80%; 136 } 137 } 138 139 .divido-calculator div.description { 140 font-size:13px; 141 margin-top:15px; 142 margin-bottom:20px; 143 } 144 145 .divido-calculator .divido-info { 146 -webkit-border-radius: 5px; 147 -moz-border-radius: 5px; 148 -ms-border-radius: 5px; 149 -o-border-radius: 5px; 150 border-radius: 5px; 151 } 152 153 .divido-calculator .divido-deposit span { 154 display:inline-block; 155 margin-left:4px; 156 line-height:15px; 157 vertical-align:top; 158 } 159 160 .divido-calculator input[type=range]::-webkit-slider-runnable-track { 161 height: 5px; 162 border: none; 163 border-radius: 3px; 164 } 165 166 .divido-calculator label { 167 display:block; 168 clear:both; 169 font-weight:bold; 170 } 171 172 .divido-calculator input[type=range]::-webkit-slider-thumb { 173 -webkit-appearance: none; 174 border: none; 175 height: 16px; 176 width: 16px; 177 border-radius: 50%; 178 margin-top: -4px; 179 } 180 181 .divido-calculator input[type=range]:focus { 182 outline: none !important; 183 border:0px !important; 184 } 185 186 .divido-calculator .divido-logo { 187 width: 140px; 188 height: 42px; 189 display: block; 190 font-size: 20px; 191 line-height: 1; 192 text-indent: -9999px; 193 background-image:url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-black-140x42.png'); 194 background-repeat: no-repeat; 195 background-size: cover; 196 } 197 198 .divido-calculator .divido-logo-sm { 199 width: 75px; 200 height: 23px; 201 background-image:url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-black-75x23.png'); 202 } 203 204 .divido-calculator .divido-info { 205 padding:20px; 206 } 207 208 209 /* */ 210 211 .divido-them-light .divido-info { 212 background:#f9f9f9; 213 } 214 215 .divido-theme-light a.divido-logo { 216 background-image:url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-blue-140x42.png'); 217 } 218 .divido-theme-light a.divido-logo-sm { 219 background-image:url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-blue-75x23.png'); 220 } 221 222 .divido-theme-light { 223 background-color:#fff; 224 color:#3E4F8B; 225 } 226 227 .divido-theme-light p { 228 color:#3E4F8B !important; 229 } 230 231 .divido-theme-light input[type=range]:focus::-webkit-slider-runnable-track { 232 background: #ccc; 233 } 234 235 .divido-theme-light input[type=range] { 236 background-color:transparent; 237 } 238 239 .divido-theme-light input[type=range]::-webkit-slider-runnable-track { 240 background: #999; 241 } 242 243 .divido-theme-light input[type=range]::-webkit-slider-thumb { 244 background: #3E4F8B; 245 } 246 247 248 /* */ 249 250 .divido-theme-blue .divido-info { 251 background:#f9f9f9; 252 color:#000; 253 } 254 255 .divido-theme-blue a.divido-logo { 256 background-image:url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-white-140x42.png'); 257 } 258 259 .divido-theme-blue a.divido-logo-sm { 260 background-image:url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-white-75x23.png'); 261 } 262 263 .divido-theme-blue { 264 background-color:#3E4F8B; 265 color:#fff; 266 } 267 268 .divido-theme-blue p { 269 color:#fff !important; 270 } 271 272 .divido-theme-blue input[type=range]:focus::-webkit-slider-runnable-track { 273 background: #ccc; 274 } 275 276 .divido-theme-blue input[type=range] { 277 background-color:transparent; 278 } 279 280 .divido-theme-blue input[type=range]::-webkit-slider-runnable-track { 281 background: #999; 282 } 283 284 .divido-theme-blue input[type=range]::-webkit-slider-thumb { 285 background: #fff; 286 } 287 288 289 .divido-btn { 290 -webkit-border-radius: 4 ; 291 -moz-border-radius: 4; 292 border-radius: 4px; 293 font-family: Arial; 294 color: #ffffff; 295 font-size: 11px; 296 background: #3E4F8B; 297 padding: 3px 7px 5px 7px !important; 298 text-decoration: none; 299 border:1px solid #296AB3; 300 } 301 302 .divido-btn :hover { 303 background: #3cb0fd; 304 background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); 305 background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); 306 background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); 307 background-image: -o-linear-gradient(top, #3cb0fd, #3498db); 308 background-image: linear-gradient(to bottom, #3cb0fd, #3498db); 309 text-decoration: none; 310 } 311 312 .divido-widget img { 313 display: inline-block; 314 } 315 316 .divido-calculator select { 317 color: #000; 318 } 319 </style> 320 <div id="divido-checkout" data-divido-calculator class="divido-calculator divido-theme-blue" data-divido-amount="{{ grand_total }}" data-divido-plans="{{ plan_list }}"> 321 <h1> 322 <a href="https://www.divido.com" target="_blank" class="divido-logo divido-logo-sm" style="float:right;">Divido</a> 323 {{ text_checkout_title }} 324 </h1> 325 <div style="clear:both;"></div> 326 <dl> 327 <dt><span data-divido-choose-finance data-divido-label="{{ text_choose_plan }}" data-divido-form="divido_finance"></span></dt> 328 <dd><span class="divido-deposit" data-divido-choose-deposit data-divido-label="{{ text_choose_deposit }}" data-divido-form="divido_deposit"></span></dd> 329 </dl> 330 <div class="description"> 331 <strong> 332 <span data-divido-agreement-duration></span> {{ text_monthly_payments }} <span data-divido-monthly-instalment></span> 333 </strong> 334 </div> 335 <div class="divido-info"> 336 <dl> 337 <dt>{{ text_term }}</dt> 338 <dd><span data-divido-agreement-duration></span> {{ text_months }}</dd> 339 <dt>{{ text_monthly_installment }}</dt> 340 <dd><span data-divido-monthly-instalment></span></dd> 341 <dt>{{ text_deposit }}</dt> 342 <dd><span data-divido-deposit></span></dd> 343 <dt>{{ text_credit_amount }}</dt> 344 <dd><span data-divido-credit-amount-rounded></span></dd> 345 <dt>{{ text_amount_payable }}</dt> 346 <dd><span data-divido-total-payable-rounded></span></dd> 347 <dt>{{ text_total_interest }}</dt> 348 <dd><span data-divido-interest-rate></span></dd> 349 </dl> 350 </div> 351 <div class="clear"></div> 352 <p>{{ text_redirection }}</p> 353 </div> 354 355 <div class="buttons"> 356 <div class="pull-right"> 357 <input type="button" value="{{ button_confirm }}" id="button-confirm" class="btn btn-primary" data-loading-text="{{ text_loading }}" /> 358 </div> 359 </div> 360 361 <script> 362 (function($) { 363 $(function () { 364 $.getScript('{{ merchant_script }}', function () { 365 divido_calculator($('#divido-checkout')); 366 }); 367 368 $('#button-confirm').on('click', function() { 369 var finance_elem = $('select[name="divido_finance"]'); 370 var deposit = $('[name="divido_deposit"]').val(); 371 372 var finance; 373 if (finance_elem.length > 0) { 374 finance = finance_elem.val(); 375 } else { 376 finance = $('[data-divido-calculator]').data('divido-plans'); 377 } 378 379 var data = { 380 finance: finance, 381 deposit: deposit 382 }; 383 384 $.ajax({ 385 type : 'post', 386 url : 'index.php?route=extension/payment/divido/confirm', 387 data : data, 388 dataType : 'json', 389 cache : false, 390 beforeSend: function() { 391 $('#button-confirm').button('loading'); 392 }, 393 complete: function() { 394 $('#button-confirm').button('reset'); 395 }, 396 success: function(data) { 397 if (data.status == 'ok') { 398 location = data.url; 399 } else { 400 message = data.message || '{{ generic_credit_req_error }}'; 401 $('#divido-checkout').prepend('<div class="alert alert-warning alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + message + ' <button type="button" class="close" data-dismiss="alert">×</button></div>'); 402 } 403 } 404 }); 405 }); 406 }); 407 })(jQuery); 408 </script>