JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.min.css">
<div class="qty">

</div>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <input id="wpp-rc-width-img" type="text" value="80" />
      <div class="clearfix wpp-offset-20"></div>
      <input id="wpp-rc-height-img" type="text" value="140" />
      <img src="http://placehold.it/350x450" class="wpp-rc-main-image">
    </div>

    <div class="col-sm-6 wpp-rc-column-params">

      <div class="row">
        <div class="form-group col-sm-6">
          <label class="wpp-rc-label" for="wpp-rc-width">Ширина</label>
          <input type="text" name="wpp-rc-width" id="wpp-rc-width" value="80">
        </div>
        <div class="form-group  col-sm-6">
          <label class="wpp-rc-label" for="wpp-rc-height">Высота</label>
          <input type="text" name="wpp-rc-height" id="wpp-rc-height" value="140">
        </div>
      </div>

      <div class="row">
        <div class="form-group">
          <label class="wpp-rc-label" for="wpp-rc-passer">Высота складок(см)</label>
          <input type="text" name="wpp-rc-passer" id="wpp-rc-passer" value="">
        </div>
      </div>

      <div class="row">
        <div class="form-group wpp-check-group">
          <span class="wpp-rc-label">Вид карниза</span>
          <label for="wpp-rc-kn" class="col-sm-2">
            <img src="https://mybiobox.com/themes/axome/img/svg/cross.svg" class="wpp-check-img wpp-check-current" data-toggle="tooltip" data-placement="top"...

CSS

.wpp-rc-label {
  display: block;
  width: 100%;
  font-weight: 300;
  padding: 1px 15px 10px;
  margin-top: 15px;
}

img.wpp-check-img {
  max-width: 100%;
  cursor: pointer;
}

.wpp-check-current {
  border: 2px solid red;
}

.wpp-check-group [type="radio"] {
  /*display: none;*/
}

.wpp-offset-20 {
  margin-bottom: 20px;
}

img.wpp-rc-main-image {
  width: calc( 100% - 50px);
}

#wpp-rc-width-img {
  width: 100%;
}

.slider.slider-horizontal {
  width: calc( 100% - 50px);
  margin-left: 23px;
}

.slider.slider-vertical {
  height: 379px;
}

.tooltip-inner {
  /*min-width: 650px;*/
}

.wpp-rc-tool-img {
  max-width: 250px;
}

JavaScript

//пересчет цены
function check_price() {

  var $m2 = 1000, //Цена за м2
    $options = 0, //переменная для опций
    $width = 135,
    $width_flag = true,
    $offset = {
      4: 100,
      5: 200,
      6: 300,
      7: 400,
      9: 500,
      10: 600,
      15: 700,
      22: 800,
      25: 900,
      27: 1000,
      32: 1100,
      35: 1200
    };


  // если ширина ткани
  if (typeof $width_flag !== 'undefined' && $width_flag === true) {
    // получаем ширину ткани требуемую с поправкой
    $need_width = parseInt($('#wpp-rc-width').val(), 10) + 20;
    // если требуемая ширина больше ширины ткани
    if ($need_width > $width) {
      //получаем сколько ширин нам надо взять
      $final_width_count = Math.ceil($need_width / $width);
      $need_width = (parseInt($('#wpp-rc-width').val(), 10) + 20) * $final_width_count;
    }
  } else {
    $need_width = parseInt($('#wpp-rc-width').val(), 10)
  }


  // если высота  ткани
  if (typeof $height_flag !== 'undefined' && $height_flag === true) {
    // получаем ширину ткани требуемую с поправкой
    $need_height = parseInt($('#wpp-rc-height').val(), 10) + 20;
    // если требуемая ширина больше ширины ткани
    if ($need_height > $height) {
      //получаем сколько ширин нам надо взять
      $final_height_count = Math.ceil($need_height / $height);
      $need_height = (parseInt($('#wpp-rc-width').val(), 10) + 20) * $final_height_count;
    }
  } else {
    $need_height = parseInt($('#wpp-rc-height').val(), 10)
  }

  $m2_need = $need_width * $need_height / 10000;
  $price_need = $m2_need * $m2;

  //подсчет подкладки
  if ($('[name="wpp-rc-background-type[]"]:checked').val() !== 'no') {
    $back_price = parseInt($('[name="wpp-rc-background-type[]"]:checked').data('cost'), 10) * $m2_need;
  } else {
    $back_price = 0;
  }

  //Подсчет атрибутов ы ценой
  $('input[data-price]:checked').each(function() {
    if ($(this).val() !== 'no') {
      $options = $options + parseFloat($(this).data('price'));
    } else...