|
|
@@ -136,6 +136,15 @@ var VarScriptsJsFile = []byte(`(function(window, $) {
|
|
|
$('#sys-modal-shop-basket button.btn-order').prop('disabled', total <= 0);
|
|
|
};
|
|
|
|
|
|
+ function ClearOrderFormErrorMessage() {
|
|
|
+ $('#sys-modal-shop-basket .modal-body .order-form .sys-messages').html('');
|
|
|
+ $('#sys-modal-shop-basket .modal-body .order-form .input-error-msg').css('display', 'none');
|
|
|
+ };
|
|
|
+
|
|
|
+ function ShowOrderFormErrorMessage(title, message) {
|
|
|
+ $('#sys-modal-shop-basket .modal-body .order-form .sys-messages').html('<div class="alert alert-danger alert-dismissible fade show" role="alert"><strong>' + title + '</strong> ' + message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>');
|
|
|
+ };
|
|
|
+
|
|
|
function Initialize() {
|
|
|
// Check if jQuery was loaded
|
|
|
if(typeof $ == 'function') {
|
|
|
@@ -180,80 +189,117 @@ var VarScriptsJsFile = []byte(`(function(window, $) {
|
|
|
<div class="blocker" style="position:absolute;left:0px;top:0px;width:100%;height:100%;background:#fff;opacity:0.5;display:none;"></div> \
|
|
|
<div class="data"></div> \
|
|
|
<div class="order-form mt-3" style="display:none;"> \
|
|
|
- <hr class="mb-4"> \
|
|
|
- <form class="data-form" action="/" method="post" autocomplete="off"> \
|
|
|
- <div class="hidden"><input type="hidden" name="action" value="shop-order"></div> \
|
|
|
- <div class="form-group"> \
|
|
|
- <div class="row"> \
|
|
|
- <div class="col-md-3"> \
|
|
|
- <label for="lbl_client_last_name">' + ShopOrderLabelLastName + '</label> \
|
|
|
- </div> \
|
|
|
- <div class="col-md-9"> \
|
|
|
- <input class="form-control" type="text" id="lbl_client_last_name" name="client_last_name" value="" minlength="1" maxlength="64" autocomplete="off" required> \
|
|
|
+ <hr class="mb-4"> \
|
|
|
+ <form class="data-form" action="/" method="post" autocomplete="off"> \
|
|
|
+ <div class="hidden"><input type="hidden" name="action" value="shop-order"></div> \
|
|
|
+ <div class="form-group"> \
|
|
|
+ <div class="row"> \
|
|
|
+ <div class="col-md-3"> \
|
|
|
+ <label for="lbl_client_last_name">' + ShopOrderLabelLastName + '</label> \
|
|
|
+ </div> \
|
|
|
+ <div class="col-md-9"> \
|
|
|
+ <div> \
|
|
|
+ <input class="form-control" type="text" id="lbl_client_last_name" name="client_last_name" minlength="1" maxlength="64" autocomplete="off" onkeydown="$(this).parent().parent().find(\'.input-error-msg\').css(\'display\', \'none\');"> \
|
|
|
+ </div> \
|
|
|
+ <div class="input-error-msg" style="display:none;"> \
|
|
|
+ <small>' + ShopOrderEmptyLastName + '</small> \
|
|
|
+ </div> \
|
|
|
+ </div> \
|
|
|
</div> \
|
|
|
</div> \
|
|
|
- </div> \
|
|
|
- <div class="form-group"> \
|
|
|
- <div class="row"> \
|
|
|
- <div class="col-md-3"> \
|
|
|
- <label for="lbl_client_first_name">' + ShopOrderLabelFirstName + '</label> \
|
|
|
- </div> \
|
|
|
- <div class="col-md-9"> \
|
|
|
- <input class="form-control" type="text" id="lbl_client_first_name" name="client_first_name" value="" minlength="1" maxlength="64" autocomplete="off" required> \
|
|
|
+ <div class="form-group"> \
|
|
|
+ <div class="row"> \
|
|
|
+ <div class="col-md-3"> \
|
|
|
+ <label for="lbl_client_first_name">' + ShopOrderLabelFirstName + '</label> \
|
|
|
+ </div> \
|
|
|
+ <div class="col-md-9"> \
|
|
|
+ <div> \
|
|
|
+ <input class="form-control" type="text" id="lbl_client_first_name" name="client_first_name" minlength="1" maxlength="64" autocomplete="off" onkeydown="$(this).parent().parent().find(\'.input-error-msg\').css(\'display\', \'none\');"> \
|
|
|
+ </div> \
|
|
|
+ <div class="input-error-msg" style="display:none;"> \
|
|
|
+ <small>' + ShopOrderEmptyFirstName + '</small> \
|
|
|
+ </div> \
|
|
|
+ </div> \
|
|
|
</div> \
|
|
|
</div> \
|
|
|
- </div> \
|
|
|
- <div class="form-group"> \
|
|
|
- <div class="row"> \
|
|
|
- <div class="col-md-3"> \
|
|
|
- <label for="lbl_client_second_name">' + ShopOrderLabelSecondName + '</label> \
|
|
|
- </div> \
|
|
|
- <div class="col-md-9"> \
|
|
|
- <input class="form-control" type="text" id="lbl_client_second_name" name="client_second_name" value="" minlength="1" maxlength="64" autocomplete="off" required> \
|
|
|
+ <div class="form-group"> \
|
|
|
+ <div class="row"> \
|
|
|
+ <div class="col-md-3"> \
|
|
|
+ <label for="lbl_client_second_name">' + ShopOrderLabelSecondName + '</label> \
|
|
|
+ </div> \
|
|
|
+ <div class="col-md-9"> \
|
|
|
+ <div> \
|
|
|
+ <input class="form-control" type="text" id="lbl_client_second_name" name="client_second_name" minlength="1" maxlength="64" autocomplete="off" onkeydown="$(this).parent().parent().find(\'.input-error-msg\').css(\'display\', \'none\');"> \
|
|
|
+ </div> \
|
|
|
+ <div class="input-error-msg" style="display:none;"> \
|
|
|
+ <small>' + ShopOrderEmptySecondName + '</small> \
|
|
|
+ </div> \
|
|
|
+ </div> \
|
|
|
</div> \
|
|
|
</div> \
|
|
|
- </div> \
|
|
|
- <div class="form-group"> \
|
|
|
- <div class="row"> \
|
|
|
- <div class="col-md-3"> \
|
|
|
- <label for="lbl_client_phone">' + ShopOrderLabelMobilePhone + '</label> \
|
|
|
- </div> \
|
|
|
- <div class="col-md-9"> \
|
|
|
- <input class="form-control" type="text" id="lbl_client_phone" name="client_phone" value="" minlength="1" maxlength="20" autocomplete="off" required> \
|
|
|
+ <div class="form-group"> \
|
|
|
+ <div class="row"> \
|
|
|
+ <div class="col-md-3"> \
|
|
|
+ <label for="lbl_client_phone">' + ShopOrderLabelMobilePhone + '</label> \
|
|
|
+ </div> \
|
|
|
+ <div class="col-md-9"> \
|
|
|
+ <div> \
|
|
|
+ <input class="form-control" type="text" id="lbl_client_phone" name="client_phone" minlength="1" maxlength="20" autocomplete="off" onkeydown="$(this).parent().parent().find(\'.input-error-msg\').css(\'display\', \'none\');"> \
|
|
|
+ </div> \
|
|
|
+ <div class="input-error-msg" style="display:none;"> \
|
|
|
+ <small>' + ShopOrderEmptyMobilePhone + '</small> \
|
|
|
+ </div> \
|
|
|
+ </div> \
|
|
|
</div> \
|
|
|
</div> \
|
|
|
- </div> \
|
|
|
- <div class="form-group"> \
|
|
|
- <div class="row"> \
|
|
|
- <div class="col-md-3"> \
|
|
|
- <label for="lbl_client_email">' + ShopOrderLabelEmailAddress + '</label> \
|
|
|
- </div> \
|
|
|
- <div class="col-md-9"> \
|
|
|
- <input class="form-control" type="text" id="lbl_client_email" name="client_email" value="" minlength="1" maxlength="64" autocomplete="off" required> \
|
|
|
+ <div class="form-group"> \
|
|
|
+ <div class="row"> \
|
|
|
+ <div class="col-md-3"> \
|
|
|
+ <label for="lbl_client_email">' + ShopOrderLabelEmailAddress + '</label> \
|
|
|
+ </div> \
|
|
|
+ <div class="col-md-9"> \
|
|
|
+ <div> \
|
|
|
+ <input class="form-control" type="text" id="lbl_client_email" name="client_email" minlength="1" maxlength="64" autocomplete="off" onkeydown="$(this).parent().parent().find(\'.input-error-msg\').css(\'display\', \'none\');"> \
|
|
|
+ </div> \
|
|
|
+ <div class="input-error-msg" style="display:none;"> \
|
|
|
+ <small>' + ShopOrderEmptyEmailAddress + '</small> \
|
|
|
+ </div> \
|
|
|
+ </div> \
|
|
|
</div> \
|
|
|
</div> \
|
|
|
- </div> \
|
|
|
- <div class="form-group"> \
|
|
|
- <div class="row"> \
|
|
|
- <div class="col-md-3"> \
|
|
|
- <label for="lbl_client_delivery_comment">' + ShopOrderLabelDelivery + '</label> \
|
|
|
- </div> \
|
|
|
- <div class="col-md-9"> \
|
|
|
- <input class="form-control" type="text" id="lbl_client_delivery_comment" name="client_delivery_comment" value="" minlength="1" maxlength="255" autocomplete="off"> \
|
|
|
+ <div class="form-group"> \
|
|
|
+ <div class="row"> \
|
|
|
+ <div class="col-md-3"> \
|
|
|
+ <label for="lbl_client_delivery_comment">' + ShopOrderLabelDelivery + '</label> \
|
|
|
+ </div> \
|
|
|
+ <div class="col-md-9"> \
|
|
|
+ <div> \
|
|
|
+ <input class="form-control" type="text" id="lbl_client_delivery_comment" name="client_delivery_comment" minlength="1" maxlength="255" autocomplete="off" onkeydown="$(this).parent().parent().find(\'.input-error-msg\').css(\'display\', \'none\');"> \
|
|
|
+ </div> \
|
|
|
+ <div class="input-error-msg" style="display:none;"> \
|
|
|
+ <small>' + ShopOrderEmptyDelivery + '</small> \
|
|
|
+ </div> \
|
|
|
+ </div> \
|
|
|
</div> \
|
|
|
</div> \
|
|
|
- </div> \
|
|
|
- <div class="form-group"> \
|
|
|
- <div class="row"> \
|
|
|
- <div class="col-md-3"> \
|
|
|
- <label for="lbl_client_order_comment">' + ShopOrderLabelComment + '</label> \
|
|
|
- </div> \
|
|
|
- <div class="col-md-9"> \
|
|
|
- <textarea class="form-control" id="lbl_client_order_comment" name="client_order_comment" autocomplete="off"></textarea> \
|
|
|
+ <div class="form-group"> \
|
|
|
+ <div class="row"> \
|
|
|
+ <div class="col-md-3"> \
|
|
|
+ <label for="lbl_client_order_comment">' + ShopOrderLabelComment + '</label> \
|
|
|
+ </div> \
|
|
|
+ <div class="col-md-9"> \
|
|
|
+ <div> \
|
|
|
+ <textarea class="form-control" id="lbl_client_order_comment" name="client_order_comment" autocomplete="off" onkeydown="$(this).parent().parent().find(\'.input-error-msg\').css(\'display\', \'none\');"></textarea> \
|
|
|
+ </div> \
|
|
|
+ <div class="input-error-msg" style="display:none;"> \
|
|
|
+ <small>' + ShopOrderEmptyComment + '</small> \
|
|
|
+ </div> \
|
|
|
+ </div> \
|
|
|
</div> \
|
|
|
</div> \
|
|
|
- </div> \
|
|
|
- </form> \
|
|
|
+ <button type="submit" style="display:none;"></button> \ \
|
|
|
+ </form> \
|
|
|
+ <div class="sys-messages"></div>\
|
|
|
</div> \
|
|
|
</div> \
|
|
|
<div class="modal-footer"> \
|
|
|
@@ -264,61 +310,10 @@ var VarScriptsJsFile = []byte(`(function(window, $) {
|
|
|
</div> \
|
|
|
</div>';
|
|
|
$('#sys-modal-shop-basket-placeholder').html(html);
|
|
|
-
|
|
|
- // ---
|
|
|
- // var OrderForm = $('#sys-modal-shop-basket .modal-body .order-form form');
|
|
|
- // OrderForm.submit(function(e) {
|
|
|
- // if(OrderForm.hasClass('loading')) {
|
|
|
- // e.preventDefault();
|
|
|
- // return;
|
|
|
- // }
|
|
|
-
|
|
|
- // // Block send button
|
|
|
- // OrderForm.addClass('loading').addClass('alert-here');
|
|
|
- // var button = OrderForm.find('button[type=submit]');
|
|
|
- // button.addClass('progress-bar-striped')
|
|
|
- // .addClass('progress-bar-animated');
|
|
|
-
|
|
|
- // // Another button
|
|
|
- // if(button.attr('data-target') != '') {
|
|
|
- // $('#' + button.attr('data-target')).addClass('progress-bar-striped')
|
|
|
- // .addClass('progress-bar-animated');
|
|
|
- // }
|
|
|
-
|
|
|
- // // Clear form messages
|
|
|
- // form.find('.sys-messages').html('');
|
|
|
-
|
|
|
- // $.ajax({
|
|
|
- // type: "POST",
|
|
|
- // url: form.attr('action'),
|
|
|
- // data: form.serialize()
|
|
|
- // }).done(function(data) {
|
|
|
- // FormDataWasChanged = false;
|
|
|
- // if(IsDebugMode()) console.log('done', data);
|
|
|
- // AjaxDone(data)
|
|
|
- // }).fail(function(xhr, status, error) {
|
|
|
- // if(IsDebugMode()) console.log('fail', xhr, status, error);
|
|
|
- // AjaxFail(xhr.responseText, status, error);
|
|
|
- // }).always(function() {
|
|
|
- // // Add delay for one second
|
|
|
- // setTimeout(function() {
|
|
|
- // form.removeClass('loading').removeClass('alert-here');
|
|
|
- // button.removeClass('progress-bar-striped')
|
|
|
- // .removeClass('progress-bar-animated');
|
|
|
- // // Another button
|
|
|
- // if(button.attr('data-target') != '') {
|
|
|
- // $('#' + button.attr('data-target'))
|
|
|
- // .removeClass('progress-bar-striped')
|
|
|
- // .removeClass('progress-bar-animated');
|
|
|
- // }
|
|
|
- // }, 100);
|
|
|
- // });
|
|
|
-
|
|
|
- // // Prevent submit action
|
|
|
- // e.preventDefault();
|
|
|
- // });
|
|
|
- // ---
|
|
|
-
|
|
|
+ $('#sys-modal-shop-basket .order-form form').submit(function(e) {
|
|
|
+ $('#sys-modal-shop-basket .modal-footer button.btn-success').click();
|
|
|
+ e.preventDefault();
|
|
|
+ });
|
|
|
$("#sys-modal-shop-basket").modal({
|
|
|
backdrop: 'static',
|
|
|
keyboard: true,
|
|
|
@@ -428,30 +423,91 @@ var VarScriptsJsFile = []byte(`(function(window, $) {
|
|
|
var OrderFormBlock = $('#sys-modal-shop-basket .modal-body .order-form');
|
|
|
if(OrderFormBlock.css('display') == 'none') {
|
|
|
OrderFormBlock.css('display', 'block');
|
|
|
- setTimeout(function() { OrderFormBlock.find('input.form-control').first().focus(); }, 500);
|
|
|
+ setTimeout(function() { OrderFormBlock.find('input.form-control').first().focus(); }, 200);
|
|
|
return;
|
|
|
}
|
|
|
+ ClearOrderFormErrorMessage();
|
|
|
+ var OrderForm = $('#sys-modal-shop-basket .modal-body .order-form form');
|
|
|
// Validate
|
|
|
+ var ValidateError = false;
|
|
|
+ if(ShopOrderRequiredLastName && $.trim(OrderForm.find('input[name=client_last_name]').val()) == '') {
|
|
|
+ OrderForm.find('input[name=client_last_name]').parent().parent().find('.input-error-msg').css('display', 'inline');
|
|
|
+ if(!ValidateError) {
|
|
|
+ setTimeout(function() { OrderForm.find('input[name=client_last_name]').first().focus(); }, 200);
|
|
|
+ }
|
|
|
+ ValidateError = true;
|
|
|
+ }
|
|
|
+ if(ShopOrderRequiredFirstName && $.trim(OrderForm.find('input[name=client_first_name]').val()) == '') {
|
|
|
+ OrderForm.find('input[name=client_first_name]').parent().parent().find('.input-error-msg').css('display', 'inline');
|
|
|
+ if(!ValidateError) {
|
|
|
+ setTimeout(function() { OrderForm.find('input[name=client_first_name]').first().focus(); }, 200);
|
|
|
+ }
|
|
|
+ ValidateError = true;
|
|
|
+ }
|
|
|
+ if(ShopOrderRequiredSecondName && $.trim(OrderForm.find('input[name=client_second_name]').val()) == '') {
|
|
|
+ OrderForm.find('input[name=client_second_name]').parent().parent().find('.input-error-msg').css('display', 'inline');
|
|
|
+ if(!ValidateError) {
|
|
|
+ setTimeout(function() { OrderForm.find('input[name=client_second_name]').first().focus(); }, 200);
|
|
|
+ }
|
|
|
+ ValidateError = true;
|
|
|
+ }
|
|
|
+ if(ShopOrderRequiredMobilePhone && $.trim(OrderForm.find('input[name=client_phone]').val()) == '') {
|
|
|
+ OrderForm.find('input[name=client_phone]').parent().parent().find('.input-error-msg').css('display', 'inline');
|
|
|
+ if(!ValidateError) {
|
|
|
+ setTimeout(function() { OrderForm.find('input[name=client_phone]').first().focus(); }, 200);
|
|
|
+ }
|
|
|
+ ValidateError = true;
|
|
|
+ }
|
|
|
+ if(ShopOrderRequiredEmailAddress && $.trim(OrderForm.find('input[name=client_email]').val()) == '') {
|
|
|
+ OrderForm.find('input[name=client_email]').parent().parent().find('.input-error-msg').css('display', 'inline');
|
|
|
+ if(!ValidateError) {
|
|
|
+ setTimeout(function() { OrderForm.find('input[name=client_email]').first().focus(); }, 200);
|
|
|
+ }
|
|
|
+ ValidateError = true;
|
|
|
+ }
|
|
|
+ if(ShopOrderRequiredDelivery && $.trim(OrderForm.find('input[name=client_delivery_comment]').val()) == '') {
|
|
|
+ OrderForm.find('input[name=client_delivery_comment]').parent().parent().find('.input-error-msg').css('display', 'inline');
|
|
|
+ if(!ValidateError) {
|
|
|
+ setTimeout(function() { OrderForm.find('input[name=client_delivery_comment]').first().focus(); }, 200);
|
|
|
+ }
|
|
|
+ ValidateError = true;
|
|
|
+ }
|
|
|
+ if(ShopOrderRequiredComment && $.trim(OrderForm.find('textarea[name=client_order_comment]').val()) == '') {
|
|
|
+ OrderForm.find('textarea[name=client_order_comment]').parent().parent().find('.input-error-msg').css('display', 'inline');
|
|
|
+ if(!ValidateError) {
|
|
|
+ setTimeout(function() { OrderForm.find('textarea[name=client_order_comment]').first().focus(); }, 200);
|
|
|
+ }
|
|
|
+ ValidateError = true;
|
|
|
+ }
|
|
|
+ if(ValidateError) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
// Send form
|
|
|
ShopBasketBlockObject(object);
|
|
|
- var OrderForm = $('#sys-modal-shop-basket .modal-body .order-form form');
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
url: OrderForm.attr('action'),
|
|
|
data: OrderForm.serialize()
|
|
|
}).done(function(data) {
|
|
|
- // FormDataWasChanged = false;
|
|
|
- // if(IsDebugMode()) console.log('done', data);
|
|
|
- // AjaxDone(data);
|
|
|
- // ---
|
|
|
- // ShopOrderSuccess
|
|
|
- // ShopOrderErrorMobilePhone
|
|
|
- // ShopOrderErrorEmailAddress
|
|
|
- console.log('Order action done', data);
|
|
|
+ try {
|
|
|
+ jdata = JSON.parse(data);
|
|
|
+ if(jdata.error === true) {
|
|
|
+ ShowOrderFormErrorMessage(ShopOrderError, window[jdata.variable]);
|
|
|
+ if(jdata.field) {
|
|
|
+ setTimeout(function() { OrderForm.find('[name=' + jdata.field + ']').first().focus(); }, 200);
|
|
|
+ OrderForm.find('[name=' + jdata.field + ']').parent().parent().find('.input-error-msg').css('display', 'inline');
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ ShopBasketSetNavBtnProductsCount(0);
|
|
|
+ OrderFormBlock.css('display', 'none');
|
|
|
+ $('#sys-modal-shop-basket .modal-body .data').html(window[jdata.variable]);
|
|
|
+ $('#sys-modal-shop-basket button.btn-order').prop('disabled', true);
|
|
|
+ }
|
|
|
+ } catch(e) {
|
|
|
+ ShowOrderFormErrorMessage(ShopOrderError, e.message);
|
|
|
+ }
|
|
|
}).fail(function(xhr, status, error) {
|
|
|
- // if(IsDebugMode()) console.log('fail', xhr, status, error);
|
|
|
- // AjaxFail(xhr.responseText, status, error);
|
|
|
- console.log('Order action fail', xhr, status, error);
|
|
|
+ ShowOrderFormErrorMessage(ShopOrderError, error);
|
|
|
}).always(function() {
|
|
|
ShopBasketUnBlockObject(object);
|
|
|
});
|
