Есть калькулятор цен он менялся в зависимости от потребностей, но сейчас нужно объединить их работу в один. Первый калькулятор брал цены со спан и умножал на коеф. из валют. Второй можно указывать цены вручную, но нет дополнительных валют. ПРосьба помочь что бы можно было оставить возможность меня цены вручную для каждой позиции, но при этом цена умножалась еще на коэф. выбранной валюты.
Первый калькулятор с переводом валют
<body>
<div class="tab-content">
<div class="col-md-12 vartex" style="padding-right: 0px">
<input type="radio" class="radio" name="nameRadio" value="1" data-info="Near Native" checked="checked" data-value="1"/ id="test1"><label class="lbr">Near Native</label>
<input type="radio" class="radio" name="nameRadio" value="1.483870967741935" data-info="Native" data-value="2"/ id="test2"><label class="lbr">Native</label>
<output id="rezultatRadio" style="display: none;">1</output>
</div>
<!--------------------------------------------------------------------------------Tab panes vi----------------------------------------------------------- -->
<div class="tab-pane active container" id="vi">
<div class="row">
<!------------------------------------5 classes взрослые группа--------------------------------------------Tab panes--------------------->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="card">
<div class="urok">
<p class="uroktext text-center">5 classes</p>
</div>
<div class="timecard">
<p><span><img src="https://addrian.school/img/img/clock_1.svg" alt="" class="timecardimg"></span>50 min</p>
</div>
<div class="card-body">
<div class="price">
<h5 class="text-center indificator" id="vii5" data-cost='12.4'><span>12.4€</span></h5>
<h4 class="text-center">per class</h4>
</div>
<hr class="hrmy">
<h5 class="text-center pricepacketprice" data-cost='62' >
<p style="margin-bottom: 0px!important; min-height: 50px;"> <span class="price" id="vi5">62€</span> <span class="vtor">per package</span></p>
</h5>
<p class="pricepacketsale text-center" style="display: none;">save 3%</p>
</div>
</div>
</div>
<!------------------------------------10 classes взрослые группа--------------------------------------------Tab panes--------------------->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="card">
<div class="urok">
<p class="uroktext text-center"> 10 classes</p>
</div>
<div class="timecard">
<p><span><img src="https://addrian.school/img/img/clock_1.svg" alt="" class="timecardimg"></span>50 min</p>
</div>
<div class="card-body">
<div class="price">
<h5 class="text-center indificator" id="vii10" data-cost='9'> <span>12€</span></h5>
<h4 class="text-center">per class</h4>
</div>
<hr class="hrmy">
<h5 class="text-center pricepacketprice" data-cost='90'>
<p style="margin-bottom: 0px!important;"> <span class="price" id="vi10">120€</span> <span class="vtor">per package</span></p>
</h5>
<p class="pricepacketsale text-center">save 3%</p>
</div>
</div>
</div>
<!------------------------------------20 classes взрослые группа--------------------------------------------Tab panes--------------------->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="card">
<div class="urok">
<p class="uroktext text-center">20 classes</p>
</div>
<div class="">
<img src="https://addrian.school/img/img/vs2.png" class="" id="imgggg" alt="">
<p class="vsp"><span><img src="https://addrian.school/img/img/q.png" alt="" class="vsi">best</span></p>
</div>
<div class="timecard tmvs">
<p><span><img src="https://addrian.school/img/img/clock_1.svg" alt="" class="timecardimg"></span>50 min</p>
</div>
<div class="card-body">
<div class="price vs1">
<h5 class="text-center indificator" id="vii20" data-cost='8.5'> <span>11.2€</span></h5>
<h4 class="text-center">per class</h4>
</div>
<hr class="hrmy">
<h5 class="text-center pricepacketprice" data-cost='179'>
<p style="margin-bottom: 0px!important;"> <span class="price" id="vi20">236€</span> <span class="vtor">per package</span></p>
</h5>
<p class="pricepacketsale text-center">save 5% + 1 lesson as a gift</p>
</div>
</div>
</div>
<!------------------------------------40 classes взрослые группа--------------------------------------------Tab panes--------------------->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="card">
<div class="urok">
<p class="uroktext text-center"> 40 classes</p>
</div>
<div class="timecard">
<p><span><img src="https://addrian.school/img/img/clock_1.svg" alt="" class="timecardimg"></span>50 min</p>
</div>
<div class="card-body">
<div class="price">
<h5 class="text-center indificator" id="vii40" data-cost='8.3'> <span>10.9€</span></h5>
<h4 class="text-center">per class</h4>
</div>
<hr class="hrmy">
<h5 class="text-center pricepacketprice" data-cost='347'>
<p style="margin-bottom: 0px!important;"> <span class="price" id="vi40">457€</span> <span class="vtor">per package</span></p>
</h5>
<p class="pricepacketsale text-center">save 8% + 2 lesson as a gift</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="display: none">
<div class="col-md-12 vartex vartex2" style="padding-right: 0px">
<p class="prepod"> <b>Изменить валюту:</b><select id="valuta" class="dropdown-select">
<option>€ EUR</option>
</select> </p>
</div>
</div>
</div>
</body>
</html>
<script>
document.addEventListener("DOMContentLoaded", function() {
let db = [{
ISO4217: '₴',
multiply: 1
},
{
ISO4217: '$',
multiply: 0.0369
},
{
ISO4217: '€',
multiply: 0.032
},
{
ISO4217: '₽',
multiply: 2.6035
}
];
document.addEventListener('change', function({target}) { console.log(target)
if(target.closest('#valuta, [name="nameRadio"]')) {
let option = db[document.querySelector('#valuta').selectedIndex];
rebuildPrices(option);
// вывести значения в консоль
var radioInfo = $('[name="nameRadio"]:checked').attr('data-info');
}
});
function rebuildPrices({ISO4217, multiply}) {
const val = document.querySelector('[name="nameRadio"]:checked').value || 1;
document.querySelector('#rezultatRadio').innerHTML = val;
[...document.querySelectorAll('[data-cost]')].forEach(el => {
const num = el.dataset.cost,
span = el.querySelector('span'),
limit = el.classList.contains('pricepacketprice') ? Math.floor(num * multiply * val ) : (num * multiply * val).toFixed(1);
span.innerHTML = `${limit} ${ISO4217}`;
var radioInfo = $('[name="nameRadio"]:checked').attr('data-info');
//vi
vi5p = document.getElementById('vi5').innerHTML;
vi10p = document.getElementById('vi10').innerHTML;
vi20p = document.getElementById('vi20').innerHTML;
vi40p = document.getElementById('vi40').innerHTML;
//di
di5p = document.getElementById('di5').innerHTML;
di10p = document.getElementById('di10').innerHTML;
di20p = document.getElementById('di20').innerHTML;
di40p = document.getElementById('di40').innerHTML;
})
}
rebuildPrices(db[0])
});
</script>
Второй калькулятор калькулятор с указанием вручную цен
<script>
////////////////////////////////////////////////////////
//vi5
$("input[type='radio']").change(function(){
switch($(this).val()) {
case "1" :
$('#vii5').html("12.4€");
break;
case "1.483870967741935" :
$('#vii5').html("18.4€");
break;
};
});
$("input[type='radio']").change(function(){
switch($(this).val()) {
case "1" :
$('#vi5').html("62€");
break;
case "1.483870967741935" :
$('#vi5').html("92€");
break;
};
});
//vi10
$("input[type='radio']").change(function(){
switch($(this).val()) {
case "1" :
$('#vii10').html("12€");
break;
case "1.483870967741935" :
$('#vii10').html("17.8€");
break;
};
});
$("input[type='radio']").change(function(){
switch($(this).val()) {
case "1" :
$('#vi10').html("120€");
break;
case "1.483870967741935" :
$('#vi10').html("178€");
break;
};
});
//vi20
$("input[type='radio']").change(function(){
switch($(this).val()) {
case "1" :
$('#vii20').html("11.2€");
break;
case "1.483870967741935" :
$('#vii20').html("16.6€");
break;
};
});
$("input[type='radio']").change(function(){
switch($(this).val()) {
case "1" :
$('#vi20').html("236€");
break;
case "1.483870967741935" :
$('#vi20').html("349€");
break;
};
});
//vi40
$("input[type='radio']").change(function(){
switch($(this).val()) {
case "1" :
$('#vii40').html("10.9€");
break;
case "1.483870967741935" :
$('#vii40').html("16.1€");
break;
};
});
$("input[type='radio']").change(function(){
switch($(this).val()) {
case "1" :
$('#vi40').html("457€");
break;
case "1.483870967741935" :
$('#vi40').html("676€");
break;
};
});
</script>
