itemAddOptionPrice

Динамическое изменение цены при выборе опционального свойства

HTML

<div class="items">
  <form class="item">
    <div class="item__name">Товара Б</div>
    
    <ul class="item__option" name="options[field_name]">
      <li  data-original-price="0">опции</li>
      <li  data-original-price="9.55">опция А +9.55 руб.</li>
      <li  data-original-price="19.55">опция Б +19.55 руб.</li>
      <li  data-original-price="29.55">опция В +29.55 руб.</li>
      
    </ul>
    
    <div class="price">
      <div class="price__value" data-original-price="100">100</div>
      <div class="price__suffix">руб.</div>
      </div>
  </form>
</div>

CSS

body {
  font: 13px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: #dbe0eb;
}

.item {
  margin: 5px auto;
  width: 150px;
  padding: 20px;
  background: #f4f4f4;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.item__name {}

.item__option {}

.price {
    display: block;
}

.price__value, .price__suffix {
    display: inline-block;
}

.price__value {
  padding-right: 5px;    
}

JavaScript

var site = {};

site.itemAddOptionPrice = function () {
  var target = $('.price__value', this);
  var itemPrice = parseFloat(target.data('original-price'));
  var optionPrice = parseFloat($('.item__option option:selected', this).data('original-price'));
  target.html(itemPrice + optionPrice);
};

site.init = function () {   
  jQuery('.item').change(site.itemAddOptionPrice);
};


jQuery(document).ready(function () {
    site.init();
});