И так, снова всех приветствую на проекте RootHelp.ru и сегодня будет рассмотрена одна из актуальных тем, которая возможно Вам пригодиться для своего сайта, а может быть и просто решите переписать код, ведь сам по себе он получился гибким и имеется базовый функционал. В общем, я решил написать калькулятор расчета стоимости товаров, код которого сегодня полностью весь рассмотрим, а также я подробно все расскажу и объясню.
Сразу хочу отметить, что если вдруг у Вас возникнут какие-либо вопросы или вдруг в чем то не разбираетесь, а может захотите заказать такой же аналогичный калькулятор, но с другим функционалом, то пишите в наше сообщество VK или мне лично, сможем рассмотреть любые детали и обговорить уже конкретно любой вопрос! А пока что, давайте приступим к рассмотрению самого кода.
В данном уроке, я не буду заниматься оформлением каскадными стилями CSS самого скрипта калькулятора, так как не вижу в этом ничего особенного, ведь Вы все равно будите его по любому изменять и править код под себя, а также оформлять и стилизовать, поэтому сразу перейдем только к целевой направленности скрипта, а именно к его базовому функционалу.
И начнем, мы пожалуй, так как у нас скрипт написан на jQuery, то с подключения самой библиотеки, а также не забудем и про сам скрипт calc.js.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/calc.js"></script>
Теперь, переходим к блокам и тут я остановлюсь на каждом моменте по подробнее. Для самих товаров создадим теги input, в которых в обязательном порядке будем все значения обрабатывать data-атрибутами, а те в свою очередь, синхронно при взаимодействии с calc.js выбирают и подсчитывают значения. Не забываем также про сам класс, в данном случае у нас он будет называться id, поле name может быть любым, но по стандартам HTML лучше уж ему давать каждому свое уникальное название. Ну и понятное дело, если у нас не один товар, а много, то type будет checkbox, а не radio.
<input type="checkbox" name="lakirov1" class="id" data-check="100"> <input type="checkbox" name="lakirov2" class="id" data-check="150"> <input type="checkbox" name="lakirov3" class="id" data-check="200">
Переходим к выбору размера, а именно подсчета квадратных метров для товаров. Исходя из соображений, квадратные метры подсчитываются сразу ко всем товарам, а не конкретно к одному. В данном случае, из всех свойств будет обязательным считаться только сам класс razmer. По поводу select, могу также отметить, наличие идентификатора gorod, все остальные свойства не столь важны. Данный select, как Вы уже возможно догадались, выбирает город доставки, который имеет каждую свою уникальную стоимость.
<input type="text" value="" class="razmer" name="razmer" placeholder="Введите размер"> <select name="gorod" id="gorod"> <option value="0">Не важно</option> <option value="300">Москва</option> <option value="800">Санкт-Петербург</option> <option value="1200">Воронеж</option> </select>
Следующий input, у нас особенный, ведь он предназначен для скидки, которая по умолчанию будет - 20% от общей стоимости расчета товаров. Могу отметить, что класс и название обязательны!
<input type="text" value="" class="kypon" name="kyp" placeholder="Введите код купона">
Далее идет срок гарантии, я на выбор предоставил 1 год и 2 года, отрабатывают они у нас по input, с type radio и обязательным именем garant, и опять же возвращаясь к data-атрибутам, значение подсчета берется по ним.
<input type="radio" checked name="garant" data-check="10"> <input type="radio" name="garant" data-check="20">
И последнее, что у нас осталось рассмотреть, так это подсчет всей суммы, которая будет выводиться в конце нашего документа. Для этого я создал идентификатор summ, который поместил в блочный элемент div и все выводил. Вы же, конечно можете сделать все по своему, так как вариантов масса, к примеру взять тот же самый тег span.
<div id="summ">0 руб</div>
Ну что ж, переходим к самому главному, а точнее к самому функционалу нашего калькулятора расчета стоимости товаров для сайта, и первым делом нам нужно переопределить переменные, которые начинают отработку сразу после загрузки веб страницы. Для этого, собственно говоря, прописываем их с указанием нужных нам по стандарту значений.
var razmer=1, garant=10, lakirov=0; gorod=0, check=0, kyp = '2301', skidka = 0;
Как видим, что размер кв.м. указан по умолчанию 1 квадратный метр, так как не может быть такого, что мы выбираем какой-то линолеум и он равняется 0 кв.м., надеюсь Вы меня поняли о чем я. Далее у нас идет гарантия и по умолчанию 1 год гарантии стоит 10 руб., 2 года, соответственно, 20 руб. (По поводу стоимости и курса, я брал рандомные значения, главное чтобы Вам было понятно). Еще одна интересная переменная это kyp и значение 2301, означает, собственно говоря, код купона на скидку.
Теперь переходим к подсчету самих товаров и тут главное понимать, что все товары между собой пересчитываются способом прибавления друг к другу. Для этого по нажатию на каждый checkbox, происходит пересчет общей суммы. По умолчанию, пока не один checkbox не был выделен, свойство стоит на check = 0 в нулевом значений. С помощью метода change, идет обработка и пересчет товаров. После чего у каждой функции идет инициализация и пересчет данной суммы. За это отвечает функция summ();.
$('.id').on('change', function(){
check = 0;
$('input:checkbox:checked').each(function(){
if($(this).prop("checked")){
check = Number(check) + Number( $(this).data('check') );
}
});
summ();
});
Переходим к подсчету размера квадратных метров и тут главное понимать, что нельзя в поле input вводить все значения, кроме целых числовых. Для этого нам нужно в принципе то и будет сделать на это запрет. Для этого обратимся к названию тега input и с помощью события keypress сделаем запрет.
$('input.razmer').on('keyup keypress', function(e) {
var letters=' 1234567890';
return (letters.indexOf(String.fromCharCode(e.which))!=-1);
});
А теперь можем перейти к подсчету и тут важно знать, что перед его началом должно быть подставлено определенное значение по размеру, в данном случае, это 1 квадратный метр. Как уже повторялся выше, не может быть выбран товар с нулевым значением по размеру. После чего мы просто подсчитываем сам размер и синхронизацией подсчетом товаров, данное свойство преобразуется в умножение, после чего мы получаем нужную сумму товара. Опять же не забываем про инициализацию функции summ();
$('input.razmer').on('input keyup', function(e) {
razmer = 1;
$('input.razmer').each(function(){
num = Number($(this).val());
if(num == 0){
num = 1;
}
razmer = Number(razmer) * num;
});
summ();
});
Затем давайте займемся подсчетом по городу доставки, тут намного все проще и легче. Для этого нужно просто с помощью метода change изменять значения, после чего опять же инициализировать все в функцию summ();
$("#gorod").change(function(){
gorod = $('#gorod').val();
summ();
});
Практически в любом интернет-магазине, имеется купон на скидку, в данном случае я тоже решил в наш скрипт это добавить. Для этого я отталкивался от двух значений. Это код купона после чего должен сработать подсчет, а также размер процентной ставки с вычетом от суммы всех товаров. В название kyp я записал код, а в skidka процент скидки, в данном случае - 20%.
$('input.kypon').on('input keyup', function(e) {
key = $('input.kypon').val();
if(key == kyp){
skidka = 20;
}else{
skidka = 0;
}
summ();
});
Также можно рассчитать и гарантию. По умолчанию у нас стоит она на первом значении, на 1 год. Если мы меняем данное значение по названию garant, то соответственно, сумма тоже меняется. Расчет производится по методу change, который мы уже ни раз использовали до этого. Прибавляя все значения мы получаем нужный нам результат.
$("input[name='garant']").change(function() {
if ($("input[name='garant']").prop("checked")) {
garant = $(this).data('check');
} else {
garant = $(this).data('check');
}
summ();
});
Но, а теперь, переходим к самому главному, к подсчету всех значений, которые будут рассчитаны по формуле для нашего скрипта. Для этого создаем функцию summ и в нее помещаем все переменные уже по которым был проведен подсчет. После чего каждое из значений мы подсчитываем по формуле:
Доставка по городу + Гарантия + Все товары * Размер в кв.м. - скидку - 20% = руб.
function summ(){
razmer = Number(razmer);
garant = Number(garant);
lakirov = Number(check);
gorod = Number(gorod);
skidka = Number(skidka);
$("#summ").text(gorod+garant+lakirov*razmer - (skidka / 100 * (gorod+garant+lakirov*razmer))+ ' руб.' );
};
В общем, такой вот у нас получился калькулятор, надеюсь он Вам пригодится или возможно даст первый толчок к написанию своего калькулятора, ведь частенько бывают случаи, когда ищешь простую вещь, а толком найти ничего не можешь или объяснить правильно не могут. Надеюсь, я смог данный материал, скажем так разжевать и донести до Вас с правильной позиции. Если Вам потребуется разработка аналогичного калькулятора, пишите, всегда на связи! А на этом, я с Вами прощаюсь, до новых встреч друзья!