Как в тильде в блоке товара добавить выбор кол-во товара?

Question

[KRHD]

В тильда есть блоки товаров:

Как в них добавить input с выбором количества добавляемых в корзину, типа такого:

Answer 1

[Степан Воеводин]

Чтобы добавить блок с выбором товара надо:
1. Создаем блок ST305N в режиме каталога
2. Добавляем товар с артикулами

3. Вставляем код в Настройки сайта - Ещё - Вставка в Head

<script>
$( document ).ready(function() {
//Добавляем кнопки в карточки  
function insertbtncard(){
//При загрузке
let tistore = setInterval(function() {
    if (document.querySelector('.js-product.t-store__card_hidden')){
    }else{ 
         clearInterval(tistore) 
          setTimeout(function(){
       $('.js-product .quantbtnwrap').remove();
       $('<div class="quantbtnwrap"><div class="quantminus noactive"></div><input type="number" class="quanttxt" value="1"><div class="quantplus"></div></div>').insertAfter('a[href="#order"].t-btn');$(window).trigger('resize');
       }, 1000); 
    }
}, 100);   
};
insertbtncard();
$(document).on('click','.js-store-filter , .js-store-filter-chosen-item , .js-store-load-more-btn , .js-store-parts-switcher',function(e){  insertbtncard(); });
$(document).on('keydown','.js-store-filter',function(event){if(event.keyCode == 13) { insertbtncard()}}); 
var pravailable = 0; var quantincart=0;
$(document).on('click','a[href="#prodpopup"]',function(e){ 
    setTimeout(function(){
        $('.t-store__prod-popup__info .quanttxt').val(1); $('.t-store__prod-popup__info .quantminus').addClass('noactive');$('.t-store__prod-popup__info .quantplus').removeClass('noactive');
    }, 100); });
    //При клике на +
    $(document).on('click','.quantplus',function(e){ 
        $(this).siblings('.quantminus').removeClass('noactive');
        pravailable= Number($(this).closest('.js-product').attr('data-product-inv'));
        if(!pravailable) pravailable=1e4;
        let currquant = Number($(this).siblings('.quanttxt').val());
        if (pravailable>currquant){$(this).siblings('.quanttxt').val(currquant+1)
        }else{$(this).addClass('noactive')};
    });
    //При клике на -
    $(document).on('click','.quantminus',function(e){ 
        $(this).siblings('.quantplus').removeClass('noactive');
        let currquant = Number($(this).siblings('.quanttxt').val());
        if (currquant>1){$(this).siblings('.quanttxt').val(currquant-1)
        }else{$(this).addClass('noactive')};
    });
    //Ввод данных в поле
    $(document).on('change keyup input click','input.quanttxt',function(e){
    if (this.value.match(/[^0-9]/g)) {this.value = this.value.replace(/[^0-9]/g, '')};
    //Предел 3 знака
    if( $(this).val().length > 3) $(this).val($(this).val().substr(0, 3)); 
    });
    //Потеря фокуса
    $(document).on('focusout','input.quanttxt',function(e){
    if ( ($.trim($(this).val()) == '') || ($.trim($(this).val()) == 0 ) ){$(this).val(1)};
    pravailable= Number($(this).closest('.js-product').attr('data-product-inv'));
    let currquant = Number($(this).val());
    if ( (currquant > pravailable)  && (pravailable > 0) ){$(this).val(pravailable)};
    });
  
$(document).on('click','a[href="#order"]',function(e){
    var quantotcart = Number($(this).parent().find('.quanttxt').val());
    var needsku= $(this).closest('.js-product').find('.js-product-sku').html();
    pravailable= Number($(this).closest('.js-product').attr('data-product-inv'));
     setTimeout(function(){
        tcart__syncProductsObject__LStoObj();tcart__reDrawProducts();tcart__reDrawTotal(); 
        $('.t706__product-title div:contains("'+needsku+'")').closest('.t706__product').addClass('ffposprod');
        quantincart =  Number($('.ffposprod .t706__product-quantity').html());
        if(quantincart==pravailable){}else{
        $('.ffposprod .t706__product-quantity').html(quantotcart+quantincart-1);$('.ffposprod .t706__product-quantity').trigger("click");$('.ffposprod input[name="tilda-tmp-cart-qnt"]').trigger("focusout");
        };
     }, 10); 
}); 
});
</script>

4. Вставляем код в Настройки сайта- Ещё - Редактировать CSS

.js-store-buttons-wrapper, .t-store__prod-popup__btn-wrapper { display: flex; flex-wrap:wrap; align-items: center;}
.quantbtnwrap {
    display: flex;
    align-items: center;
    height: 20px;
    margin-top: -4px;
    margin-left: 20px;
}
.quantminus , .quantplus{
    width: 20px;
    height: 100%;
    background-size: contain;
    cursor:pointer;
    opacity:0.4;
}
.quantminus:hover , .quantplus:hover{ opacity:1;}
.quantminus{
  background-image: url(https://static.tildacdn.com/lib/linea/c8eecd27-9482-6c4f-7896-3eb09f6a1091/arrows_circle_minus.svg);
}
.quantplus{
 background-image: url(https://static.tildacdn.com/lib/linea/c47d1e0c-6880-dc39-ae34-521197f7fba7/arrows_circle_plus.svg); 
}
.noactive{ pointer-events:none; opacity:0.1 !important;}
a.t-store__prod-popup__btn_disabled~div.quantbtnwrap {display: none;}


.t-store__card__btn {
    margin-bottom: 20px !important;
}
.t-store__card .quantbtnwrap {
    margin-top: 0px;
    margin-bottom: 20px;
}

.quanttxt {
    font-family: 'Roboto',Arial,sans-serif;
    margin: 0;
    font-size: 16px;
    text-align: center;
    width: 40px;
    padding: 6px 2px;
    border: none;
    outline: none;
    transition: all 0.2s;
}
input.quanttxt:hover, input.quanttxt:focus {
    box-shadow: 0 1px 0px 0px #969696;
}

@media screen and (max-width:670px){
.t-store__card__btns-wrapper {
    justify-content: center;
}
.t-store__card .quantbtnwrap {
    margin-bottom: 0px;
    margin-left: 0px;
}
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type='number'] {
    -moz-appearance: textfield;
}

Если надо изменить кратность товара:
1. Создаем T123

2. Заходит в Контент блока и вставляем код

<script>
var newMultipleNumber = 100; /* вместо 100 укажите нужное вам число */

function tcart__product__plus(t) {
var r = t.closest(".t706__product"),
o = r.attr("data-cart-product-i");
window.tcart.products[o].quantity += (window.tcart.products[o].quantity % newMultipleNumber > 0 ? newMultipleNumber - window.tcart.products[o].quantity : newMultipleNumber);
window.tcart.products[o].amount = window.tcart.products[o].price * window.tcart.products[o].quantity;
window.tcart.products[o].amount = tcart__roundPrice(window.tcart.products[o].amount);
r.find(".t706__product-quantity").html(window.tcart.products[o].quantity);
0 < window.tcart.products[o].amount ? r.find(".t706__product-amount").html(tcart__showPrice(window.tcart.products[o].amount)) : r.find(".t706__product-amount").html("");
tcart__updateTotalProductsinCartObj();
$(".t706__carticon-counter").html(window.tcart.total);
tcart__reDrawTotal();
tcart__saveLocalObj();
}

function tcart__product__minus(t) {
var r = t.closest(".t706__product"),
o = r.attr("data-cart-product-i");
0 < window.tcart.products[o].quantity && (window.tcart.products[o].quantity -= newMultipleNumber);
window.tcart.products[o].amount = window.tcart.products[o].price * window.tcart.products[o].quantity;
window.tcart.products[o].amount = tcart__roundPrice(window.tcart.products[o].amount);
r.find(".t706__product-quantity").html(window.tcart.products[o].quantity);
0 < window.tcart.products[o].amount ? r.find(".t706__product-amount").html(tcart__showPrice(window.tcart.products[o].amount)) : tcart__product__del(t);
tcart__updateTotalProductsinCartObj();
$(".t706__carticon-counter").html(window.tcart.total);
tcart__reDrawTotal();
tcart__saveLocalObj();
}

</script>

<style>
.t706__product-plusminus {
width: unset !important;
}
</style>