<!-- Добавляем поле для Надписи -->
<div class="newselect nadpis">
<div class="t-product__option-title t-descr t-descr_xxs">Надпись на торте:</div>
<input type="text" name="Input" class="t-input polenadpisi t-descr t-descr_xxs" value="Без надписи" style="">
</div>
<!-- Добавляем поле Select для Надписи -->
<div class="t-product__option js-product-option newselect noshowthis">
<div class="t-product__option-title t-descr t-descr_xxs js-product-option-name">Надпись</div>
<div class="t-product__option-variants">
<select class="t-product__option-select t-descr t-descr_xxs js-product-option-variants">
<option value="1" data-product-variant-price="С днём рождения"></option>
</select>
</div>
</div>
<!-- Добавляем поле с Весом -->
<div class="t-product__option js-product-option newselect">
<div class="t-product__option-title t-descr t-descr_xxs js-product-option-name">Вес торта, кг:</div>
<div class="t-product__option-variants">
<select class="t-product__option-select t-descr t-descr_xxs js-product-option-variants">
<option value="1" data-product-variant-price="1">1 кг</option>
<option value="2" data-product-variant-price="2">2 кг</option>
<option value="3" data-product-variant-price="3">3 кг</option>
</select>
</div>
</div>
<style>
/*Скрываем техническое поле Select*/
.noshowthis{
display:none;
}
/*Стили для поля Select*/
.t776 .t-product__option-select {
border: 1px #a7a7a7 solid !important;
background: #ffeca7 !important;
color: #795752 !important;
}
/*Стили для стрелочки в Select*/
.t776 .t-product__option-variants:after {
border-color: #795752 transparent transparent transparent !important;
}
/*Цвет заголовка в корзине*/
.t706__cartwin-heading {
color: #79534d !important;
}
/*Стиль названия продукта*/
.t706__product-title {
color: #79534d !important;
}
/*Описание продукта*/
.t706 .t-descr_sm {
color: #79534d !important;
}
/*Кол-во продукта*/
.t706__product-quantity {
color: #79534d !important;
}
/*Обводка у миниатюр*/
.t776 .t-slds__thumbsbullet.t-slds__bullet_active .t-slds__thumbsbullet-border {
border-color: #F6D55C !important;
}
/*Стиль поля ввода Надписи*/
.polenadpisi {
width: 200px;
height: 27px;
border: 1px #a7a7a7 solid;
background: #ffeca7;
color: #795752;
font-size: 14px;
padding: 2px 30px 2px 10px;
box-sizing: border-box;
border-radius: 5px;
-webkit-appearance: none;
appearance: none;
-moz-appearance: none;
}
/*Отступ надписи*/
.nadpis {
margin-top: 15px;
}
/*Ширина полей Select*/
.t776 .t-product__option-variants {
min-width: 200px !important;
}
/*Корректировка поля Надписи для других разрешений*/
@media screen and (max-width: 1200px){
.polenadpisi {
height: 24px;
font-size: 12px;
}
}
/*Корректировка поля Надписи для других разрешений*/
@media screen and (max-width: 640px){
.polenadpisi {
height: 30px;
font-size: 16px;
}
}
</style>
<script>
$(document).ready(function(){
//При загрузке страницы обновляем все цены в PopUp окнах
setTimeout(function() {
//Вычисляем кол-во карточек товара
var y = $("div.t776__col").length;
var x = 0;
//Проходим все карточки
while (x <= y) {
$(".t-popup .t776__price-value:eq("+x+")").text($(".t776__price-value:eq("+x+")").text());
x++;
};
}, 2000);
//Добавляем класс к параметрам
$(".t-product__option").addClass("spiski");
//Перемещаем новые поля в карточку товара
$(".newselect").appendTo(".t-popup .t776__price-wrapper");
var fullId = 0;
var textovka = 0;
var clickId = 0;
//Функция расчёта цены
function summprice(){
//Составляем полный dataID
fullId = "[data-product-lid='" +clickId+ "']";
//Считываем текстовую надпись
textovka = $(fullId + " " + 'input').val();
//Записываем текст вэлемент Select
$(fullId + " " + 'select:eq(0) option:selected').data(textovka);
$(fullId + " " + 'select:eq(0) option:selected').val(textovka);
$(fullId + " " + 'select:eq(0) option:selected').text(textovka);
//Считываем вес
var ves = $(fullId + " " + 'select:eq(1) option:selected').data('product-variant-price');
//Считываем начинку
var nachinka = $(fullId + " " + 'select:eq(2) option:selected').data('product-variant-price');
//Считываем вид свечей
var vidsvech = $(fullId + " " + 'select:eq(3) option:selected').data('product-variant-price');
//Считываем кол-во свечей
var colsvech = $(fullId + " " + 'select:eq(4) option:selected').data('product-variant-price');
//Формируем цену
var cena = ves*nachinka + vidsvech*colsvech;
setTimeout(function() {
//Выводим сумму
$(".t776__product-full"+fullId+" .t776__price-value").text(cena)
}, 100);
};
//При клике в карточке
$('.t776__product-full , .t776__col').click(function(){
//Получаем её ID
clickId = $(this).data("product-lid");
summprice();
});
//При изменении списка
$('.t-product__option-select').change(function() {
summprice();
});
//При нажатии клавиш в поле надписи сохраняем значение мгновенно
$('.t776 input').keyup( function() {
//Получаем значение из поля ввода
textovka = $(fullId + " " + 'input').val();
//Записываем значение в поле Select
$(fullId + " " + 'select:eq(0) option:selected').data(textovka);
$(fullId + " " + 'select:eq(0) option:selected').val(textovka);
$(fullId + " " + 'select:eq(0) option:selected').text(textovka);
});
});
</script>