<script>
document.addEventListener("DOMContentLoaded", function() {
(function () {
const maxSize=15;
const pribor = document.querySelector('input[name="Прибор"]');
let cartwin = document.querySelector('.t706__cartwin-bottom');
if(cartwin==null) cartwin = document.querySelector('.t706__cartpage-totals');
const div = document.createElement("div");
div.className = "cutlery_wrapper";
div.innerHTML = `<span>Столовые приборы</span>
<div class="cutlery_action">
<div class="cutlery_icon show_elem"></div>
<div class="cutlery_minus"></div>
<div class="cutlery_num">1</div>
<div class="cutlery_plus"></div>
</div>`;
cartwin.prepend(div);
let cutleryIcon = document.querySelector(".cutlery_icon");
document.querySelector(".cutlery_minus").addEventListener('click', function(event) {
const elem = this.nextElementSibling;
let num = Number(elem.innerHTML);
if(num>0){
elem.innerHTML = num-1;
pribor.value = (num-1)+' шт';
};
if(num==1) cutleryIcon.classList.remove('show_elem');
});
document.querySelector(".cutlery_plus").addEventListener('click', function(event) {
const elem = this.previousElementSibling;
let num = Number(elem.innerHTML);
if(num==0) cutleryIcon.classList.add('show_elem');
if(num<maxSize){
elem.innerHTML = num+1;
pribor.value = (num+1)+' шт';
};
});
})();
});
</script>
<style>
.cutlery_wrapper {
--cutlery-icon-width: 30px; /*Ширина иконки вилка/ложка*/
--cutlery-plus-minus-width: 25px; /*Ширина иконки плюс/минус*/
font-family: 'Roboto',Arial,sans-serif;
font-weight: 300;
color: #000000;
}
@media screen and (max-width:680px){
.cutlery_wrapper {
--cutlery-plus-minus-width: 40px; /*Ширина иконки плюс/минус*/
}
}
.cutlery_wrapper span {
font-size: 14px;
opacity: 0.7;
}
.cutlery_action {
display: flex;
margin-top: 6px;
height: 40px;
align-items: center;
}
.cutlery_num {
font-size: 20px;
padding: 0 10px;
}
.cutlery_icon {
background-image: url(https://static.tildacdn.com/tild3761-6436-4237-b339-353163623330/637211.svg);
opacity:0.1;
width: var(--cutlery-icon-width);
margin-right: 25px;
}
.cutlery_minus,
.cutlery_plus{
cursor:pointer;
width: var(--cutlery-plus-minus-width);
height: 100%;
}
.cutlery_icon , .cutlery_minus, .cutlery_plus {
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.cutlery_minus {
background-image: url(https://static.tildacdn.com/tild3965-3930-4337-a631-323035373738/261937.svg);
}
.cutlery_plus {
background-image: url(https://static.tildacdn.com/tild3732-3339-4737-b138-646234666535/261936.svg);
}
.show_elem{ opacity:1}
</style>