<div class="container"> 
   <h1>Simple JavaScript Shopping Cart</h1>
   <p>Simplified 'add to cart' functionality. Uses Javascript
   and WebStorage API/Cookies to remember cart data converted to JSON format.</p>
   <p>Click 'Empty Cart' button to remove session cookies from browser.</p>
   <div id="alerts"></div>
<div class="productcont">
   <!--  <div>2</div>
            <div>75.00</div>
            <div style="color: blue"><p><b>63.00</b></p></div>
            <div><a href="https://www.ecobunny.co.uk"><button type="button" class="button">Book Now</button></a></div>  -->
  
<!--  <div class="product">
       <h3 class="productname">2studio/1 bedroom</h3>
            <p>Booked EPC Assessment</p>
            <p class="price">£63.00</p>
            <button class="addtocart">Add To Cart</button>
        </div> -->
        <div class="product">
            <h3 class="productname">Studio or 1 bedroom</h3>
            <p>booked EPC certificate</p>
            <p class="price">£63.00</p>
            <button class="addtocart">Add To Cart</button>
        </div>
        <div class="product">
            <h3 class="productname">Product 3</h3>
            <p>Product description excerpt...</p>
            <p class="price">£10.50</p>
            <button class="addtocart">Add To Cart</button>
        </div>
        </div>
        <div class="cart-container">
          <h2>Cart</h2>
          <table>
            <thead>
              <tr>
              <th><strong>Product</strong></th>
              <th><strong>Price</strong></th>
            </tr>
            </thead>
            <tbody id="carttable">
            </tbody>
          </table>
          <hr>
          <table id="carttotals">
            <tr>
              <td><strong>Items</strong></td>
              <td><strong>Total</strong></td>
            </tr>
            <tr>
              <td>x <span id="itemsquantity">0</span></td>
             
              <td>£<span id="total">0</span></td>
            </tr></table>

            
          <div class="cart-buttons">  
            <button id="emptycart">Empty Cart</button>
            <button id="checkout">Checkout</button>
          </div>
        </div>
</div>
 @import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
*, ::before, ::after { box-sizing: border-box; }
body{
  font-family:'Quicksand', sans-serif;
  text-align:center;
  line-height:1.5em;
/*   background:#E0E4CC; */
/* background: #69d2e7;
background: -moz-linear-gradient(-45deg, #69d2e7 0%, #a7dbd8 25%, #e0e4cc 46%, #e0e4cc 54%, #f38630 75%, #fa6900 100%);
background: -webkit-linear-gradient(-45deg, #69d2e7 0%,#a7dbd8 25%,#e0e4cc 46%,#e0e4cc 54%,#f38630 75%,#fa6900 100%);
background: linear-gradient(135deg, #69d2e7 0%,#a7dbd8 25%,#e0e4cc 46%,#e0e4cc 54%,#f38630 75%,#fa6900 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69d2e7', endColorstr='#fa6900',GradientType=1 );
} */
hr {
  border:none;
  background:#E0E4CC;
  height:1px;
/*   width:60%;
  display:block;
  margin-left:0; */
}
.container {
  max-width: 800px; 
  margin: 1em auto; 
  background:#FFF; 
  padding:30px;
  border-radius:5px;
}
.productcont {
  display: flex; 
}
.product {
  padding:1em; 
  border:1px solid #E0E4CC; 
  margin-right:1em; 
  border-radius:5px;
}
.cart-container {
  border:1px solid #E0E4CC;
  border-radius:5px;
  margin-top:1em;
  padding:1em;
}
button, input[type="submit"] { 
    border:1px solid #FA6900; 
    color:#fff; 
    background: #F38630; 
    padding:0.6em 1em;
    font-size:1em; 
    line-height:1; 
    border-radius: 1.2em;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
button:hover, button:focus, button:active, input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active {
    background: #A7DBD8;
    border-color:#69D2E7;
    color:#000;
    cursor: pointer;
}
table {
  margin-bottom:1em;
  border-collapse:collapse;
}
table td, table th {
  text-align:left;
  padding:0.25em 1em;
  border-bottom:1px solid #E0E4CC;
}
#carttotals {
  margin-right:0;
  margin-left:auto;
}
.cart-buttons {
  width:auto;
  margin-right:0;
  margin-left:auto;
  display:flex;
  justify-content:flex-end;
  padding:1em 0;
}
#emptycart {
  margin-right:1em;
}
table td:nth-last-child(1) {
  text-align:right;
}
.message {
  border-width: 1px 0px;
  border-style:solid;
  border-color:#A7DBD8;
  color:#679996;
  padding:0.5em 0;
  margin:1em 0;
}
// Cart storage functions
function getCart () {
  const cart = sessionStorage.getItem('cart');
  // if cart item doesn't exist, getItem will return null
  if (cart === null) {
    return []; // return an empty array
  }
  // otherwise return the cart object
  return JSON.parse(cart);
}

function updateCart (cart) {
  sessionStorage.setItem('cart', JSON.stringify(cart));
}

function deleteCart () {
  sessionStorage.removeItem('cart');
}

/* Add to Cart */
function addToCart (elem) {
  // get existing or new cart
  const cart = getCart();
  
  // use closest to look for the closest parent item of elem with a class of .product
  const productElem = elem.closest('.product');

  // use that parent as the root to search for children .productname and .price
  const productName = productElem.querySelector('.productname').textContent;
  const price = productElem.querySelector('.price').textContent;

  // add product to cart
  cart.push({ productName, price });
  // save updated cart
  updateCart(cart);
  
  displayCartAction(productName);
  displayCart(cart);
}

/* Render cart and new totals */
function displayCart (cart = []) {
  let total = 0;
  let cartTable = '';

  for (const product of cart) {
    const price = parseFloat(product.price.split('£')[1]);
    const formattedPrice = '£' + price.toFixed(2);
    const productName = product.productName;

    cartTable += `
        <tr>
          <td>${productName}</td>
          <td>${formattedPrice}</td>
        </tr>
      `;
    total += price;
  }

  // update total on website HTML
  document.getElementById('total').innerHTML = total.toFixed(2);
  // insert saved products to cart table
  document.getElementById('carttable').innerHTML = cartTable;
  // update items in cart on website HTML
  document.getElementById('itemsquantity').innerHTML = cart.length;
}

// Clear cart
function emptyCart () {
  // clear cart
  deleteCart();
  // update cart total
  displayCart([]);
  // clear alerts
  clearCartAction();
}

// user feedback on successful add
function displayCartAction (productName = '') {
  const alerts = document.getElementById('alerts');
  alerts.innerHTML = `${productName} was added to the cart`;
  alerts.classList.add('message');
}

function clearCartAction () {
  const alerts = document.getElementById('alerts');
  alerts.innerHTML = '';
  alerts.classList.remove('message');
}

// initial cart display
displayCart(getCart());

/* button event listeners */
document.getElementById('emptycart').addEventListener('click', emptyCart);

document.querySelectorAll('.addtocart')
  .forEach((button) => {
    button.addEventListener('click', (event) => addToCart(event.target));
  });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.