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

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

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

demosourse

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

<div id="full_calc">
 <form>
 <div id="type_of_site">
  <p>Выберите тип сайта</p>
   <p>
   <select id="type_site">
    <option value='0'>Выберите тип сайта</option>
    <option value='1'>Визитка</option>
    <option value='2'>Корпоративный</option>
   </select>
  </p>
 </div>
 <p id="tipus"></p>
 <div id="config_site">
 </div>
 </form>
</div>
<p id="summ">Стоимость сайта: <strong><span></span></strong> р.</p>
<p id="summ_nds">Стоимость сайта для организаций плательщиков НДС: <strong><span></span></strong> р.</p>

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

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

<?
if (isset($_POST["option"])) {
 $option = $_POST["option"];
  
   if ($option == 1) {
     print '
        <h3>Сайт визитка</h3>
         <div id="design">
          <p><strong>Дизайн:</strong></p>
          <p><input checked disabled type="checkbox" name="" value="6000">Шаблон (6000 р.) <br>
          <span>Шаблон рисуется на основании составленного брифа и соответствует требованиям заказчика.</span></p>
                   
          <p><input checked disabled type="checkbox" name="" value="4500">HTML-верстка (4500 р.) <br>
          <span>На основании утвержденного шалона создается рабочий макет.</span></p>
                            
          <p><input type="checkbox" name="" value="1500">Разработка логотипа (1500 р.) <br>
          <span>Логотип разрабатывается исходя из предпочтений заказчика.</span></p>
                                     
          <p><input type="checkbox" name="" value="3000">Разработка шрифтов (4000 р.) <br>
          <span>Разработка фирменных шрифтов предназначена для придания индивидуальности стилевому оформлению сайта.</span></p>
          
          <p><strong>Наполнение сайта:</strong></p>
          <table border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="270px">Услуги копирайтинга (1 страница)</td>
                <td><input id="inputCell" name="300" size="1" type="text" value="0"> 300 р.</td>
              </tr>
          </table>
         </div>
              
         <div id="programming">
          <p><strong>Программирование:</strong></p>
          <p>Система управления сайтом (от 4000 р.) <br>
          <span>При выборе CMS вы сможете выбрать какую конкретно CMS использовать.</span></p>
          <p><select id="cms_radio">
           <option value="0">Не использовать</option>
           <option value="4000">CMS jADM (4000 р.)</option>
           <option value="8000">Amiro.CMS: Визитка (8000 р.)</option>
           <option value="6000">Joomla! (6000 р.)</option>
           <option value="14000">1С-Битрикс: Старт (14000 р.)</option>
           <option value="0">Другая (в зависимости от сложности)</option>
          </select></p>
          <p><input type="checkbox" name="" value="1000">Форма отправки писем (1000 р.) <br>
          <span>Установка простой формы отправки писем или заявок посетителей. Простая форма содержит до 5 полей для ввода текста (Ф.И.О. отправителя, контактный телефон, e-mail, дополнительная информация и т.п.). Сообщение приходит на электронную почту в текстовом формате. Позволяет привести запросы посетителей к единой форме и избежать СПАМа.</span></p>
         
          <p><input type="checkbox" name="" value="3000">Лента новостей (3000 р.) <br>
          <span>Лента новостей с автоматической разбивкой по страницам, сортировкой по дате, возможностью самостоятельно добавлять, редактировать, удалять новости, вывод необходимого количества последних новостей на главную страницу, новости автоматически отображаются по 10 новостей на страницу с возможностью посмотреть новость более подробно, внизу идут ссылки 1, 2, 3... на страницы архива новостей.</span></p>
         
          <p><input type="checkbox" name="" value="9000">Поиск по сайту (9000 р.) <br>
          <span>Модуль поиска совпадений по словам и фразам на страницах сайта.</span></p>
         </div>';} 
         
         if ($option == 2) {
           print '
              <h3>Корпоративный сайт</h3>
              <div id="design">
               <p><strong>Дизайн:</strong></p>
               <p><input checked disabled type="checkbox" name="" value="10000">Шаблон (10000 р.) <br>
               <span>Шаблон рисуется на основании составленного брифа и соответствует требованиям заказчика.</span></p>
               
               <p><input checked disabled type="checkbox" name="" value="8000">HTML-верстка (8000 р.) <br>
               <span>На основании утвержденного шалона создается рабочий макет.</span></p>
               
               <p><input type="checkbox" name="" value="1500">Разработка логотипа (1500 р.) <br>
               <span>Логотип разрабатывается исходя из предпочтений заказчика.</span></p>
               
               <p><input type="checkbox" name="" value="3000">Разработка шрифтов (4000 р.) <br>
               <span>Разработка фирменных шрифтов предназначена для придания индивидуальности стилевому оформлению сайта.</span></p>
               
               <p><strong>Наполнение сайта:</strong></p>
               <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                 <td width="270px">Услуги копирайтинга (1 страница)</td>
                 <td><input id="inputCell" name="300" size="1" type="text" value="0"> 300 р.</td>
                </tr>
               </table>
              </div>
              
              <div id="programming">
               <p><strong>Программирование:</strong></p>
               <p>Система управления сайтом (от 4000 р.) <br>
               <span>При выборе CMS вы сможете выбрать какую конкретно CMS использовать.</span></p>

               <p><select id="cms_radio">
                <option value="0">Не использовать</option>
                <option value="4000">CMS jADM (4000 р.)</option>
                <option value="12000">Amiro.CMS: Корпоративный (12000 р.)</option>
                <option value="6000">Joomla! (6000 р.)</option>
                <option value="23000">1С-Битрикс: Корпоративный (23000 р.)</option>
                <option value="0">Другая (в зависимости от сложности)</option>
               </select></p>

               <p><input type="checkbox" name="" value="1000">Форма отправки писем (1000 р.) <br>
               <span>Установка простой формы отправки писем или заявок посетителей. Простая форма содержит до 5 полей для ввода текста (Ф.И.О. отправителя, контактный телефон, e-mail, дополнительная информация и т.п.). Сообщение приходит на электронную почту в текстовом формате. Позволяет привести запросы посетителей к единой форме и избежать СПАМа.</span></p>

               <p><input type="checkbox" name="" value="3000">Лента новостей (3000 р.) <br>
               <span>Лента новостей с автоматической разбивкой по страницам, сортировкой по дате, возможностью самостоятельно добавлять, редактировать, удалять новости, вывод необходимого количества последних новостей на главную страницу, новости автоматически отображаются по 10 новостей на страницу с возможностью посмотреть новость более подробно, внизу идут ссылки 1, 2, 3... на страницы архива новостей.</span></p>

               <p><input type="checkbox" name="" value="6000">Лента RSS (6000 р.) <br>
               <span>Подключение новостной ленты сайта к RSS-каналу. На сайте размещается скрипт, генерирующий список новостей в формате RSS для всех желающих подписаться, или позволяющий подключать и выводить новости сторонних сайтов</span></p>

               <p><input type="checkbox" name="" value="8000">Портфолио (8000 р.) <br>
               <span>Портфолио позволяет размещать примеры выполненных работ в структурированном виде.</span></p>

               <p><input type="checkbox" name="" value="4000">Фотогалерея (4000 р.) <br>
               <span>Данный модуль предоставляет возможность выводить фотографии и изображения в автоматическом режиме, менять фон страницы при просмотре фотографии, голосовать за фотографию, просматривать лидеров голосования.</span></p>

               <p><input type="checkbox" name="" value="9000">Поиск по сайту (9000 р.) <br>
               <span>Модуль поиска совпадений по словам и фразам на страницах сайта.</span></p>
               </div>';} 
               }
?>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Павлов Александр
Урок создан: 27 Января 2011
Просмотров: 134968
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^