Калькулятор цен

Возможность формировать цену заказа с учетом добавления дополнительных услуг.

По запросам пользователей…

Бывает, что цена на услугу не может быть статичной, а формируется исходя из добавленных в нее дополнительных услуг. Пример ниже и давайте разбираться как это сделать.

Почасовой заказ

Даже всемогущая пунктуация не имеет власти

  • даже всемогущая пунктуация не имеет власти 
  • над рыбными текстами, ведущими безорфографичный образ жизни.
  • однажды одна маленькая строчка рыбного текста по имени Lorem ipsum 

Пакет

Даже всемогущая пунктуация не имеет власти

  • даже всемогущая пунктуация не имеет власти 
  • над рыбными текстами, ведущими безорфографичный образ жизни.
  • однажды одна маленькая строчка рыбного текста по имени Lorem ipsum 
  • решила выйти в большой мир грамматики

Целый день

Даже всемогущая пунктуация не имеет власти

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

Как это сделано

Внимательно посмотрите видео с описанием и сделайте все пошагово. К сожалению, в данном случае легче именно записать видео, чтобы подробно описать где и что надо править под себя.

Для того, чтобы вам было легче разобраться — я записал видео. Открывайте его и делайте все со мной вместе

1. Раскраска (стили)


<style>
/*
	Настройка расцветки цветов блоков с пакетами услуг
	В квадратных скобках даны стандартные значения вашей темы
	"Стандартный" пакет выделен акцентным цветом вашей темы
	"Хитовый" пакет выделен контрастным цветом вашей темы
*/
:root {
   --price-border-radius: 10px;		/* радиус скругления углов [0px] */
   
   --price-bg-color-main: #f4f4f4;	/* цвет фона обычной услуги [var(--color-accent-bg)] */
   --price-border-color-main: #e7e6e6;	/* цвет окантовки блока обычной услуги [var(--color-border)] */
   --price-text-color: #373737;		/* цвет текста в блоке обычной услуги [var(--color-text)] */
   
   --price-bg-color-hit: var(--color-contrast-bg);	/* цвет фона хитовой услуги */
   --price-border-color-hit: var(--color-contrast-bg);	/* цвет окантовки блока хитовой услуги */
   --price-text-color-hit: var(--color-contrast-text);	/* цвет текста в блоке хитовой услуги */
}

#section-3767741 .row > div {
   padding: 10px;
   border: 1px solid var(--price-border-color-main);
   border-radius: var(--price-border-radius);
   background-color: var(--price-bg-color-main);
}
#section-3767741 .row > div * :not(button) {
   color: var(--price-text-color);
   background-color: var(--price-bg-color-main);
}

/*
выделяем "важный", "модный" или "хитовый" вариант пакета (черным).
nth-child(2) - цифра 2 - это порядковый номер этого пакета. 
В данном примере второй (по центру) 
*/
#section-3767741 .row > div:nth-child(2) {
   padding: 10px;
   border: 1px solid var(--price-border-color-hit);
   border-radius: var(--price-border-radius);
   background-color: var(--price-bg-color-hit);
}
#section-3767741 .row > div:nth-child(2) * :not(button) {
   color: var(--price-text-color-hit);
   background-color: var(--price-bg-color-hit);
}
</style>

 

2. Начало скрипта. Задаем переменные


<script>
var price_section = '#section-3767741'; /* секция с пакетами услуг */
var currency = ' руб.'; /* валюта */
var extra_text = 'Выберите дополнительные услуги'; /* Наименование выбора доп.услуг в пакете */
var extra_text_in_order = 'Дополнительные услуги:'; /* Наименование доп.услуг в заказе */
</script>

 

3. Выясняем ID заказов


$('#section-3767741 button').each(function(){ alert($(this).attr('data-url').split('/new/')[1].split("?")[0]); });

 

4. Формируем пакеты доп.услуг


var price = [
	[5000, /* стандартная цена без доп.услуг */
         13312, /* id кнопки заказа */
		['+ Фотокнига (+5700р)', 5700],
		['+ Печать 10 фотографий 10х15 (+3400р)', 3400],
		['+ Личная встреча (+100500р)', 100500]
	],
	[6000,
         13313,
		['+ Фотокнига (+6700р)', 6700],
		['+ Печать 20 фотографий 10х15 (+6500р)', 6500],
		['+ Личная встреча (+100500р)', 100500]
	],
	[10000,
         13314,
		['+ Фотокнига (+10000р)', 10000],
		['+ Печать 30 фотографий 10х15 (+10000р)', 10000],
		['+ Личная встреча (бесплатно)', 0]
	]
]

 

5. Добавляем основной скрипт


/* скрипт */
var price_extra=[];for(var n=0;n<price.length;n++){for(var m=2;m<price[n].length;m++){if(m==2){price_extra[n]='<option value="'+price[n][m][1]+'">'+price[n][m][0]+'</option>';}else{price_extra[n]=price_extra[n]+'<option value="'+price[n][m][1]+'">'+price[n][m][0]+'</option>';}}}
var section=$(price_section+" .row > div .text-section");var h=0;var i=0;if(/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)===false){$.each(section,function(){$(this).append('<div class="price_extra" style="bottom: 120px; position: static;"><form class="form js-form"><h3>'+extra_text+'</h3><select onchange="make_extra('+i+','+price[i][1]+');" class="field extra" name="extra_'+i+'" id="extra_'+i+'" data-order="'+price[i][1]+'" multiple="multiple"><option value="0">Ничего из перечисленного</option>'+price_extra[i]+'</select></form><div style="margin-top:20px;"><h2><span id="fullprice_'+i+'" data-price="'+price[i][0]+'">'+price[i][0]+'</span> '+currency+'</h2></div></div>');$(this).parent().find('button').attr('data-fullprice',price[i][0]+' '+currency);i++;if($(this)[0].offsetHeight>h){h=$(this)[0].offsetHeight;}
$(".price_extra").css('width',$(this)[0].offsetWidth);});section.css('height',h);$(".price_extra").css('position','absolute');}else{$.each(section,function(){$(this).append('<div class="price_extra" style="bottom: 100px; position: static;"><form class="form js-form"><h3>'+extra_text+'</h3><select onchange="make_extra('+i+','+price[i][1]+');" class="field" name="extra_'+i+'" id="extra_'+i+'" data-order="'+price[i][1]+'" multiple="multiple"><option value="0">Ничего из перечисленного</option>'+price_extra[i]+'</select></form><div style="margin-top:20px;"><h2><span id="fullprice_'+i+'" data-price="'+price[i][0]+'">'+price[i][0]+'</span> '+currency+'</h2></div></div>');$(this).parent().find('button').attr('data-fullprice',price[i][0]+' '+currency);i++;});}
function make_extra(id,order){var fullprice=Number($("#fullprice_"+id).attr('data-price'));if($("#extra_"+id).val()!==null){for(i=0;i<$("#extra_"+id).val().length;i++){var fullprice=Number(fullprice)+Number($("#extra_"+id).val()[i]);}
$("button[data-url*="+order+"]").attr("data-extra-text",extra_text_in_order+"\r\n"+$('#extra_'+id+' option:selected').toArray().map(item=>item.text).join('\r\n')).attr('data-fullprice',fullprice+' '+currency);}else{$("button[data-url*="+order+"]").attr("data-extra-text","").attr('data-fullprice',fullprice+' '+currency);}
$("#fullprice_"+id).html(fullprice);}
$(function(){$('button').on('click',function(){var order_extra_text=$(this).attr('data-extra-text');var order_fullprice=$(this).attr('data-fullprice');waitForElm('#folio_order_form_text_area').then((elm)=>{$('#folio_order_form_text_area').val(order_extra_text).css("display",'none');$("#folio_order_form_text_field_1").val(order_fullprice).css("display",'none');if(order_extra_text){$("#new_folio_order_form fieldset").eq(0).append('<p>'+order_extra_text.replace(/\n/g,"<br />")+'</p><h3><b>Сумма заказа: '+order_fullprice+'</b></h3>');}else{$("#new_folio_order_form fieldset").eq(0).append('<h3><b>Сумма заказа: '+order_fullprice+'</b></h3>');}});});});function waitForElm(selector){return new Promise(resolve=>{if(document.querySelector(selector)){return resolve(document.querySelector(selector));}
const observer=new MutationObserver(mutations=>{if(document.querySelector(selector)){resolve(document.querySelector(selector));observer.disconnect();}});observer.observe(document.body,{childList:true,subtree:true});});}

 

6. Сохраняем и проверяем

Моды для Wfolio.ru

Калькулятор цен. Фотограф Константин Шамин

Добавление всплывающего title к фотографии

Калькулятор цен. Фотограф Константин Шамин

Изменение цвета кнопок на отдельной странице

Калькулятор цен. Фотограф Константин Шамин

Скрываем блок от Инстаграм

Калькулятор цен. Фотограф Константин Шамин

Добавлние кнопок к форме обратной связи

Калькулятор цен. Фотограф Константин Шамин

Виджет обратного отсчета

Калькулятор цен. Фотограф Константин Шамин

Меняем светлую тему на темную (или любую другую)

Калькулятор цен. Фотограф Константин Шамин

Запрет индексации отдельной страницы

Калькулятор цен. Фотограф Константин Шамин

Скрытие пунктов меню в зависимости от языка сайта

Калькулятор цен. Фотограф Константин Шамин

Генератор случайных цифр

Виджет генератора случайных чисел. — задается диопазон «от» и «до»; — старт в один клик; — перебор других значений...
Калькулятор цен. Фотограф Константин Шамин

Виджет. Кнопка сохранения контактов

Данный виджет генерирует vCard — электронную визитку и её QR-код. Визитка поддерживает: — ФИО, — род...
Калькулятор цен. Фотограф Константин Шамин

Модицикация: выделение заголовка другим цветом

Иногда бывает необходимо выделить один или несколько заголовков другим цветом.
Калькулятор цен. Фотограф Константин Шамин

Модификация пакетов услуг

Модификация блока с ценами на пакеты услуг с помощью CSS/JS: — выравнивание высоты блоков с пакетами услуг в версии...
Калькулятор цен. Фотограф Константин Шамин

Модификация мультиссылок (taplink)

Модификация страницы с мультиссылкой с помощью CSS: — изменение отступов между кнопками; — изменение размера текста...
Калькулятор цен. Фотограф Константин Шамин

Удаление сообщения о Cookie на отдельной странице

Если вы включили Cookie на сайте (Настройки — Разные настройки — Уведомление об использовании cookie (GDPR)),...