Warren buffet я считаю что данный метод подходит отлично для маленького обьема данных в таком виде что указал рони. Для различных сайт визиток, landing page. А реляционная база данных уже для более крупных проектов. Хотя использовать Jsom в данном случае также отличный вариант.
|
рони спасибо огромное. Вопрос а как добавить условия при выборе услуги старкрил2
if (starkil == 1м.20см) {
option: 1500,
optionTwo: 1400,
optionThree: 2000
}
if (starkil == 1м.40см) {
option: 2400,
optionTwo: 0,
optionThree: 0,
optionFour: 0,
optionFive: 0
}
if (starkil == 1м.70) {
colorBath: 0,
option: 2400,
optionTwo: 0,
optonThree: 1000,
optionFour: 0,
optionFive: 0
}
|
Цитата:
примерно так ... продолжение ... :cray:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="block-form">
<form id="form" action="http://">
<h2>Наши услуги</h2>
<div class="block-left">
<!-- Выбор услуги -->
<select class="ListService">
<option value="">Выбрать</option>
<option value="Enamelling">Эмалировка</option>
<option value="Starkril">Старкрил 2</option>
<option value="liquidAcrylic">Жидкий акрил</option>
<option value="AcrylicLiner">Акриловый вкладыш</option>
</select>
<br>
<!-- Длина ванны -->
<select class="meters">
<option value="">Выбрать</option>
<option value="meterOne">1м.20 см</option>
<option value="meterTwo">1м.50 см</option>
<option value="meterThree">1м.70 см</option>
</select>
<!-- Опции услуг -->
<label for="opt">
<input type="checkbox" class="optionally" id="opt"><p>Цвет ванны</p>
</label>
<label for="opt1">
<input type="checkbox" class="optionally" id="opt1"><p>Установка уголка</p>
</label>
<label for="opt2">
<input type="checkbox" class="optionally" id="opt2"><p>Установка сливной системы</p>
</label>
<label for="opt3">
<input type="checkbox" class="optionally" id="opt3"><p>Установка экрана под ванну</p>
</label>
<label for="opt4">
<input type="checkbox" class="optionally" id="opt4"><p>Установка счетчиков.гор. холодной воды</p>
</label>
<label for="opt5">
<input type="checkbox" class="optionally" id="opt5"><p>Установка счетчиков.хол. горячей воды</p>
</label>
<h3>Итого</h3>
</div>
<div class="block-right">
<!-- checkbox list -->
<!-- Здесь значение меняются от выбранных вариантов -->
<!-- size product -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от первого select -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от второго select -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<br>
</div>
<input type="text" class="summa" placeholder="Сумма">
</form>
</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var d = {
Enamelling: { // Эмалировка
product: 1500, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 1500, // стоимость длины ванны 1.50
meterThree: 1500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
Starkril: { // Старкрил 2
product: 2000, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 1500, // стоимость длины ванны 1.50
meterThree: 1500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
liquidAcrylic: { // Жидкий акрил
product: 3000, // цена
meterOne: 1500, // стоимость длины ванны 1.20
meterTwo: 2000, // стоимость длины ванны 1.50
meterThree: 2500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
AcrylicLiner: { // Акриловый вкладыш
product: 1500, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 3000, // стоимость длины ванны 1.20
meterThree: 3000, //стоимость длины ванны 1.70
colorBath: 2000, // стоимость цвета заливки
option: 2000, // checkbox установка уголка
optionTwo: 0, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
},
f = document.querySelector("#form"),
g = f.querySelector(".summa"),
h = f.querySelectorAll(".rez"),
a = f.querySelectorAll(".ListService, .meters, #opt,#opt1, #opt2, #opt3, #opt4,#opt5"),
b,
k = ["colorBath","option","optionTwo","optionThree","optionFour","optionFive"],
m = {Starkril : {meterOne : { option: 1500,
optionTwo: 1400,
optionThree: 2000},
meterTwo : {
option: 2400,
optionTwo: 0,
optionThree: 0,
optionFour: 0,
optionFive: 0
},
meterThree : {
colorBath: 0,
option: 2400,
optionTwo: 0,
optonThree: 1000,
optionFour: 0,
optionFive: 0
} } }
;
f.addEventListener("change", function() {
var c = a[0].value;
b = [0, 0, 0, 0, 0 , 0, 0];
if (c) {
b[0] = d[c].product;
var e = a[1].value;
e && (b[1] = d[c][e]);
k.forEach(function(el,i) {
a[i+2].checked && (b[i+2] = m[c] && m[c][e] && m[c][e][el] !== void(0) ? m[c][e][el] : d[c][el] )
});
} else a[2].value = "";
g.value = b.reduce(function(b, a, c) {
h[c].value = a + " руб.";
return b + a
}, 0) + " руб."
})
});
</script>
</body>
</html>
|
Цитата:
|
warren buffet а как вы бы реализовали такой не большой калькулятор. И почему у Вас столько негатива к этому коду ? Очень интересно в чем его минусы?
|
Рони а Вам огромное спасибо:)
|
Цитата:
|
это калькулятор с выбором услуг.
|
Услуги и товары одни и те же сущности.
Специально, чтобы тебя ни в жизнь ни один ПС не проиндексировал и не нашел, даже если все сантехники в мире сдохнут, чтобы не нашел ни один ПС, гавнокод в качестве примера как такое делается.
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<script>
var
CURRENCY = ' руб.',
works={
title:'Услуга',
data:{
1:'Эмалировка',
2:'Старкрил 2',
3:'Жидкий акрил',
4:'Акриловый вкладыш'
},
},
params={
opt:{
title:'Опции',
data:{
1:'Установка уголка',
2:'Монтаж экрана',
3:'Монтаж слива',
4:'Счетчик горячей воды',
5:'Счетчик холодной воды'
}
},
hue:{
title:'Оттенок',
data:{
1:'Белый',
2:'Красный',
3:'Желтый',
4:'Синий'
}
},
len:{
title:'Длина, см',
data:{
1:'120',
2:'150',
3:'170',
4:'200'
}
}
},
offers={
1:{
price:1500,
params:{
len:{
1:1400,
2:1500,
3:1500
},
hue:{
1:0,
2:120,
3:150,
4:90
},
opt:{
1:1500,
2:1700,
3:2000,
4:3000,
5:2000
}
}
},
2:{
price:2500,
params:{
len:{
1:1200,
2:1300,
3:1700
},
hue:{
1:0,
2:220,
3:250,
4:190
},
opt:{
1:1200,
2:1500,
3:1800,
4:2900,
5:2500
}
}
},
3:{
price:1900,
params:{
len:{
1:1200,
2:1780,
3:1499
},
hue:{
1:0,
2:126,
3:145,
4:199
},
opt:{
1:1500,
2:1700,
3:2000,
4:3000,
5:2000
}
}
},
4:{
price:1500,
params:{
len:{
1:1400,
2:1500,
3:1500
},
hue:{
1:0,
2:120,
3:150,
4:90
},
opt:{
1:1500,
2:1700,
3:2000,
4:3000,
5:2000
}
}
}
}
total=0,prodList=calcButton=null;
function resetList(el){
v=el.querySelectorAll('select');
for(var i=0;i<v.length;i++)
v[i].selectedIndex=-1;
}
function renderParams(ev){
if(ev.target.nodeName!='SELECT') return;
var v=ev.target.value;
if(!(v in offers)) return;
var offer=offers[v],html=[];
total=offer.price;
for(v in offer.params) {
var h=[];
for(var p in offer.params[v])
h.push(renderOption(offer.params[v][p],params[v].data[p]
+' + '+offer.params[v][p]+CURRENCY));
html.push('<label>'+params[v].title+': </label>'
+'<select>'+h.join('')+'</select>'+'<br/><br/>');
}
prodList.innerHTML=html.join('');
resetList(prodList);
calcButton.disabled=false;
}
function renderOption(v,t){
return '<option value="'+v+'">'+t+'</option>';
}
function renderOptions(obj){
var html=[];
for(var p in obj)
html.push(renderOption(p,obj[p]+': '+offers[p].price+CURRENCY));
return html.join('');
}
function renderWorks(classname) {
var el=document.querySelector('.'+classname);
el.innerHTML='<label>'+works.title+': <label>'
+'<select>'+renderOptions(works.data)+'</select>';
resetList(el);
el.addEventListener('change',renderParams);
}
function renderTotal(){
v=prodList.querySelectorAll('select');
for(var i=t=0;i<v.length;i++)
t+= +v[i].value;
document.querySelector('.total-sum').textContent=(total+t)+CURRENCY;
}
</script>
</head>
<body>
<div class="filters-block"></div><br/><br/>
<div class="product-list"></div>
<button class="calc-total" disabled="disabled">Рассчитать</button><br/><br/>
<div class="total-sum"></div>
<script>
prodList=document.querySelector('.product-list');
calcButton=document.querySelector('.calc-total');
calcButton.addEventListener('click',renderTotal);
renderWorks('filters-block');
</script>
</body>
</html>
|
С опциями, которые экраны-уголки-счетчики, разбирайся сам. Никаких признаков множественного выбора в предоставленных данных не было. Что в каментах написано - то не данные, а каменты. Но главное с хера ли они вообще в товаре. Разбирайся. Теперь все нормализовано.
|
| Часовой пояс GMT +3, время: 01:23. |