jquery-jqueryui-ninja

jQuery UI sürükle bırak ile alış veriş sepeti mantığı

Uzun zaman önce hayalini çok kurduğumuz fakat yeterince javascript bilmemekten ve kütüphanelerin bu denli gelişmiş olamayışından dolayı bir türlü gerçekleştiremediğimiz bir olaydı bu. Nereden aklıma geldi bilmiyorum, fakir bir çocuğun zengin olduğunda hayalini kurup bir türlü yapamadığı şeyi yapması heyecanıyla sarıldım web matrixe :) Heeeeeman, güç bende artık !


Senaryomuz şu şekilde, bir tarafta ürünlerimiz var diğer tarafta ise alış veriş sepetimiz. Kullanıcı almak istediği ürünü sürükleyip sepete bırakıyor. Aynı ürünü tekrar sepete attığında sadece adet bir artıyor. Ürünü sepetinden çıkartmak istediğinde ise, üzerine çift tıklıyor. Bu işi yapmak için jQuery ve jQueryUI kullanıyoruz. En can alıcı noktamız ise jQuery UI nin Draggable ve Droppable özelliği. Kodların üzerinde açıklamalar bulunuyor.

        $(document).ready(function(){
            
            // Sürükleme yapılacak elemanları seçiyoruz.
            $(".urunGrid ul li").draggable({
                revert:true,
                helper: "clone"
            });
            
            // Üzerine elemanları alacak olan kısmı belirtiyoruz. Yani sepetimiz.
            $(".sepet").droppable({
                drop: function( event, ui ) {
                    var t = $(this);
                    var d = ui.draggable; // bu bizim tuttuğumuz eleman yani <li> elementi
                    var ul = t.find("ul"); // Sepetimizin içindeki ul elementimiz.
                    var id = d.attr("id"); // tuttuğumuz ürünün id si.
                    var idToLi = ul.find("#"+id); // sepette, tuttuğumuz id ye sahip ürünü seçiyoruz.
                    var adet;

                   // Veritabanına yazma işlerini burada yapabilirsiniz. (ajax)                    

                    idToLi.fadeOut().fadeIn(); // şeklimizi yapıyoruz :)
                    
                    // eğer daha önce ürün ekli değilse ekliyoruz, ekliyse adetini 1 arttırıyoruz.
                    if(idToLi.html()==null){
                        ul.append("<li id=\""+id+"\" title=\"Silmek için çift tıklayın\"><em>1 *</em> "+d.html()+"</li>");                            
                    }
                    else{
                        adet = parseInt(idToLi.find("em").text().replace(" *",""));
                        idToLi.find("em").text(adet+1+" *");
                    }
                    toplam(); // sepetin altına toplam alan fonksiyonu çağırıyoruz.
                }
            });
            
            // Sepetteki ürüne çift tıklandığında silinmesini sağlıyoruz.
            $(".sepet ul li").live("dblclick", function() {
                var adet = parseInt($(this).find("em").text().replace(" *", ""));
                if (adet == 1) {
                    $(this).remove();
                }
                else {
                    $(this).find("em").text(adet-1+" *");
                }
                toplam(); // Ürün silindiğinde toplamın yeniden hesaplanmasını sağlıyoruz.
            });
        });
        
        function toplam(){
            var toplam=0;
            var t;
            var fiyat;
            var adet;
            
            // Eğer sepette ürün yoksa "ürün yok" ibaresini görünmez yapıyoruz.
            if($(".sepet ul li").length != 0){
                $(".sepet h1 small").fadeOut();
            }
            else
            {
                $(".sepet h1 small").fadeIn();
            }
            
            // Sepetin içinde ki ürünleri yani <li> leri döndürüp toplama işlemini yapıyoruz.
            $(".sepet ul li").each(function(){
                t = $(this);
                fiyat = parseFloat(t.find("span").text().replace(t.find("span small").text(),""));
                adet = t.find("em").text().replace(" *","");
                toplam += (fiyat*adet);
            });
            
            // toplamı ilgili alana yazdırıyoruz.
            $("#toplam").fadeIn().text($(".sepet ul li").length+" Ürün, Toplam: "+toplam+" TL");
        }
    <body>
        <div class="tasiyici">
            <div class="kutu urunGrid">
                <h1>Ürünler</h1>
                <ul>
                    <li id="1">Asus Anakart <span>125<small> TL</small></span></li>
                    <li id="2">Intel İşlemci <span>23<small> TL</small></span></li>
                    <li id="3">Amd İşlemci <span>44<small> TL</small></span></li>
                    <li id="4">Sony Bilmemne <span>96<small> TL</small></span></li>
                </ul>      
            </div>
            
            <div class="kutu sepet">
                <h1>Sepet <small>ürün yok</small></h1>
                <ul></ul>
                <div id="toplam"></div>
            </div>
            
            <div style="clear:both"></div>
        </div>
    </body>

Sürükle bırak gibi dışarıdan karışık gelen bir olayı jQuery sayesinde çok basit bir şekilde çözdük. Bu konuyla ilgili ufak tefek denemeler yaparak olayı daha iyi kavraya bilirsiniz. Aşağıda çalışan örneği görebilirsiniz, umarım faydalı bir yazı olmuştur :)

  • http://4primes.com Emre

    Eline sağlık güzel makale olmuş. Sepete eklenmiş ürün adeti birden fazlaysa, üzerine çift tıklandığında komple ürünü kaldırmak yerine adedini bir azaltması daha doğru olmaz mı.

    Emin olmamakla birlikte gereken kod;

    // Sepetteki ürüne çift tıklandığında silinmesini sağlıyoruz.
    $(“.sepet ul li”).live(“dblclick”, function() {
    var adet = parseInt($(this).find(“em”).text().replace(” *”, “”));
    if (adet == 1) {
    $(this).remove();
    }
    else {
    adet = parseInt($(this).find(“em”).text().replace(” *”, “”));
    $(this).find(“em”).text(adet – 1 + ” *”);
    }

    toplam(); // Ürün silindiğinde toplamın yeniden hesaplanmasını sağlıyoruz.
    });

  • apoStyLEE

    Teşekkürler abi, doğru diyorsun, ilgili güncellemeyi yaptım ;)

  • Erss

    Çok hoş bir çalışma olmuş tebrikler. Daha dinamik e-ticaret platformları için tercih edilebilir.

  • Ferat

    çok geçerli olmuş, elinize sağlık :D
    birde bunun sepete ekle deyince, vıjjjjjt diye kayıp gideni vardı :D onunla ilgili bir örnek kıyak olurdu hani :D

  • Hasan Dönmez

    burada sayfa yenilendiğinde tüm veriler uçacak bunun için peki ne yapacağız,session mu çerez mi veritibanı mı , ayrıca sürükle bırak değilde tıklama olmalı,hiç bir kullanıcı sürükle bırakla uğraşacağını sanmıyorum beceremez bence :) , uçan sepet şeklinde yapmak ve tam yapılmalı örnek.

    • apoStyLEE

      Verilerin uçmaması için bahsettiklerinizden herhangi birini kullanabilirsiniz. Bu yazının amacı jQuery Ui deki drag-drop özelliğinin nasıl kullanıldığını insanlara aktarmaktı, bunu isteyen alış veriş sepeti olarak kullanır, isteyen yetkilendirme için kullanır, isteyen kategorilendirme için kullanır vs.. yani isteyen istediği gibi kullanır. Benim olayım insanlara balık tutmasını öğretmekle ilgili ;)

    • http://www.halitcolak.net.tr Halit ÇOLAK

      Hocam öncelikle ellerinize sağlık gerçekten çok süper bir çalışma olmuş. Her şekilde geliştirilebilir.
      @Hasan DÖNMEZ
      Projeyi geliştirebilirsiniz cookie ile yapılabilir.
      Mehmet DURAN hocamın yazmış olduğu
      “Jquery ile Cookie İşlemleri” başlıklı yazı http://www.mehmetduran.com/Blog/Makale.html/Jquery-ile-Cookie-Islemleri/254

      Buradan inceleyebilirsiniz, bunu da eklediğimiz zaman tamamen Jquery ile süper bir alışveriş sepeti yapmış olursunuz. Birazcık daha uğraşırsanız güzel bir örnek olacağına inanıyorum.

  • http://www.mydisk.com.tr Veri Kurtarma

    teşekkürler hocam paylaşım için.

  • D

    Uzun Zamandır Sizi Takip Ediyorum Gerçekten Bu Olayı Sepet Mantığı ile Yapmanız Dikkatimi Çekti Sonuçta Drag Drop Özelliği Her Türlü Şey İçin Kullanılır ama Hoşuma Gitti . Merakım Şudur Bu li ul leri cookiede veya session da nasıl tutabiliriz Okadar Yapmışsınız Bide buna Bu Özelliği Eklerseniz Gerçekten Tebrik Edicem. Kolay GElsin . TakipTeyiz..

  • Pingback: jQuery UI kullanarak sepete sürükle bırak()

  • Pingback: Jquery UI ile lightbox tarzı ürün sepeti | www.bulutuzer.com()

  • özer

    teşekkürler

  • Murat GÖKTAŞ

    Ellerine sağlık Çok iyibir döküman olmuş. emeğine sağlık

  • penaltikorner

    Merhaba, ellerine sağlık çok beğendim tamda buna ihtiyacım vardı fakat soracağım bir iki sorum olacak, ilk olarak sürükleme değilde örneğin sepete ekle butonuna tıklayınca oluşturduğum sepet alanına atmasını nasıl sağlayabilirim, sepete attığımız ürünü çift tıklama değilde sil butonuna basıldığında silme işlemini gerçekleştirmek için ve hem ürün alanına hemde sepete atıldığında ürün adet miktarını kullanıcının değiştirmesini (örneğin 1 adet yazan miktarı silip 5 adet yazabilmesi) nasıl sağlayabilirim ? teşekkür ederim.

  • jLe

    // Sürükleme yapılacak elemanları seçiyoruz.

    ….
    revert:false,

    olursa daha gerçekçi bir sürükle bırak izlenimi oluşuyor bence, öbür türlü sürükle bırak geri gelsin gibi!!!

    Ayrıca bir buton ile sepeti temizleme veya tersine bir sürükle bırak ile sepeti temizleme olabilir.