API tools faq
paste
Advertisement
andrelacomski

jQuery&Vue

andrelacomski
Oct 7th, 2019
211
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 37.34 KB | None | 0 0
raw download clone embed print report
  1. //checkout.js
  2.  
  3. $(function () {
  4.     window['_QuickCheckout'] = new Vue({
  5.         data: window['_QuickCheckoutData'],
  6.         el: '.quick-checkout',
  7.         template: '#quick-checkout',
  8.         mounted: function () {
  9.             var self = this;
  10.  
  11.             self.payment();
  12.  
  13.             $(self.$el).find('.date').datetimepicker({
  14.                 pickTime: false
  15.             });
  16.  
  17.             $(self.$el).find('.datetime').datetimepicker({
  18.                 pickDate: true,
  19.                 pickTime: true
  20.             });
  21.  
  22.             $(self.$el).find('.time').datetimepicker({
  23.                 pickDate: false
  24.             });
  25.  
  26.             $(self.$el).find('.date, .datetime, .time').on('dp.change', function (event) {
  27.                 $(event.target).find('input')[0].dispatchEvent(new Event('change'));
  28.             });
  29.         },
  30.         updated: function () {
  31.             var self = this;
  32.  
  33.             $(self.$el).find('.date').datetimepicker({
  34.                 pickTime: false
  35.             });
  36.  
  37.             $(self.$el).find('.datetime').datetimepicker({
  38.                 pickDate: true,
  39.                 pickTime: true
  40.             });
  41.  
  42.             $(self.$el).find('.time').datetimepicker({
  43.                 pickDate: false
  44.             });
  45.  
  46.             $(self.$el).find('.date, .datetime, .time').on('dp.change', function (event) {
  47.                 $(event.target).find('input')[0].dispatchEvent(new Event('change'));
  48.             });
  49.         },
  50.         beforeUpdate: function () {
  51.             $(this.$el).find('.date, .datetime, .time').each(function () {
  52.                 $(this).datepicker('hide').datepicker('destroy');
  53.             });
  54.         },
  55.         beforeDestroy: function () {
  56.             $(this.$el).find('.date, .datetime, .time').each(function () {
  57.                 $(this).datepicker('hide').datepicker('destroy');
  58.             });
  59.         },
  60.         methods: {
  61.             saveDateTime: function (path, key, event) {
  62.                 this.order_data[path][key] = event.target.value;
  63.                 this.save();
  64.             },
  65.             ajax: function (obj) {
  66.                 return $.ajax($.extend({
  67.                     cache: false,
  68.                     type: 'post',
  69.                     dataType: 'json',
  70.                     beforeSend: function () {
  71.                         $('#quick-checkout-button-confirm, #button-login').button('loading');
  72.                     },
  73.                     error: function (xhr, ajaxOptions, thrownError) {
  74.                         $('#quick-checkout-button-confirm, #button-login').button('reset');
  75.  
  76.                         if (xhr.statusText !== 'abort') {
  77.                             console.warn(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
  78.                         }
  79.                     }
  80.                 }, obj));
  81.             },
  82.             payment: function () {
  83.                 if (window['_QuickCheckoutAjaxPayment']) {
  84.                     window['_QuickCheckoutAjaxPayment'].abort();
  85.                 }
  86.  
  87.                 window['_QuickCheckoutPaymentData'] = {};
  88.  
  89.                 $('.quick-checkout-payment').find('input[type="text"], input[type="checkbox"], input[type="radio"], select').each(function () {
  90.                     window['_QuickCheckoutPaymentData'][$(this).attr('name')] = $(this).val();
  91.                 });
  92.  
  93.                 $('.quick-checkout-payment').html('<div class="journal-loading-overlay"><div class="journal-loading"><i class="fa fa-spinner fa-spin"></i></div></div>');
  94.  
  95.                 window['_QuickCheckoutAjaxPayment'] = this.ajax({
  96.                     type: 'get',
  97.                     dataType: 'html',
  98.                     url: 'index.php?route=journal3/checkout/payment',
  99.                     success: function (data) {
  100.                         $('.quick-checkout-payment').html($.parseHTML(data, true));
  101.  
  102.                         $.each(window['_QuickCheckoutPaymentData'], function (k, v) {
  103.                             $('.quick-checkout-payment').find('[name="' + k + '"]').val(v);
  104.                         });
  105.  
  106.                         window['_QuickCheckoutAjaxPayment'] = null;
  107.  
  108.                         $('#quick-checkout-button-confirm, #button-login').button('reset');
  109.                     }
  110.                 })
  111.             },
  112.             updateCartItemQuantity: function (index, value) {
  113.                 this.$data.products[index].quantity = parseInt(this.$data.products[index].quantity) + parseInt(value);
  114.                 this.updateCartItem(this.$data.products[index]);
  115.             },
  116.             updateCartItem: function (product) {
  117.                 var self = this;
  118.  
  119.                 this.ajax({
  120.                     url: 'index.php?route=journal3/checkout/cart_update',
  121.                     data: {
  122.                         key: product.cart_id,
  123.                         quantity: product.quantity,
  124.                         account: this.account,
  125.                         order_data: this.order_data,
  126.                         password: this.password,
  127.                         password2: this.password2,
  128.                         same_address: this.same_address,
  129.                         newsletter: this.newsletter,
  130.                         privacy: this.privacy,
  131.                         agree: this.agree,
  132.                         payment_address_type: this.payment_address_type,
  133.                         shipping_address_type: this.shipping_address_type,
  134.                         coupon: this.coupon,
  135.                         voucher: this.voucher,
  136.                         reward: this.reward
  137.                     },
  138.                     success: function (json) {
  139.                         self.update(json);
  140.                     }
  141.                 });
  142.             },
  143.             deleteCartItem: function (product) {
  144.                 var self = this;
  145.  
  146.                 this.ajax({
  147.                     url: 'index.php?route=journal3/checkout/cart_delete',
  148.                     data: {
  149.                         key: product.cart_id,
  150.                         account: this.account,
  151.                         order_data: this.order_data,
  152.                         password: this.password,
  153.                         password2: this.password2,
  154.                         same_address: this.same_address,
  155.                         newsletter: this.newsletter,
  156.                         privacy: this.privacy,
  157.                         agree: this.agree,
  158.                         payment_address_type: this.payment_address_type,
  159.                         shipping_address_type: this.shipping_address_type,
  160.                         coupon: this.coupon,
  161.                         voucher: this.voucher,
  162.                         reward: this.reward
  163.                     },
  164.                     success: function (json) {
  165.                         self.update(json);
  166.                     }
  167.                 });
  168.             },
  169.             applyCoupon: function () {
  170.             },
  171.             deleteVoucher: function (voucher) {
  172.                 var self = this;
  173.  
  174.                 this.ajax({
  175.                     url: 'index.php?route=journal3/checkout/cart_delete',
  176.                     data: {
  177.                         key: voucher.key,
  178.                         account: this.account,
  179.                         order_data: this.order_data,
  180.                         password: this.password,
  181.                         password2: this.password2,
  182.                         same_address: this.same_address,
  183.                         newsletter: this.newsletter,
  184.                         privacy: this.privacy,
  185.                         agree: this.agree,
  186.                         payment_address_type: this.payment_address_type,
  187.                         shipping_address_type: this.shipping_address_type,
  188.                         coupon: this.coupon,
  189.                         voucher: this.voucher,
  190.                         reward: this.reward
  191.                     },
  192.                     success: function (json) {
  193.                         self.update(json);
  194.                     }
  195.                 });
  196.             },
  197.             change: function () {
  198.                 this.$data.changed = true;
  199.             },
  200.             changeAddressType: function (type, value) {
  201.                 if (value === 'new') {
  202.                     this.$data.order_data[type + '_address_id'] = '';
  203.                 } else {
  204.                     this.$data.order_data[type + '_address_id'] = this.default_address_id;
  205.                 }
  206.             },
  207.             checkSave: function (confirm) {
  208.                 if (this.$data.changed === true) {
  209.                     this.$data.changed = false;
  210.  
  211.                     this.save(confirm);
  212.                 }
  213.             },
  214.             save: function (confirm) {
  215.                 this.error = {};
  216.  
  217.                 this.ajax({
  218.                     url: 'index.php?route=journal3/checkout/save' + (confirm ? '&confirm=true' : ''),
  219.                     data: {
  220.                         account: this.account,
  221.                         order_data: this.order_data,
  222.                         password: this.password,
  223.                         password2: this.password2,
  224.                         same_address: this.same_address,
  225.                         newsletter: this.newsletter,
  226.                         privacy: this.privacy,
  227.                         agree: this.agree,
  228.                         payment_address_type: this.payment_address_type,
  229.                         shipping_address_type: this.shipping_address_type,
  230.                         coupon: this.coupon,
  231.                         voucher: this.voucher,
  232.                         reward: this.reward
  233.                     },
  234.                     success: function (json) {
  235.                         this.update(json, confirm);
  236.                     }.bind(this)
  237.                 });
  238.             },
  239.             update: function (json, confirm) {
  240.                 if (json.response.redirect) {
  241.                     window.location = json.response.redirect;
  242.                 } else {
  243.                     this.custom_fields = json.response.custom_fields;
  244.                     this.shipping_methods = json.response.shipping_methods;
  245.                     this.payment_methods = json.response.payment_methods;
  246.                     this.shipping_zones = json.response.shipping_zones;
  247.                     this.payment_zones = json.response.payment_zones;
  248.                     this.order_data.shipping_code = json.response.order_data.shipping_code;
  249.                     this.order_data.payment_code = json.response.order_data.payment_code;
  250.                     this.order_data.shipping_country_id = json.response.order_data.shipping_country_id;
  251.                     this.order_data.payment_country_id = json.response.order_data.payment_country_id;
  252.                     this.order_data.shipping_zone_id = json.response.order_data.shipping_zone_id;
  253.                     this.order_data.payment_zone_id = json.response.order_data.payment_zone_id;
  254.                     this.totals = json.response.totals;
  255.                     this.products = json.response.products;
  256.                     this.stock_warning = json.response.stock_warning;
  257.                     this.vouchers = json.response.vouchers;
  258.                     this.$data.total = json.response.total;
  259.                     this.session = json.response.session;
  260.                     this.error = json.response.error;
  261.  
  262.                     $('#cart-total').html(json.response.total);
  263.                     $('.cart-content > ul').html($(json.response.cart).find('.cart-content > ul').html());
  264.                     $('#cart-items.count-badge').html(json.response.total_items);
  265.  
  266.                     if (json.response.error) {
  267.                         $('#quick-checkout-button-confirm').button('reset');
  268.  
  269.                         try {
  270.                             console.error(JSON.stringify(json.response.error, null, 2));
  271.                         } catch (e) {
  272.                         }
  273.  
  274.                         if (json.response.error.payment_code) {
  275.                             alert(json.response.error.payment_code);
  276.                         }
  277.  
  278.                         if (json.response.error.shipping_code) {
  279.                             alert(json.response.error.shipping_code);
  280.                         }
  281.  
  282.                         setTimeout(function () {
  283.                             try {
  284.                                 $('html, body').animate({ scrollTop: $('.form-group .text-danger').closest('.form-group').offset().top - 50 }, 'slow');
  285.                             } catch (e) {
  286.                             }
  287.                         }, 300);
  288.                     } else {
  289.                         if (confirm) {
  290.                             var btns = ['input[type="button"]', 'input[type="submit"]', 'button[type="submit"]', '#button-confirm', '.buttons a'];
  291.                             var $btn = $('.quick-checkout-payment').find(btns.join(', ')).first();
  292.  
  293.                             if ($btn.attr('href')) {
  294.                                 window.location = $btn.attr('href');
  295.                             } else {
  296.                                 $btn.trigger('click');
  297.                             }
  298.                         } else {
  299.                             this.payment();
  300.                         }
  301.                     }
  302.                 }
  303.             },
  304.             login: function () {
  305.                 var data = {
  306.                     email: this.login_email,
  307.                     password: this.login_password
  308.                 };
  309.  
  310.                 this.ajax({
  311.                     url: 'index.php?route=account/login',
  312.                     data: data,
  313.                     success: function (json) {
  314.                         if (json.status === 'success') {
  315.                             parent.window.location.reload();
  316.                         } else {
  317.                             $('#quick-checkout-button-confirm, #button-login').button('reset');
  318.  
  319.                             if (json.response.warning) {
  320.                                 alert(json.response.warning);
  321.                             }
  322.                         }
  323.                     }
  324.                 });
  325.             },
  326.             srcSet: function (image, image2x) {
  327.                 return image + ' 1x, ' + image2x + ' 2x'
  328.             },
  329.             upload: function (path, key, event) {
  330.                 var node = this;
  331.  
  332.                 $('#form-upload').remove();
  333.  
  334.                 $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');
  335.  
  336.                 $('#form-upload input[name=\'file\']').trigger('click');
  337.  
  338.                 if (typeof timer != 'undefined') {
  339.                     clearInterval(timer);
  340.                 }
  341.  
  342.                 timer = setInterval(function() {
  343.                     if ($('#form-upload input[name=\'file\']').val() != '') {
  344.                         clearInterval(timer);
  345.  
  346.                         $.ajax({
  347.                             url: 'index.php?route=tool/upload',
  348.                             type: 'post',
  349.                             dataType: 'json',
  350.                             data: new FormData($('#form-upload')[0]),
  351.                             cache: false,
  352.                             contentType: false,
  353.                             processData: false,
  354.                             beforeSend: function() {
  355.                                 $('#quick-checkout-button-confirm, #button-login, .custom-field button').button('loading');
  356.                             },
  357.                             complete: function() {
  358.                                 $('#quick-checkout-button-confirm, #button-login, .custom-field button').button('reset');
  359.                             },
  360.                             success: function(json) {
  361.                                 $('.text-danger').remove();
  362.  
  363.                                 if (json['error']) {
  364.                                     alert(json['error']);
  365.                                 }
  366.  
  367.                                 if (json['success']) {
  368.                                     node.order_data[path][key] = json['code'];
  369.                                     node.save();
  370.  
  371.                                     alert(json['success']);
  372.                                 }
  373.                             },
  374.                             error: function(xhr, ajaxOptions, thrownError) {
  375.                                 alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
  376.                             }
  377.                         });
  378.                     }
  379.                 }, 500);
  380.             }
  381.         }
  382.     });
  383. });
  384.  
  385. $(document).ajaxSuccess(function (event, xhr, settings, data) {
  386.     if (settings.dataType === 'json') {
  387.         if (data.error) {
  388.             $('#quick-checkout-button-confirm').button('reset');
  389.             _QuickCheckout.payment();
  390.         }
  391.     }
  392. });
  393.  
  394. function triggerLoadingOn() {
  395.     $('#quick-checkout-button-confirm, #button-login').button('loading');
  396. }
  397.  
  398. function triggerLoadingOff() {
  399.     $('#quick-checkout-button-confirm, #button-login').button('reset');
  400. }
  401.  
  402.  
  403. //checkout.twig
  404. {{ header }}
  405. <ul class="breadcrumb">
  406.   {% for breadcrumb in breadcrumbs %}
  407.   <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
  408.   {% endfor %}
  409. </ul>
  410. {% if j3.settings.get('pageTitlePosition') == 'top' %}
  411.   <h1 class="title page-title"><span>{{ heading_title }}</span></h1>
  412. {% endif %}
  413. {{ j3.loadController('journal3/layout', 'top') }}
  414. <div class="container">
  415.   {% if error_warning %}
  416.   <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
  417.     <button type="button" class="close" data-dismiss="alert">&times;</button>
  418.   </div>
  419.   {% endif %}
  420.   <div class="row">{{ column_left }}
  421.     <div id="content">
  422.       {% if j3.settings.get('pageTitlePosition') == 'default' %}
  423.         <h1 class="title page-title">{{ heading_title }}</h1>
  424.       {% endif %}
  425.       {{ content_top }}
  426.       <div class="quick-checkout-wrapper">
  427.         <div class="quick-checkout">
  428.           <div class="journal-loading"><i class="fa fa-spinner fa-spin"></i></div>
  429.         </div>
  430.       </div>
  431.       {{ content_bottom }}</div>
  432.     {{ column_right }}</div>
  433. </div>
  434. <script type="text/html" id="quick-checkout">
  435.   <div v-bind:class="[(account === '') && !customer_id ? 'login-active' : '']">
  436.       <div class="left">
  437.         <form>
  438.         {{ login_block }}
  439.  
  440.         {{ register_block }}
  441.  
  442.         {{ payment_address_block }}
  443.  
  444.         {{ shipping_address_block }}
  445.         </form>
  446.       </div>
  447.  
  448.       <div class="right">
  449.  
  450.         <div class="checkout-section shipping-payment">
  451.           {{ shipping_method_block }}
  452.  
  453.           {{ payment_method_block }}
  454.         </div>
  455.  
  456.         {{ coupon_voucher_reward_block }}
  457.  
  458.         {{ cart_block }}
  459.  
  460.         <div class="checkout-section checkout-payment-details" v-bind:class="[order_data.payment_method ? 'payment-' + order_data.payment_code : '']">
  461.           <div class="title section-title">{{ j3.settings.get('sectionTitlePaymentDetails') }}</div>
  462.           <div class="quick-checkout-payment">
  463.             <div class="journal-loading-overlay">
  464.               <div class="journal-loading"><i class="fa fa-spinner fa-spin"></i></div>
  465.             </div>
  466.           </div>
  467.         </div>
  468.  
  469.         {{ confirm_block }}
  470.       </div>
  471.  
  472.   </div>
  473. </script>
  474. <script>window['_QuickCheckoutData'] = {{ checkout_data|json_encode }};</script>
  475. {{ footer }}
  476.  
  477. </script>
  478.  
  479. <style>
  480.   .uppercase {
  481.     text-transform: uppercase;
  482.   }
  483. </style>
  484.  
  485.  
  486. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
  487.  
  488. <script>
  489.     $(document).ready(function(){
  490.       $("#input-account-custom-field1").mask('999.999.999-99', {placeholder: '000.000.000-00'});
  491.       $("#input-account-custom-field2").mask('99/99/9999', {placeholder: '01/12/1999'});
  492.       $("#input-telephone").mask('(99)99999-9999', {placeholder: '(42)99999-9999'});
  493.       $("#input-payment-postcode").mask('99999-999', {placeholder: '84500-000'});
  494.  
  495.       // Ordem dos tabindex
  496.       $('#input-account-custom-field1').attr('tabIndex', 1);
  497.       $('#input-account-custom-field2').attr('tabIndex', 5);
  498.       $('#input-payment-custom-field3').attr('tabIndex', 11);
  499.       $('#input-payment-custom-field4').attr('tabIndex', 12);
  500.       $('#input-coupon').attr('tabIndex', 15);
  501.  
  502.       // Função buscar CEP
  503.       $("#input-payment-postcode").focusout(function(){
  504.           $.ajax({
  505.             url: 'https://viacep.com.br/ws/'+$(this).val()+'/json/unicode/',
  506.             dataType: 'json',
  507.             success: function(response){
  508.               $("#input-payment-address-1").val(response.logradouro);
  509.               $("#input-payment-address-2").val(response.bairro);
  510.               $("#input-payment-city").val(response.localidade);
  511.  
  512.               switch (response.uf) {
  513.                 case 'AC':
  514.                   $("#input-payment-zone").val(440);
  515.                   break;
  516.                 case 'AL':
  517.                   $("#input-payment-zone").val(441);
  518.                   break;
  519.                 case 'AP':
  520.                   $("#input-payment-zone").val(442);
  521.                   break;
  522.                 case 'AM':
  523.                   $("#input-payment-zone").val(443);
  524.                   break;
  525.                 case 'BA':
  526.                   $("#input-payment-zone").val(444);
  527.                   break;
  528.                 case 'CE':
  529.                   $("#input-payment-zone").val(445);
  530.                   break;
  531.                 case 'DF':
  532.                   $("#input-payment-zone").val(446);
  533.                   break;
  534.                 case 'ES':
  535.                   $("#input-payment-zone").val(447);
  536.                   break;
  537.                 case 'GO':
  538.                   $("#input-payment-zone").val(448);
  539.                   break;
  540.                 case 'MA':
  541.                   $("#input-payment-zone").val(449);
  542.                   break;
  543.                 case 'MT':
  544.                   $("#input-payment-zone").val(450);
  545.                   break;
  546.                 case 'MS':
  547.                   $("#input-payment-zone").val(451);
  548.                   break;
  549.                 case 'MG':
  550.                   $("#input-payment-zone").val(452);
  551.                   break;
  552.                 case 'PA':
  553.                   $("#input-payment-zone").val(453);
  554.                   break;
  555.                 case 'PB':
  556.                   $("#input-payment-zone").val(454);
  557.                   break;
  558.                 case 'PR':
  559.                   $("#input-payment-zone").val(455);
  560.                   break;
  561.                 case 'PE':
  562.                   $("#input-payment-zone").val(456);
  563.                   break;
  564.                 case 'PI':
  565.                   $("#input-payment-zone").val(457);
  566.                   break;
  567.                 case 'RR':
  568.                   $("#input-payment-zone").val(462);
  569.                   break;
  570.                 case 'RO':
  571.                   $("#input-payment-zone").val(461);
  572.                   break;
  573.                 case 'RJ':
  574.                   $("#input-payment-zone").val(458);
  575.                   break;
  576.                 case 'RN':
  577.                   $("#input-payment-zone").val(459);
  578.                   break;
  579.                 case 'RS':
  580.                   $("#input-payment-zone").val(460);
  581.                   break;
  582.                 case SC:
  583.                   $("#input-payment-zone").val(463);
  584.                   break;
  585.                 case 'SP':
  586.                   $("#input-payment-zone").val(464);
  587.                   break;
  588.                 case 'SE':
  589.                   $("#input-payment-zone").val(465);
  590.                   break;
  591.                 case 'TO':
  592.                   $("#input-payment-zone").val(466);
  593.                   break;
  594.                 default:
  595.               }
  596.  
  597.               $("#input-payment-custom-field3").focus();
  598.             }
  599.           });
  600.         });
  601.  
  602.       $("#input-account-custom-field1").focusout(function(){
  603.         cpf = $(this).val().replace(/[^\d]+/g,'');
  604.         if(cpf == ''){
  605.           $('div').remove('.has-error');
  606.           $("#account-custom-field1").append('<div class="has-error">Campo CPF não pode ser vazio!</div>');
  607.           $("#input-account-custom-field1").focus();
  608.           return 0;
  609.         }
  610.             if (cpf.length != 11 ||
  611.                 cpf == "00000000000" ||
  612.                 cpf == "11111111111" ||
  613.                 cpf == "22222222222" ||
  614.                 cpf == "33333333333" ||
  615.                 cpf == "44444444444" ||
  616.                 cpf == "55555555555" ||
  617.                 cpf == "66666666666" ||
  618.                 cpf == "77777777777" ||
  619.                 cpf == "88888888888" ||
  620.                 cpf == "99999999999"){
  621.                 $('div').remove('.has-error');
  622.                 $("#account-custom-field1").append('<div class="has-error">Tamanho do CPF incorreto!</div>');
  623.                 $("#input-account-custom-field1").focus();
  624.                 return 0;
  625.               }
  626.             add = 0;
  627.             for (i=0; i < 9; i ++)
  628.                 add += parseInt(cpf.charAt(i)) * (10 - i);
  629.                 rev = 11 - (add % 11);
  630.                 if (rev == 10 || rev == 11)
  631.                     rev = 0;
  632.                 if (rev != parseInt(cpf.charAt(9))){
  633.               $('div').remove('.has-error');
  634.               $("#account-custom-field1").append('<div class="has-error">CPF inválido!</div>');
  635.               $("#input-account-custom-field1").focus();
  636.               return 0;
  637.             }
  638.             add = 0;
  639.             for (i = 0; i < 10; i ++)
  640.                 add += parseInt(cpf.charAt(i)) * (11 - i);
  641.             rev = 11 - (add % 11);
  642.             if (rev == 10 || rev == 11)
  643.                 rev = 0;
  644.             if (rev != parseInt(cpf.charAt(10))){
  645.             $('div').remove('.has-error');
  646.             $("#account-custom-field1").append('<div class="has-error">CPF inválido!</div>');
  647.             $("#input-account-custom-field1").focus();
  648.             return 0;
  649.           }
  650.           $('div').remove('.has-error');
  651.       });
  652.     });
  653.  
  654.  
  655. </script>
  656.  
  657. // address.twig
  658.  
  659. <div class="checkout-section {{ type }}-address" v-if="('{{ type }}' === 'payment') || (('{{ type }}' === 'shipping') && !same_address && shipping_required)">
  660.   <div class="title section-title">{{ type == 'payment' ? j3.settings.get('sectionTitlePaymentAddress') : j3.settings.get('sectionTitleShippingAddress') }}</div>
  661.   <div class="section-body">
  662.     <div class="radio" v-if="customer_id && Object.keys(addresses).length">
  663.       <label>
  664.         <input type="radio" v-model="{{ type }}_address_type" v-on:change="save()" value="existing"/>
  665.         {{ text_address_existing }}</label>
  666.     </div>
  667.  
  668.     <div id="{{ type }}-existing" v-if="customer_id && ({{ type }}_address_type === 'existing')">
  669.       <select v-model="order_data.{{ type }}_address_id" v-on:change="save()" id="input-{{ type }}-address" class="form-control">
  670.         <option v-for="address in addresses" v-bind:value="address.address_id" v-html="address.firstname + ' ' + address.lastname + ' ' + address.address_1 + ' ' + address.city + ' ' + address.zone + ' ' + address.country"></option>
  671.       </select>
  672.     </div>
  673.  
  674.     <div class="radio" v-if="customer_id && Object.keys(addresses).length">
  675.       <label>
  676.         <input type="radio" v-model="{{ type }}_address_type" v-on:change="save()" value="new"/>
  677.         {{ text_address_new }}</label>
  678.     </div>
  679.  
  680.     <div v-if="!customer_id || (customer_id && ({{ type }}_address_type === 'new'))">
  681.       <div class="form-group required address-firstname" v-if="customer_id || (!customer_id && '{{ type }}' === 'shipping')">
  682.         <label class="control-label" for="input-{{ type }}-firstname">{{ entry_firstname }}</label>
  683.         <input v-model="order_data.{{ type }}_firstname" v-on:blur="checkSave()" v-on:change="change()" type="text" name="firstname" value="" placeholder="{{ entry_firstname }}" id="input-{{ type }}-firstname" class="form-control"/>
  684.       </div>
  685.  
  686.       <div class="form-group required address-lastname" v-if="customer_id || (!customer_id && '{{ type }}' === 'shipping')">
  687.         <label class="control-label" for="input-{{ type }}-lastname">{{ entry_lastname }}</label>
  688.         <input v-model="order_data.{{ type }}_lastname" v-on:blur="checkSave()" v-on:change="change()" type="text" name="lastname" value="" placeholder="{{ entry_lastname }}" id="input-{{ type }}-lastname" class="form-control"/>
  689.       </div>
  690.  
  691.       <div class="form-group address-company">
  692.         <label class="control-label" for="input-{{ type }}-company">{{ entry_company }}</label>
  693.         <input v-model="order_data.{{ type }}_company" v-on:blur="checkSave()" v-on:change="change()" type="text" name="company" value="" placeholder="{{ entry_company }}" id="input-{{ type }}-company" class="form-control"/>
  694.       </div>
  695.  
  696.       <div class="form-group required address-address-1">
  697.         <label class="control-label" for="input-{{ type }}-address-1">{{ entry_address_1 }}</label>
  698.         <input tabindex='10' v-model="order_data.{{ type }}_address_1" v-on:blur="checkSave()" v-on:change="change()" type="text" name="address_1" value="" placeholder="{{ entry_address_1 }}" id="input-{{ type }}-address-1" class="form-control uppercase"/>
  699.         <span class="text-danger" v-if="error && error.{{ type }}_address_1" v-html="error.{{ type }}_address_1"></span>
  700.       </div>
  701.  
  702.       <div class="form-group required address-address-2">
  703.         <label class="control-label" for="input-{{ type }}-address-2">{{ entry_address_2 }}</label>
  704.         <input tabindex='13' v-model="order_data.{{ type }}_address_2" v-on:blur="checkSave()" v-on:change="change()" type="text" name="address_2" value="" placeholder="{{ entry_address_2 }}" id="input-{{ type }}-address-2" class="form-control uppercase"/>
  705.         <span class="text-danger" v-if="error && error.{{ type }}_address_2" v-html="error.{{ type }}_address_2"></span>
  706.       </div>
  707.  
  708.       <div class="form-group required address-city">
  709.         <label class="control-label" for="input-{{ type }}-city">{{ entry_city }}</label>
  710.         <input tabindex='14' v-model="order_data.{{ type }}_city" v-on:blur="checkSave()" v-on:change="change()" type="text" name="city" value="" placeholder="{{ entry_city }}" id="input-{{ type }}-city" class="form-control uppercase"/>
  711.         <span class="text-danger" v-if="error && error.{{ type }}_city" v-html="error.{{ type }}_city"></span>
  712.       </div>
  713.  
  714.       <div class="form-group required address-postcode">
  715.         <label class="control-label" for="input-{{ type }}-postcode">{{ entry_postcode }}</label>
  716.         <input tabindex='9' v-model.lazy="order_data.{{ type }}_postcode" v-on:blur="checkSave()" v-on:change="change()" type="text" name="postcode" value="" placeholder="{{ entry_postcode }}" id="input-{{ type }}-postcode" class="form-control"/>
  717.         <span class="text-danger" v-if="error && error.{{ type }}_postcode" v-html="error.{{ type }}_postcode"></span>
  718.       </div>
  719.  
  720.       <div class="form-group required address-country">
  721.         <label class="control-label" for="input-{{ type }}-country">{{ entry_country }}</label>
  722.         <select v-model="order_data.{{ type }}_country_id" v-on:change="save()" name="country_id" id="input-{{ type }}-country" class="form-control">
  723.           <option value="">{{ text_select }}</option>
  724.           <option v-for="country in countries" v-bind:value="country.country_id" v-html="country.name"></option>
  725.         </select>
  726.         <span class="text-danger" v-if="error && error.{{ type }}_country" v-html="error.{{ type }}_country"></span>
  727.       </div>
  728.  
  729.       <div class="form-group required address-zone">
  730.         <label class="control-label" for="input-{{ type }}-zone">{{ entry_zone }}</label>
  731.         <select v-model="order_data.{{ type }}_zone_id" v-on:change="save()" name="zone_id" id="input-{{ type }}-zone" class="form-control">
  732.           <option v-if="{{ type }}_zones.length > 0" value="">{{ text_select }}</option>
  733.           <option v-if="{{ type }}_zones.length == 0" value="">{{ text_none }}</option>
  734.           <option v-for="zone in {{ type }}_zones" v-bind:value="zone.zone_id" v-html="zone.name"></option>
  735.         </select>
  736.         <span class="text-danger" v-if="error && error.{{ type }}_zone" v-html="error.{{ type }}_zone"></span>
  737.       </div>
  738.  
  739.       {# custom fields - select #}
  740.  
  741.       <div v-for="custom_field in custom_fields.custom_fields.address" v-if="custom_field.type === 'select'" v-bind:id="'{{ type }}-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
  742.         <label class="control-label" v-bind:for="'input-{{ type }}-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
  743.         <select v-model="order_data.{{ type }}_custom_field[custom_field.custom_field_id]" v-on:change="save()" v-bind:id="'input-{{ type }}-custom-field' + custom_field.custom_field_id" class="form-control">
  744.           <option value="">{{ text_select }}</option>
  745.           <option v-for="custom_field_value in custom_field.custom_field_value" v-bind:value="custom_field_value.custom_field_value_id" v-html="custom_field_value.name"></option>
  746.         </select>
  747.         <span class="text-danger" v-if="error && error.{{ type }}_custom_field && error.{{ type }}_custom_field[custom_field.custom_field_id]" v-html="error.{{ type }}_custom_field[custom_field.custom_field_id]"></span>
  748.       </div>
  749.  
  750.       {# custom fields - radio #}
  751.  
  752.       <div v-for="custom_field in custom_fields.custom_fields.address" v-if="custom_field.type === 'radio'" v-bind:id="'{{ type }}-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
  753.         <label class="control-label" v-html="custom_field.name"></label>
  754.         <div v-bind:id="'input-{{ type }}-custom-field' + custom_field.custom_field_id">
  755.           <div class="radio" v-for="custom_field_value in custom_field.custom_field_value">
  756.             <label>
  757.               <input type="radio" v-model="order_data.{{ type }}_custom_field[custom_field.custom_field_id]" v-on:change="save()" v-bind:value="custom_field_value.custom_field_value_id"/>
  758.               <span v-html="custom_field_value.name"></span></label>
  759.           </div>
  760.         </div>
  761.         <span class="text-danger" v-if="error && error.{{ type }}_custom_field && error.{{ type }}_custom_field[custom_field.custom_field_id]" v-html="error.{{ type }}_custom_field[custom_field.custom_field_id]"></span>
  762.       </div>
  763.  
  764.       {# custom fields - checkbox #}
  765.  
  766.       <div v-for="custom_field in custom_fields.custom_fields.address" v-if="custom_field.type === 'checkbox'" v-bind:id="'{{ type }}-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
  767.         <label class="control-label" v-html="custom_field.name"></label>
  768.         <div v-bind:id="'input-{{ type }}-custom-field' + custom_field.custom_field_id"> {% for custom_field_value in custom_field.custom_field_value %}
  769.             <div class="checkbox">
  770.               <label>
  771.                 <input type="checkbox" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}][]" value="{{ custom_field_value.custom_field_value_id }}"/>
  772.                 {{ custom_field_value.name }}</label>
  773.             </div>
  774.           {% endfor %} </div>
  775.         <span class="text-danger" v-if="error && error.{{ type }}_custom_field && error.{{ type }}_custom_field[custom_field.custom_field_id]" v-html="error.{{ type }}_custom_field[custom_field.custom_field_id]"></span>
  776.       </div>
  777.  
  778.       {# custom fields - text #}
  779.  
  780.       <div v-for="custom_field in custom_fields.custom_fields.address" v-if="custom_field.type === 'text'" v-bind:id="'{{ type }}-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
  781.         <label class="control-label" v-bind:for="'input-{{ type }}-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
  782.         <input type="text" v-model.lazy="order_data.{{ type }}_custom_field[custom_field.custom_field_id]" v-on:blur="checkSave()" v-on:change="change()" value="{{ custom_field.value }}" v-bind:placeholder="custom_field.name" v-bind:id="'input-{{ type }}-custom-field' + custom_field.custom_field_id" class="form-control"/>
  783.         <span class="text-danger" v-if="error && error.{{ type }}_custom_field && error.{{ type }}_custom_field[custom_field.custom_field_id]" v-html="error.{{ type }}_custom_field[custom_field.custom_field_id]"></span>
  784.       </div>
  785.  
  786.       {# custom fields - textarea #}
  787.  
  788.       <div v-for="custom_field in custom_fields.custom_fields.address" v-if="custom_field.type === 'textarea'" v-bind:id="'{{ type }}-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
  789.         <label class="control-label" v-bind:for="'input-{{ type }}-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
  790.         <textarea v-model="order_data.{{ type }}_custom_field[custom_field.custom_field_id]" v-on:blur="checkSave()" v-on:change="change()" rows="5" v-bind:placeholder="custom_field.name" v-bind:id="'input-{{ type }}-custom-field' + custom_field.custom_field_id" class="form-control">{{ custom_field.value }}</textarea>
  791.         <span class="text-danger" v-if="error && error.{{ type }}_custom_field && error.{{ type }}_custom_field[custom_field.custom_field_id]" v-html="error.{{ type }}_custom_field[custom_field.custom_field_id]"></span>
  792.       </div>
  793.  
  794.       {# custom fields - file #}
  795.  
  796.       <div v-for="custom_field in custom_fields.custom_fields.address" v-if="custom_field.type === 'file'" v-bind:id="'{{ type }}-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
  797.         <label class="control-label" v-bind:for="'input-{{ type }}-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
  798.         <br/>
  799.         <button type="button" v-on:click="upload('{{ type }}_custom_field', custom_field.custom_field_id, $event)" v-bind:id="'button-account-custom-field' + custom_field.custom_field_id" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
  800.         <input type="hidden" v-model="order_data.{{ type }}_custom_field[custom_field.custom_field_id]" value="" v-bind:placeholder="custom_field.name" v-bind:id="'input-{{ type }}-custom-field' + custom_field.custom_field_id" class="form-control"/>
  801.         <span class="text-danger" v-if="error && error.{{ type }}_custom_field && error.{{ type }}_custom_field[custom_field.custom_field_id]" v-html="error.{{ type }}_custom_field[custom_field.custom_field_id]"></span>
  802.       </div>
  803.  
  804.       {# custom fields - date #}
  805.  
  806.       <div v-for="custom_field in custom_fields.custom_fields.address" v-if="custom_field.type === 'date'" v-bind:id="'{{ type }}-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
  807.         <label class="control-label" v-bind:for="'input-{{ type }}-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
  808.         <div class="input-group date">
  809.           <input type="text" v-model="order_data.{{ type }}_custom_field[custom_field.custom_field_id]" v-on:change="saveDateTime('{{ type }}_custom_field', custom_field.custom_field_id, $event)" value="{{ custom_field.value }}" v-bind:placeholder="custom_field.name" data-date-format="YYYY-MM-DD" v-bind:id="'input-{{ type }}-custom-field' + custom_field.custom_field_id" class="form-control"/>
  810.           <span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span>
  811.         </div>
  812.         <span class="text-danger" v-if="error && error.{{ type }}_custom_field && error.{{ type }}_custom_field[custom_field.custom_field_id]" v-html="error.{{ type }}_custom_field[custom_field.custom_field_id]"></span>
  813.       </div>
  814.  
  815.       {# custom fields - time #}
  816.  
  817.       <div v-for="custom_field in custom_fields.custom_fields.address" v-if="custom_field.type === 'time'" v-bind:id="'{{ type }}-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
  818.         <label class="control-label" v-bind:for="'input-{{ type }}-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
  819.         <div class="input-group time">
  820.           <input type="text" v-model="order_data.{{ type }}_custom_field[custom_field.custom_field_id]" v-on:change="saveDateTime('{{ type }}_custom_field', custom_field.custom_field_id, $event)" value="{{ custom_field.value }}" v-bind:placeholder="custom_field.name" data-date-format="HH:mm" v-bind:id="'input-{{ type }}-custom-field' + custom_field.custom_field_id" class="form-control"/>
  821.           <span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span>
  822.         </div>
  823.         <span class="text-danger" v-if="error && error.{{ type }}_custom_field && error.{{ type }}_custom_field[custom_field.custom_field_id]" v-html="error.{{ type }}_custom_field[custom_field.custom_field_id]"></span>
  824.       </div>
  825.  
  826.       {# custom fields - datetime #}
  827.  
  828.       <div v-for="custom_field in custom_fields.custom_fields.address" v-if="custom_field.type === 'datetime'" v-bind:id="'{{ type }}-custom-field' + custom_field.custom_field_id" v-bind:class="'form-group custom-field' + (custom_field.required ? ' required' : '')">
  829.         <label class="control-label" v-bind:for="'input-{{ type }}-custom-field' + custom_field.custom_field_id" v-html="custom_field.name"></label>
  830.         <div class="input-group time">
  831.           <input type="text" v-model="order_data.{{ type }}_custom_field[custom_field.custom_field_id]" v-on:change="saveDateTime('{{ type }}_custom_field', custom_field.custom_field_id, $event)" value="{{ custom_field.value }}" v-bind:placeholder="custom_field.name" data-date-format="YYYY-MM-DD HH:mm" v-bind:id="'input-{{ type }}-custom-field' + custom_field.custom_field_id" class="form-control"/>
  832.           <span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span>
  833.         </div>
  834.         <span class="text-danger" v-if="error && error.{{ type }}_custom_field && error.{{ type }}_custom_field[custom_field.custom_field_id]" v-html="error.{{ type }}_custom_field[custom_field.custom_field_id]"></span>
  835.       </div>
  836.     </div>
  837.     <div v-if="('{{ type }}' === 'payment') && shipping_required" class="checkbox">
  838.       <label>
  839.         <input v-model="same_address" v-on:change="save()" type="checkbox"/>
  840.         {{ entry_shipping }}</label>
  841.     </div>
  842.   </div>
  843. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!