1 den fazla seçmek

Merhabalar,
Bu js kodları ile eticaret sitesinde varyantlarda 1 seçeneği seçebiliyorum ben 1den fazla seçenek seçilmesini istiyorum ne eklemem gerekiyor buraya ?

$('#ekle').click(function(){
          
        $('#sepet_durum').removeClass().html('');
        var devam = 0;
        var secenek_id = 0;

        if(parseInt($('[name="adet"]').val()) < 1){
          $('#sepet_durum').addClass('hata').html('Lütfen geçerli bir adet giriniz.');
        }else{
            if($('.varyant li').length){
              if($('.varyant li div').hasClass('aktif')){
                if(parseInt($('[name="adet"]').val()) <= parseInt($('[data-stok].aktif').attr('data-stok'))){
                  secenek_id =  $('[data-stok].aktif').attr('data-secenek-id');
                  devam = 1;
                }else{
                  $('#sepet_durum').addClass('hata').html('Bu Seçenekten En Fazla '+ $('[data-stok].aktif').attr('data-stok') +' Adet Alabilirsiniz.');
                }
              }else{
                $('#sepet_durum').addClass('hata').html('Lütfen bir seçenek seçiniz.');
              }
            }else{
              devam = 1;
            }
        }

işinizi görür umarım. kolay gelsin.

Temsili html

<ul class="varyant">
  <li data-stokid="2">
    Seçenek 1
  </li>
  <li data-stokid="4">
    Seçenek 2
  </li>
  <li data-stokid="8">
    Seçenek 3
  </li>
</ul>
<div>Sepet: <div id="sepet_durum"></div>
</div>
<input name="adet" value="1">
<button id="ekle">Ekle</button>

Sepet ekle butonu

$("#ekle").on("click", function () {
  $("#sepet_durum").removeClass().html("");

  // dizi olması gerekiyor
  var secenek_id = [];

  if (parseInt($('[name="adet"]').val()) < 1) {
    $("#sepet_durum").addClass("hata").html("Lütfen geçerli bir adet giriniz.");
  } else {
    
    if ($(".varyant li.aktif").length === 0) {
      $("#sepet_durum").addClass("hata").html("seçim yapın");
      return false;
    }

    $(".varyant li").each(function () {
      var li = $(this);
      if (li.hasClass("aktif")) {
        // diziye secili olan ID set ediliyor.
        secenek_id.push(li.data("stokid"));
      }
    });

    // burayı kendinize gore ayarlayın artık.
    console.log("secili varyant", secenek_id);
  }
});

// seçili olanları belirt
$(".varyant li").on("click", function () {
  $(this).addClass("aktif");
});

Teşekkürler deniyeceğim

Yok hocam olmadı

olmayan nedir bu.. bu frontend tarafı, backend için gelen diziye göre işlem yapılması gerekiyor. böylece implement edilmez.

hocam şöyle söyleyeyim verdiğiniz kodlarla bu seçim alanı sadece düz yazı olarak görünüyor.
Benim istediğim Standart seçiliylen renkde seçebileyim

Kullandğınız yapıda birden fazla varyant(renk, boyut, vs.) seçeneği yok.

Örnek:

• Renk
  • Mavi [selected]
  • Kırmızı
  • Beyaz
• Mebran
  • A [selected]
  • B
  • C
• Başka Seçenek
  • A
  • B[selected]
  • C

istediğiniz yapı bu sanırım?

aynen hocam istediğim tamda bu şekil.

Scripti satın aldığım için arkadaş eklememiş ben eklemek istiyorum.

Baya kapsam gerektiren bi çalışma. Tam olarak script ne kadar izin verir bilemiyorum, table yapısı vs.
Frontend tarafında bitecek bi şey değil tek seferde.

Kabaca bu şekilde bi table yapınızın olması gerekiyor. tabii sadece table yapısı yetmez.



Kolay gelsin.