Saya sedang membangun fitur seperti keranjang belanja dengan JQuery. Sejauh ini saya dapat menambah dan menghapus item dari keranjang tanpa masalah.

Namun, saya ingin item dalam daftar tetap ada jika pengguna me-refresh halaman atau memutuskan untuk keluar.

Berikut adalah cuplikan dari keranjang yang berfungsi tanpa penyimpanan lokal.

$(document).ready(function() {
  $(".btn-primary").click(function(e) {
    $(this).toggleClass("btn-warning");
    toggleText($(this));

    if (!$(`li[data-attribute="${e.target.id}"]`).length) {
      addItem(e.target.id);
    } else {
      $(`li[data-attribute="${e.target.id}"]`).remove();
    }
    setBadge();
    $(".btn-danger").click(function() {
      removeItem($(this).parent("li"));
    });
  });
});

function removeItem(item) {
  $(`#${item.data("attribute")}`).removeClass("btn-warning");
  toggleText($(`#${item.data("attribute")}`));
  item.remove();
  setBadge();
}

function addItem(item) {
  $("ul").append(
    `<li class='well' data-attribute='${item}'>
       ${$(`.${item}-container p`).text()} 
       <button class='btn btn-danger'>-</button>
     </li>`
   );
}

function setBadge() {
  $(".badge").remove();
  $("h3").after("<span class='badge'>" + $("li").length + "</span>");
}

function toggleText(item) {
  if (item.hasClass("btn-warning")) {
    item.text("-");
  } else {
    item.text("+");
  }
}
h3 {
  display: inline;
}

.list-inline {
  padding: 3rem 0;
}

li.well {
  margin: 0 2rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <div class="well item-1-container">
        <p class="lead">
          Item 1
        </p>
        <button class="btn btn-primary" id="item-1">+</button>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="well item-2-container">
        <p class="lead">
          Item 2
        </p>
        <button class="btn btn-primary" id="item-2">+</button>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="well item-3-container">
        <p class="lead">
          Item 3
        </p>
        <button class="btn btn-primary" id="item-3">+</button>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="well item-4-container">
        <p class="lead">
          Item 4
        </p>
        <button class="btn btn-primary" id="item-4">+</button>
      </div>
    </div>
  </div>
</div>

<hr />

<div class="container">
  <h3>The List </h3>
  <ul class="list-unstyled list-inline"></ul>
</div>

Berikut adalah Demo CodePen dari upaya saya untuk memasukkan penyimpanan lokal ke gerobak sedemikian rupa sehingga barang-barang tersebut disimpan. Seperti yang Anda lihat di demo, itu tidak berfungsi.

Dapatkah seseorang membantu saya mencari tahu apa yang saya lakukan salah?

0
Dan Kreiger 8 Agustus 2017, 12:48

2 jawaban

Jawaban Terbaik

Ini dia solusi https://codepen.io/Shiladitya/pen/VzpQzM? editor=1010

$(document).ready(function() { 
  
  if(localStorage.getItem("cart") != null){
    var items = JSON.parse(localStorage.getItem("cart")).items;
    for(var i=0; i<items.length; i++){
      addItem(items[i]);
      $('#' + items[i]).toggleClass("btn-warning");
      toggleText(items[i]);
    }
    setBadge();
  }
  
  $(".btn-primary").click(function(e) {
    $(this).toggleClass("btn-warning");
    toggleText($(this).attr('id'));

    if (!$(`li[data-attribute="${e.target.id}"]`).length) {
      addItem(e.target.id);
    } else {
      $(`li[data-attribute="${e.target.id}"]`).remove();
    }
    setBadge();
    setLocalStorage(e.target.id, 0);
    $(".btn-danger").on('click', function() {
      removeItem($(this).parent("li"));
      setLocalStorage($(this).data('id'), 1);
    });
  });
  
  $(".btn-danger").on('click', function() {
    removeItem($(this).parent("li"));
    setLocalStorage($(this).data('id'), 1);
  });
});

function removeItem(item) {
  console.log(item);
  var id = item[0].attributes[1].value;
  $(`#${id}`).removeClass("btn-warning");
  toggleText(id);
  item.remove();
  setBadge();
}

function addItem(item) {
  $("ul").append(
        `<li class='well' data-attribute='${item}'>
${$(`.${item}-container p`).text()} 
<button class='btn btn-danger' data-id='${item}'>-</button>
</li>`
      );  
}

function setBadge() {
  $(".badge").remove();
  $("h3").after("<span class='badge'>" + $("li").length + "</span>");
}

function toggleText(item) {
  if ($('#' + item).hasClass("btn-warning")) {
    $('#' + item).text("-");
  } else {
    $('#' + item).text("+");
  }
}


var cart = {};
cart.items = [];

function setLocalStorage(id, flag) {
  if(flag) {
    cart.items.splice(cart.items.indexOf(id), 1);
  } else {
    cart.items.push(id);
  }
  console.log(JSON.stringify(cart));
  localStorage.setItem("cart", JSON.stringify(cart));
}
h3 {
  display: inline;
}

.list-inline {
  padding: 3rem 0;
}

li.well {
  margin: 0 2rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <div class="well item-1-container">
        <p class="lead">
          Item 1
        </p>
        <button class="btn btn-primary" id="item-1" data-id="item-1">+</button>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="well item-2-container">
        <p class="lead">
          Item 2
        </p>
        <button class="btn btn-primary" id="item-2" data-id="item-2">+</button>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="well item-3-container">
        <p class="lead">
          Item 3
        </p>
        <button class="btn btn-primary" id="item-3" data-id="item-3">+</button>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="well item-4-container">
        <p class="lead">
          Item 4
        </p>
        <button class="btn btn-primary" id="item-4" data-id="item-4">+</button>
      </div>
    </div>
  </div>
</div>

<hr />

<div class="container">
  <h3>The List</h3>
  <ul class="list-unstyled list-inline"></ul>
</div>

Semoga ini bisa membantu Anda.

1
Shiladitya 8 Agustus 2017, 10:50

Saya dapat memberi tahu Anda beberapa langkah untuk ini. Pertama buat array item untuk meletakkan semua item yang ditambahkan di dalamnya. Tulis metode getLocalStorage/ setLocalstorage. Pada pemuatan halaman, periksa array item, jika kosong, jangan lakukan apa pun dan jika memiliki panjang, buat templat dinamis dan tambahkan di ul.

Saat Anda menambahkan item dalam fungsi Anda, terus tambahkan item yang sama dalam array dengan fungsi push dan atur secara bersamaan ke penyimpanan lokal. Sambungkan array jika item hapus pada indeks yang tepat.

Anda akan mendapatkan solusinya. Silakan coba dengan langkah-langkah di atas.

1
Arpit Kumar 8 Agustus 2017, 10:21