Category Archives: JS

JS загрузку и обработка файла

document.addEventListener("DOMContentLoaded", function() {
    var progress_cat = 0;
    var progress_file = 0;
    var progress_button = 0;
    var progress_upload = 0;
    var progress_converting = 0;
    var progress_handler = 0;
    document.getElementById('upload').onclick = function() {
        select = parseInt(document.getElementById('category_choose').value);
        name_category = document.getElementById('category_choose').options[document.getElementById('category_choose').options.selectedIndex].text;
        file_value = document.forms.upload_file.elements.file_excel.value;
        if (progressRefresh() >= 60) {
            UIkit.notification({
                message: 'Процесс уже запущен!',
                pos: 'bottom-right',
                status: 'warning'
            });
        } else {
            if (!select) {
                UIkit.notification({
                    message: 'Укажите категорию!',
                    pos: 'bottom-right',
                    status: 'warning'
                });
            } else {
                if (file_value) {
                    UIkit.notification({
                        message: 'Идет загрузка файла...',
                        pos: 'bottom-right',
                        status: 'primary'
                    });
                    progress_button = 20;
                    progressRefresh();
                }
                document.getElementById('spinner').classList.toggle('uk-hidden');
                uploadFile();
            }
        }
        return false;
    }
    document.getElementById('file_excel').onclick = function() {
        select = parseInt(document.getElementById('category_choose').value);
        if (!select) {
            UIkit.notification({
                message: 'Укажите категорию!',
                pos: 'bottom-right',
                status: 'warning'
            });
            return false;
        }
    }
    function uploadFile() {
        var form = document.forms.upload_file;
        var formData = new FormData(form);
        var req = new XMLHttpRequest();
        req.open("POST", 'handler.php');
        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                request = JSON.parse(req.responseText);
                if (request.result) {
                    UIkit.notification({
                        message: request.success,
                        pos: 'bottom-right',
                        status: 'success'
                    });
                    progress_converting = 10;
                    progressRefresh();
                    handlerParse(select, request.name);
                } else {
                    UIkit.notification({
                        message: request.error,
                        pos: 'bottom-right',
                        status: 'danger'
                    });
                    progress_converting = 0;
                    progressRefresh();
                }
            }
        }
        req.upload.onprogress = function(event) {
            progressSuccess = event.loaded * 100 / event.total;
            progressBarUpload(progressSuccess);
        }
        req.send(formData);
    }
    document.getElementById('category_choose').onchange = function() {
        if (this.value > 0) {
            progress_cat = 20;
        } else {
            progress_cat = 0;
        }
        progressRefresh();
    }
    document.getElementById('file_excel').onchange = function() {
        file = document.forms.upload_file.elements.file_excel.value;
        if (file) {
            progress_file = 20;
        } else {
            progress_file = 0;
        }
        progressRefresh();
    }
    function progressBarUpload(progress) {
        UIkit.util.ready(function() {
            var bar = document.getElementById('js-progressbar-uploadFile');
            var divBar = document.getElementById('progress-upload');
            if (!divBar.style.display) {
                divBar.style.display = 'block';
            }
            bar.value = progress;
            if (bar.value >= 100) {
                divBar.style.display = "";
                UIkit.notification({
                    message: 'Файл загружен на сервер...',
                    pos: 'bottom-right',
                    status: 'success'
                });
                progress_upload = 20;
                progressRefresh();
            }
        });
    }
    function progressRefresh() {
        progress = progress_cat +
            progress_file +
            progress_button +
            progress_upload +
            progress_converting +
            progress_handler;
        document.getElementById('js-progressbar').value = progress;
        return progress;
    }
    function handlerParse(group, path) {
        var req = new JsHttpRequest();
        UIkit.notification({
            message: 'Идет обработка файла...',
            pos: 'bottom-right',
            status: 'primary'
        });
        req.open(null, 'handler_update.php', true);
        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                request = JSON.parse(req.responseText);
                if (request.result) {
                    UIkit.notification({
                        message: request.success,
                        pos: 'bottom-right',
                        status: 'success'
                    });
                    progress_handler = 10;
                    progressRefresh();
                    setTimeout(success, 2000);
                } else {
                    UIkit.notification({
                        message: "Произошла ошибка!",
                        pos: 'bottom-right',
                        status: 'danger'
                    });
                    progress_handler = 0;
                    progressRefresh();
                }
            }
        }
        req.send({
            group: group,
            path: path
        });
    }
    function success() {
        name_category = document.getElementById('category_choose').options[document.getElementById('category_choose').options.selectedIndex].text;
        UIkit.modal.alert('Файл загружен и обработан: ' + name_category);
        document.getElementById('category_choose').value = document.getElementById('category_choose').options[0].text;
        document.getElementById('upload_file').reset();
        progress_cat = 0;
        progress_file = 0;
        progress_button = 0;
        progress_upload = 0;
        progress_converting = 0;
        progress_handler = 0;
        document.getElementById('spinner').classList.toggle('uk-hidden');
        progressRefresh();
    }
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

document.addEventListener("DOMContentLoaded", function() {

var progress_cat = 0;

var progress_file = 0;

var progress_button = 0;

var progress_upload = 0;

var progress_converting = 0;

var progress_handler = 0;

document.getElementById('upload').onclick = function() {

select = parseInt(document.getElementById('category_choose').value);

name_category = document.getElementById('category_choose').options[document.getElementById('category_choose').options.selectedIndex].text;

file_value = document.forms.upload_file.elements.file_excel.value;

if (progressRefresh() >= 60) {

UIkit.notification({

message: 'Процесс уже запущен!',

pos: 'bottom-right',

status: 'warning'

});

} else {

if (!select) {

UIkit.notification({

message: 'Укажите категорию!',

pos: 'bottom-right',

status: 'warning'

});

} else {

if (file_value) {

UIkit.notification({

message: 'Идет загрузка файла...',

pos: 'bottom-right',

status: 'primary'

});

progress_button = 20;

progressRefresh();

}

document.getElementById('spinner').classList.toggle('uk-hidden');

uploadFile();

}

return false;

}

document.getElementById('file_excel').onclick = function() {

select = parseInt(document.getElementById('category_choose').value);

if (!select) {

UIkit.notification({

message: 'Укажите категорию!',

pos: 'bottom-right',

status: 'warning'

});

return false;

}

function uploadFile() {

var form = document.forms.upload_file;

var formData = new FormData(form);

var req = new XMLHttpRequest();

req.open("POST", 'handler.php');

req.onreadystatechange = function() {

if (req.readyState == 4) {

request = JSON.parse(req.responseText);

if (request.result) {

UIkit.notification({

message: request.success,

pos: 'bottom-right',

status: 'success'

});

progress_converting = 10;

progressRefresh();

handlerParse(select, request.name);

} else {

UIkit.notification({

message: request.error,

pos: 'bottom-right',

status: 'danger'

});

progress_converting = 0;

progressRefresh();

}

req.upload.onprogress = function(event) {

progressSuccess = event.loaded * 100 / event.total;

progressBarUpload(progressSuccess);

}

req.send(formData);

}

document.getElementById('category_choose').onchange = function() {

if (this.value > 0) {

progress_cat = 20;

} else {

progress_cat = 0;

}

progressRefresh();

}

document.getElementById('file_excel').onchange = function() {

file = document.forms.upload_file.elements.file_excel.value;

if (file) {

progress_file = 20;

} else {

progress_file = 0;

}

progressRefresh();

}

function progressBarUpload(progress) {

UIkit.util.ready(function() {

var bar = document.getElementById('js-progressbar-uploadFile');

var divBar = document.getElementById('progress-upload');

if (!divBar.style.display) {

divBar.style.display = 'block';

}

bar.value = progress;

if (bar.value >= 100) {

divBar.style.display = "";

UIkit.notification({

message: 'Файл загружен на сервер...',

pos: 'bottom-right',

status: 'success'

});

progress_upload = 20;

progressRefresh();

}

});

}

function progressRefresh() {

progress = progress_cat +

progress_file +

progress_button +

progress_upload +

progress_converting +

progress_handler;

document.getElementById('js-progressbar').value = progress;

return progress;

}

function handlerParse(group, path) {

var req = new JsHttpRequest();

UIkit.notification({

message: 'Идет обработка файла...',

pos: 'bottom-right',

status: 'primary'

});

req.open(null, 'handler_update.php', true);

req.onreadystatechange = function() {

if (req.readyState == 4) {

request = JSON.parse(req.responseText);

if (request.result) {

UIkit.notification({

message: request.success,

pos: 'bottom-right',

status: 'success'

});

progress_handler = 10;

progressRefresh();

setTimeout(success, 2000);

} else {

UIkit.notification({

message: "Произошла ошибка!",

pos: 'bottom-right',

status: 'danger'

});

progress_handler = 0;

progressRefresh();

}

req.send({

group: group,

path: path

});

}

function success() {

name_category = document.getElementById('category_choose').options[document.getElementById('category_choose').options.selectedIndex].text;

UIkit.modal.alert('Файл загружен и обработан: ' + name_category);

document.getElementById('category_choose').value = document.getElementById('category_choose').options[0].text;

document.getElementById('upload_file').reset();

progress_cat = 0;

progress_file = 0;

progress_button = 0;

progress_upload = 0;

progress_converting = 0;

progress_handler = 0;

document.getElementById('spinner').classList.toggle('uk-hidden');

progressRefresh();

}

});

Валидация JS

Валидация email

function validationEmail(email) {
    pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;

    return pattern.test(email.val());
}

function validationEmail(email) {

pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;

return pattern.test(email.val());

}

Добавление custom form + bitrix add Element

У нас есть форма

<div class="services_form_right">
	<form class="services_form" id="paving_and_laying">
		<input type="text" name="name" placeholder="Имя">
		<input type="email" name="email" placeholder="E-mail">
		<input type="tel" name="phone" placeholder="Телефон">
		<textarea name="message" placeholder="Комментарий к заказу"></textarea>
		<div class="box_agree">
			<input type="checkbox" name="agree" id="agree" class="checkbox">
			<label for="agree" class="check">Даю согласие на обработку персональных данных</label>
		</div>
		<div class="services_btn">
			<button type="submit" class="btn">Расчитать заказ</button>
		</div>
	</form>
</div>

<label for="agree" class="check">Даю согласие на обработку персональных данных</label>

</div>

<button type="submit" class="btn">Расчитать заказ</button>

</div>

</form>

</div>

js’ка

$("form#paving_and_laying").on('submit', function(event){
    event.preventDefault();
    form = $(this);

    $.ajax({
        type: "POST",
        url: "/make.php",
        data: $(this).serializeArray(),
        success: function(msg) {
            json = $.parseJSON(msg);
            form.find('.requiredInputError').removeClass('requiredInputError');

            if (json.result) {
                form.parent('.services_form_right').addClass('success').html(json.msg);
                form.remove();
            } else {
                if (json.errors) {
                    json.errors.forEach(function(item) {
                        if (item == 'agree') {
                            form.children('div').children('label').addClass('requiredInputError');
                        } else if (item == 'message') {
                            form.children('textarea[name="message"]').addClass('requiredInputError');
                        } else {
                            form.children('input[name="' + item + '"]').addClass('requiredInputError');
                        }
                    });
                } else {
                    alert(json.msg);
                }
            }
        }
    });
});

$("form#paving_and_laying").on('submit', function(event){

event.preventDefault();

form = $(this);

$.ajax({

type: "POST",

url: "/make.php",

data: $(this).serializeArray(),

success: function(msg) {

json = $.parseJSON(msg);

form.find('.requiredInputError').removeClass('requiredInputError');

if (json.result) {

form.parent('.services_form_right').addClass('success').html(json.msg);

form.remove();

} else {

if (json.errors) {

json.errors.forEach(function(item) {

if (item == 'agree') {

form.children('div').children('label').addClass('requiredInputError');

} else if (item == 'message') {

form.children('textarea[name="message"]').addClass('requiredInputError');

} else {

form.children('input[name="' + item + '"]').addClass('requiredInputError');

}

});

} else {

alert(json.msg);

}

});

Файл make.php

<?php

$name 			= $_REQUEST['name'];
$email 			= $_REQUEST['email'];
$phone 			= $_REQUEST['phone'];
$message 		= $_REQUEST['message'];
$agree			= isset($_REQUEST['agree']);

$errors			= false;

$requiredFields = ['name', 'email', 'phone', 'agree', 'message'];
$errorFields	= [];
// проверяем обязательные поля
foreach($requiredFields as $field){
	if (!$_REQUEST[$field]){
		array_push($errorFields, $field);
		$errors = true;
	}
}

if (!$errors) :
	$subjectuser  = "Сообщение";
	$headersuser  = "From: Сообщение\r\n";
	$headersuser .= "Reply-To: ". strip_tags($name) . "\r\n";
	$headersuser .= "MIME-Version: 1.0\r\n";
	$headersuser .= "Content-Type: text/html;charset=utf-8 \r\n";
	         
	$my_message = 	"<h1>ТЕМА</h1><br/>";
	$my_message .= 	"Имя: {$name}<br/>";

	if ($phone){ $my_message 	.= 	"Телефон: {$phone}<br />"; }
	if ($email){ $my_message 	.= 	"E-mail: {$email}<br />"; }
	if ($message){ $my_message 	.= 	"Комментарий: <br>" . $message . "<hr/>"; }
		
	$my_message .= 	"Время заказа: " . date('H:i:s d.m.Y');
	 
	require_once($_SERVER['DOCUMENT_ROOT'] . '/include/libs/PHPMailer/class.phpmailer.php'); //Подключаем PHPMailer

	$mail = new PHPMailer(true); 					//New instance, with exceptions enabled
	$mail->CharSet = "UTF-8";
	$mail->IsSMTP(); 								// telling the class to use SMTP
	$mail->Host       = "smtp.yandex.ru"; 			// SMTP server
	$mail->SMTPDebug  = 0;                     		// enables SMTP debug information (for testing)
	$mail->SMTPAuth   = true;                  		// enable SMTP authentication
	$mail->Port       = 465;                    	// set the SMTP port for the GMAIL server
	$mail->SMTPSecure = 'ssl';                 		// Secure SMTP
	$mail->Username   = 'from@matveevs,ru'; 	// SMTP account username
	$mail->Password   = "fromPassword";        			// SMTP account password
	$mail->SetFrom('from@matveevs,ru', 'site.ru');
	$mail->AddReplyTo('from@matveevs,ru','site.ru');
	$mail->Subject    = "Сообщение с сайта site.ru";
	$mail->AltBody    = "To view the message, please use an HTML compatible email viewer!"; // optional, comment out and test
	$mail->MsgHTML($my_message);
	$address = 'to@matveevs.ru';
	$mail->AddAddress($address, "User");
	$mail->CharSet="UTF-8";

	$mail->IsHTML(true); // send as HTML

	if(!$mail->Send()) :
		$res = Array(
			"result" 	=> false,
			"msg" 		=> "Ошибка отправления"
		);
	else:
		$res = Array(
			"result" 	=> true,
			"msg" 		=> "Спасибо! Ваша заявка отправлена"
		);

		require $_SERVER["DOCUMENT_ROOT"] . '/addToBitrix.php';

	endif;
else:
	$res = Array(
		"result" 	=> false,
		"msg" 		=> "Ошибка: заполните все поля формы",
		"errors" 	=> $errorFields
	);
endif;

	echo json_encode($res, JSON_UNESCAPED_UNICODE);

<?php

$name = $_REQUEST['name'];

$email = $_REQUEST['email'];

$phone = $_REQUEST['phone'];

$message = $_REQUEST['message'];

$agree = isset($_REQUEST['agree']);

$errors = false;

$requiredFields = ['name', 'email', 'phone', 'agree', 'message'];

$errorFields = [];

// проверяем обязательные поля

foreach($requiredFields as $field){

if (!$_REQUEST[$field]){

array_push($errorFields, $field);

$errors = true;

}

if (!$errors) :

$subjectuser = "Сообщение";

$headersuser = "From: Сообщение\r\n";

$headersuser .= "Reply-To: ". strip_tags($name) . "\r\n";

$headersuser .= "MIME-Version: 1.0\r\n";

$headersuser .= "Content-Type: text/html;charset=utf-8 \r\n";

$my_message = "<h1>ТЕМА</h1><br/>";

$my_message .= "Имя: {$name}<br/>";

if ($phone){ $my_message .= "Телефон: {$phone}<br />"; }

if ($email){ $my_message .= "E-mail: {$email}<br />"; }

if ($message){ $my_message .= "Комментарий: <br>" . $message . "<hr/>"; }

$my_message .= "Время заказа: " . date('H:i:s d.m.Y');

require_once($_SERVER['DOCUMENT_ROOT'] . '/include/libs/PHPMailer/class.phpmailer.php'); //Подключаем PHPMailer

$mail = new PHPMailer(true); //New instance, with exceptions enabled

$mail->CharSet = "UTF-8";

$mail->IsSMTP(); // telling the class to use SMTP

$mail->Host = "smtp.yandex.ru"; // SMTP server

$mail->SMTPDebug = 0; // enables SMTP debug information (for testing)

$mail->SMTPAuth = true; // enable SMTP authentication

$mail->Port = 465; // set the SMTP port for the GMAIL server

$mail->SMTPSecure = 'ssl'; // Secure SMTP

$mail->Username = 'from@matveevs,ru'; // SMTP account username

$mail->Password = "fromPassword"; // SMTP account password

$mail->SetFrom('from@matveevs,ru', 'site.ru');

$mail->AddReplyTo('from@matveevs,ru','site.ru');

$mail->Subject = "Сообщение с сайта site.ru";

$mail->AltBody = "To view the message, please use an HTML compatible email viewer!"; // optional, comment out and test

$mail->MsgHTML($my_message);

$address = 'to@matveevs.ru';

$mail->AddAddress($address, "User");

$mail->CharSet="UTF-8";

$mail->IsHTML(true); // send as HTML

if(!$mail->Send()) :

$res = Array(

"result" => false,

"msg" => "Ошибка отправления"

);

else:

$res = Array(

"result" => true,

"msg" => "Спасибо! Ваша заявка отправлена"

);

require $_SERVER["DOCUMENT_ROOT"] . '/addToBitrix.php';

endif;

else:

$res = Array(

"result" => false,

"msg" => "Ошибка: заполните все поля формы",

"errors" => $errorFields

);

endif;

echo json_encode($res, JSON_UNESCAPED_UNICODE);

addToBitrix.php

<?php
require $_SERVER["DOCUMENT_ROOT"] . '/bitrix/modules/main/include/prolog_before.php';
CModule::IncludeModule("catalog");

$el = new CIBlockElement;

$PROP = array(
    "NAME"            => $name,
    "PHONE"           => $phone,
    "EMAIL"           => $email,
    "MESSAGE"         => $message
);

$arFields = array(
    "IBLOCK_ID"         => 10,
    "IBLOCK_SECTION_ID" => false,
    "NAME"              => $name,
    "PROPERTY_VALUES"   => $PROP,
    "ACTIVE"            => "Y",
);

$el->Add($arFields);

<?php

require $_SERVER["DOCUMENT_ROOT"] . '/bitrix/modules/main/include/prolog_before.php';

CModule::IncludeModule("catalog");

$el = new CIBlockElement;

$PROP = array(

"NAME" => $name,

"PHONE" => $phone,

"EMAIL" => $email,

"MESSAGE" => $message

);

$arFields = array(

"IBLOCK_ID" => 10,

"IBLOCK_SECTION_ID" => false,

"NAME" => $name,

"PROPERTY_VALUES" => $PROP,

"ACTIVE" => "Y",

);

$el->Add($arFields);

Minishop 2 ModX добавить товар в корзину AJAX

// https://modx.ru/vopros-otvet/info/1890/
// https://docs.modx.pro/components/minishop2/development/service/connection
// https://docs.modx.pro/components/minishop2/development/service/basket
var CustomBasket = {
	add : function (id, size){
		$.ajax({
			type: "POST",
			url: "/assets/components/minishop2/action.php",
			data: "id=" + id + "&count=1&options[size]=" + size + "&ms2_action=cart/add&ctx=web",
			success: function(msg){
				json = $.parseJSON(msg);
				CustomBasket.countMobileBasket(json.data.total_count);
				console.log("Добавлен товар: " + id + " " + size);
			}
		});
	},

	countMobileBasket : function(countElement){
		$('#msMiniCartMobile a.quickview.link_order').html(countElement);
	}
};

// https://modx.ru/vopros-otvet/info/1890/

// https://docs.modx.pro/components/minishop2/development/service/connection

// https://docs.modx.pro/components/minishop2/development/service/basket

var CustomBasket = {

add : function (id, size){

$.ajax({

type: "POST",

url: "/assets/components/minishop2/action.php",

data: "id=" + id + "&count=1&options[size]=" + size + "&ms2_action=cart/add&ctx=web",

success: function(msg){

json = $.parseJSON(msg);

CustomBasket.countMobileBasket(json.data.total_count);

console.log("Добавлен товар: " + id + " " + size);

}

});

countMobileBasket : function(countElement){

$('#msMiniCartMobile a.quickview.link_order').html(countElement);

}

};

Событие на клик для мобильного устройства

var activeElement 	= null;
var isMobileMode	= false;
var MobileClick 	= false;
/**
 * mobile detected function
 * @return Boolean isMobile/true||isMobile/false
 */
window.isMobileOrTablet = function() {
	var check = false;
	(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
	return check;
}
/**
 * If mobile Device var isMobile set True
 */
if(isMobileOrTablet()) {
	console.log('Вы зашли с мобильного устройства');
	isMobileMode = true;
} else {
	console.log('Вы с desktop');
}

console.log(isMobileMode + ' моб');
if (isMobileMode){
	$('button.btn.js_add_swimwear').click(function(event){
		if (!MobileClick){
			event.preventDefault();

			if ($('#' + activeElement + ' .size-list .size-item').hasClass('active')){
				if (!$('.mobile_popup').hasClass('active')){
					$('.mobile_popup').addClass('active').show();
			    	$('.t_popup').hide();
			    	$('#' + url_id_target).hide();

					id 		= $('#' + activeElement + ' form.form-horizontal.ms2_form input[name="id"]').val();
					size 	= $('#' + activeElement + ' form.form-horizontal.ms2_form input[name="options[size]"]').val();
					CustomBasket.add(id, size);
					console.log(id + ' ' + size);
				}
			}

			console.log('mobile click!');
		}
	});
	console.log('mobile');
}

var activeElement = null;

var isMobileMode = false;

var MobileClick = false;

/**

* mobile detected function

* @return Boolean isMobile/true||isMobile/false

window.isMobileOrTablet = function() {

var check = false;

return check;

}

/**

* If mobile Device var isMobile set True

if(isMobileOrTablet()) {

console.log('Вы зашли с мобильного устройства');

isMobileMode = true;

} else {

console.log('Вы с desktop');

}

console.log(isMobileMode + ' моб');

if (isMobileMode){

$('button.btn.js_add_swimwear').click(function(event){

if (!MobileClick){

event.preventDefault();

if ($('#' + activeElement + ' .size-list .size-item').hasClass('active')){

if (!$('.mobile_popup').hasClass('active')){

$('.mobile_popup').addClass('active').show();

$('.t_popup').hide();

$('#' + url_id_target).hide();

id = $('#' + activeElement + ' form.form-horizontal.ms2_form input[name="id"]').val();

size = $('#' + activeElement + ' form.form-horizontal.ms2_form input[name="options[size]"]').val();

CustomBasket.add(id, size);

console.log(id + ' ' + size);

}

console.log('mobile click!');

}

});

console.log('mobile');

}

JS определить с мобильного устройства пользователь или нет

Для определения с мобильного устройства пользователь зашел на сайт или нет можно следующим говноКодом

window.isMobileOrTablet = function() {
	var check = false;
	(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
	return check;
}

window.isMobileOrTablet = function() {

var check = false;

return check;

}

Проверить

if(isMobileOrTablet()) {
   console.log('Вы зашли с мобильного устройства');
} else {
	console.log('Вы с desktop');
}

if(isMobileOrTablet()) {

console.log('Вы зашли с мобильного устройства');

} else {

console.log('Вы с desktop');

}

Firefox 59 бага bxslider

В firefox с выходом версии 59, перестало срабатывать javascript/jQuery событие click в плагине bxslider? Отрываем jquery.bxslider.js находим строку ~#1111

if (slider.viewport.get(0).setPointerCapture) {
	slider.pointerId = orig.pointerId;
	slider.viewport.get(0).setPointerCapture(slider.pointerId);
}

if (slider.viewport.get(0).setPointerCapture) {

slider.pointerId = orig.pointerId;

slider.viewport.get(0).setPointerCapture(slider.pointerId);

}

Меняем на

if (slider.viewport.get(0).setPointerCapture) {
	slider.pointerId = orig.pointerId;
	if(slider.pointerId === 1){
		slider.viewport.get(0).setPointerCapture(slider.pointerId);
	}
}

if (slider.viewport.get(0).setPointerCapture) {

slider.pointerId = orig.pointerId;

if(slider.pointerId === 1){

slider.viewport.get(0).setPointerCapture(slider.pointerId);

}

Или Скачать исправленную версию. p.s.: если сделать событие mousedown то будет работать) но лучше lib’у править Проблема на GitHub.

iphone/ios click event

Iphone/ios click event Событие клик на iphone не работает?

$(document).on('click', '.p_cab_mob', function() {
    $(this).toggleClass('open_h5');
    $(this).parent().parent().toggleClass('open');
});

$(document).on('click', '.p_cab_mob', function() {

$(this).toggleClass('open_h5');

$(this).parent().parent().toggleClass('open');

});

Есть 2 варианта решения этой проблемы #1 С добавление event touchstart

$(document).on('click touchstart', '.p_cab_mob h5', function() {
    $(this).toggleClass('open_h5');
    $(this).parent().parent().toggleClass('open');
});

$(document).on('click touchstart', '.p_cab_mob h5', function() {

$(this).toggleClass('open_h5');

$(this).parent().parent().toggleClass('open');

});

#2 Событие click

$('.p_cab_mob h5').click(function(){
    $(this).toggleClass('open_h5');
    $(this).parent().parent().toggleClass('open');
});

$('.p_cab_mob h5').click(function(){

$(this).toggleClass('open_h5');

$(this).parent().parent().toggleClass('open');

});

Проверить разрешен ли flash у пользователя

function checkFlash() {
	var flashinstalled = false;
	if (navigator.plugins) {
		if (navigator.plugins["Shockwave Flash"]) {
			flashinstalled = true;
		}
		else if (navigator.plugins["Shockwave Flash 2.0"]) {
			flashinstalled = true;
		}
	}
	else if (navigator.mimeTypes) {
		var x = navigator.mimeTypes['application/x-shockwave-flash'];
		if (x && x.enabledPlugin) {
			flashinstalled = true;
		}
	}
	else {
		// на всякий случай возвращаем true в случае некоторых экзотических браузеров
		flashinstalled = true;
	}
	return flashinstalled;
}

function checkFlash() {

var flashinstalled = false;

if (navigator.plugins) {

if (navigator.plugins["Shockwave Flash"]) {

flashinstalled = true;

}

else if (navigator.plugins["Shockwave Flash 2.0"]) {

flashinstalled = true;

}

else if (navigator.mimeTypes) {

var x = navigator.mimeTypes['application/x-shockwave-flash'];

if (x && x.enabledPlugin) {

flashinstalled = true;

}

else {

// на всякий случай возвращаем true в случае некоторых экзотических браузеров

flashinstalled = true;

}

return flashinstalled;

}

Флеш/flash для браузера клиента, если не разрешен то функция вернет false, если разрешен вернет true Пример

	brow = false;
	if (navigator.userAgent.match(/Chrome/i) || navigator.userAgent.match(/Safari/i)){
		brow = true;
	}
    if (document.location.pathname == "/video" && !checkFlash() && brow){
    	$('#swf_lessons').html('<object width="550" height="400">\
					<param name="movie" value="/lessons/my.swf">\
					<embed src="/lessons/my.swf" width="550" height="400">\
					</embed>\
				</object>');
    }

brow = false;

if (navigator.userAgent.match(/Chrome/i) || navigator.userAgent.match(/Safari/i)){

brow = true;

}

if (document.location.pathname == "/video" && !checkFlash() && brow){

$('#swf_lessons').html('<object width="550" height="400">\

<param name="movie" value="/lessons/my.swf">\

</embed>\

</object>');

}

Google eCommerce/Google Analytics

/**
 * Работа с Google Ecommerce
 */
var GoogleAnalytics = {
    /**
     * Детальная страница
     * @param  integer id       идентификатор товара
     * @param  string name     Название товара
     * @param  string category Категория товара
     * @return null          Отправка данных в GA
     */
    viewDetailItem: function(id, name, category){
        ga('ec:addProduct', {
          'id': id,
          'name': name,
          'category': category
        });

        ga('ec:setAction', 'detail');
        ga('send', 'pageview');  // Отправляем данные
    },
    /**
     * Добавление/удаление товара в корзине
     * @param integer id       id товара
     * @param string name     наименование товара
     * @param string category категория товара
     * @param integer price    цена товара
     * @param integer type     тип событие 0-добавление, 1 удаление
     */
    EventItemBasket: function(id, name, category, price, type){
        type_event = type == 0 ? 'add' : 'remove';

        ga('ec:addProduct', {
            'id': id,
            'name': name,
            'category': category,
            'price': price,
            'quantity': 1
        });

        ga('ec:setAction', type_event);
        event = type == 0 ? "Добавил в корзину" : "Удалил товар из корзины";

        ga('send', 'event', 'Корзина', event, 'Клик в карточке товара');     // Send data using an event.
    },
    /**
     * Отправка содержимого корзины
     * @param  array arr         json Массив
     * @param  integer total_price финальная стоимость заказа
     * @param  string id          basket session
     * @return NULL            отправляем все это в гугл
     */
    eventBasketSend: function(arr, total_price, id){
        items = JSON.parse(arr);
        
        items.forEach(function(key, value){
            element_id  = key.elem_id;
            quantity    = key.quantity;
            price       = key.price;
            title       = key.site_title;

            ga('ec:addProduct', {
              'id': element_id,
              'name': title,
              'price': price,
              'quantity': quantity
            });
            
        });

        ga('ec:setAction', 'purchase', {
          'id': id,
          'affiliation': 'site.ru',
          'revenue': total_price
        });

        ga('send', 'pageview');
    }

};

/**

* Работа с Google Ecommerce

var GoogleAnalytics = {

/**

* Детальная страница

* @param integer id идентификатор товара

* @param string name Название товара

* @param string category Категория товара

* @return null Отправка данных в GA

viewDetailItem: function(id, name, category){

ga('ec:addProduct', {

'id': id,

'name': name,

'category': category

});

ga('ec:setAction', 'detail');

ga('send', 'pageview'); // Отправляем данные

/**

* Добавление/удаление товара в корзине

* @param integer id id товара

* @param string name наименование товара

* @param string category категория товара

* @param integer price цена товара

* @param integer type тип событие 0-добавление, 1 удаление

EventItemBasket: function(id, name, category, price, type){

type_event = type == 0 ? 'add' : 'remove';

ga('ec:addProduct', {

'id': id,

'name': name,

'category': category,

'price': price,

'quantity': 1

});

ga('ec:setAction', type_event);

event = type == 0 ? "Добавил в корзину" : "Удалил товар из корзины";

ga('send', 'event', 'Корзина', event, 'Клик в карточке товара'); // Send data using an event.

/**

* Отправка содержимого корзины

* @param array arr json Массив

* @param integer total_price финальная стоимость заказа

* @param string id basket session

* @return NULL отправляем все это в гугл

eventBasketSend: function(arr, total_price, id){

items = JSON.parse(arr);

items.forEach(function(key, value){

element_id = key.elem_id;

quantity = key.quantity;

price = key.price;

title = key.site_title;

ga('ec:addProduct', {

'id': element_id,

'name': title,

'price': price,

'quantity': quantity

});

ga('ec:setAction', 'purchase', {

'id': id,

'affiliation': 'site.ru',

'revenue': total_price

});

ga('send', 'pageview');

}

};

Документация Код гугл аналитики вставить перед </head>

<!-- Google Analytics -->
<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-1', 'site.ru');
ga('send', 'pageview');
ga('require', 'ec');
</script>
<!-- End Google Analytics -->

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-1', 'site.ru');

ga('send', 'pageview');

ga('require', 'ec');

</script>

js Скролл модального окна

$('#t_popup').scroll(function(){
    pop_img_cont = $('#popup_static').height();
    fix = $('.popup_fixed');
    elem = Math.abs($(".c-popup").offset().top) + 590;

    top1 = pop_img_cont - 590;

    if (elem >= pop_img_cont){
      console.log('trigger');
      fix.css({position : "relative", top : top1});
    } else {
      fix.css({position : "fixed", top : "unset"});
      console.log('wait');
    }
  });

$('#t_popup').scroll(function(){

pop_img_cont = $('#popup_static').height();

fix = $('.popup_fixed');

elem = Math.abs($(".c-popup").offset().top) + 590;

top1 = pop_img_cont - 590;

if (elem >= pop_img_cont){

console.log('trigger');

fix.css({position : "relative", top : top1});

} else {

fix.css({position : "fixed", top : "unset"});

console.log('wait');

}

});

scroll modal window скроль модального окна