Как с помощью radio inputa сделать динамическое изменение цены опционального товара?

347

23 мая 2017, 02:48

Здравствуйте! Делаю сайт, заказ Суши и роллы и там есть опциональные товары (например Роллы), прежде чем добавить в корзину клиенту нужно выбрать кол-во, т.е 4 шт. или 8 шт. и соответственно стоимость товара должна меняться при выборе. Обычно это делается select' ом но select' ы не всегда смотрится красиво, поэтому сделал radio input' ом (+label) и не знаю как это сделать.

Вот так выглядеть сайт: и видео https://youtu.be/r_domj9Roqg

Вот HTML код

<div class="product-item"> 
    <div class="caption"> 
      <h5><a href="#">Ролл с лососем</a></h5> 
      <div class="variations"> 
        <input type="radio" id="variat-1" name="Количества" value="4 шт." data-price="100" checked> 
        <label for="variat-1">4 шт.</label> 
        <input type="radio" id="variat-2" name="Количества" value="8 шт." data-price="189"> 
        <label for="variat-2">8 шт.</label> 
      </div> 
      <p class="price">100</p> 
      <a href="#">В корзину</a> 
    </div> 
</div>

Как можно это реализовать? Вообще можно ли сделать с помощью radio?

Заранее благодарен!

Answer 1

Дописал скрипт (разметка та же):

$(document).on("change", ".variations input", function () { 
  var $target = $(event.target) 
  $target.closest(".caption").find(".price").text($target.data("price")) 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="product-item"> 
    <div class="caption"> 
      <h5><a href="#">Ролл с лососем</a></h5> 
      <div class="variations"> 
        <input type="radio" id="variat-1" name="Количества" value="4 шт." data-price="100" checked> 
        <label for="variat-1">4 шт.</label> 
        <input type="radio" id="variat-2" name="Количества" value="8 шт." data-price="189"> 
        <label for="variat-2">8 шт.</label> 
      </div> 
      <p class="price">100</p> 
      <a href="#">В корзину</a> 
    </div> 
</div>

Answer 2

Обычно это делается так: располагаются radio и скрываются (через display:none). А, например внутри label располагается какой-либо тег, который оформляется кастомным образом.

Пример:

div { 
  margin:0 0 0.75em 0; 
} 
 
input[type="radio"] { 
    display:none; 
} 
input[type="radio"] + label { 
    color: $DarkBrown; 
    font-family:Arial, sans-serif; 
    font-size:14px; 
} 
input[type="radio"] + label span { 
    display:inline-block; 
    width:19px; 
    height:19px; 
    margin:-1px 4px 0 0; 
    vertical-align:middle; 
    cursor:pointer; 
    -moz-border-radius:  50%; 
    border-radius:  50%; 
} 
 
input[type="radio"] + label span { 
     background-color:#292321; 
} 
 
input[type="radio"]:checked + label span{ 
     background-color:#CC3300; 
} 
 
input[type="radio"] + label span, 
input[type="radio"]:checked + label span { 
  -webkit-transition:background-color 0.4s linear; 
  -o-transition:background-color 0.4s linear; 
  -moz-transition:background-color 0.4s linear; 
  transition:background-color 0.4s linear; 
}

<div> 
  <input type="radio" id="radio01" name="radio" /> 
  <label for="radio01"><span></span>Radio Button 1</label> 
</div> 
 
<br/> 
 
<div> 
 <input type="radio" id="radio02" name="radio" /> 
 <label for="radio02"><span></span>Radio Button 2</label> 
</div>

В данном случае идет оформление тега <span> внутри label.

Если закоментируете строки:

input[type="radio"] {
    display:none;
}

то увидите, что атрибут checked у кнопки благополучно проставляется

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Flexbox, Как убрать часть текста?

Eсть 2 блока первый текст 2-й картинка Как убрать часть текста с помощью flexbox при разрешении 768px

313

MySQL

Помогите ускорить запрос к MySQL с большим offset limit

Подскажите, пожалуйста, как лучше составить запрос к mysql для вывода новостей на DLE, чтобы максимально ускорить? по дефолту представлен следующий...

394

MySQL