Local storage shopping basket

index.html

<div class='menu'>
  <svg class ='basket' width="24" height="24" viewBox="0 0 24 24">
  <path d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z"></path>
</svg>
  <h1> Local storage basket</h1>
</div>
  <div class = 'menu__container'>

</div>

<div class='shopping'>


</div>

local-storage-shopping-basket.markdown

Local storage shopping basket

Using es6, jQuery and local storage to create a mock shop. Add items to the basket and remove on click of the bomb. Product data is stored in JS.

A Pen by Harry Beckwith on CodePen.

License.

script.babel

// use local storage
// click of add to basket takes all info of that product
// adds and stores in basket
// refresh still stores items in basket
// items can be removed from basket
const product = document.querySelectorAll(".shopping__product");
const menu = document.querySelector(".menu__container");
const basket = document.querySelector(".basket");
const shoppingArea = document.querySelector(".shopping");

// point of local storage
let basketItems = JSON.parse(localStorage.getItem("basketItems", basketItems)) || [];

// product data
const products = [
  {
    title: "Product",
    imgSrc:
      "https://images.unsplash.com/photo-1507035895480-2b3156c31fc8?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=73bb845a19c8ffd1e52def83c307ae57",
    price: "£1001"
  },
  {
    title: "Product",
    imgSrc:
      "https://images.unsplash.com/photo-1475173641776-50e70b746de8?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=924001d3b574be8a5fe2b762762e6c3e",
    price: "£1002"
  },
  {
    title: "Product",
    imgSrc:
      "https://images.unsplash.com/photo-1506638389872-eaf0cffb94bc?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=77b49b4280f51b1c02e521b9462e9660",
    price: "£1003"
  },
  {
    title: "Product",
    imgSrc:
      "https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7a0275305e292485c8b784b4f408f7c4",
    price: "£1001"
  },
  {
    title: "Product",
    imgSrc:
      "https://images.unsplash.com/photo-1468495244123-6c6c332eeece?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=3832e90087eca10453523207789e5d69",
    price: "£1002"
  },
  {
    title: "Product",
    imgSrc:
      "https://images.unsplash.com/photo-1472950755543-5293dbab893a?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7ab9a10ddd5191a23c0d884f67f06eaf",
    price: "£1003"
  }
];

// create the html from data
shoppingArea.innerHTML = products
  .map((product, i) => {
    return `
       <div class='shopping__product'>
    <h3 class='shopping__product__title'>${product.title + ' ' + (i+1)}</h3>
    <img class = 'shopping__product__img' src="${product.imgSrc}">
    <p class='shopping__product__price'>${product.price}</p>
    <button class='shopping__product__button'>Add to basket</button>
  </div>
      `;
  }).join("");

// on click of button make copy of info
const button = document.querySelectorAll(".shopping__product__button");
button.forEach(item => item.addEventListener("click", getItem));

function getItem(e) {
  e.preventDefault();
  // targets for html copies
  let productTitle = $(e.target)
    .closest(".shopping__product")
    .find(".shopping__product__title")
    .html();

  let productImg = $(e.target)
    .closest(".shopping__product")
    .find(".shopping__product__img")
    .attr("src");

  let productPrice = $(e.target)
    .closest(".shopping__product")
    .find(".shopping__product__price")
    .html();
  //store in object
  let items = {
    productTitle,
    productImg,
    productPrice
  };
  // add to array
  basketItems.push(items);
  // update storage
  localStorage.setItem("basketItems", JSON.stringify(basketItems));
 // update dom with local storage basket items
  createItem(basketItems, menu);
  // refresh to display
  location = location.href;
}

// create copy of item in basket function
function createItem(products = [], position) {
  position.innerHTML = products
    .map((item, i) => {
      return `
            <div class ="basket__items" data-basket-count = "${i}"> 
              <h3 class ="basket__items__title">${item.productTitle}</h3>
              <img class ="basket__items__img" src = "${item.productImg}">
              <p class ="basket__items__price">${item.productPrice}</p>
          <svg width="24" height="24" viewBox="0 0 24 24" class ='bomb'>
            <path d="M11.25,6A3.25,3.25 0 0,1 14.5,2.75A3.25,3.25 0 0,1 17.75,6C17.75,6.42 18.08,6.75 18.5,6.75C18.92,6.75 19.25,6.42 19.25,6V5.25H20.75V6A2.25,2.25 0 0,1 18.5,8.25A2.25,2.25 0 0,1 16.25,6A1.75,1.75 0 0,0 14.5,4.25A1.75,1.75 0 0,0 12.75,6H14V7.29C16.89,8.15 19,10.83 19,14A7,7 0 0,1 12,21A7,7 0 0,1 5,14C5,10.83 7.11,8.15 10,7.29V6H11.25M22,6H24V7H22V6M19,4V2H20V4H19M20.91,4.38L22.33,2.96L23.04,3.67L21.62,5.09L20.91,4.38Z"></path>
          </svg>
   <hr>
          </div> `;
    })
    .join("");
}
createItem(basketItems, menu);

const basketBomb = document.querySelectorAll(".bomb");
// on click of bomb delete basket item
basketBomb.forEach(bItem =>
  bItem.addEventListener("click", function() {
    createItem(basketItems, menu);
    // get the product number
    let clickedIndex = $(this)
      .closest(".basket__items")
      .attr("data-basket-count");
      // remove based on product index - click remove that item
    basketItems.splice(clickedIndex, 1);
    //  update the storage
    localStorage.setItem("basketItems", JSON.stringify(basketItems));
    // refresh the page to display
    location = location.href;
  })
);
// drop basket down
basket.addEventListener("click", function() {
  menu.classList.toggle("active-menu");
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.scss

body {
  font-family: 'Montserrat', sans-serif;
}
h1 {
  font-weight:bold;
  font-size:20px;
  margin:0;
  padding:0;
}
.shopping {
    width: 80%;
    display: grid;
    grid-gap: 5%;
    grid-template-columns: repeat(3, 30%);
    margin-bottom: 2em;
    margin-left:auto;
    margin-right:auto;
}
.shopping__product {
  background:#f1f1f1;
  padding:20px;
  margin:10% 0;
  text-align:center;
  position:relative;
  border: 1px solid #f1f1f1;
  &:hover {
    border: 1px solid grey;
  }
}
.link {
  position:absolute;
  background:blue;
  height:50px;
  width:100%;
  bottom:0;
  left:0;
}
img {
  max-width:100%;
  margin:10px 0;
}
.shopping__product__price {
  margin-bottom:10px;
}
.menu {
    position:relative;
    margin: auto;
    width: 80%;
    padding: 3% 0;
  .basket {
   float: right;
    cursor: pointer;
    z-index: 9999;
    position: absolute;
    right: 0;
  }
  .shopping__product__button {
    display:none;
  }
}
.basket__items {
  padding:15px;
}
.menu__container {
    width: 20%;
    background: #dc2b8b;
    position: absolute;
    right: 10%;
    z-index: 3;
  display:none;
}

.active-menu {
  display:block;
}
button {
  cursor:pointer;
}