Order site
By contacting me you will receive a reliable and knowledgeable contractor who will quickly and efficiently implement any task for you and your business.
The last notes
All English-language materials have been translated fully automatically using the Google service
This material is not an exhaustive guide, but contains all the files and scripts for complete work. You won't be able to just take and copy it; you will have to make minimal changes to the information security, markup, etc. The code is supplied free of charge and "as is". Use it at your own risk
Form code
Place before the closing body in your footer.php file of your template
<? php
$ arSections = [];
if (CModule :: IncludeModule ('iblock')) {
$ res = CIBlockSection :: GetList (
[
'NAME' => 'ASC'
],
[
'IBLOCK_ID' => 1,
'ACTIVE' => 'Y',
'DEPTH_LEVEL' => 1
]
);
while ($ arRes = $ res-> GetNext ()) {
$ arSections [] = $ arRes ['NAME'];
}
}
?>
<div class = "topWindowOuter absoluteCenter" style = "display: none">
<div class = "topWindowInner">
<div class = "modal-close js-close-form"> <svg version = "1.1" id = "Layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http : //www.w3.org/1999/xlink "x =" 0px "y =" 0px "viewBox =" 0 0 512 512 "style =" enable-background: new 0 0 512 512; " xml: space = "preserve"> <path d = "M256,0C114.844,0,0,114.844,0,256s114.844,256,256,256s256-114.844,256-256S397.156,0,256,0z M256,490.667 C126.604,490.667,21.333,385.396 , 21.333,256S126.604,21.333,256,21.333S490.667,126.604,490.667,256S385.396,490.667,256,490.667 z "/> <path d =" M359.542,152.458c-4.167-4.167-10.917-4.167-15.083,0L256,240.917 l-88.458-88.458c-4.167-4.167-10.917-4.167-15.083.0 c-4.167.4.167-4.167.10.917.0.15.083 L240.917.256l-88.458.88.458c-4.167.4.167-4.167.10.917.0 , 15.083 c2.083.2.083.4.813.3.125,7.542.3.125s5.458-1.042,7.542-3.125L256,271.083l88.458,88.458c2.083.2.083,4.813.3.125,7.542.3.125 c2.729.0 , 5.458-1.042,7.542-3.125c4.167-4.167,4.167-10.917,0-15.083L271.083,256l88.458-88.458 C363.708,163.375,363.708,156.625,359.542,152.458z "/> </svg> </ div>
<div class = "popup js-formDiv" id = "registration">
<form method = "post" class = "js-reg-form regForm formTabber" novalidate = "novalidate">
<h2> Registration </h2>
<div class = "row">
<div class = "col-xs-6 input-row">
<label for = "FIO"> Full name <span class = "req"> * </span> </label>
<input type = "text" name = "FIO" id = "FIO" value = "" class = "input-text field_FIO" placeholder = "Your full name" autocomplete = "name">
<span class = "js-error tooltip"> </span>
</div>
<div class = "col-xs-6 input-row">
<label for = "CITY"> City <span class = "req"> * </span> </label>
<input type = "text" name = "CITY" id = "CITY" value = "" class = "input-text field_CITY" placeholder = "Your city" autocomplete = "off">
<span class = "js-error tooltip"> </span>
</div>
<div class = "col-xs-6 input-row">
<label for = "COMPANY"> Company name </label>
<input type = "text" name = "COMPANY" id = "COMPANY" value = "" class = "input-text field_COMPANY" placeholder = "Your company" autocomplete = "organization">
<span class = "js-error tooltip"> </span>
</div>
<div class = "col-xs-6 input-row">
<label for = "MAIL"> Mail <span class = "req"> * </span> </label>
<input type = "text" name = "MAIL" id = "MAIL" value = "" class = "input-text field_MAIL" placeholder = "Your mail" autocomplete = "off">
<span class = "js-error tooltip"> </span>
</div>
<div class = "col-xs-6 input-row">
<label for = "EMAIL"> Email <span class = "req"> * </span> </label>
<input type = "text" name = "EMAIL" id = "EMAIL" value = "" class = "input-text field_EMAIL" placeholder = "Your mail" autocomplete = "email">
<span class = "js-error tooltip"> </span>
</div>
<div class = "col-xs-12 input-row">
<label for = "PHONE"> Phone <span class = "req"> * </span> </label>
<input type = "text" name = "PHONE" id = "PHONE" value = "" placeholder = "Your phone" class = "input-text field_PHONE" autocomplete = "tel">
<span class = "js-error tooltip"> </span>
</div>
<div class = "col-xs-12 input-row">
<hr class = "clearfix" />
<div class = "row input-row categoriesList">
<?
if (! empty ($ arSections)) {
?> <p> Select the product categories you are interested in <span class = "req"> * </span> </p> <?
foreach ($ arSections as $ key => $ nameSection) {
?> <div class = "col-xs-6">
<input type = "checkbox" id = "o <? = $ key?>" value = "<? = $ nameSection?>" name = "s []" style = "display: none;">
<label for = "o <? = $ key?>" class = "check js-list">
<svg width = "18px" height = "18px" viewBox = "0 0 18 18">
<path d = "M1.9 L1.3.5 C1.2 2.1 3.5.1 L14.5.1 C16.1 17.2 17.3.5 L17.14.5 C17.16 16.17 14.5.17 L3.5, 17 C2.17 1.16 1.14.5 L1.9 Z "> </path>
<polyline points = "1 9 7 14 15 4"> </polyline>
</svg>
<? = $ nameSection?>
</label>
</div>
<?
}
}
?>
</div>
<hr class = "clearfix" />
</div>
<div class = "col-xs-12 input-row orderPolitika active">
<input type = "checkbox" id = "cbx" style = "display: none;" checked>
<label for = "cbx" class = "check">
<svg width = "18px" height = "18px" viewBox = "0 0 18 18">
<path d = "M1.9 L1.3.5 C1.2 2.1 3.5.1 L14.5.1 C16.1 17.2 17.3.5 L17.14.5 C17.16 16.17 14.5.17 L3.5, 17 C2.17 1.16 1.14.5 L1.9 Z "> </path>
<polyline points = "1 9 7 14 15 4"> </polyline>
</svg>
I have read the <a href="/politika-konfidentsialnosti.php" id="js-link-agree" target="_blank" rel="noopener noreferrer"> Privacy Policy </a> and agree with all points
</label>
</div>
<br style="clear: both" />
<div class = "col-xs-12 sRegSubmit">
<input type = "submit" name = "submit" class = "js-order-submit" id = "submit" value = "Register">
</div>
<div class = "col-xs-12">
<p class = "snoska"> Fields marked with an asterisk (<span class = "req"> * </span>) are required </p>
</div>
</div>
<div class = "forgetPass">
<a href="#a" class="js-formLoad" data-attr="doLogin"> Login </a>
</div>
<? = bitrix_sessid_post ();?>
</form>
</div>
<div class = "popup js-formDiv" id = "registerSuccess">
<h2> Congratulations! </h2>
<?/*?> <p> You have successfully registered and entered the site. A letter with your username and password has been sent to your mail. </p>
<p> The page will be reloaded in a few seconds </p> <? * /?>
<p> You have successfully registered. Now you can enter the site using the username and password from the letter that we sent to the mail you specified. </p>
</div>
<div class = "popup js-formDiv" id = "registerError">
<h2> Registration failed! </h2>
<p> Sorry, we were unable to register your account. Please check the entered data. Perhaps such a user already exists or you made a mistake when filling out the forms </p>
</div>
<div class = "popup js-formDiv" id = "recoveryPass">
<form method = "post" class = "js-recovery-form regForm formTabber" novalidate = "novalidate">
<h2> Password recovery </h2>
<div class = "row">
<div class = "col-xs-6 input-row">
<label for = "MAIL"> Mail <span class = "req"> * </span> </label>
<input type = "text" name = "MAIL" id = "MAIL" value = "" class = "input-text field_MAIL" placeholder = "Your mail" autocomplete = "off">
<span class = "js-error tooltip"> </span>
</div>
<div class = "col-xs-12 input-row">
<label for = "EMAIL"> Email <span class = "req"> * </span> </label>
<input type = "text" name = "EMAIL" id = "EMAIL" value = "" class = "input-text field_EMAIL" placeholder = "Your mail" autocomplete = "email">
<span class = "js-error tooltip"> </span>
</div>
<div class = "col-xs-12 input-row orderPolitika active">
<input type = "checkbox" id = "cbx" style = "display: none;" checked>
<label for = "cbx" class = "check">
<svg width = "18px" height = "18px" viewBox = "0 0 18 18">
<path d = "M1.9 L1.3.5 C1.2 2.1 3.5.1 L14.5.1 C16.1 17.2 17.3.5 L17.14.5 C17.16 16.17 14.5.17 L3.5, 17 C2.17 1.16 1.14.5 L1.9 Z "> </path>
<polyline points = "1 9 7 14 15 4"> </polyline>
</svg>
I have read the <a href="/politika-konfidentsialnosti.php" id="js-link-agree" target="_blank" rel="noopener noreferrer"> Privacy Policy </a> and agree with all points
</label>
</div>
<br style="clear: both" />
<div class = "col-xs-12 alignCenter">
<input type = "submit" name = "submit" class = "js-recovery-submit" id = "submit" value = "Recover password">
</div>
</div>
<div class = "forgetPass">
<a href="#a" class="js-formLoad" data-attr="doLogin"> Login </a>
</div>
<? = bitrix_sessid_post ();?>
</form>
</div>
<div class = "popup js-formDiv" id = "recoverySuccess">
<h2> Success! </h2>
<?/*?> <p> You have successfully registered and entered the site. A letter with your username and password has been sent to your mail. </p>
<p> The page will be reloaded in a few seconds </p> <? * /?>
<p> A new username and password have been sent to your mail </p>
</div>
<div class = "popup js-formDiv" id = "recoveryError">
<h2> Bad luck! </h2>
<p> We were unable to recover your password. Perhaps no such user exists </p>
</div>
<script>
<? CJSCore :: Init (['masked_input']);?>
(function ($) {
// Activate the phone mask
//$('#PHONE').inputmask(("mask ":" +7 (999) 999-9999 "});
BX.ready (function () {
var result = new BX.MaskedInput ({
mask: '+7 (999) 999-99-99', // set the mask
input: BX ('PHONE'),
placeholder: '_' // replacement character +7 ___ ___ __ __
});
});
}) (jQuery);
</script>
<div class = "popup js-formDiv" id = "doLogin">
<form method = "post" class = "js-login-form regForm formTabber" novalidate = "novalidate">
<h2> Login </h2>
<p> To enter, you need to specify the username and password correctly </p> <br style="clear: both" />
<div class = "row">
<div class = "col-xs-12 input-row">
<label for = "EMAIL"> Email <span class = "req"> * </span> </label>
<input type = "text" name = "EMAIL" id = "EMAIL" value = "" class = "input-text field_EMAIL" placeholder = "Your mail" autocomplete = "email">
<span class = "js-error tooltip"> </span>
</div>
<div class = "col-xs-12 input-row">
<label for = "PASSWORD"> Password <span class = "req"> * </span> </label>
<input type = "password" name = "PASSWORD" id = "PASSWORD" value = "" class = "input-text field_PASSWORD" placeholder = "Your password" autocomplete = "off">
<span class = "js-error tooltip"> </span>
</div>
<br style="clear: both" />
<div class = "col-xs-12 alignCenter">
<input type = "submit" name = "submit" class = "js-login-submit" id = "submit" value = "Login">
</div>
</div>
<div class = "forgetPass">
<a href="#a" class="js-formLoad" data-attr="recoveryPass"> Forgot password </a> / <a href = "# a" class = "js-formLoad" data-attr = " registration "> Not registered yet </a>
</div>
<? = bitrix_sessid_post ();?>
</form>
</div>
<div class = "popup js-formDiv" id = "loginSuccess">
<h2> Success! </h2>
<p> You have successfully logged in. The page will reload in a few seconds </p>
</div>
<div class = "popup js-formDiv" id = "loginError">
<h2> Bad luck! </h2>
<p> You entered an incorrect username or password. Please check the details and try again </p>
</div>
<div class = "popup js-formDiv" id = "doQuestion">
<form method = "post" class = "js-question-form regForm formTabber" novalidate = "novalidate">
<h2> Ask a question </h2>
<div class = "row">
<div class = "col-xs-6 input-row">
<label for = "NAME"> Name <span class = "req"> * </span> </label>
<input type = "text" name = "NAME" id = "NAME" value = "" class = "input-text field_NAME" placeholder = "Your name" autocomplete = "off">
<span class = "js-error tooltip"> </span>
</div>
<div class = "col-xs-6 input-row">
<label for = "PHONE"> Phone <span class = "req"> * </span> </label>
<input type = "text" name = "PHONE" id = "PHONE" value = "" class = "input-text field_PHONE" placeholder = "Your phone" autocomplete = "off">
<span class = "js-error tooltip"> </span>
</div>
<div class = "col-xs-12 input-row">
<label for = "MAIL"> Mail <span class = "req"> * </span> </label>
<input type = "text" name = "MAIL" id = "MAIL" value = "" class = "input-text field_MAIL" placeholder = "Your mail" autocomplete = "off">
<span class = "js-error tooltip"> </span>
</div>
<div class = "col-xs-12 input-row">
<label for = "EMAIL"> Mail <span class = "req"> * </span> </label>
<input type = "text" name = "EMAIL" id = "EMAIL" value = "" class = "input-text field_EMAIL" placeholder = "Your mail" autocomplete = "email">
<span class = "js-error tooltip"> </span>
</div>
<div class = "col-xs-12 input-row">
<label for = "MESSAGE"> Your question </label>
<textarea name = "MESSAGE" id = "MESSAGE" value = "" class = "input-text field_MESSAGE" placeholder = "Your question"> </textarea>
<span class = "js-error tooltip"> </span>
</div>
<br style="clear: both" />
<br style="clear: both" />
<div class = "col-xs-12 alignCenter">
<input type = "submit" name = "submit" class = "js-qusetion-submit" id = "submit" value = "Login">
</div>
<br style="clear: both" /> <br style="clear: both" />
<div class = "col-xs-12">
<p class = "snoska"> Fields marked with an asterisk (<span class = "req"> * </span>) are required </p>
</div>
</div>
<? = bitrix_sessid_post ();?>
</form>
</div>
<div class = "popup js-formDiv" id = "questionSuccess">
<h2> Success! </h2>
<p> You have asked your question. We will contact you shortly </p>
</div>
<div class = "popup js-formDiv" id = "questionError">
<h2> Bad luck! </h2>
<p> An error occurred while sending the request. Please check the details and try again </p>
</div>
<div class = "popup js-formDiv" id = "getPriceSuccess">
<h2> Success! </h2>
<p> You have successfully submitted your application. In a few seconds the page will reload and you can download the price lists </p>
</div>
</div>
</div> Calling Forms
<div class = "js-formLoad" data-attr = "registration" style = "cursor: pointer"> Registration </div> <br>
<div class = "js-formLoad" data-attr = "recoveryPass" style = "cursor: pointer"> Password recovery </div>
<div class = "js-formLoad" data-attr = "doLogin" style = "cursor: pointer"> Login </div>
<div class = "js-formLoad" data-attr = "doQuestion" style = "cursor: pointer"> Ask a question </div> Your script code
Place in the scripts.js file of your template
// ############ CHANGE START ############ //
function IsJsonString (str) {
try {
JSON.parse (str);
} catch (e) {
return false;
}
return true;
}
// Show the popup
function showModal (el) {
el.stop (). css ("display", "flex"). hide (). fadeIn (600);
}
// When pressing Esc, hide the form
$ (document) .keydown (function (e) {
if (e.keyCode === 27) {
var popup = $ ('. topWindowOuter: visible');
if (popup) {
closeGallery (popup);
return false;
}
}
});
// Hide the form
function closeGallery () {
$ ('. topWindowOuter'). fadeOut (400, function () {
$ ('. js-formDiv'). removeClass ('active'). fadeOut (0);
$ ('. js-oneClickForm'). addClass ('active'). fadeIn (0);
});
}
// Do form validation
function formSubmit (form) {// generic form validation function
var THIS_FORM = form;
var req_input = $ (THIS_FORM) .find (". input-text");
var flag = 0;
$ .each (req_input, function (index) {
var THIS_VALUE = $ (this) .val (),
reg_email = /^^^^^^^^^^^^^^^.-zA-Z0-9\._-...+@ [a-zA-Z0-9_\. $ /;
reg_phone = / ^ (\ s *)? (\ +)? ([- _ (): = +]? \ d [- _ (): = +]?) {10,14} (\ s *)? $ /,
cc = / [0-9] {4} {0,1} [0-9] {4} {0,1} [0-9] {4} {0,1} [0-9] {4} /, // Credit card number
cdate = /^\d {2} [./- *\d [2 ]$$/, // Credit card Date
smsCode = / ^ \ d {3} \ d {3} $ /, // SMS Code Verification
cvc = / ^ [0-9] {3,4} $ /; // Credit card CVC
if ($ (this) .is (". field_PHONE")) {
if (reg_phone.test (THIS_VALUE)) {
$ (this) .removeClass ('error'). addClass ('succeed');
}
else {
$ (this) .addClass ('error'). removeClass ('succeed');
flag ++;
}
} else if ($ (this) .is (". field_EMAIL")) {
if (reg_email.test (THIS_VALUE)) {
$ (this) .removeClass ('error'). addClass ('succeed');
}
else {
$ (this) .addClass ('error'). removeClass ('succeed');
flag ++;
}
} else if ($ (this) .is (". field_FIO")) {
if (THIS_VALUE.length> 2) {
$ (this) .removeClass ('error'). addClass ('succeed');
}
else {
$ (this) .addClass ('error'). removeClass ('succeed');
flag ++;
}
} else if ($ (this) .is (". field_pass") || $ (this) .is (". field_pass_confirm")) {
if ($ (". field_pass_confirm"). length> 0) {
if (THIS_VALUE.length> 5 && ($ (". field_pass"). val () == $ (". field_pass_confirm"). val ())) {
$ (". field_pass"). removeClass ('error'). addClass ('succeed');
$ (". field_pass_confirm"). removeClass ('error'). addClass ('succeed');
}
else {
$ (". field_pass"). addClass ('error'). removeClass ('succeed');
$ (". field_pass_confirm"). addClass ('error'). removeClass ('succeed');
flag ++;
}
} else {
if (THIS_VALUE.length> 5) {
$ (". field_pass"). removeClass ('error'). addClass ('succeed');
}
else {
$ (". field_pass"). addClass ('error'). removeClass ('succeed');
flag ++;
}
}
} else if ($ (this) .is (". field_card_number")) {
$ ('. field_card_number'). mask ('0000 0000 0000 0000');
if (cc.test (THIS_VALUE)) {
$ (this) .removeClass ('error'). addClass ('succeed');
}
else {
$ (this) .addClass ('error'). removeClass ('succeed');
flag ++;
}
} else if ($ (this) .is (". field_card_date")) {
$ ('. field_card_date'). mask ('00 / 00 ');
if (cdate.test (THIS_VALUE)) {
$ (this) .removeClass ('error'). addClass ('succeed');
}
else {
$ (this) .addClass ('error'). removeClass ('succeed');
flag ++;
}
} else if ($ (this) .is (". field_card_cvc")) {
$ ('. field_card_cvc'). mask ('000');
if (THIS_VALUE) {
$ (this) .removeClass ('error'). addClass ('succeed');
}
else {
$ (this) .addClass ('error'). removeClass ('succeed');
flag ++;
}
} else if ($ (this) .is (". field_sms_verify")) {
if (smsCode.test (THIS_VALUE)) {
$ (this) .removeClass ('error'). addClass ('succeed');
}
else {
$ (this) .addClass ('error'). removeClass ('succeed');
flag ++;
}
} else if ($ (this) .is (". field_check")) {
if ($ (this) .prop ("checked") == true) {
$ (this) .next (). removeClass ('error'). addClass ('succeed');
}
else {
$ (this) .next (). addClass ('error'). removeClass ('succeed');
flag ++;
}
} else if ($ (this) .is (". field_MAIL") || $ (this) .is (". field_COMPANY") || $ (this) .is (". field_MESSAGE")) {
// Skip dummy fields to stop bots
// I recommend that you change the name and type of check for bots
} else {
if (THIS_VALUE) {
$ (this) .removeClass ('error'). addClass ('succeed');
}
else {
$ (this) .addClass ('error'). removeClass ('succeed');
flag ++;
}
}
});
if (flag) {return false;}
else {return true;}
}
// To shorten the code and increase readability, we move this fragment into a separate function
function formError (form) {
$ ('. js-formDiv.active'). fadeOut (400, function () {
$ ('. js-formDiv'). removeClass ('active');
$ ('#' + form) .fadeIn (400, function () {
$ (this) .addClass ('active');
});
});
}
// To shorten the code and increase readability, we move this fragment into a separate function
function formSuccess (form) {
$ ('. js-formDiv.active'). fadeOut (400, function () {
$ ('. js-formDiv'). removeClass ('active');
$ ('#' + form) .fadeIn (400, function () {
$ (this) .addClass ('active');
});
});
}
/ ******************************** /
/ * Form handling * /
/ ******************************** /
(function ($) {
$ (document) .ready (function () {
/ ******************************** /
/ * General functions for working with the form * /
/ ******************************** /
// When the state of the input of the popup form changes, do the validation
$ ('body'). on ('keyup input change', '.topWindowOuter input, .topWindowOuter textarea', function () {// Call the state of input fields when they are edited
formSubmit ($ (this) .parents ('form'));
});
// Close the window when clicking outside
$ ('body'). on ('click', '.topWindowOuter', function (e) {
if ($ ('. topWindowOuter'). has (e.target) .length === 0) {// Tracking the click on the element
closeGallery ();
}
});
// show the form
$ ('body'). on ('click', '.js-formLoad', function (e) {
e.preventDefault ();
// Hide all popup shapes
$ ('. js-formDiv'). removeClass ('active');
// Show the called form
$ ('#' + $ (this) .attr ('data-attr')). addClass ('active'). fadeIn (0);
// Show the form
showModal ($ ('. topWindowOuter'));
});
// show the form
$ ('body'). on ('click', '.js-forgotPass', function (e) {
e.preventDefault ();
$ ('. js-formLoad [data-attr = "recoveryPass"]'). click ();
});
// Click on the button to close the form
$ ('body'). on ('click', '.js-close-form', function (e) {
e.preventDefault ();
closeGallery ();
});
// mark the checkbox as checked. The script is needed because the checkbox is hidden and its emulation is used
$ ('body'). on ('click', 'label [for = "politika"]', function (e) {
e.preventDefault ();
var el = $ (this),
parents = el.parents ('. orderPolitika'),
input = parents.find ('input [type = "checkbox"]');
parents.toggleClass ('active');
if (parents.hasClass ('active')) {
input.prop ('checked', true) .val ('Y');
} else {
input.prop ('checked', false) .val ('N');
}
input.trigger ("change");
});
// Submit button
$ ('body'). on ('click', '.js-list', function (e) {
e.preventDefault ();
var el = $ (this),
input = el.prev ();
if (el.hasClass ('active')) {
el.removeClass ('active');
input.prop ('checked', false) .attr ('checked', false);
} else {
el.addClass ('active');
input.prop ('checked', true) .attr ('checked', true);
}
});
$ ('body'). on ('click', '.js-order-submit', function (e) {
e.preventDefault ();
var el = $ (this),
parents = el.parents ('form');
if (formSubmit (parents)) {
var data = parents.serialize ();
$ .ajax ({
type: 'post',
url: '/local/ajax/addNewUser.php',
data: data,
// dataType: 'json',
success: function (data) {
console.log (data);
if (IsJsonString (data)) {
data = JSON.parse (data);
if (data.success === 'ok') {
// There were no errors, the order was placed
formSuccess ('registerSuccess');
} else if (data.success === 'User already exists') {
// There were no errors, the order was placed
formError ('registerError');
} else {
// An error flag was returned
formSuccess ('registerSuccess');
}
} else {
// Not json, then an error occurred
formError ('registerError');
}
setTimeout (() => closeGallery (), 5000);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log ("Status:" + textStatus);
}
});
}
});
$ ('body'). on ('click', '.js-recovery-submit', function (e) {
e.preventDefault ();
var el = $ (this),
parents = el.parents ('form');
if (formSubmit (parents)) {
var data = parents.serialize ();
$ .ajax ({
type: 'post',
url: '/local/ajax/recovery.php',
data: data,
// dataType: 'json',
success: function (data) {
console.log (data);
if (IsJsonString (data)) {
data = JSON.parse (data);
if (data.success === 'ok') {
// There were no errors, the order was placed
formSuccess ('recoverySuccess');
} else if (data.success === 'Y') {
// There were no errors, the order was placed
formError ('recoveryError');
} else {
// An error flag was returned
formSuccess ('recoverySuccess');
}
} else {
// Not json, then an error occurred
formError ('recoveryError');
}
setTimeout (() => closeGallery (), 5000);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log ("Status:" + textStatus);
}
});
}
});
$ ('body'). on ('click', '.js-login-submit', function (e) {
e.preventDefault ();
var el = $ (this),
parents = el.parents ('form');
if (formSubmit (parents)) {
var data = parents.serialize ();
console.log (data);
$ .ajax ({
type: 'post',
url: '/local/ajax/login.php',
data: data,
// dataType: 'json',
success: function (data) {
console.log (data);
if (IsJsonString (data)) {
data = JSON.parse (data);
if (data.success === 'ok') {
// There were no errors, the order was placed
formSuccess ('loginSuccess');
setTimeout (() => location.reload (), 5000);
} else {
// An error flag was returned
formSuccess ('loginError');
}
} else {
// Not json, then an error occurred
formError ('loginError');
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log ("Status:" + textStatus);
}
});
}
});
$ ('body'). on ('click', '.js-qusetion-submit', function (e) {
e.preventDefault ();
var el = $ (this),
parents = el.parents ('form');
if (formSubmit (parents)) {
var data = parents.serialize ();
$ .ajax ({
type: 'post',
url: '/local/ajax/addQuestion.php',
data: data,
// dataType: 'json',
success: function (data) {
console.log (data);
if (IsJsonString (data)) {
data = JSON.parse (data);
if (data.success === 'ok') {
// There were no errors, the order was placed
formSuccess ('questionSuccess');
setTimeout (() => closeGallery (), 5000);
} else {
// An error flag was returned
formSuccess ('questionError');
}
} else {
// Not json, then an error occurred
formError ('questionError');
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log ("Status:" + textStatus);
}
});
}
});
/ *
$ .ajax ({
type: 'post',
url: '/local/ajax/isAuthorized.php', // Remember the location of the buyOneClick.php file
data: {},
// dataType: 'json',
success: function (data) {
console.log (data);
$ ('. right-authorization-block'). html (data)
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log ("Status:" + textStatus);
}
});
* /
});
}) (jQuery);
File addNewUser.php
require_once ($ _ SERVER ['DOCUMENT_ROOT']. '/ bitrix / modules / main / include / prolog_before.php');
function sendNotification ($ arData) {
global $ USER;
$ arEventFields = array (
"EMAIL_TO" => $ arData ['EMAIL'],
"PASSWORD" => $ arData ['PASSWORD'],
"MESSAGE" => 'You are registered!'
);
CEvent :: Send ("REGISTRATION_SITE", 's1', $ arEventFields, "N"); // Admin notifications about a new order
$ arEventFields = array (
"USER_ID" => $ arData ['USER_ID'],
"NAME" => $ arData ['FIO'],
"EMAIL" => $ arData ['EMAIL'],
"CITY" => $ arData ['CITY'],
"PHONE" => $ arData ['PHONE'],
"COMPANY" => $ arData ['COMPANY'],
"SECTIONS" => $ arData ['SECTIONS'],
"LOGIN" => $ arData ['EMAIL'],
);
CEvent :: Send ("NEW_USER", 's1', $ arEventFields, "N"); // Admin notifications about a new order
}
$ arResult = array ('success' => 'Y');
if (check_bitrix_sessid () && $ _SERVER ["REQUEST_METHOD"] == "POST" &&! $ _ POST ['MAIL']) {
// Check flag for bot
$ arData = array (
'FIO' => htmlspecialchars ($ _ POST ['FIO']),
'CITY' => htmlspecialchars ($ _ POST ['CITY']),
'COMPANY' => htmlspecialchars ($ _ POST ['COMPANY']),
'EMAIL' => htmlspecialchars ($ _ POST ['EMAIL']),
'PHONE' => htmlspecialchars ($ _ POST ['PHONE']),
);
foreach ($ _POST ['s'] as $ v) {
$ arData ['SECTIONS']. = '-'. $ v. '
';
}
if (! $ arData ['SECTIONS']) {
$ arData ['SECTIONS'] = 'The user did not select any categories of interest to him';
}
$ rand = randString (15);
$ registeredUserID = $ USER-> Add (array (
"NAME" => $ arData ['FIO'],
"EMAIL" => $ arData ['EMAIL'],
"LOGIN" => $ arData ['EMAIL'],
"PERSONAL_PHONE" => $ arData ['PHONE'],
"LID" => "ru",
"ACTIVE" => "Y",
"GROUP_ID" => array (3,4),
"PASSWORD" => $ rand,
"CONFIRM_PASSWORD" => $ rand,
"WORK_COMPANY" => $ arData ['COMPANY'],
"PERSONAL_CITY" => $ arData ['CITY'],
));
if (! $ registeredUserID) {
$ arResult ['success'] = 'User already exists';
} else {
$ arData ['USER_ID'] = $ registeredUserID;
$ arData ['PASSWORD'] = $ rand;
sendNotification ($ arData);
$ arResult ['success'] = 'ok';
}
}
echo json_encode ($ arResult);
File recovery.php
require_once ($ _ SERVER ['DOCUMENT_ROOT']. '/ bitrix / modules / main / include / prolog_before.php');
$ arResult = array ('success' => 'Y');
if (check_bitrix_sessid () && $ _SERVER ["REQUEST_METHOD"] == "POST") {
// Check flag for bot
if (! $ _ POST ['MAIL']) {
$ arData = array (
'EMAIL' => htmlspecialchars ($ _ POST ['EMAIL'])
);
// Send a checkpoint to change the password
// CUser :: SendPassword ($ arData ['EMAIL'], $ arData ['EMAIL'])
global $ USER;
if (! is_object ($ USER))
$ USER = new CUser;
$ filter = [
"ACTIVE" => "Y",
"EMAIL" => $ arData ['EMAIL']
];
$ user = CUser :: GetList (($ by = "timestamp_x"), ($ order = "desc"), $ filter) -> Fetch ();
if (count ($ user)> 1) {
$ password = mb_substr (md5 (uniqid (rand (), true)), 0, 9);
$ USER-> Update ($ user ['ID'], ["PASSWORD" => $ password, "CONFIRM_PASSWORD" => $ password]);
$ arEventFields = [
"EMAIL_TO" => $ arData ['EMAIL'],
"MESSAGE" => 'Password recovered successfully.',
"PASSWORD" => $ password,
];
CEvent :: Send ("USER_PASS_RECOVERY", 's1', $ arEventFields, "N");
$ arResult ['success'] = 'ok';
} else {
$ arResult = [
'success' => 'Y',
'MESSAGE' => 'No such user found'
];
};
}
}
echo json_encode ($ arResult);
File login.php
define ("NO_KEEP_STATISTIC", true);
define ("NOT_CHECK_PERMISSIONS", true);
define ("NEED_AUTH", true);
require ($ _ SERVER ["DOCUMENT_ROOT"]. "/bitrix/modules/main/include/prolog_before.php");
/ **
* Check if $ password is the current user's password.
*
* @param int $ userId
* @param string $ password
*
* @return bool
* /
function isUserPassword ($ userId, $ password)
{
$ userData = CUser :: GetByID ($ userId) -> Fetch ();
$ salt = substr ($ userData ['PASSWORD'], 0, (strlen ($ userData ['PASSWORD']) - 32));
$ realPassword = substr ($ userData ['PASSWORD'], -32);
$ password = md5 ($ salt. $ password);
return ($ password == $ realPassword);
}
$ arResult = array ('success' => 'Y');
global $ USER;
if (check_bitrix_sessid () && $ _SERVER ["REQUEST_METHOD"] == "POST") {
// $ arAuthResult = $ USER-> Login (htmlspecialchars ($ _ POST ['EMAIL']), htmlspecialchars ($ _ POST ['PASSWORD']));
// Check flag for bot
$ arData = array (
'EMAIL' => $ _POST ['EMAIL'],
'PASSWORD' => $ _POST ['PASSWORD'],
);
$ rsUser = CUser :: GetByLogin ($ arData ['EMAIL']);
$ arUser = $ rsUser-> Fetch ();
if (isUserPassword ($ arUser ['ID'], $ arData ['PASSWORD'])! = 1) {
$ arResult ['success'] = 'Data is invalid';
} else {
$ USER-> Login ($ arData ['EMAIL'], $ arData ['PASSWORD'], 'Y');
$ USER-> Authorize ($ arUser ['ID']);
$ arResult ['success'] = 'ok';
}
}
echo json_encode ($ arResult);
File addQuestion.php
require_once ($ _ SERVER ['DOCUMENT_ROOT']. '/ bitrix / modules / main / include / prolog_before.php');
$ arResult = array ('success' => 'Y');
if (check_bitrix_sessid () && $ _SERVER ["REQUEST_METHOD"] == "POST" &&! $ _ POST ['MAIL'] && CModule :: IncludeModule ('iblock')) {
// Check flag for bot
$ el = new CIBlockElement;
$ PROP = [];
if (strlen ($ _ REQUEST ['EMAIL'])> 0)
$ PROP ['EMAIL'] = $ _REQUEST ['EMAIL'];
if (strlen ($ _ REQUEST ['PHONE'])> 0)
$ PROP ['PHONE'] = $ _REQUEST ['PHONE'];
$ arLoadProductArray = [
"IBLOCK_SECTION_ID" => false,
"IBLOCK_ID" => IBLOCK_QUESTIONS,
"PROPERTY_VALUES" => $ PROP,
"NAME" => "Question from". $ _REQUEST ['NAME'],
"ACTIVE" => "Y",
"PREVIEW_TEXT" => $ _REQUEST ['MESSAGE'],
];
if ($ PRODUCT_ID = $ el-> Add ($ arLoadProductArray)) {
$ arEventFields = [
'NAME' => $ _REQUEST ['NAME'],
'EMAIL' => $ _REQUEST ['EMAIL'],
'PHONE' => $ _REQUEST ['PHONE'],
'QUESTION' => $ _REQUEST ['MESSAGE'],
];
CEvent :: Send ("ADD_QUESTION", 's1', $ arEventFields);
$ arResult ['success'] = 'ok';
} else {
$ arResult = [
'ERROR' => 'Y',
'MESSAGE' => '1'. $ El-> LAST_ERROR
];
}
}
echo json_encode ($ arResult);
Styles css
.absoluteCenter {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; flex-direction: column}
.topWindowInner .forgetPass a {-moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s}
.topWindowOuter {display: flex; background-color: rgba (0,0,0,0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
.topWindowInner {background-color: #fff; padding: 40px 40px; position: relative; min-width: 320px; max-width: 500px; max-height: 90vh; overflow-y: auto; -webkit-box-shadow: 0px 5px 10px 0px rgba (0,0,0,0.2); -moz-box-shadow: 0px 5px 10px 0px rgba (0,0,0,0.2); box-shadow: 0px 5px 10px 0px rgba (0,0,0,0.2); text-align: left; border-radius: 5px}
.topWindowInner h2 {font-family: 'Roboto Condensed', Verdana, sans-serif; font-size: 24px; font-weight: 600; line-height: 32px; margin-bottom: 14px; text-align: left}
.topWindowInner .formClose {position: absolute; right: 0; top: 0; background-color: # E31D23; border-radius: 50%; width: 28px; height: 28px; -webkit-transform: translate (50%, - 50%); -moz-transform: translate (50%, - 50%); -ms-transform: translate (50%, - 50%); -o-transform: translate (50%, - 50%); transform: translate (50%, - 50%); cursor: pointer}
.topWindowInner .formClose .svgBox {margin-top: 3px;}
.topWindowInner .formClose svg {width: 8px; height: 8px; fill: #fff; stroke: #fff;}
.topWindowInner .formClose: hover {background-color: # d21a20}
.topWindowInner input [type = "text"] ,. topWindowInner input [type = "password"] ,. topWindowInner textarea {width: 100%; display: block; border: 1px solid # b7b7b7; font-family: Roboto, Verdana, sans-serif; padding: 5px 13px; font-size: 14px;}
.topWindowInner input [type = "text"] ,. topWindowInner input [type = "password"] {margin-bottom: 16px; position: relative;}
.topWindowInner input [type = "text"]. error, .topWindowInner input [type = "password"]. error {color: # d21a20; border: 1px solid # d21a20;}
.topWindowInner input [type = "checkbox"] {display: none}
.topWindowInner label {width: 100%; font-family: Roboto, Verdana, sans-serif; font-weight: 400; font-size: 12px; line-height: 1.5; color: # 2d2d2d; margin-bottom: 4px; border-bottom: 1px solid transparent}
.topWindowInner .orderPolitika {padding-top: 10px}
.topWindowInner .orderPolitika a {color: # 428bca}
.topWindowInner .orderPolitika a: hover {color: # 3b9ac3; border-bottom: 1px dotted # 3b9ac3}
.topWindowInner .row {margin-left: -10px; margin-right: -10px;}
.topWindowInner .col-xs-6, .topWindowInner .col-xs-12 {padding-left: 10px; padding-right: 10px;}
.topWindowInner a {color: # e62d19}
.topWindowInner p {color: # 333333; font-family: Verdana, Sans-serif; font-size: 12px}
.topWindowInner hr {margin: 10px 0;}
.topWindowInner input [type = "submit"] {font-weight: 400; font-family: "UbuntuBold"; text-transform: uppercase; text-align: center; padding: 5px 15px; background-color: # 7776ba; outline : 0; box-shadow: none; color: #fff; border: none; border-radius: 3px;}
.topWindowInner input [type = "submit"]: hover {background-color: # 3b9ac3;}
.topWindowInner input, .topWindowInner a, .topWindowInner textarea {-moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s}
.topWindowInner .sRegSubmit {padding: 15px 0; text-align: center}
.topWindowInner .forgetPass {text-align: right; font-size: 12px; margin-top: 20px}
.topWindowInner .forgetPass a {color: # 428bca; border-bottom: 1px dotted # 428bca}
.topWindowInner .forgetPass a: hover {border-bottom: 1px dotted transparent}
.topWindowInner .input-text {border: 1px solid #ebebeb; border-radius: 3px}
.topWindowInner .input-text: hover, .topWindowInner .input-text: focus {max-width: 100%;}
.topWindowInner .input-text: hover, .topWindowInner .input-text: focus {border: 1px solid #fff; -webkit-box-shadow: 0 0 10px 3px # b9e9fa; box-shadow: 0 0 10px 3px # b9e9fa}
.topWindowInner .input-text: focus :: placeholder {color: #dfdede;}
.topWindowInner .input-text :: - webkit-input-placeholder {color: # 808080; font-weight: 400; font-size: 14px; font-family: 'PT Sans Regular', Verdana;}
.topWindowInner .input-text: focus :: - webkit-input-placeholder {color: #dfdede;}
/ * Firefox <19 * /
.topWindowInner .input-text: -moz-placeholder {color: # 808080; font-weight: 400; font-size: 14px; font-family: 'PT Sans Regular', Verdana;}
.topWindowInner .input-text: focus: -moz-placeholder {color: #dfdede;}
/ * Firefox> 19 * /
.topWindowInner .input-text :: - moz-placeholder {color: # 808080; font-weight: 400; font-size: 14px; font-family: 'PT Sans Regular', Verdana;}
.topWindowInner .input-text: focus :: - moz-placeholder {color: #dfdede;}
/ * Internet Explorer 10 * /
.topWindowInner .input-text: -ms-input-placeholder {color: # 808080; font-weight: 400; font-size: 14px; font-family: 'PT Sans Regular', Verdana;}
.topWindowInner .input-text: focus: -ms-input-placeholder {color: #dfdede;}
.js-formDiv {display: none}
.js-formDiv.active {display: block}
.modal-close {position: absolute; top: 12px; right: 24px; cursor: pointer; width: 24px; height: 24px; fill: # 85cceb}
.modal-close: hover {fill: # 15628d}
.modal-close svg {-moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s}
@media all and (max-width: 545px) {
.topWindowInner {min-width: 320px; max-width: 320px; padding: 40px 20px 40px 20px;}
}
.req {color: # d15959}
.check {cursor: pointer; position: relative; margin: auto; width: 18px; height: 18px; -webkit-tap-highlight-color: transparent; transform: translate3d (0, 0, 0);}
.check: before {content: ""; position: absolute; top: -3px; left: -3px; width: 24px; height: 24px; border-radius: 50%; background: rgba (34,50,84,0.03 ); opacity: 0; transition: opacity 0.2s ease;}
.check svg {position: relative; z-index: 1; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: # c8ccd4; stroke-width: 1.5; transform: translate3d (0, 0, 0 ) translateY (3px); transition: all 0.2s ease;}
.check svg path {stroke-dasharray: 60; stroke-dashoffset: 0;}
.check svg polyline {stroke-dasharray: 22; stroke-dashoffset: 66;}
.check: hover: before {opacity: 1;}
.check: hover svg {stroke: # 85cceb;}
#cbx: checked + .check svg, # o0: checked + .check svg, # o1: checked + .check svg, # o2: checked + .check svg, # o3: checked + .check svg, # o4: checked + .check svg, # o5: checked + .check svg, # o6: checked + .check svg, # o7: checked + .check svg
{stroke: # 85cceb;}
#cbx: checked + .check svg path, # o0: checked + .check svg path, # o1: checked + .check svg path, # o2: checked + .check svg path, # o3: checked + .check svg path, # o4: checked + .check svg path, # o5: checked + .check svg path, # o6: checked + .check svg path, # o7: checked + .check svg path
{stroke-dashoffset: 60; transition: all 0.3s linear;}
#cbx: checked + .check svg polyline, # o0: checked + .check svg polyline, # o1: checked + .check svg polyline, # o2: checked + .check svg polyline, # o3: checked + .check svg polyline, # o4: checked + .check svg polyline, # o5: checked + .check svg polyline, # o6: checked + .check svg polyline, # o7: checked + .check svg polyline
{stroke-dashoffset: 42; transition: all 0.2s linear; transition-delay: 0.15s;}
.regForm> .row> .col-xs-6: nth-child (4) {display: none}
.regForm #PHONE {width: 100%}
.js-recovery-form> .row> .col-xs-6: nth-child (1) {display: none}
.clearfix: after {content: ""; display: table; clear: both;}
.alignCenter {text-align: center}
.categoriesList p {margin-bottom: 10px}
.snoska {font-size: 12px; color: # 828282}
.orderPolitika label {display: table}
/*.js-login-form> .row> .col-xs-12: nth-child (1) {display: none} * /
.js-question-form .input-row: nth-child (3) {display: none}
The final result looks like this:
Comments