Jquery UI ile lightbox tarzı ürün sepeti

bulutuzer.comMerhaba arkadaşlar bu paylaşımımda Jquery ve JqueryUI kullanarak bir ürün sepeti yapmaya çalıştım yeri geldiğinde jquery ui kütüphanesinin bize sunduğu kolaylıkları kullanmamız gerek ve bende bunla ilgili bir örnek buldum ve bu örneğe kendimden de yorumlar katarak ortaya birşeyler çıkartmaya çalıştım sepetimiz ürünlerin toplam fiyatını çıkartıyor ve sepetteki ürün adedini toplayıp gösteriyor aynı ürünü eklediğimizde ürünümüzü bir arttırarak yanında gösteriyor 1×17 TL ye bir eklediğinizde ürün 2×17 tl oluyor umarım işinize yarar.

index.html


bulutuzer.com

<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script><script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script><script type="text/javascript" src="js/lightbox.js"></script>
<!--[if IE]>
<style type="text/css">
    .datum { width: 300px !important; float: none !important; }
    img { border: none !important; }
</style>
<![endif]--></pre>
<section id="products">
<ul>
	<li data-id="1"><a href="#">
</a>
<div class="clear"></div>
<div class="img"><img alt="product" src="image/product.jpg" width="65" height="65" data-id="1" /></div>
<div class="datum">Karmate
Nayino
<h1><span>16</span>TL</h1>
</div></li>
	<li data-id="2"><a href="#">
</a>
<div class="clear"></div>
<div class="img"><img alt="product2" src="image/product2.jpg" width="65" height="65" data-id="2" /></div>
<div class="datum">Kazım Koyuncu
Ayrılık
<h1><span>17</span>TL</h1>
</div></li>
	<li data-id="3"><a href="#">
</a>
<div class="clear"></div>
<div class="img"><img alt="product3" src="image/product3.jpg" width="65" height="65" data-id="3" /></div>
<div class="datum">Fuat Saka
Perçem Perçem
<h1><span>18</span>TL</h1>
</div></li>
</ul>
</section><section id="wrap">
<div class="header">
<div class="basketIco"><img alt="basket" src="image/basket.png" />
0 Ürün bulunmaktadır</div>
<div class="close"><a href="#"><img alt="close basket" src="image/close.png" /></a></div>
</div>
<div class="basket"></div>
<div class="footer">
<div id="price">
<h1>Toplam :</h1>
</div>
<div class="buy"><a href="#">Satın Al</a></div>
</div>
</section>
<pre>

style.css

/*
	Bulut Üzer
	http://www.bulutuzer.com
	http://www.themeir.net
*/

* { margin: 0; padding: 0; }

ul,li,a { list-style: none; text-decoration: none; }

body { background: rgb(220,220,220); font-family: arial; }

.clear { clear: both; }

.basketActiv {  background: rgba(204,204,204,0.5); }

.active { opacity: 0.7; }

#wrap {
    background: rgb(255,255,255);
    width: 330px;
    margin: 50px auto;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.5);
}

.header{
    background: -webkit-gradient(linear, 0% 0%,0% 100%,from(rgb(231,231,231)), to(rgb(196,196,196)));
    background: -webkit-linear-gradient(top, rgb(231,231,231), rgb(196,196,196));
    background: -moz-linear-gradient(top, rgb(231,231,231), rgb(196,196,196));
    background: -o-linear-gradient(top, rgb(231,231,231), rgb(196,196,196));
    background: -ms-linear-gradient(top, rgb(231,231,231), rgb(196,196,196));
    background: linear-gradient(top, rgb(231,231,231), rgb(196,196,196));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#cdcdcd', GradientType=0 );
    height: 30px;
    padding: 20px;
    border-bottom: 2px solid rgba(155,155,155,0.7);
}

.basketIco {
	position: absolute;
	font-size: 12px;
	text-shadow: 1px 1px rgba(255,255,255,0.8);
	color: rgb(125,125,125);
}

.basketIco img {
	float: left;
	margin: 0 5px 0 0;
}

.basketIco p {
	float: left;
	margin-top: 7px;
}

.close {
	float: right;
	opacity: 0.7;
	transition-property: opacity;
	transition-duration: 0.5s;
	transition-delay: .1s;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-delay: .1s;
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.5s;
	-moz-transition-delay: .1s;
	-o-transition-property: opacity;
	-o-transition-duration: 0.5s;
	-o-transition-delay: .1s;
}

.close:hover {
	opacity: 1;
}

.content {
	height: 65px;
	padding: 15px;
	border-bottom: 1px solid rgb(175,175,175);
}

.img {
	float: left;
	margin-right: 5px;
}

.datum {
	margin: 10px 0 0 0;
}

.datum h1,p {
	font-size: 12px;
	text-shadow: 1px 1px rgba(255,255,255,0.8);
	color: rgb(125,125,125);
}

button.bin{
	background: none;
	border: none;
	float: right;
	margin: -25px 0 0 0;
	cursor: pointer;
}

.footer {
	width: 300px;
	height: 60px;
	margin: 40px auto 0 auto;
}

#price {
	float: left;
}

.buy {
	float: right;
}

.buy a {
	background: rgb(31,174,255);
	padding: 15px 50px;
	border-top: 1px solid rgb(36,129,200);
	border-bottom: 1px solid rgb(6,99,185);
	text-decoration: none;
	color: rgb(255,255,255);
	font-weight: bold;
	font-size: 17px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

}

.buy a:hover {
	-webkit-box-shadow: inset 0px 0px 5px rgb(0,0,0);
	-moz-box-shadow: inset 0px 0px 5px rgb(0,0,0);
	box-shadow: inset 0px 0px 5px rgb(0,0,0);
}

#products {
	background: rgba(200,200,200,0.1);
	float: left;
	padding: 15px;
	border: 1px solid rgba(110,110,110,1);
	border-radius: 0px 5px 5px 0px;
}

h1,p {
	font-size: 12px;
	text-shadow: 1px 1px rgba(255,255,255,0.8);
	color: rgb(125,125,125);
}

.count {
	width: 8px;
	border: none;
	font-size: 12px;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.8);
	color: #7D7D7D;
	font-weight: bold;
}

lightbox.js

$(function (){
	$("#products li").draggable({
		revert:true, //sürükleme işlemi bitince eski yerine dönmesini sağlıyoruz

		//varolan bir classı atayarak sürüklenen eleman harici ürünlerin opacity sini düşürüyoruz
		drag:function () {
			$(this).addClass("active");
			$(this).closest("#products").addClass("active");
		},

		//sürükleme işlemi bitince classları siliyoruz
		stop:function () {
			$(this).removeClass("active").closest("#products").removeClass("active");
		}
	});

	//jquery droppable
	$(".basket").droppable({

		hoverClass:"basketActiv", //tutulan ürün sepet üstüne gelince basketActiv adlı class ile arka plan rengi değişiyor

		tolerance:"touch",
		drop:function (event, ui) {
			var sepet = $(this);
			var move = ui.draggable; //ürünlerin li lerini tutuyor
			var itemId = sepet.find("ul li[data-id='" + move.attr("data-id") + "']"); //sepetimizdeki içeriklere ulaşabilmemiz için basket içindeki ul larımızı çekiyor ve aktarılanların data id sini ekliyoruz
			var adet; // adındanda anlaşılabileceği gibi ilerleyen satırlarda toplam ürün adetini gösterteceğiz

			move.fadeOut().fadeIn(); // move yani ürünlerimizi sepete ekleyip mouse click ini bıraktığımız zaman oluşan efekt
			//eğer ürün yoksa ürünü sepete atıyor
			if(itemId.html() != null) {
				itemId.find("input").val(parseInt(itemId.find("input").val()) + 1);
			}
			//varsada ürünü bir olarak arıttırıyoruz
			else {
				addBasket(sepet, move);
				adet = parseInt(move.find("input").text().replace(" *",""));
				move.find("input").text(adet+1+" *");
			}
				toplam(); // alt satırdaki toplam adlı fonksiyonumuzu çağırdık bize eklenen ürünlerin toplamını göstertiyor
		}
	});

	//append ile ekleyeceğimiz silme butonunu tıklayınca yapacağı işlemi söylüyoruz yani ürünü silmesini
	$("button.bin").live("click", function (){
		$(this).closest("li").remove();
		toplam();
	});

	//addBasket adlı fonksiyonumuzda ürün li ve sepet ul muzu çağrıyoruz çünkü ürünleri çekicez ve sepete eklettiriceğiz
	function addBasket(sepet, move) {
		sepet.find("ul").append('</pre>
<ul>
	<li class="content" data-id="">'
 + '
<div class="img"><a href="#"><img alt="" /></a></div>
'
 + '
<div class="datum">' + move.find("p").html() + '
<h1><input class="count" type="text" value="1 *" />x' + move.find("span").html() + 'TL</h1>
<h1></h1>
</div>
'
 + '<button class="bin"><img alt="bin" src="image/bin.png" width="20" /></button>'
 + '
<div class="clear"></div>
');

 }

 // toplam fonksiyonumuzda sadece sepet içiinde işlem yapacağımız için
 //sepet değişkenini çağırıyoruz ve sepet içindeki li leri kullanarak toplam fonksiyonu içerisinde
 //fiyat ve adet değişkenlerine adedi ve fiyatı yazdırıyoruz.
 function toplam(sepet) {
 var top = 0;
 var fiyat;
 var adet;

 $(".basket ul li").each(function (){
 sepet = $(this);
 fiyat = parseFloat(sepet.find("span").text().replace(sepet.find("span").text(),""));
 adet = sepet.find("input").text().replace(" *","");
 top += (fiyat*adet);
 });

 //ve fiyatın gösterileceği alanı seçerek toplamı ekleyebiliriz
 $("#price h1").fadeIn().text("Toplam: "+top+" TL");
 //son olarakda eğer sepette ki ürün 0a eşit değilse ürün adedi toplamının sonucunu yazdır
 if($(".basket ul li").length != 0){
 $(".basketIco p").fadeIn().text("Sepetinizde " + $(".basket ul li").length+ " Ürün Bulunmaktadır");
 }

 //0a eşit isede .basketIco p içeriğini yazdır yani ürün bulunmamaktarı
 else{
 $(".basketIco p").fadeIn().text("0 Ürün Bulunmaktadır");
 }

 }
});

Demo : İçin Tıklayınız
Download : İndirmek İçin Tıklayınız
Referans Alınan Siteler : Ademİlter.com, ApoStylee

Yayınlayan

Bulut Üzer

Web ortamında gelişmesine yardımcı olan Yusuf Doru sayesinde şuan web developer olarak ilerlemekte.Web ve mobil ortamlarda uygulama geliştirmeye çalışmak da.Ayrı yeten de kişisel blogunda web ve php ile ilgili çalışmalarını ve deneyimlerini paylaşmayı hedeflemekte.

“Jquery UI ile lightbox tarzı ürün sepeti” üzerine 4 yorum

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir