Abi's Shop

In this example below you will see how to do a Abi's Shop with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by captnstarburst, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright captnstarburst ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Abi's Shop</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Anton|Arvo" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Diplomata" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Vollkorn+SC" rel="stylesheet">

  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- NavBar -->
<nav class="navbar navbar-light navbar-expand">
  <div class="navbar-brand">
    Abiola Idowu's Store
  </div>
  <div class="collapse navbar-collapse justify-content-end">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" id="">
		    Login <i class="fa fa-user-circle" aria-hidden="true"></i>
			<span class="sr-only">(current)</span>
		</a>
      </li>
      <li class="nav-item" id="nav_cart">
        <a class="nav-link" id="">
      Cart <i class="fa fa-shopping-basket" aria-hidden="true"><span id="inTheCart"></span></i>
		</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="">
      Home   
    </a>
      </li>
    </ul>
  </div>
</nav>
<!-- ^NavBar^ -->

<div class="container-fluid">

  <!-- Shop Section -->
  <div id="section_shop">
    <div class="row shop-row text-center itemAdded-row">
      <h1 class="cart-header" id="cartAddition_txt"></h1>
    </div>
    <div class="row shop-row text-center">
      <div class="col-sm-12 col-md-4 " id="item_0">
        <img class="img-fluid img-thumbnail store-img " src="https://raw.githubusercontent.com/captnstarburst/abi_paints/master/public/imgs/Carousel4.jpg" alt="Title" id="item_one" />
        <p class="price-font"> $100.10</p>
        <button class="btn btn-primary btn-add2cart">Add to Cart</button>
      </div>
      <div class="col-sm-12 col-md-4" id="item_1">
        <img class="img-fluid img-thumbnail store-img" src="https://raw.githubusercontent.com/captnstarburst/abi_paints/master/public/imgs/Carousel4.jpg" alt="Title" id="item_one" />
        <p class="price-font"> $100.00</p>
        <button class="btn btn-primary btn-add2cart">Add to Cart</button>
      </div>
      <div class="col-sm-12 col-md-4" id="item_2">
        <img class="img-fluid img-thumbnail store-img" src="https://raw.githubusercontent.com/captnstarburst/abi_paints/master/public/imgs/Carousel4.jpg" alt="Title" id="item_one" />
        <p class="price-font"> $100.00</p>
        <button class="btn btn-primary btn-add2cart">Add to Cart</button>
      </div>
    </div>
    <div class="row shop-row text-center">
      <div class="col-sm-12 col-md-4" id="item_3">
        <img class="img-fluid img-thumbnail store-img" src="https://raw.githubusercontent.com/captnstarburst/abi_paints/master/public/imgs/Carousel4.jpg" alt="Title" id="item_one" />
        <p class="price-font"> $100.00</p>
        <button class="btn btn-primary btn-add2cart">Add to Cart</button>
      </div>
    </div>
  </div>
  <!-- ^Shop Section^ -->

  <!-- Cart Section -->
  <div id="section_cart">
    <div class="row d-flex justify-content-center">
      <div class="col-10">

        <!--Top Space -->
        <div class="row top-space">

          <h3 class="cart-header"><span id="cart_total">0</span> Item<span id="cart_plural">s</span> in the cart</h3>

          <button class="btn btn-light float-right" id="keep_shopping"><span class="btn-font">Keep Shopping</span></button>

        </div>
        <!-- ^Top Space^ -->

        <!-- Jumbotron -->
        <div class="row jumbotron">
          <div class="col-12 col-sm-12">

            <div class="row top-cart">
              <div class="col">
                <h4 class="cart-header">Item</h4>
              </div>
              <div class="col ">
                <h4 class="cart-header float-right"> Total</h4>
              </div>
            </div>
            <hr />

            <!-- Cart Items -->
            <div id="cart">
              
<!--               <div class="row">
                <div class="col-4">
                  <img class="img-fluid cart-img" src="http://conorhinchee.tech/WorkingPictures/Abi_Paints/Carousel4.jpg" />
                </div>
                <div class="col-4">
                  <h5> Title</h5>
                  <p> Description of the title </p>
                </div>
                <div class="col-2 d-none d-md-block d-sm-none">
                  <button class="btn btn-warning">Save</button>
                  <button class="btn btn-danger btn-remove">Remove</button>
                </div>
                <div class="col-2 d-none d-md-block d-sm-none">
                  <p class="price-font pull-right">$monies</p>
                </div>
                <div class="col-4 d-sm-block d-md-none">
                  <p class="price-font">$Monies</p>
                  <button class="btn btn-warning">Save</button>
                  <button class="btn btn-danger btn-remove">Remove</button>
                </div>
              </div> -->
            </div>
            <!-- ^Cart Items^ -->
            <hr />

            <!-- Total Row -->
            <div class="row ">
              <div class="col-6">
                <div class="pull-right">
                  <p class="price-font">SubTotal:</p>
                  <p class="price-font">Tax:</p>
                  <p class="price-font">Shipping:</p>
                  <p class="price-font">Total:</p>
                </div>
              </div>

              <div class="col-6 ">
                <div class="pull-right">
                  <p class="price-font"> $<span id="subTotal">0.00</span></p>
                  <p class="price-font"> $<span id="tax">0.00</span></p>
                  <button class="btn btn-secondary"><i class="fa fa-ship" aria-hidden="true"></i><span class="shipping-btn-txt">Calculate Shipping</span>
</button>
                  <p class="price-font">$<span id="total">0.00</span></p>
                </div>
              </div>
            </div>
            <!-- ^Total Row^ -->

            <!-- Checkout Button Row -->
            <div class="row">
              <div class="col-12">
                <button class="btn btn-success btn-block">Check Out</button>
              </div>
            </div>
            <!-- ^Checkout Button Row^ -->

          </div>
        </div>
        <!-- ^Jumbotron^ -->

      </div>
    </div>
  </div>
  <!-- ^Cart Section^ -->

  <!-- Modal -->
  <div class="modal" id="image_modal" tabindex="-1" role="dialog" aria-labelledby="image_modal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="header text-center" id="modal_txt"></h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">√ó</span></button>
        </div>
        <div class="modal-body">
          <img src="" class="imageModalSource img-fluid" style="height: 10%" />
          <h4 class="price-font text-center" id="modal_price"></h4>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer Section -->
  <div class="row footer">
    <div class="col-12 text-center">
      <hr />
      <i class="fa fa-facebook-official" aria-hidden="true"></i>
      <i class="fa fa-instagram" aria-hidden="true"></i>
      <span class="footer-txt">Idowu Biola &copy; <span>2017</span></span>
      <i class="fa fa-twitter-square" aria-hidden="true"></i>
      <i class="fa fa-google-plus-square" aria-hidden="true"></i>
    </div>
  </div>
  <!-- ^Footer Section^ -->

</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/abiandaposs-shop-XzKpqy */
body {
  background-color: #6c7b8b;
}

/* Navbar Brand & Hover */
.navbar {
  background: #00468c;
  color: #fff;
}

.navbar-light .navbar-brand {
  color: #d6d6d6;
  font-family: "Anton", sans-serif;
  font-size: 2.5em;
  text-shadow: 4px 2px 2px black;
}
.navbar-light .navbar-brand small {
  color: #fff;
  font-size: 0.5em;
  padding-left: 5%;
}

.navbar-light .navbar-brand:hover {
  color: #d6d6d6;
}

.nav-link {
  font-family: "Arvo", serif;
  font-size: 1.1em;
  color: #d6d6d6 !important;
}

.nav-link:hover {
  color: black !important;
  text-decoration: underline !important;
  cursor: default;
}

#inTheCart {
  margin: 2%;
  border: 2px solid green;
  border-radius: 100px;
  background-color: green;
  display: none;
}

.shop-row {
  padding-top: 5%;
}

.itemAdded-row {
  display: none;
}

.store-img {
  width: 70%;
}

price-font {
  font-family: "Vollkorn SC", serif;
  font-size: 2.5em;
}

.float-right {
  position: absolute;
  right: 0;
}

.top-space {
  padding-top: 5%;
}

.space {
  padding-top: 1%;
}

.cart-header {
  font-family: "Anton", sans-serif;
}

.btn-font {
  font-family: "Arvo", serif;
}

hr {
  border-top: 4px solid #8c8b8b;
  border-bottom: 1px solid #fff;
}

.cart-img {
  width: 50%;
}

.itemInTheCart {
  box-shadow: inset 2px 2px 40px 10px rgba(0, 0, 0, 0.3);
}

.footer {
  padding-top: 5%;
}
.footer i {
  font-size: 1.5em;
}
.footer .footer-txt {
  font-family: "Sacramento", cursive;
}

/* Responsive */
@media screen and (min-width: 2560px) {
  .navbar-light .navbar-brand {
    font-size: 5em;
  }

  .nav-link {
    font-size: 2.5em;
  }

  .navbar-nav > li {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 1024px) {
  .btn-remove {
    margin-top: 5%;
  }
}
@media screen and (max-width: 425px) {
  .navbar-light .navbar-brand {
    font-size: 1.5em;
  }

  .nav-link {
    font-size: 0.7em;
  }

  .cart-header {
    font-size: 1.5em;
  }

  .btn-font {
    font-size: 0.9em;
  }

  .jumbotron {
    margin-top: 3%;
  }

  .cart-img {
    width: 100%;
  }

  .shipping-btn-txt {
    font-size: 0.5em;
  }
}
@media screen and (max-width: 375px) {
  .navbar-light .navbar-brand {
    font-size: 1em;
  }

  .nav-link {
    font-size: 0.7em;
  }

  .cart-header {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 320px) {
  .navbar-light .navbar-brand {
    font-size: 1em;
  }

  .nav-link {
    font-size: 0.5em;
  }

  .cart-header {
    font-size: 1em;
  }

  .btn-font {
    font-size: 0.7em;
  }

  .jumbotron {
    margin-top: 5%;
  }
}


/*Downloaded from https://www.codeseek.co/captnstarburst/abiandaposs-shop-XzKpqy */
let cartArr = [];

$(document).ready(function() {
  shopLoad();
});

function shopLoad() {
  
  $(section_cart).hide();
  $(section_shop).show();
}

function cartLoad() {
  renderCartContents();
  $(section_shop).hide();
  $(section_cart).show();
}

function updateCartTotal() {
  let total = cartArr.length;

  if (total !== 0) {
    $("#inTheCart").text(total);
    $("#inTheCart").css("display", "inline");
    $("#cart_total").text(total);
  }else{
    $("#inTheCart").css("display", "none");
  }

  if (total === 0 || total > 1) {
    $("#cart_plural").text("s");
  } else {
    $("#cart_plural").text("");
  }
}

function addedToCartText(title) {
  $("#cartAddition_txt").text(title + " added to cart");
  // $(".itemAdded-row").css("display", "inline");
  $(".itemAdded-row").fadeIn();
  scrollTop();
  $(".itemAdded-row").fadeOut(5000);
}

function scrollTop() {
  $("html, body").animate(
    {
      scrollTop: 0
    },
    800
  );
}

function recessImage(div) {
  $(div).addClass("itemInTheCart");
}

function disableButton(div) {
  let button = $(div).children(".btn-add2cart");
  button.text("In the Cart");
  button.prop("disabled", true);
}

function renderCartContents() {
  /*Render Cart by the contents of the cartArr
    Each Item will create 1 row containing 5 columns, 1 img,
    1 title, 1 description, 2 prices, 4 buttons */

  let html = "";
  let numRows = 0;

  let strRow = "#row_";
  let strCol = "#col_";

  if (cartArr.length === 0) {
    html =
      "<div id='row_0'><div id='col_0'>There is nothing here, Keep Shopping!</div></div>";

    $("#cart").append(html);
    $(strRow + 0).addClass("row rendered");
    $(strCol + 0).addClass("col text-center rendered");
  } else {
    html = "";
    for (let index = 0; index < cartArr.length; index++) {
      
      numRows = ++numRows;
      
      let strOfI = index.toString();
      let imgSelector = $("#" + cartArr[0]).children();
      let imgSrc = imgSelector.attr("src");
      let imgAlt = imgSelector.attr("alt");
      let price = $("#" + cartArr[0])
        .children(".price-font")
        .text();

      html +=
        "<div id='row_" +
        strOfI +
        "'> <div id='smCol_" +
        strOfI +
        "_0'><img id='cart_img" +
        strOfI +
        "' src=" +
        imgSrc +
        " alt=" +
        imgAlt +
        " /></div> <div id='smCol_" +
        strOfI +
        "_1'><h5>" +
        imgAlt +
        "</h5><p>Description goes here</p></div> <div id='xsCol_" +
        strOfI +
        "_2'><button id='btnSave_" +
        strOfI +
        "_0'>Save</button><button id='btnRemove_" +
        strOfI +
        "_0'>Remove</button></div> <div id='xsCol_" +
        strOfI +
        "_3'><p id='price_" +
        strOfI +
        "_0'>" +
        price +
        "</p></div> <div id='smCol_" +
        strOfI +
        "_4'><p id='price_" +
        strOfI +
        "_1'>" +
        price +
        "</p><button id='btnSave_" +
        strOfI +
        "_1'>Save</button><button id='btnRemove_" +
        strOfI +
        "_1'>Remove</button> </div> </div>";
    }
    $("#cart").append(html);
    
    addClassesToCart(numRows);
    calculateTotal(numRows);
   }
}

function addClassesToCart(numRows){
  
  let numCols = 4;
  let prices = 1;
  let buttons =1;
  
  
  for(let rowIndex = 0; rowIndex < numRows; rowIndex++){
    let rowIndexStr = rowIndex.toString();
    
    $("#row_" + rowIndexStr).addClass("row rendered");
    $("#cart_img" + rowIndexStr).addClass("img-fluid cart-img rendered");
    $("#btnSave_" + rowIndexStr + "_0").addClass("btn btn-primary btn-save rendered");
    $("#btnSave_" + rowIndexStr + "_1").addClass("btn btn-primary btn-save rendered");
    $("#btnRemove_" + rowIndexStr + "_0").addClass("btn btn-danger btn-remove rendered");
    $("#btnRemove_" + rowIndexStr + "_1").addClass("btn btn-danger btn-remove rendered");
    $("#price_" + rowIndexStr + "_0").addClass("price-font float-right rendered");
    $("#price_" + rowIndexStr + "_1").addClass("price-font pull-right rendered");
    
    for(let colIndex = 0; colIndex <= numCols; colIndex++){
      let colIndexStr = colIndex.toString();
      
      if(colIndexStr === '4' ){
       $("#smCol_"+rowIndexStr+ "_" + colIndexStr).addClass("col-4 d-sm-block d-md-none rendered");
      }else if(colIndexStr !== '2' || colIndexStr !== '3' ){
         $("#smCol_"+rowIndexStr+ "_" + colIndexStr).addClass("col-4 rendered");
      }else{
        $("#xsCol_"+rowIndexStr+ "_" + colIndexStr).addClass("col-4 d-none d-md-block d-sm-none rendered");
      }
    }
  }
  
  $(".btn-remove").on("click", function(){
    let index = $(this).attr("id").slice(10).split("_");
    removedItemFromCart(cartArr[index[0]]);
    cartArr.splice(index[0],1);
    updateCartTotal();  
    removeTotalCart();
    renderCartContents();  
  });
  
}

function removeTotalCart(){
  $(".rendered").remove();
}

function removedItemFromCart(index){
  $("#"+index).removeClass("itemInTheCart"); 
  let button = $("#"+index).children(".btn-add2cart");
  button.text("Add to Cart");
  button.prop("disabled", false);
}

function calculateTotal(numRows){
  let subtotal = 0;
  let subtotalStr;
  let total = 0;
  let taxRate = .0575;
  let tax = 0;
  
  for(let i=0; i< numRows; i++){
      let str = $("#price_" + i + "_0").text().slice(2);
      let int = parseFloat(str);
      subtotal += int;
  }
  tax = parseFloat((subtotal * taxRate).toFixed(2));
  total = subtotal + tax;
  
  subtotal =  subtotal.toString();
  tax = tax.toString();
  total = total.toString();
  
  if(!subtotal.includes(".")){
    subtotal =  subtotal + ".00";
  }else{
    let arr = subtotal.split(".");
    if(arr[1].length === 1){
      subtotal = subtotal + "0";
    }
  }
  
  if(!tax.includes(".")){
    tax = tax + ".00";
  }else{
    let arr = tax.split(".");
    if(arr[1].length === 1){
      tax = tax + "0";
    }
  }
  
  if(!total.includes(".")){
    total = total + ".00";
  }else{
    let arr = total.split(".");
    if(arr[1].length === 1){
      total = total + "0";
    }
  }
  
  $("#subTotal").text(subtotal);
  $("#tax").text(tax);
  $("#total").text(total);
}

$(".store-img").on("click", function() {
  let price = $(this)
    .closest("div")
    .children(".price-font")
    .text();

  $(".imageModalSource").attr("src", $(this).attr("src"));
  $("#modal_txt").text($(this).attr("alt"));
  $("#modal_price").text(price);
  $("#image_modal").modal("show");
});

$("#nav_cart").on("click", function() {
  cartLoad();
});

$(".btn-add2cart").on("click", function() {
  let closest = $(this).closest("div");
  let id = closest.attr("id"); 
  let title = closest.children(".store-img").attr("alt");

  if (!cartArr.includes(id)) {
    cartArr.push(id);
    updateCartTotal();
    addedToCartText(title);
    recessImage(closest);
    disableButton(closest);
  }
});

$("#keep_shopping").on("click", function() {
 
  shopLoad();
  removeTotalCart();
});

Comments