Сделаем слева калькулятор расчета цены, а справа картинку, которая отражает выбор.
Сделаем секцию, в которой будет контейнер с классом row.
Калькулятор будет занимать пять колонок col-sm-5, а изображение col-sm-7.
Добавим див с классом calc.
Заголовок h2 будет расчет стоимости тиража визиток.
Структура калькулятора будет состоять из выбора тиража, вида бумаги и цветности визитки.
- Тираж. Добавим тег label с классом card и названием выберите тираж. Создадим select с именем и id card. Внутри будут option с параметрами равными объемам тиража.
- Бумага. Label назовем выберите бумагу с классом paper. Select также называется. Будет три option вида бумаги белый лен, мелованная и vip белая.
- Цветность. Зададим класс color для label и select. В option будет пять видов бумаги Черно-белая с одной и с двух сторон, цветная и смешанная черно-белая и цветная.
У всех select будет класс form-control, чтобы задать стиль рамки с выбором параметров.
Если человек выбрал все три параметра, то внизу будет вывод стоимости за тираж в теге заголовка h3.
Цену оформим в теге p с классом pr добавим span с id=price.
В колонке справа добавим див с классом pic и разместим пять изображений, в теге img с id от одного до пяти, соответствующих выбору цветности визитки.
Код в index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<section> <div class="container"> <div class="row"> <div class="col-sm-5"> <div class="calc"> <h2 class="h2">Расчет стоимости тиража визиток</h2> <label for="card">Выберите тираж</label><br> <select class="form-control" name="card" id="card"> <option value="100">100</option> <option value="500">500</option> <option value="1000">1000</option> <option value="2500">2500</option> <option value="5000">5000</option> </select> <br> <label for="paper">Выберите бумагу</label><br> <select name="paper" id="paper" class="form-control"> <option tb="9" value="<Белый лён">Белый лён</option> <option tb="18" value="Мелованная бумага">Мелованная бумага</option> <option tb="21" value="Белая vip">Белая vip</option> </select> <br> <label for="color">Выберите цвет визитки</label><br> <select name="color" id="color" class="form-control"> <option clpr="5" data="1" value="Односторонняя черно-белая">Односторонняя черно-белая</option> <option clpr="10" data="2" value="Двусторонняя черно-белая">Двусторонняя черно-белая</option> <option clpr="10" data="3" value="Односторонняя цветная">Односторонняя цветная</option> <option clpr="20" data="4" value="Двусторонняя цветная">Двусторонняя цветная</option> <option clpr="15" data="5" value="Цветная с лицевой, ч/б с обратной стороны">Цветная с лицевой, ч/б с обратной стороны</option> </select> <br> <h3 class="h3">Стоимость за тираж</h3> <p class="pr"><span id="price">0</span>руб.</p> </div> </div> <div class="col-sm-7"> <div class="pic"> <img src="img/1.jpg" alt="" id="card1"> <img src="img/2.jpg" alt="" id="card2"> <img src="img/3.jpg" alt="" id="card3"> <img src="img/4.jpg" alt="" id="card4"> <img src="img/5.jpg" alt="" id="card5"> </div> </div> </div> </div> </section> |
Содержание статьи
Стилизуем все классы у калькулятора.
Добавим рамку у калькулятора border: 3px solid #b641b0 и отступы по бокам padding: 20px 20px.
Цена будет #price большими буквами и font-weight: bold.
У изображений card-pic img отключим видимость display: none, но изначально будет видна первая #card1 картинка визитки черно-белая односторонняя display: inline-block.
Отступ сверху будет как у калькулятора padding-top: 20px.
Класс form-control будет на всю ширину width: 100% и с рамкой синего цвета.
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.h2 color: #1f62e9 .h3 color: #b641b0 .calc margin-top: 20px border: 3px solid #b641b0 padding: 20px 20px .form-control width: 100% border: 1px solid #1f62e9 label font-weight: bold #price font-size: 50px line-height: 0 font-weight: bold .pic img padding-top: 20px display: none #card1 display: inline-block |
Скрипт для калькулятора в common.js.
Вначале проверим изменялись ли значения select у элемента с классом calc $(.calc).change (function ().
Если одно из полей меняется применяем функцию.
Присваиваем переменной тираж $card значение select#card и вытаскиваем это значение функцией val ().
Также находим значение для типа бумаги $paper = $(select#paper).val ().
Какую цветность визитки выбрал покупатель, определим $color = $(select#color).val ().
Функция изменения картинки относительно выбора цветности.
Определим, какую цветность выбрал пользователь, чтобы подставить соответствующую картинку, для этого используем логическую функцию if.
Для каждого option у цветности создадим дата атрибуты data=1,2,3,4,5 в index.html.
В скрипте добавим переменную $color1, которая будет брать селект с идентификатором select#color, с выбранным option:selected на данный момент.
И у этого option достаем определенный атрибут командой attr (data).
Теперь проверим, если if переменная $color1 равна 1, то скрываем все картинки функцией $(.pic img).hide (), а первое изображение покажем $(#card1).show (slow).
Делаем по аналогии для других пяти изображений и проверяем в браузере.
Напишем формулу расчета стоимости визитки.
- Стандартный формат визитки 9 на 5 сантиметров. Таких визиток на целый лист формата А3 поместится 30 штук $viz = 30, поэтому итоговый тираж будем делить на 30 $fin = $card / $viz.
- Теперь итоговый тираж умножим на цену за бумагу $price = $fin * $tb. Добавим атрибут к option у бумаги tb=9,18,21 в index.html это цена в зависимости от типа бумаги. Теперь в скрипте зададим переменную, которая вытащит атрибут attr (tb) из выбранного типа бумаги select#paper option:selected.
- Третий параметр, который влияет на цену это цветность, зададим атрибуты дата цены у option селекта с именем color. clpr=5,10,10,20,15 цена каждой цветности в index.html. В common.js переменная $clpr равна выбранной option, в select с идентификатором color и вытаскиваем атрибут attr (clpr).
Общая формула будет умножение атрибутов цены всех выбранных option $price = $fin * $tb * $clpr.
Для вывода стоимости тиража $(span#price).text ($price).
Код в common.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
$(function() { $('.calc').change(function(){ $card = $('select#card').val(); $paper = $('select#paper').val(); $color = $('select#color').val(); $tb = $('select#paper option:selected').attr("tb"); $clpr = $('select#color option:selected').attr('clpr'); $color1 = $('select#color option:selected').attr('data'); if ($color1 == 1) { $('.pic img').hide(); $('#card1').show('slow'); } if ($color1 == 2) { $('.pic img').hide(); $('#card2').show('slow'); } if ($color1 == 3) { $('.pic img').hide(); $('#card3').show('slow'); } if ($color1 == 4) { $('.pic img').hide(); $('#card4').show('slow'); } if ($color1 == 5) { $('.pic img').hide(); $('#card5').show('slow'); } $viz = 30; $fin = $card / $viz; $price = $fin * $tb * $clpr $('span#price').text($price); }); }); |
