LocalStorage ile Sepet Mantığı Oluşturmak – Javascript

Merhaba, bu makalede LocalStorage kullanarak basit bir sepet oluşturma işlemi yapacağız. Böylece kullanıcı sepet sayfasını yenilediğinde, veya başka bir sayfaya giriş yaptığında sepet verilerini sayfa istekleri arasında kalıcı tutmak için sepet verilerini localStorage’dan yükleyeceğiz.

Bu, alışveriş sepetinin JavaScript dizisi olarak depolandığı tek sayfalı bir uygulamadır. Dilerseniz sepeti include dosyası haline getirerek tüm sayfalarda kullanabilirsiniz.

Peki neden localStorage kullanmak zorundayız? Sepeti verilerini localStorage uygulamasında saklamazsak, kullanıcı her sayfa yüklendiğinde JavaScript dizisi kaybolor, sayfayı yenilediğinde kullanıcı sepet verilerini kaybeder. Dolayısıyla sepet verilerini geçici bir depolama biriminde saklamalıyız.

Bir Sepeti nasıl saklayacağımızı göstermek ve sayfaya geri döndüğümüzde onu geri yüklemek için HTML5’in JavaScript, jQuery ve localStorage özelliğini içeren basit bir HTML sayfası yapacağız.
LocalStorage, HTML5 tarafından Web Depolama kategorisi altında sağlanan seçeneklerden biridir. Web Storage hakkında daha bilgi için buraya tıklayabilirsiniz.

Dilerseniz başlayalım.

Local Storage içerisinden sepeti yükleyelim

Aşağıdaki kod betiği, jQuery hazır olduğunda, sepeti verilerinin yerel depodan nasıl yükleneceğini gösterir.

        var cart = [];  
        $(function () {
            if (localStorage.cart)
            {
                // local storage üzerinden verileri alalım.
                cart = JSON.parse(localStorage.cart);  
                showCart();  // display cart that is loaded into cart array
            }
        });

var cart = [];

$(function () {

if (localStorage.cart)

{

// local storage üzerinden verileri alalım.

cart = JSON.parse(localStorage.cart);

showCart(); // display cart that is loaded into cart array

}

});

Sepete ekleme işlemi

Aşağıdaki kod, seçili miktarla birlikte bir ürün sepetinize ekler. Sepetinizdeki her öğe, özellik olarak Ad, Fiyat ve Miktar içeren bir JavaScript nesnesidir.

 function addToCart() {
            var price = $("#products").val();  // seçilen ürünün fiyatını döndürür.
            var name = $("#products option:selected").text();  // ürün adını döndürür.
            var qty = $("#qty").val();  // ürün miktarını döndürür.

            for (var i in cart) {
                if(cart[i].Product == name)
                {
                    cart[i].Qty = qty;  
                    showCart();
                    saveCart();
                    return;
                }
            }

            var item = { Product: name,  Price: price, Qty: qty };
            cart.push(item);
            saveCart();
            showCart();
        }

function addToCart() {

var price = $("#products").val(); // seçilen ürünün fiyatını döndürür.

var name = $("#products option:selected").text(); // ürün adını döndürür.

var qty = $("#qty").val(); // ürün miktarını döndürür.

for (var i in cart) {

if(cart[i].Product == name)

{

cart[i].Qty = qty;

showCart();

saveCart();

return;

}

var item = { Product: name, Price: price, Qty: qty };

cart.push(item);

saveCart();

showCart();

}

Local Storage üzerine kaydetme işlemi

Aşağıdaki kod betiği, sepeti yerel depolama alanına kaydetmek için kullanılır. LocalStorage nesnesi tarayıcı üzerinde bulunmazsa, tarayıcınızın Local Storage özelliğini desteklemediği için işlem yapmayacaktır.
JSON.stringify (object), bir JavaScript nesnesi dizisini (cart) localStorage öğesine kaydedilmeden önce JSON dizesine dönüştürmek için kullanılır.

 function saveCart() {
            if (window.localStorage)
            {
                localStorage.cart = JSON.stringify(cart);
            }
        }

function saveCart() {

if (window.localStorage)

{

localStorage.cart = JSON.stringify(cart);

}

Sepeti gösterme işlemi

Aşağıdaki kod betiği, sepet nesnesini bir tablo şeklinde görüntüler. Aynı zamanda kullanıcının Delete düğmesine tıklayarak bir öğeyi silmesine izin verir.

 function showCart() {
            if (cart.length == 0) {
                $("#cart").css("visibility", "hidden"); 
                return;
            }

            $("#cart").css("visibility", "visible");
            $("#cartBody").empty();  
            for (var i in cart) {
                var item = cart[i];
                var row = "<tr><td>" + item.Product + "</td><td>" +
                       item.Price + "</td><td>" + item.Qty + "</td><td>"
                       + item.Qty * item.Price + "</td><td>"
                       + "<button onclick='deleteItem(" + i + ")'>Delete</button></td></tr>";
                $("#cartBody").append(row);
            }
        }

function showCart() {

if (cart.length == 0) {

$("#cart").css("visibility", "hidden");

return;

}

$("#cart").css("visibility", "visible");

$("#cartBody").empty();

for (var i in cart) {

var item = cart[i];

var row = "<tr><td>" + item.Product + "</td><td>" +

item.Price + "</td><td>" + item.Qty + "</td><td>"

+ item.Qty * item.Price + "</td><td>"

+ "<button onclick='deleteItem(" + i + ")'>Delete</button></td></tr>";

$("#cartBody").append(row);

}

Bonus: Örnek uygulama

Aşağıdaki uygulama yukarıdaki bilgilerle oluşturduğumuz örnek bir sepet uygulamasıdır. Doğrudan alıp kullanabilirsiniz. Sepete ürün ekleme ve ürün silme özelliklerini kullanabilirsiniz.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sepet Uygulaması</title>
    <style>
        td { text-align :center}
    </style>
    <script src="jquery-1.11.2.js"></script>
    <script>
        var cart = [];
        $(function () {
            if (localStorage.cart)
            {
                cart = JSON.parse(localStorage.cart);
                showCart();
            }
        });

        function addToCart() {
            var price = $("#products").val();
            var name = $("#products option:selected").text();
            var qty = $("#qty").val();

            for (var i in cart) {
                if(cart[i].Product == name)
                {
                    cart[i].Qty = qty;
                    showCart();
                    saveCart();
                    return;
                }
            }
            var item = { Product: name,  Price: price, Qty: qty }; 
            cart.push(item);
            saveCart();
            showCart();
        }

        function deleteItem(index){
            cart.splice(index,1);
            showCart();
            saveCart();
        }

        function saveCart() {
            if ( window.localStorage)
            {
                localStorage.cart = JSON.stringify(cart);
            }
        }

        function showCart() {
            if (cart.length == 0) {
                $("#cart").css("visibility", "hidden");
                return;
            }

            $("#cart").css("visibility", "visible");
            $("#cartBody").empty();
            for (var i in cart) {
                var item = cart[i];
                var row = "<tr><td>" + item.Product + "</td><td>" +
                             item.Price + "</td><td>" + item.Qty + "</td><td>"
                             + item.Qty * item.Price + "</td><td>"
                             + "<button onclick='deleteItem(" + i + ")'>Delete</button></td></tr>";
                $("#cartBody").append(row);
            }
        }
    </script>
</head>
<body>
    <h2>Sepet</h2>
    Ürün Seçimi :
    <select id="products">
        <option value="50000">iPhone6</option>
        <option value="60000">iPhone6 Plus</option>
        <option value="45000">iPad Air 2</option>
    </select>

    Quantity
    <input type="text" id="qty" size="3" />
    <p/>
    <button id="btnAdd" onclick="addToCart()" >Sepete Ekle</button>

    <p></p>
    <table id="cart" border="1" style="visibility:hidden; width:100%">
         <thead>
              <tr>
                  <th>Ürün</th>
                  <th>Fiyat</th>
                  <th>Adet</th>
                  <th>Toplam</th>
                  <th></th>
             </tr>
         </thead>
         <tbody id="cartBody">

         </tbody>
    </table>

</body>
</html>

100

101

102

<!DOCTYPE html>

<head>

<title>Sepet Uygulaması</title>

<style>

td { text-align :center}

</style>

var cart = [];

$(function () {

if (localStorage.cart)

{

cart = JSON.parse(localStorage.cart);

showCart();

}

});

function addToCart() {

var price = $("#products").val();

var name = $("#products option:selected").text();

var qty = $("#qty").val();

for (var i in cart) {

if(cart[i].Product == name)

{

cart[i].Qty = qty;

showCart();

saveCart();

return;

}

var item = { Product: name, Price: price, Qty: qty };

cart.push(item);

saveCart();

showCart();

}

function deleteItem(index){

cart.splice(index,1);

showCart();

saveCart();

}

function saveCart() {

if ( window.localStorage)

{

localStorage.cart = JSON.stringify(cart);

}

function showCart() {

if (cart.length == 0) {

$("#cart").css("visibility", "hidden");

return;

}

$("#cart").css("visibility", "visible");

$("#cartBody").empty();

for (var i in cart) {

var item = cart[i];

var row = "<tr><td>" + item.Product + "</td><td>" +

item.Price + "</td><td>" + item.Qty + "</td><td>"

+ item.Qty * item.Price + "</td><td>"

+ "<button onclick='deleteItem(" + i + ")'>Delete</button></td></tr>";

$("#cartBody").append(row);

}

</script>

</head>

<body>

<h2>Sepet</h2>

Ürün Seçimi :

<option value="50000">iPhone6</option>

<option value="60000">iPhone6 Plus</option>

</select>

Quantity

<p/>

<button id="btnAdd" onclick="addToCart()" >Sepete Ekle</button>

<p></p>

<thead>

<tr>

<th>Fiyat</th>

<th>Toplam</th>

</tr>

</thead>

</tbody>

</table>

</body>

</html>

Javascript

Permalink: https://fatihsoysal.com/blog/localstorage-ile-sepet-mantigi-olusturmak-javascript/

0 Yorum

Inline Feedbacks

View all comments

Freelance Proje İş Alımı

Kategoriler

LocalStorage ile Sepet Mantığı Oluşturmak – Javascript

Local Storage içerisinden sepeti yükleyelim

Sepete ekleme işlemi

Local Storage üzerine kaydetme işlemi

Sepeti gösterme işlemi

Bonus: Örnek uygulama

Fatih Soysal