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 :)
Pingback: jQuery UI kullanarak sepete sürükle bırak()
Pingback: Jquery UI ile lightbox tarzı ürün sepeti | www.bulutuzer.com()