Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Калькулятор доставки по регионам РФ (https://javascript.ru/forum/dom-window/64118-kalkulyator-dostavki-po-regionam-rf.html)

JimHudson 20.07.2016 18:44

Калькулятор доставки по регионам РФ
 
Добрый день!
Есть пример скрипта внешнего калькулятора.
Определяет стоимость доставки в зависимости от даты месяца.

var myCalculator = function(day){
// стоимость доставки
var cost = 0;
switch(day) {
// каждое первое число месяца стоимость равна 100у.е.
case 1: cost = 100; break
// каждое двенадцатое число месяца стоимость равна 200у.е.
case 12: cost = 200; break
// каждое тридцать первое число месяца доставка бесплатна (таких дней всего 7 в году)
case 31: cost = 0; break
// по остальным дням мы не так щедры, доставка 500у.е.
default: cost = 500;
}
// если поле custom_delivery_tax не существует
if($('input[name="custom_delivery_tax"]').length == 0){
// добавить его
$('#checkout-form').append('<input type="hidden" name="custom_delivery_tax" value="0">');
}
// запись стоимости доставки в поле custom_delivery_tax
$('input[name="custom_delivery_tax"]').val(cost);
}

Необходимо переделать, чтобы считал доставку по регионам.
Есть всего-лишь 4 группы регионов, каждый со своей стоимостью.
Например:
1) Выбираю способ доставки
2) Выходит окно Ajax ("Введите регион доставки"-пустое поле-пример ввода- кнопка "ок")
3) Согласно условий вычисляет стоимость доставки и прибавляет к общей стоимости.

P.S.Скрипт для платформы Ucoz.

Задача по сути простая, но я еще чайник в javascript.

Помогите пожалуйста с кодом.:help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help:

JimHudson 20.07.2016 19:18

Rise, пример.
Есть 4 способа доставки.
Я выбираю чекбокс второго способа и на экране появляется окошко описаное выше. в нем ввожу регион и нажимаю ок.

Или быть может вместо окна Ajax появляется поле для ввода региона под способом доставки

JimHudson 20.07.2016 19:37

Rise, перечислены будут все регионы РФ.
Например:
1) Московская обл, Ленинградская обл - 200 р.
2) Омская обл, Красноярский край - 300 р.
и тд.
3) Для тех регионов которых нет (например: Зарубежье) - 650 р.

Должны перечисляться регионы и для каждого фиксированная стоимость. Я так понимаю.

А может возможно не расписывать условие каждого региона, а перечислить через запятую и присвоить стоимость.

JimHudson 20.07.2016 20:32

Rise, суть в том, что я знаю что хочу, но не представляю как технически это сделать. Потому и прошу помощи.

warren buffet 20.07.2016 20:37

/*
 региональная цена применяется как понижающий или повышающий коэффициент 
 то есть нормализуется относительно базовой цены в диапазоне от 0 до 1, тогда надо умножать
 или выдается как абсолютная величина региональной поправки, то есть от -Х до +Х руб
 тогда надо прибавлять, или тупо выдается окном аякс, чо
*/
var rc='Выходит окно Ajax;';

var cost = 500+rc;

switch(day) {
	case 1: cost = 100+rc; break
	case 12: cost = 200+rc; break
	case 31: cost = 0+rc; break
}

warren buffet 20.07.2016 20:39

Цитата:

Сообщение от JimHudson
я знаю что хочу

Чтоб за тебя все сделали, а ты получку получил. )))

JimHudson 20.07.2016 20:50

warren buffet,какую получку?)))Я безработный))) Это для себя. Весь день убил, чтоб хоть один пример найти. Изучаю html и css, а вот до javascript еще далеко, а надо.

JimHudson 20.07.2016 20:50

warren buffet, можешь помочь?

JimHudson 20.07.2016 20:51

Rise,
есть идеи?

JimHudson 21.07.2016 13:29

Так! Кодил, кодил и накодил!
Что получил
var myCalculator = function(region){
 // стоимость доставки
 var cost = 0;
 switch(region) {
 // каждое первое число месяца стоимость равна 100у.е.
 case 1: cost = 100; break 
 // каждое двенадцатое число месяца стоимость равна 200у.е.
 case 2: cost = 200; break
 // каждое тридцать первое число месяца доставка бесплатна (таких дней всего 7 в году)
 case 3: cost = 0; break
 // по остальным дням мы не так щедры, доставка 500у.е.
 // default: cost = 500;
 }
 // если поле custom_delivery_tax не существует
 if($('input[name="custom_delivery_tax"]').length == 0){
 // добавить его
 $('#checkout-form').append('<input type="hidden" name="custom_delivery_tax" value="0">');
 }
 // запись стоимости доставки в поле custom_delivery_tax
 $('input[name="custom_delivery_tax"]').val(cost);
}


Попытался описать функцию. В зависимости от выбранного элемента зависит цена.

И попытался вставить в код HTML
<FORM id ="FormReg" name="FormReg">
<SELECT name="SelectReg" id="SelectReg" OnChange='region'>
<OPTION VALUE = "0"> Выюерете регион доставки </OPTION>
<OPTION VALUE = "1"> Московская область </OPTION>
<OPTION VALUE = "2"> Республика Татарстан </OPTION>
<OPTION VALUE = "3"> Алтайский край </OPTION>
</select>
</form>
<script src = "/js/myCalculator.js"></script>
<script>myCalculator(region);</script>


Что не так я сделал?:help:

JimHudson 21.07.2016 13:48

Вложений: 2
Вот собственно результат. Напомню что сайт на платформе Ucoz

JimHudson 21.07.2016 13:53

Загрузчик не о чем
 
http://uchudesami.ru/rezult.png
http://uchudesami.ru/rezult2.png

Вот результаты труда. Как мне сделать взаимосвязь функции и <select>???

Rise 21.07.2016 19:04

JimHudson,
<select name="region" onchange="regionChange(this)">
	<option value="0">Выберите регион доставки</option>
	<option value="300">Красноярский край</option>
	<option value="200">Ленинградская область</option>
	<option value="200">Московская область</option>
	<option value="300">Омская область</option>
	<option value="650">Другой</option>
</select>

<script>
function regionChange(region) {
	alert(region.value);
}
</script>

JimHudson 21.07.2016 19:23

спасибо огромное, но проблема еще не решена.последнии три строчки моей функции


if($('input[name="custom_delivery_tax"]').length == 0
$('#checkout-form').append('<input type="hidden" name="custom_delivery_tax" value="0">');

}

$('input[name="custom_delivery_tax"]').val(cost);

добавляют числовой результат в общую стоимость заказа.

как мне их применить? нужно решение без alert.
и как функцию js подключить из внешнего файла?

warren buffet 22.07.2016 06:43

ТС, ты зачем мозг насилуешь? Тебе всего-то надо заменить несколько переменных по одному всего лишь признаку. Сделай таблицу цен по рыгионам и подставляй нужный объект, ты мужик или не мужык?

var costs={},
    Cost; /* выбранный регион */

costs.msk={
   name:Мозгва,
   0:970,
   1:100,
   12:300,
   31:0
};

costs.nsk={
   name:Новосибирск
   0:670,
   1:200,
   12:500,
   31:0
};

/* продолжай копипастить и менять цены по дням для рыгиона */

costs.spb={
   name:Питербурх
   0:170,
   1:600,
   12:600,
   31:1
};

Cost=costs.msk; /* дефаульт сити  */



Теперь делаешь список

var html=[];

for(var item in costs)
   html.push('<option value="'+key+'"'+((costs[key]===Cost)?' selected':'')+'>'+costs[key].name+'</option>';

some_elem.innerHTML='<select>'+html.join('')+'</select>';
some_elem.addEventListener('change',calc);



Теперь калькируешь

var calc=function(e){

    /* если есть такой регион, то взять, иначе в мозгву, или какой-то дефольт */

    var region = (costs.hasOwnProperty(this.value))?costs[this.value]:costs.msk

    /* в var today; номер дня, если не твой день, то дефолт */

    Cost = region.hasOwnProperty(today)?cost[today]:cost[0];

};



Всенах.

warren buffet 22.07.2016 06:47

ЗЫ. Таблица ненормальна, но тут уловки: номер дня - это число, значит топоним можно заеписать через текстовый ключ, прямо в отношение и вторая - нулевого дня не бывает, поэтому дефолт в пишется в 0, кроме того к 0 эволюционируют все пустые значения.

warren buffet 22.07.2016 07:50

Заделал рабочий прототип

<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
</head>
<body>


<div><input type="text" id="day" value="1"/></div>
<br/>
<div id="list"></div>
<br/>
<button id="btn">Посчитать</button>
<br/>
<div id="result"></div>

<script>

var costs={},
	today,
    Cost;

costs.msk={
   name:'Мозгва',
   '0':970,
   '1':100,
   '12':300,
   '31':0
};

costs.nsk={
   name:'Новосибирск',
   '0':670,
   '1':200,
   '12':500,
   '31':0
};

costs.spb={
   name:'Питербурх',
   '0':170,
   '1':600,
   '12':600,
   '31':1
};


var html=[];

for(var key in costs)
   html.push('<option value="'+key+'"'+(costs[key]===Cost?' selected':'')+'>'+costs[key].name+'</option>');

document.getElementById('list').innerHTML='<select>'+html.join('')+'</select>';

var calc=function(e){

    /* если есть такой регион, то взять, иначе в мозгву, или какой-то дефольт */

    var region = (costs.hasOwnProperty(this.value))?costs[this.value]:costs.msk
	
	today=document.getElementById('day').value;	
	
    Cost = region.hasOwnProperty(today)?region[today]:region[0];

};

var show=function(){
	document.getElementById('result').innerHTML='<p>Сегодня цена доставки: '+Cost + ' руб.';
};


document.getElementById('btn').addEventListener('click',show);

list.querySelector('select').addEventListener('change',calc);

today=document.getElementById('day').value;

Cost=costs.msk[today]; /* дефаульт сити  */

</script>

</body>
</html>

JimHudson 22.07.2016 10:45

warren buffet,
спасибо, опять не то. меня по ходу никто не понял. ты есть вконтакте? скинь в личку ссылку

JimHudson 22.07.2016 10:58

Вот исходная функция.
var myCalculator = function(day){
 // стоимость доставки
 var cost = 0;
 switch(day) {
 // каждое первое число месяца стоимость равна 100у.е.
 case 1: cost = 100; break 
 // каждое двенадцатое число месяца стоимость равна 200у.е.
 case 12: cost = 200; break
 // каждое тридцать первое число месяца доставка бесплатна (таких дней всего 7 в году)
 case 31: cost = 0; break
 // по остальным дням мы не так щедры, доставка 500у.е.
 default: cost = 500;
 }
 // если поле custom_delivery_tax не существует
 if($('input[name="custom_delivery_tax"]').length == 0){
 // добавить его
 $('#checkout-form').append('<input type="hidden" name="custom_delivery_tax" value="0">');
 }
 // запись стоимости доставки в поле custom_delivery_tax
 $('input[name="custom_delivery_tax"]').val(cost);
}


она считает стоимость доставки в зависимости от дня месяца.

мне необходимо ее переделать, чтобы она считала стоимость в зависимости от региона.

например:
в функции прописать
регион 1, регион 2, регион 3= 200руб
регион 4, регион 5 =300 руб
регион 6 = 400 руб
и т.д.
за счет <select> создаем динамический список регионов.

покупатель выбирает свой регион из списка, а скрипт сравнивает соответствие регион-стоимость и выводит покупателю стоимость доставки, плюс прибавляет ее к общей стоимости. Роль прибавления стоимости выполняют три последние строки исходной функции.


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

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

JimHudson 22.07.2016 11:37

Rise,
с юкозом имел дело?

JimHudson 22.07.2016 11:48

http://uchudesami.ru/primer.jpg вот примерно то что нужно,но только с одним списком выбора

warren buffet 22.07.2016 12:38

Цитата:

Сообщение от JimHudson
они для расчета по дням, нам нужно по регионам

А я тебе сделал по регионам и по дням одновременно. Это значит выкидывай дни из той таблицы и получится

costs={};

costs.nsk= {name:Новосибирск, price:500};
costs.msk= {name:Москва, price:1500};
costs.spb= {name:Питер, price:700};


и попер набирать регионы с ценами.

Все, вопрос закрыт, еще раз напишешь "Непонел" пойдешь к прокурору.

warren buffet 22.07.2016 12:41

Цитата:

регион 1, регион 2, регион 3= 200руб
costs.регион1 = 200
costs.регион2 = 200
costs.регион3 = 200


Только так, ибо отношение N:N ты никогда не осилишь.

Strongman 22.07.2016 13:50

Может тебе такая конструкция нужна:
var Region;
switch(Region)
{
//каждый регион имеет код, т.е он enum
case 0: 
case 1:
case 2:
//do something for these regions;
CustomRegionTax = 100;

//делаем тоже самое для других регионов
case 3: 
case 4:
case 5:
//do something for these regions;
CustomRegionTax = 200;

//и т.д.
//для каждого региона;

default:
CustomRegionTax = 0;
break;
}

JimHudson 22.07.2016 18:51

Strongman,
я запутался

Strongman 23.07.2016 11:15

Ну это короче тот же случай как у Вас с ценой в №23 сообщении, только туда я подставил регион и несколько case-ов(регионов) для одной стоимости или для одного случая.

warren buffet 26.07.2016 14:55

Да он запутался, потому что задача тривиальная - по индексу региона выбрать стоимость. Блин, решается в любой тетрадке: слева в столбце индексы или коды регионов, справа цена. А ТС начал разматывать с какой-то бнопни про 31-е число каждого месяца, когда он ходит в баню получать от омона по башке дубинкой. )))

JimHudson 28.07.2016 16:50

warren buffet,
Сразу все подробно описал.

warren buffet 30.07.2016 09:29

Типа вот есть олень, надо сделать из него швейную машинку. И подробное изложение своего видения этого процесса. )))

JimHudson 11.10.2016 10:00

warren buffet,
Привет! Все с тем же вопросом. Как мне изменить функцию, чтобы при выборе города появлялась цена из таблицы город=цена?

warren buffet 11.10.2016 20:06

Цитата:

Сообщение от JimHudson
выборе города появлялась цена из таблицы город=цена?


Внезапно мы видим одну сущность.

warren buffet 11.10.2016 20:23

Не знаю, что там менять, просто чертеж на понятном тебе языке:

var

city={
   23:'Мухосранск',
   34:'Абортск',
   83:'Зеро',
/* tl;dr */
},

prices={
   23:235,
   34:478,
   83:589,
/* tl;dr */
}, 

html=[];

for(var p in prices)
   html.push('<option value="'+p+'">'+city[p]+' - '+prices[p]+'</options>');

html='<select class="delivery">'+html.join('')+'</select>';


Разделение таблицы города - цены важно. Города можно юзать много раз и для других задач. А цены можно забивать больше чем одной ценой на город, например если доставка в область.


Часовой пояс GMT +3, время: 19:20.