itemAddOptionPrice

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

by ilyar

HTML

<div class="items">
  <form class="item">
    <div class="item__name">Товара А</div>
    <select class="item__option" name="options[field_name]">
      <option data-original-price="0">опции</option>
      <option value="1" data-original-price="9.55">опция А +9.55 руб.</option>
      <option value="2" data-original-price="19.55">опция Б +19.55 руб.</option>
      <option value="3" data-original-price="29.55">опция В +29.55 руб.</option>
    </select>
    <button class="price">
      <div class="price__value" data-original-price="100">100</div>
      <div class="price__suffix">руб.</div>
    </button>
  </form>
  <form class="item">
    <div class="item__name">Товара Б</div>
    <select class="item__option" name="options[field_name]">
      <option data-original-price="0">опции</option>
      <option value="1" data-original-price="9.55">опция А +9.55 руб.</option>
      <option value="2" data-original-price="19.55">опция Б +19.55 руб.</option>
      <option value="3" data-original-price="29.55">опция В +29.55 руб.</option>
    </select>
    <button class="price">
      <div class="price__value" data-original-price="100">100</div>
      <div class="price__suffix">руб.</div>
    </button>
  </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 () {
  $( "option:selected", this).each(function() {
    var price = parseFloat(jQuery(this).data('original-price')),
        target = $(this).parent().parent().find('.price__value'),
        itemPrice = parseFloat(target.data('original-price'));
    target.html(itemPrice + price);
  });
};

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


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