<script>
$( document ).ready(function() {
function catComplete(){
//При загрузке товаров
let tistore = setInterval(function() {
setTimeout(function(){
if ( $('.js-store-grid-cont div').length>0 || $('.t-store__prod-snippet__container').length>0 ){
clearInterval(tistore)
setTimeout(function(){
insertInput();
}, 200);
};
}, 600);
}, 100);
};
catComplete();
//Формируем блок с полями размера
let size = `
<div class="size-wrapper t-text">
<div class="size-title-wrapper">
<div>Ширина (м)</div>
<div class="cross"></div>
<div>Длина (м)</div>
</div>
<div class="size-input-wrapper">
<div><input type="text" name="size-width" class="t-input t-input-inline-styles" value="1"></div>
<div class="cross">x</div>
<div><input type="text" name="size-height" class="t-input t-input-inline-styles" value="1"></div>
</div>
<div class="size-price-wrapper">
<span class="size-price-text">Cтоимость: </span>
<span class="size-price"></span>
<span class="size-price-currense"> р.</span>
</div>
</div>
`;
//Добавляем поля в карточку
function insertInput(){
$('.t-store .js-product').each(function(){
$(this).find('.size-wrapper').remove();
$(this).find('.js-store-buttons-wrapper').before(size);
$(this).find('a[href="#order"]').attr('href', '#price-to-cart');
let price = +$(this).find(".js-product-price").text();//Цена
$(this).find(".size-price").text(price.toFixed(2));
});
};
$(document).on('click','.js-store-filter , .js-store-filter-chosen-item , .js-store-load-more-btn , .js-store-parts-switcher',function(e){ catComplete(); });
$(document).on('keydown','.js-store-filter',function(event){if(event.keyCode == 13) { catComplete()}});
$(document).on('change','.t-store__sort-select',function(e){ catComplete() });
//При открытии карточки товара
$(document).on('click','a[href*="/tproduct/"]',function(e){ catComplete() });
$('body').on('input', '.size-wrapper input', function(){
this.value = this.value.replace(/[^0-9.]/g, '');
});
function divideNumberByPieces(x, delimiter) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
};
$(document).on('input',' .size-wrapper input ',function(e){
let elem = $(this).closest(".js-product");
let price = +elem.find(".js-product-price").text();//Цена
let sWidth = +elem.find(' input[name="size-width"]').val();
let sHeight = +elem.find(' input[name="size-height"]').val();
price = (sWidth*sHeight*price).toFixed(2);
elem.find(".size-price").text( divideNumberByPieces(price) );
});
//Вызов формы по клику в карточке товара
$(document).on('click','a[href="#price-to-cart"]',function(e){
e.preventDefault();
$(this).closest(".js-product").addClass("selectproduct");//размечаем класс активного продукта
//Получаем данные из карточки продукта
let prodName = $(".selectproduct .js-product-name").text();//Название продукта
let urlprodimg = $('.selectproduct .js-product-img:first').attr('data-original');//Картинка
let sku = $(".selectproduct .js-product-sku").text();//Артикул
let price = $(".selectproduct .js-product-price").text();//Цена
let sWidth = +$('.selectproduct input[name="size-width"]').val();
let sHeight = +$('.selectproduct input[name="size-height"]').val();
price = (sWidth*sHeight*price).toFixed(2);
$(".selectproduct .size-price").text( divideNumberByPieces(price) );
//Заполняем блок ST200
$('.uc-prod-middle .js-product-name').text( prodName );//Заполняем название товара
$('.uc-prod-middle .js-product-sku').text( 'Артикул: '+sku );//Заполняем артикул
$('.uc-prod-middle .js-product-price').text( price ); //Заполняем цену
$('.uc-prod-middle .t-slds__bgimg').css('background-image', 'url('+urlprodimg+')').attr('data-original', urlprodimg); //Заполняем картинку
//Формируем опции
$('.uc-prod-middle select:eq(0) option:selected').val( sWidth );//ширина
$('.uc-prod-middle select:eq(1) option:selected').val( sHeight );//длина
//Удаляем класс активного продукта
$(".js-product").removeClass("selectproduct");
setTimeout(function() { $(".uc-prod-middle .t-btn")[0].click(); }, 150);
});
});
</script>
<style>
.size-title-wrapper {
display: flex;
margin-bottom: 6px;
font-size: 14px;
}
.size-input-wrapper input {
border: 1px solid #e2e2e2;
border-radius: 10px;
height: 35px;
font-size: 14px;
text-align: center;
}
.size-input-wrapper {
display: flex;
}
.size-input-wrapper>div,
.size-title-wrapper>div{
width: 110px;
}
.size-input-wrapper .cross,
.size-title-wrapper .cross{
width: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: 600;
opacity: 0.7;
}
.size-wrapper.t-text {
margin-top: 15px;
margin-bottom: 10px;
}
.t-store__card__price-currency:after{
content: "/м";
/*font-size: 8px;*/
/*transform: translateY(-6px);*/
display: inline-block;
}
.t-store__prod-popup__price-currency:after{
content: "/м";
/*font-size: 10px;*/
/*transform: translateY(-7px);*/
display: inline-block;
}
.t-store__card__price.t-store__card__price-item:after,
.js-store-prod-price.t-name:after {
content: "2";
font-size: 8px;
transform: translateY(-6px);
display: inline-block;
}
.size-price-wrapper {
margin-top: 15px;
font-weight: 600;
font-size: 18px;
}
</style>