Вы здесь
Главная > Мой блог > WEB-разработка > Калькулятор цен для потенциальных клиентов

Калькулятор цен для потенциальных клиентов

Хороший онлайн калькулятор цен, для клиентов. Все потому, что просто надоело каждому считать отдельно. Что будет в нашем калькуляторе:

  1. Быстрая загрузка определенной формы для каждого типа сайта;
  2. Быстрый подсчет общей суммы в зависимости от стоимости выбранного модуля (с учетом НДС и без);
demosourse

Для начала структура главной страницы (index.html):

01 <div id="full_calc">
02  <form>
03  <div id="type_of_site">
04   <p>Выберите тип сайта</p>
05    <p>
06    <select id="type_site">
07     <option value='0'>Выберите тип сайта</option>
08     <option value='1'>Визитка</option>
09     <option value='2'>Корпоративный</option>
10    </select>
11   </p>
12  </div>
13  <p id="tipus"></p>
14  <div id="config_site">
15  </div>
16  </form>
17 </div>
18 <p id="summ">Стоимость сайта: <strong><span></span></strong> р.</p><br><p id="summ_nds">Стоимость сайта для организаций плательщиков НДС: <strong><span></span></strong> р.</p>

В зависимости от того, какой пункт выберет пользователь из select с идентификатором type_site, будет загружена соответствующая форма в блок config_site. В абзацы с идентификаторами summ и summ_nds будут загружаться в область span итоговые суммы.

Теперь посмотрим на обработчик (под именем fullform.php), который будет формировать формы:

001 <?
002 if (isset($_POST["option"])) {
003  $option = $_POST["option"];
004   
005    if ($option == 1) {
006      print '
007         <h3>Сайт визитка</h3>
008          <div id="design">
009           <p><strong>Дизайн:</strong></p>
010           <p><input checked disabled type="checkbox" name="" value="6000">Шаблон (6000 р.) <br>
011           <span>Шаблон рисуется на основании составленного брифа и соответствует требованиям заказчика.</span></p>
012                    
013           <p><input checked disabled type="checkbox" name="" value="4500">HTML-верстка (4500 р.) <br>
014           <span>На основании утвержденного шалона создается рабочий макет.</span></p>
015                             
016           <p><input type="checkbox" name="" value="1500">Разработка логотипа (1500 р.) <br>
017           <span>Логотип разрабатывается исходя из предпочтений заказчика.</span></p>
018                                      
019           <p><input type="checkbox" name="" value="3000">Разработка шрифтов (4000 р.) <br>
020           <span>Разработка фирменных шрифтов предназначена для придания индивидуальности стилевому оформлению сайта.</span></p>
021           
022           <p><strong>Наполнение сайта:</strong></p>
023           <table border="0" cellpadding="0" cellspacing="0">
024               <tr>
025                 <td width="270px">Услуги копирайтинга (1 страница)</td>
026                 <td><input id="inputCell" name="300" size="1" type="text" value="0"> 300 р.</td>
027               </tr>
028           </table>
029          </div>
030               
031          <div id="programming">
032           <p><strong>Программирование:</strong></p>
033           <p>Система управления сайтом (от 4000 р.) <br>
034           <span>При выборе CMS вы сможете выбрать какую конкретно CMS использовать.</span></p>
035           <p><select id="cms_radio">
036            <option value="0">Не использовать</option>
037            <option value="4000">CMS jADM (4000 р.)</option>
038            <option value="8000">Amiro.CMS: Визитка (8000 р.)</option>
039            <option value="6000">Joomla! (6000 р.)</option>
040            <option value="14000">1С-Битрикс: Старт (14000 р.)</option>
041            <option value="0">Другая (в зависимости от сложности)</option>
042           </select></p>
043           <p><input type="checkbox" name="" value="1000">Форма отправки писем (1000 р.) <br>
044           <span>Установка простой формы отправки писем или заявок посетителей. Простая форма содержит до 5 полей для ввода текста (Ф.И.О. отправителя, контактный телефон, e-mail, дополнительная информация и т.п.). Сообщение приходит на электронную почту в текстовом формате. Позволяет привести запросы посетителей к единой форме и избежать СПАМа.</span></p>
045          
046           <p><input type="checkbox" name="" value="3000">Лента новостей (3000 р.) <br>
047           <span>Лента новостей с автоматической разбивкой по страницам, сортировкой по дате, возможностью самостоятельно добавлять, редактировать, удалять новости, вывод необходимого количества последних новостей на главную страницу, новости автоматически отображаются по 10 новостей на страницу с возможностью посмотреть новость более подробно, внизу идут ссылки 1, 2, 3... на страницы архива новостей.</span></p>
048          
049           <p><input type="checkbox" name="" value="9000">Поиск по сайту (9000 р.) <br>
050           <span>Модуль поиска совпадений по словам и фразам на страницах сайта.</span></p>
051          </div>';}
052          
053          if ($option == 2) {
054            print '
055               <h3>Корпоративный сайт</h3>
056               <div id="design">
057                <p><strong>Дизайн:</strong></p>
058                <p><input checked disabled type="checkbox" name="" value="10000">Шаблон (10000 р.) <br>
059                <span>Шаблон рисуется на основании составленного брифа и соответствует требованиям заказчика.</span></p>
060                
061                <p><input checked disabled type="checkbox" name="" value="8000">HTML-верстка (8000 р.) <br>
062                <span>На основании утвержденного шалона создается рабочий макет.</span></p>
063                
064                <p><input type="checkbox" name="" value="1500">Разработка логотипа (1500 р.) <br>
065                <span>Логотип разрабатывается исходя из предпочтений заказчика.</span></p>
066                
067                <p><input type="checkbox" name="" value="3000">Разработка шрифтов (4000 р.) <br>
068                <span>Разработка фирменных шрифтов предназначена для придания индивидуальности стилевому оформлению сайта.</span></p>
069                
070                <p><strong>Наполнение сайта:</strong></p>
071                <table border="0" cellpadding="0" cellspacing="0">
072                 <tr>
073                  <td width="270px">Услуги копирайтинга (1 страница)</td>
074                  <td><input id="inputCell" name="300" size="1" type="text" value="0"> 300 р.</td>
075                 </tr>
076                </table>
077               </div>
078               
079               <div id="programming">
080                <p><strong>Программирование:</strong></p>
081                <p>Система управления сайтом (от 4000 р.) <br>
082                <span>При выборе CMS вы сможете выбрать какую конкретно CMS использовать.</span></p>
083
084                <p><select id="cms_radio">
085                 <option value="0">Не использовать</option>
086                 <option value="4000">CMS jADM (4000 р.)</option>
087                 <option value="12000">Amiro.CMS: Корпоративный (12000 р.)</option>
088                 <option value="6000">Joomla! (6000 р.)</option>
089                 <option value="23000">1С-Битрикс: Корпоративный (23000 р.)</option>
090                 <option value="0">Другая (в зависимости от сложности)</option>
091                </select></p>
092
093                <p><input type="checkbox" name="" value="1000">Форма отправки писем (1000 р.) <br>
094                <span>Установка простой формы отправки писем или заявок посетителей. Простая форма содержит до 5 полей для ввода текста (Ф.И.О. отправителя, контактный телефон, e-mail, дополнительная информация и т.п.). Сообщение приходит на электронную почту в текстовом формате. Позволяет привести запросы посетителей к единой форме и избежать СПАМа.</span></p>
095
096                <p><input type="checkbox" name="" value="3000">Лента новостей (3000 р.) <br>
097                <span>Лента новостей с автоматической разбивкой по страницам, сортировкой по дате, возможностью самостоятельно добавлять, редактировать, удалять новости, вывод необходимого количества последних новостей на главную страницу, новости автоматически отображаются по 10 новостей на страницу с возможностью посмотреть новость более подробно, внизу идут ссылки 1, 2, 3... на страницы архива новостей.</span></p>
098
099                <p><input type="checkbox" name="" value="6000">Лента RSS (6000 р.) <br>
100                <span>Подключение новостной ленты сайта к RSS-каналу. На сайте размещается скрипт, генерирующий список новостей в формате RSS для всех желающих подписаться, или позволяющий подключать и выводить новости сторонних сайтов</span></p>
101
102                <p><input type="checkbox" name="" value="8000">Портфолио (8000 р.) <br>
103                <span>Портфолио позволяет размещать примеры выполненных работ в структурированном виде.</span></p>
104
105                <p><input type="checkbox" name="" value="4000">Фотогалерея (4000 р.) <br>
106                <span>Данный модуль предоставляет возможность выводить фотографии и изображения в автоматическом режиме, менять фон страницы при просмотре фотографии, голосовать за фотографию, просматривать лидеров голосования.</span></p>
107
108                <p><input type="checkbox" name="" value="9000">Поиск по сайту (9000 р.) <br>
109                <span>Модуль поиска совпадений по словам и фразам на страницах сайта.</span></p>
110                </div>';}
111                }
112 ?>

Обратите внимание, что в зависимости от переданной переменной option и будет загружена соответствующая форма. В каждой форме у нас находится практически все типы полей input: чекбоксы, селекты и текстовые. Для каждого типа у нас будет свой небольшой обработчик.

Так же обратите на inputCell, их может быть несколько, но самое важное в них это атрибут name, в котором будет храниться стоимость за 1. В остальных полях в атрибуте value хранится стоимость модуля.

Теперь нам необходим обработчик, который все это оживит. Для этого создаем новый JavaScript файл scripts.js и подключаем его вместе с фреймворком jQuery к index.html:

1 <script type="text/javascript" src="jquery.js"></script>
2 <script type="text/javascript" src="scripts.js"></script>

И пишем в нем следующее:

01 $(document).ready(function() {
02  $("#type_site").change(function() {
03    var typeOfSite = $("#type_site :selected").val(),
04        formOftype = $("#config_site");
05        
06    /* Обнуляем общую и сумму с НДС в поле вывода */
07    $("#summ span").text("0");
08    $("#summ_nds span").text("0");
09    
10    /* Выбираем соответствующую форму из файла */
11    formOftype.load("fullform.php",{option:typeOfSite});

Во второй строке мы запускаем функцию, которая будет обрабатывать изменения в форме, и задаем две переменные для данной функции. Первая переменная хранит в себе значение, которое мы будем передавать fullform.php в виде option, вторая хранит краткое название блока div с идентификатором config_site. Затем обнуляем значения в поле span абзацев, где будет выводиться итоговая сумма – это позволит нам обнулять каждый раз значение при выборе другого типа сайта. В последней строке мы выполняем загрузку в config_site формы по переданному параметру option.

Отлично форму мы загрузили, теперь надо обработать данные из нее, причем так же динамически:

01 /* Выбираем все чекбоксы которые были подгружены, в этом нам поможет функция live */
02 formOftype.live("change",function() {
03  /* При проведении действий пересчитываем сумму в зависимости от выбраных чекбоксов */
04  var totalSum = 0, /* Полную сумму сначала приравниваем к нулю */
05      totalSumNDS = 0,
06      choiceCMS = parseInt($("#cms_radio :selected").val());
07      
08  /* Приплюсовываем сумму стоимости CMS */
09  totalSum += choiceCMS;
10  
11  /* Каждое поле ввода проверяем на введеное значение, если больше нуля то считаем его */
12  $("#inputCell").each(function() {
13        var inputCell = parseInt($("#inputCell").val()) * parseInt($("#inputCell").attr("name"));
14        totalSum += inputCell;});

Так как у нас форма подгружается динамически, то следовательно у нас появляются новые элементы DOM, которые простым способом не обработать, а следовательно не получится просто использовать функцию change. На помощь здесь приходит функция live, которая обрабатывает новые элементы DOM и может уже обрабатывать их функцией change.

Далее мы создаем две переменные, в которых будут храниться финальные суммы для НДС и нет. И в третью переменную заносим стоимость выбранной CMS, затем сразу ее складываем с общей суммой.

Используем функцию each для перебора всех полей ввода с идентификатором inputCell, где в цикле перемножаем переведенные в целочисленные значения с помощью команды parseInt атрибуты name и value каждого поля.

Дальше нам надо обработать все отмеченные чекбоксы:

1 /* Пересчитываем все чекбоксы которые отмечены галочкой*/
2 $(this + "input[name=''] :checked").each(function() {
3  totalSum += parseInt($(this).val());
4 });

Здесь тот же принцип, что и в предыдущем коде, но только тут мы определяем выделенные чекбоксы и получаем их значение, а затем складываем его с общей суммой. Осталось только вывести суммы:

1 /* Подсчет и вывод итоговой суммы с НДС и без */
2   totalSumNDS = totalSum * 1.18 ;
3   $("#summ span").text(totalSum);
4   $("#summ_nds span").text(totalSumNDS);
5   });
6  });
7 });

Для вычисления НДС totalSum умножаем на 1.18 и далее в тег span соответствующих абзацев выводим текст с значением наших сумм.

Все калькулятор готов.

Данный урок подготовлен для вас командой сайта ruseller.com

Добавить комментарий

Top