Форум

dzho · #31 (**permalink**) 25.09.2016, 10:33

Warren buffet я считаю что данный метод подходит отлично для маленького обьема данных в таком виде что указал рони. Для различных сайт визиток, landing page. А реляционная база данных уже для более крупных проектов. Хотя использовать Jsom в данном случае также отличный вариант.

dzho · #32 (**permalink**) 25.09.2016, 11:06

рони спасибо огромное. Вопрос а как добавить условия при выборе услуги старкрил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
}

рони · #33 (**permalink**) 25.09.2016, 11:41

Сообщение от dzho

1м.40см

1м.50 см было

примерно так ... продолжение ...

<!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 · #34 (**permalink**) 25.09.2016, 16:03

Сообщение от dzho

Для различных сайт визиток, landing page.

Это не для вас молодой человек было написано, а для тех, кто не дай бог напорется на такое гавно и подумает, что и так можно делать. Чтобы видели, что так делать нельзя. А тебе можно. У тебя же jsom

dzho · #35 (**permalink**) 25.09.2016, 17:38

warren buffet а как вы бы реализовали такой не большой калькулятор. И почему у Вас столько негатива к этому коду ? Очень интересно в чем его минусы?

dzho · #36 (**permalink**) 25.09.2016, 17:39

Рони а Вам огромное спасибо

warren buffet · #37 (**permalink**) 25.09.2016, 17:56

Сообщение от dzho

реализовали

Реализация чего? У тебя ни одного товара нет, как ты реализуешь то, чего не существует?

dzho · #38 (**permalink**) 25.09.2016, 18:03

это калькулятор с выбором услуг.

warren buffet · #39 (**permalink**) 25.09.2016, 20:06

Услуги и товары одни и те же сущности.

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

<!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>

warren buffet · #40 (**permalink**) 25.09.2016, 20:12

С опциями, которые экраны-уголки-счетчики, разбирайся сам. Никаких признаков множественного выбора в предоставленных данных не было. Что в каментах написано - то не данные, а каменты. Но главное с хера ли они вообще в товаре. Разбирайся. Теперь все нормализовано.

Форум

Справочник

Discord чат

Курсы javascript