Форум

dzho · #11 (**permalink**) 24.09.2016, 17:47

рони, это не намек на что вот демка возьмите и сделайте, просто прошу помощи как её реализовать.

warren buffet · #12 (**permalink**) 24.09.2016, 18:03

Не так все делается. Сперва надо спроектировать структуру данных, где все барахло будет лежать.

dzho · #13 (**permalink**) 24.09.2016, 18:17

т.е значения в обьектах не хранить или есть другой вариант?

рони · #14 (**permalink**) 24.09.2016, 18:20

dzho,
в одном обьекте структуру дерево создать, и всё в форму тогда change только на форму

warren buffet · #15 (**permalink**) 24.09.2016, 18:21

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

Нужна таблица продуктов и таблица опций продуктов, минимально так:

Таблица Автомобили.
ID
Название

Таблица Цвет
ID
ProductID
Название цвета
Цена

Таблица Опции
ID
ProductID
Название опции
Цена

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

Таблица Автомобили.
ID
Название
Название цвета 0 - Цена
Название цвета 1 - Цена
Название цвета 2 - Цена
Название опции 1 - Цена

Нифига не полегчало. Как ты выберешь Мазда Цвет 0 Опция 1, если выбрать можно только что-то одно? Нельзя же выбрать два цвета - красный и синий. Ну, технически можно, но это получится бред.

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

Твоя бредовая бизнес-логика и не дает тебе понять и реализовать этот бред. Делай нормально. Нормально это как выше. Цены за цвет и опции определяются как таковые, то есть как за отдельные товары, несмотря, что это опции. Это значит базовый цвет будет стоить 0, базовая опция - без которой нельзя продать машину, будет стоить 0. А все навороты - больше 0. Следовательно в продуктовой таблице цена за товар уже включает в себя базовую комплектацию и значит там есть цена

Таблица Автомобили.
ID
Название
Цена базовой комплектации

warren buffet · #16 (**permalink**) 24.09.2016, 18:26

Если машинки там чисто для примера, то действующее вещество твоего бреда вот где

Название
Название цвета 0 - Цена
Название цвета 1 - Цена
Название цвета 2 - Цена
Название опции 1 - Цена

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

рони · #17 (**permalink**) 24.09.2016, 18:54

вариант для медитации ... при условии product это начальная цена, всё остальное повышающие коэффициенты.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .optionally:checked ~ .rez {
    display: inline;
  }
  .optionally ~ .rez {
    display: none;
  }
  </style>

</head>

<body>
<p>
Если Выбрал значения из первого select т.е mazda значения цен одни, а когда выбираешь например bmw<br>
то значения другие.
</p>
<form id="form" action="http://">


<!-- select product -->

<select  class="car">
<option  value="">Выбрать</option>
<option  value="mazda">mazda</option>
<option  value="lada">lada</option>
<option  value="bmw">bmw</option>
</select>
<br>
<br>
<!-- color product -->

<select  class="color">
<option value="">Выбрать</option>
<option value="red">Красный</option>
<option value="blue">Белый</option>
<option value="blue">Синий</option>
</select>

<br>
<br>

<!-- checkbox list  -->

<br>
<br>
<!-- Здесь значение меняються от выбранных вариантов -->

<!-- size product -->

<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от первого select -->
<br>
<br>
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от второго select -->
<br>
<br>
<input type="checkbox" class="optionally" id="opt"><label for="opt">дополнительный настройки

</label>
<br>
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от checkbox -->

<br>

<label>Здесь суммируются значения котые выбрал пользователь</label><br>
<input type="text" class="summa" placeholder="Сумма">
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
    var d = {
            mazda: {
                product: 350,
                red: 450,
                white: 500,
                blue: 550,
                option: 360
            },
            lada: {
                product: 400,
                red: 600,
                white: 700,
                blue: 350,
                option: 660
            },
            bmw: {
                product: 600,
                red: 700,
                white: 300,
                blue: 340,
                option: 360
            }
        },
        f = document.querySelector("#form"),
        g = f.querySelector(".summa"),
        h = f.querySelectorAll(".rez"),
        a = f.querySelectorAll(".car, .color, #opt"),
        b;
    f.addEventListener("change", function() {
        var c = a[0].value;
        b = [0, 0, 0];
        if (c) {
            b[0] = d[c].product;
            var e = a[1].value;
            e && (b[1] = d[c][e]);
            a[2].checked && (b[2] = d[c].option)
        } else a[1].value = "";
        g.value = b.reduce(function(b, a, c) {
            h[c].value = a + " руб.";
            return b + a
        }, 0) + " руб."
    })
});
</script>



</body>
</html>

dzho · #18 (**permalink**) 25.09.2016, 00:39

Рони, спасибо это почти то что нужно

http://codepen.io/dzheysen/pen/amJYWJ на основе этого сделал превьюшку
но есть сложности как реализовать добавленный функционал

// Здесь проблема. Как сделать чтобы при выборе цвета была зависимость в значениях checkbox
// например пользователь выбрал значение 1.20 и значения меняются
// получаеться так если 1м.20см то значения c такой ценой

// option: 1500,
// optionTwo: 1400,
// optionThree: 2000,

// а если 1м.50см

// option: 2400,
// optionTwo: 0,
// optionThree: 0,
// optionFour: 0,
// optionFive: 0

рони · #19 (**permalink**) 25.09.2016, 00:57

dzho,
не понимаю вашего описания, будет дерево, будет код.

dzho · #20 (**permalink**) 25.09.2016, 02:41

<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">  
  
<br>


<input type="text" class="summa" placeholder="Сумма">
</form>
  </div>
  </div>

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", "#opt2", "#opt3","#opt4","#opt5"),
        b;
    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]);
            a[2].checked && (b[2] = d[c].option )
        } else a[2].value = "";
        g.value = b.reduce(function(b, a, c) {
            h[c].value = a + " руб.";
            return b + a
        }, 0) + " руб."
    })
});

Сейчас не работает вызов опций начинаю от "Установка уголка" просмотрев Ваш код не совсем понял как подцепить эти их

Так же логика при выборе услуги " Старкрил2" получается пользователь выбирает эту услугу

размер ванны 1.20 то

изменяются значения опций

option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну

а если выбирает "Стакрил2" размер ванны 1.50

изменяются значения опций

option: 2400, // checkbox установка уголка
optionTwo: 0, // checkbox установка сливной системы
optionThree: 0, // checkbox установка экрана под ванну
optionFour: 0, // установка счетчиков гор.холодн.воды
optionFive: 0 // установка счетчиков хол. горячей воды

значения изменяются при выборе 1.70

colorBath: 0, // цвет ванны
option: 2400, // checkbox установка уголка
optionTwo: 0, // checkbox установка сливной системы
optionThree: 1000, // checkbox установка экрана под ванну
optionFour: 0, // установка счетчиков гор.холодн.воды
optionFive: 0 // установка счетчиков хол. горячей воды

Надеюсь расписал доходчиво

Форум

Справочник

Discord чат

Курсы javascript