webgroupco

Калькулятор расчета стоимости разработки сайта Joomla + RSForm + Java

6 posts in this topic

Здравствуйте!

 

Была задача создать в Joomla форму RSForm с калькулятором подсчета суммы услуг по разработке сайта.

 

Вот что получилось.

 

screen_calc.jpg

 

 

Соответственно можно добавлять или убирать любые поля при необходимости.

 

Значения: category, shablon, zapolnenie, logo, design и другие вам необходимо заменить на названия ваших полей которые вы указали в форме RSForm.

 

Также в дополнительных атрибутах полей надо добавить - onchange="calc()"

 

Скрипт просчитывает сумму выбранных компонентов и формирует заявку через RSForm

 

 

 

HTML код формы:

<div class="rsform">
<form method="post"  id="userForm" enctype="multipart/form-data" action=""><div id="wrap-calculator-site">

<div id="block-325-l">
<p><span class="red">*</span> Название организации</p>
<input type="text" value="" size="20"  name="form[company]" id="company"  class="rsform-input-box"/>
</div>

<div id="block-325-r">
<p><span class="red">*</span> Контактное лицо</p>
<input type="text" value="" size="20"  name="form[name]" id="name"  class="rsform-input-box"/>
</div>

<div id="block-325-l">
<p><span class="red">*</span> Телефон для связи</p>
<input type="text" value="" size="20"  name="form[phone]" id="phone"  class="rsform-input-box"/>
</div>

<div id="block-325-r">
<p><span class="red">*</span> Электронная почта</p>
<input type="text" value="" size="20"  name="form[email]" id="email"  class="rsform-input-box"/>
</div>

<div id="block-325-l">
<p><span class="red">*</span> Выберите категорию сайта</p>
<select  name="form[category][]"  id="category" onchange="calc()" class="rsform-select-box" ><option  value="0">выбрать из списка...</option><option  value="100">Сайт визитка - 100$</option><option  value="200">Корпоративный сайт - 200$</option><option  value="270">Интернет магазин (каталог) - 270$</option></select>
</div>

<div id="block-325-r">
<p>Количество уникальных шаблонов</p>
<select  name="form[shablon][]"  id="shablon" onchange="calc()" class="rsform-select-box" ><option  value="0">1 - шаблон сайта - 0$</option><option  value="50">2 - шаблон сайта - 50$</option><option  value="75">3 - шаблон сайта - 75$</option><option  value="100">4 - шаблон сайта - 100$</option><option  value="125">5 - шаблон сайта - 125$</option></select>
</div>

<div id="block-325-l">
<p>Заполнение страниц</p>
<select  name="form[zapolnenie][]"  id="zapolnenie" onchange="calc()" class="rsform-select-box" ><option  value="0">5 – страниц - 0$</option><option  value="10">10 – страниц - 10$</option><option  value="40">25 – страниц - 40$</option><option  value="90">50 – страниц - 90$</option><option  value="190">100 – страниц - 190$</option></select>
</div>

<div id="block-325-r">
<p>Логотип и фирменный стиль</p>
<select  name="form[logo][]"  id="logo" onchange="calc()" class="rsform-select-box" ><option  value="0">Фирменный стиль имеется - 0$</option><option  value="70">Необходимо разработать - 70$</option></select>
</div>

<div id="block-325-l">
<p><span class="red">*</span>Направление дизайна сайта</p>
<select  name="form[design][]"  id="design" onchange="calc()" class="rsform-select-box" ><option  value="0">выбрать из списка...</option><option  value="50">Классический стиль сайта - 50$</option><option  value="60">Ретро-стиль дизайна - 60$</option><option  value="60">Дизайн сайтов в стиле «гранж» - 60$</option><option  value="100">Мультипликационный (рисованный) дизайн - 100$</option><option  value="70">Журнальный дизайн сайтов - 70$</option></select>
</div>

<div id="block-325-r">
<p>Количество языков контента</p>
<select  name="form[language][]"  id="language" onchange="calc()" class="rsform-select-box" ><option  value="0">1 - язык сайта - 0$</option><option  value="20">2 - языка сайта - 20$ (за каждые 10 стр.)</option><option  value="60">3 - языка сайта - 60$ (за каждые 10 стр.)</option></select>
</div>

<div id="block-325-l">
<p>Написание контента для сайта</p>
<select  name="form[contentsite][]"  id="contentsite" onchange="calc()" class="rsform-select-box" ><option  value="0">Не требуется - 0$</option><option  value="20">Продающий текст - 1000 знаков - 20$</option><option  value="35">Продающий текст - 2000 знаков - 35$</option><option  value="78">Продающий текст - 4000 знаков - 78$</option><option  value="40">Копирайт - 4000 знаков - 40$</option><option  value="75">Копирайт - 8000 знаков - 75$</option><option  value="100">Копирайт - 10000 знаков - 100$</option><option  value="32">Рерайт - 4000 знаков - 32$</option><option  value="64">Рерайт - 8000 знаков - 64$</option><option  value="80">Рерайт - 10000 знаков - 80$</option><option  value="60">Seo текст - 4000 знаков - 60$</option><option  value="120">Seo текст - 8000 знаков - 120$</option><option  value="150">Seo текст - 10000 знаков - 150$</option></select>
</div>

<div id="block-325-r">
<p>Адаптация под мобильные устройства</p>
<select  name="form[mobile][]"  id="mobile" onchange="calc()" class="rsform-select-box" ><option  value="0">выбрать из списка...</option><option  value="70">Адаптация основного шаблона - 70$</option><option  value="150">Отдельный мобильный сайт - 150$</option></select>
</div>

<div id="block-650">
<p>Укажите списком адреса сайтов или страниц, которые Вам нравятся по дизайну либо по другим параметрам.</p>
<textarea cols="50" rows="5" name="form[lovesite]" id="lovesite"  class="rsform-text-box"></textarea>
</div>

<div id="block-325">
<input  name="form[modules][]" type="checkbox" value="12" id="modules0" onchange="calc()" /><label for="modules0">Блог новостей или статей - 12$</label><br/><input  name="form[modules][]" type="checkbox" value="30" id="modules1" onchange="calc()" /><label for="modules1">Форум - 30$</label><br/><input  name="form[modules][]" type="checkbox" value="20" id="modules2" onchange="calc()" /><label for="modules2">Фотогалерея / портфолио - 20$</label><br/><input  name="form[modules][]" type="checkbox" value="50" id="modules3" onchange="calc()" /><label for="modules3">Каталог продукции или услуг - 50$</label><br/>
</div>

<div id="block-325">
<input  name="form[modulestoo][]" type="checkbox" value="5" id="modulestoo0" onchange="calc()" /><label for="modulestoo0">Форма отправки сообщений с сайта - 5$</label><br/><input  name="form[modulestoo][]" type="checkbox" value="7" id="modulestoo1" onchange="calc()" /><label for="modulestoo1">Отзывы на сайте / гостевая / опросы - 7$</label><br/><input  name="form[modulestoo][]" type="checkbox" value="15" id="modulestoo2" onchange="calc()" /><label for="modulestoo2">Блок специального предложения - 15$</label><br/><input  name="form[modulestoo][]" type="checkbox" value="10" id="modulestoo3" onchange="calc()" /><label for="modulestoo3">Интерактивная карта (схема проезда) - 10$</label><br/>
</div>

<div id="block-650">
<p>Опишите Ваши пожелания в свободной форме.</p>
<textarea cols="50" rows="5" name="form[dopinfo]" id="dopinfo"  class="rsform-text-box"></textarea>
</div>


<div id="block-650">
<div id="calc-summa-text">Стоимость разработки сайта: <span id="result">0</span> $.</div>
</div>

<div id="block-650">
<input type="submit" value="Отправить заявку с выбранными параметрами" name="form[send]" id="send"  class="rsform-submit-button" />
</div>


</div><input type="hidden" name="form[formId]" value="51"/></form></div>

JS:

<script type="text/javascript">
   function calc() {
   var category = document.getElementById("category");
   var shablon = document.getElementById("shablon");
   var zapolnenie = document.getElementById("zapolnenie");
   var logo = document.getElementById("logo");
   var design = document.getElementById("design");
   var language = document.getElementById("language");
   var contentsite = document.getElementById("contentsite");
   var mobile = document.getElementById("mobile");
     
  
   var modules0 = document.getElementById("modules0");
   var modules1 = document.getElementById("modules1");
   var modules2 = document.getElementById("modules2");
   var modules3 = document.getElementById("modules3");
   var modulestoo0 = document.getElementById("modulestoo0");
   var modulestoo1 = document.getElementById("modulestoo1");
   var modulestoo2 = document.getElementById("modulestoo2");
   var modulestoo3 = document.getElementById("modulestoo3");
   
   var result = document.getElementById("result"); 
 
   var price = 0;
   price += parseInt(category.options[category.selectedIndex].value);
   price += parseInt(shablon.options[shablon.selectedIndex].value);
   price += parseInt(zapolnenie.options[zapolnenie.selectedIndex].value);
   price += parseInt(logo.options[logo.selectedIndex].value);
   price += parseInt(design.options[design.selectedIndex].value);
   price += parseInt(language.options[language.selectedIndex].value);
   price += parseInt(contentsite.options[contentsite.selectedIndex].value);
   price += parseInt(mobile.options[mobile.selectedIndex].value);
  
   price += (modules0.checked == true)? parseInt(modules0.value) : 0;
   price += (modules1.checked == true)? parseInt(modules1.value) : 0;
   price += (modules2.checked == true)? parseInt(modules2.value) : 0;
   price += (modules3.checked == true)? parseInt(modules3.value) : 0;
   price += (modulestoo0.checked == true)? parseInt(modulestoo0.value) : 0;
   price += (modulestoo1.checked == true)? parseInt(modulestoo1.value) : 0;
   price += (modulestoo2.checked == true)? parseInt(modulestoo2.value) : 0;
   price += (modulestoo3.checked == true)? parseInt(modulestoo3.value) : 0;         
 
            result.innerHTML = price;
        }
 
</script>


<div id="calc-summa-text">Стоимость разработки сайта: <span id="result">0</span> $.</div>

Edited by webgroupco
реклама
kuzovbmw, dimonxaxaxa, pawok and 1 other like this

Share this post


Link to post
Share on other sites

И что дальше? Или это такой замысловатый крауд?

 

Ну и пусть крауд, если решение работающее, почему бы и нет?

 

Человек заморочился, все расписал, и это обязательно кому-то пригодится в будущем.

 

Лично мне нравится, когда ищешь в поисковике решение проблемы и находишь его. А, не когда заходишь на форумы, где старые темы все одного вида - А, караул, ничего не работает. И в конце написано - проблему решил, а как ... неизвестно, он ее решил.

sheynhjk likes this

Share this post


Link to post
Share on other sites

И что дальше? Или это такой замысловатый крауд?

 

Почему сразу крауд?

 

Многим это нужно, но они не знают как это сделать.

 

Что в этом плохого?

Share this post


Link to post
Share on other sites

Спасибо, вещь действительно полезная, в свое время так же мучился с кредитным калькулятором дифференцированных и аннуитетных платежей

Share this post


Link to post
Share on other sites

За идею - лайк

За рекламу своего сайта - предупреждение

Практическая польза для вебстудии - сомнительна. Нет типовых решений, как и нет клиентов, которые знают то они хотят. 

kuzovbmw likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.