главная

Теги:


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

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

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

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


    

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

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

Сайт визитка
         

Дизайн:

Шаблон (6000 р.)
Шаблон рисуется на основании составленного брифа и соответствует требованиям заказчика.

HTML-верстка (4500 р.)
На основании утвержденного шалона создается рабочий макет.

Разработка логотипа (1500 р.)
Логотип разрабатывается исходя из предпочтений заказчика.

Разработка шрифтов (4000 р.)
Разработка фирменных шрифтов предназначена для придания индивидуальности стилевому оформлению сайта.

Наполнение сайта:

Услуги копирайтинга (1 страница) 300 р.

Программирование:

Система управления сайтом (от 4000 р.)
При выборе CMS вы сможете выбрать какую конкретно CMS использовать.

Форма отправки писем (1000 р.)
Установка простой формы отправки писем или заявок посетителей. Простая форма содержит до 5 полей для ввода текста (Ф.И.О. отправителя, контактный телефон, e-mail, дополнительная информация и т.п.). Сообщение приходит на электронную почту в текстовом формате. Позволяет привести запросы посетителей к единой форме и избежать СПАМа.

Лента новостей (3000 р.)
Лента новостей с автоматической разбивкой по страницам, сортировкой по дате, возможностью самостоятельно добавлять, редактировать, удалять новости, вывод необходимого количества последних новостей на главную страницу, новости автоматически отображаются по 10 новостей на страницу с возможностью посмотреть новость более подробно, внизу идут ссылки 1, 2, 3... на страницы архива новостей.

Поиск по сайту (9000 р.)
Модуль поиска совпадений по словам и фразам на страницах сайта.

';} if ($option == 2) { print '

Корпоративный сайт

Дизайн:

Шаблон (10000 р.)
Шаблон рисуется на основании составленного брифа и соответствует требованиям заказчика.

HTML-верстка (8000 р.)
На основании утвержденного шалона создается рабочий макет.

Разработка логотипа (1500 р.)
Логотип разрабатывается исходя из предпочтений заказчика.

Разработка шрифтов (4000 р.)
Разработка фирменных шрифтов предназначена для придания индивидуальности стилевому оформлению сайта.

Наполнение сайта:

Услуги копирайтинга (1 страница) 300 р.

Программирование:

Система управления сайтом (от 4000 р.)
При выборе CMS вы сможете выбрать какую конкретно CMS использовать.

Форма отправки писем (1000 р.)
Установка простой формы отправки писем или заявок посетителей. Простая форма содержит до 5 полей для ввода текста (Ф.И.О. отправителя, контактный телефон, e-mail, дополнительная информация и т.п.). Сообщение приходит на электронную почту в текстовом формате. Позволяет привести запросы посетителей к единой форме и избежать СПАМа.

Лента новостей (3000 р.)
Лента новостей с автоматической разбивкой по страницам, сортировкой по дате, возможностью самостоятельно добавлять, редактировать, удалять новости, вывод необходимого количества последних новостей на главную страницу, новости автоматически отображаются по 10 новостей на страницу с возможностью посмотреть новость более подробно, внизу идут ссылки 1, 2, 3... на страницы архива новостей.

Лента RSS (6000 р.)
Подключение новостной ленты сайта к RSS-каналу. На сайте размещается скрипт, генерирующий список новостей в формате RSS для всех желающих подписаться, или позволяющий подключать и выводить новости сторонних сайтов

Портфолио (8000 р.)
Портфолио позволяет размещать примеры выполненных работ в структурированном виде.

Фотогалерея (4000 р.)
Данный модуль предоставляет возможность выводить фотографии и изображения в автоматическом режиме, менять фон страницы при просмотре фотографии, голосовать за фотографию, просматривать лидеров голосования.

Поиск по сайту (9000 р.)
Модуль поиска совпадений по словам и фразам на страницах сайта.

';} } ?>

Обратите внимание, что в зависимости от переданной переменной option и будет загружена соответствующая форма. В каждой форме у нас находится практически все типы полей input: чекбоксы, селекты и текстовые. Для каждого типа у нас будет свой небольшой обработчик. Так же обратите на inputCell, их может быть несколько, но самое важное в них это атрибут name, в котором будет храниться стоимость за 1. В остальных полях в атрибуте value хранится стоимость модуля. Теперь нам необходим обработчик, который все это оживит. Для этого создаем новый JavaScript файл scripts.js и подключаем его вместе с фреймворком jQuery к index.html:

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

$(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 соответствующих абзацев выводим текст с значением наших сумм.

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

Источник урока: www.ruseller.com

Урок Создан:2011-05-12 Просмотров:4167

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


Copyright© 2009 Hosted by Zhost