Revised Dynamic Parts

This supports a software dev. class for businesspeople that you can find here: https://www.alexandercowan.com/making-html-manageable And a case you can find here: https://www.alexandercowan.com/making-html-manageable

by sk8wt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://spreadsheets.google.com/feeds/cells/1DA6htKy-Z-8QRkifkLbzlzG2r5YWOKE77JXEJNmq45g/1/public/values?alt=json-in-script&callback=doData"></script>
<!-- To see the file itself: https://docs.google.com/spreadsheets/d/1DA6htKy-Z-8QRkifkLbzlzG2r5YWOKE77JXEJNmq45g/ -->

<div class="top-bar">
  <ul class="nav-list">
    <li><a href="#" id="home">Home</a></li>
    <li><a href="#">Help</a></li>
  </ul>


<div id="search-box">
    <form id='part-num-form' method='post' onsubmit="return false">
      <input type="text" placeholder="Search by Part Number" id="parts-search" value="">
      <button type='submit' id='pn-search-btn'>Go</button>
    </form>
  </div> 

  <img src="https://www.alexandercowan.com/wp-content/uploads/2019/12/cart-hinh.png" id="cart">
  <span id="count">0</span>
</div>

<li id="list-id"></li>
<div id="search-controls">
  <div id="result-sort">
    Sort By
    <select>
      <option value="None">Popularity</option>
      <option value="Acme">Price</option>
      <option value="Bacme">Manufacturer</option>
    </select>
  </div>
  <div id="filter-parts">
    Search By
    <select id="dd-mfr">
      <option value="All">Manufacturer</option>
      <option value="Acme">Acme</option>
      <option value="Bacme">Bacme</option>
      <option value="Cacme">Cacme</option>
      <option value="Dacme">Dacme</option>
    </select>
    <select id="dd-model">
      <option value="All">Model</option>
      <option value="TooCool">TooCool</option>
      <option value="TooHot">TooHot</option>
      <option value="JustRight">JustRight</option>
      <option value="Coolerator">Coolerator</option>
    </select>
    <select>
      <option value="All">Type</option>
      <option value="Sniggler">Sniggler</option>
      <option value="Wiggler">Wiggler</option>
      <option value="Jiggler">Jiggler</option>
      <option value="Tiggler">Tiggler</option>
   ...

CSS

.top-bar,
#search-box,
.nav-list li,
.nav-list a {
  background-color: #002D45;
  font-family: Proxima Nova, helvetica neue, helvetica, sans-serif;
  font-weight: bold;
  font-size: 110%;
  color: #ffffff;
}

#search-box {
  display: block;
  position: relative;
}

#search-box ul,
li {
  display: block;
  position: relative;
}

#parts-search {
  display: block;
  position: relative;
}

#parts-search li {
  display: block;
  position: relative;
}

.ui-autocomplete {
  position: absolute;
}

#cart {
  display: none;
}

#count {
  display: none;
  padding: 2px;
}

.top-bar {
  color: #FFFFFF;
  height: 40px;
  margin: 0px;
  padding: 10px;
  display: flex;
  align-items: center;
}

.nav-list {
  list-style-type: none;
  padding: 0;
  display: inline;
}

.nav-list li {
  float: left;
}

.nav-list a {
  display: inline;
  padding: 8px;
  text-decoration: none;
}

#search-box {
  margin-left: auto;
  margin-right: 0;
  padding: 10px;
}

#search-controls {
  background-color: #ffffff;
  padding: 15px 15px;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  font-size: 70%;
  display: flex;
  align-items: center;
}

#filter-parts {
  float: right;
  margin-left: auto;
  margin-right: 0;
  padding-right: 5px;
}

#search-btn {
  margin-right: 4px;
}

.catalog-part {
  margin: 2px;
  padding: 0px 5px;
  float: left;
  border-style: solid;
  border-color: #808285;
  border-width: 1px;
  width: 150px;
  height: 200px;
  line-height: 200px;
  display: table-cell;
  position: relative;
}

.catalog-part img {
  height: auto;
  vertical-align: middle;
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f4f4f4;
  display: inline-table;
}

.catalog-part:hover .overlay {
  opacity: .75;
}

.catalog-part:hover .overlay span {
  text-decoration: underline;
}

p {
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
 ...

JavaScript

///CODE TO PULL IN PARTS
var spData = null;

//This just creates a variable that's prepared for a JSON feed. What's JSON? See: https://en.wikipedia.org/wiki/JSON
function doData(json) {
  spData = json.feed.entry;
}

const homeURL = 'http://fiddle.jshell.net/sk8wt/5ovb9p7f/show?';
const partDetailURL = 'https://fiddle.jshell.net/sk8wt/4j5qkxvm/show?';
const checkoutURL = 'https://fiddle.jshell.net/acowan/skh9v1nj/show?';

$(document).ready(function() {
  var startQuery = top.location.search.substring(1);
  var pnArgs = getQueryArgs();
  var orderItems = getPNs(pnArgs);

  var partNumList = readData($("#parts-content"));

  function readData($partsContent) {
    const startCol = 2;
    var data = spData;
    var divData = [];
    var partNums = [];
    var row = 0;

    //This is a for loop that iterates through the cells in the Google Sheet, now in a JSON object. What is a for loop? See: 				https://www.w3schools.com/js/js_loop_for.asp. See also the Codecademy module on Javascript: https://www.codecademy.com/learn/introduction-to-javascript. 
    for (var i = 0; i < data.length; i++) {
      //data[i] indexes a given item in the array of data that has the JSON content. What is an array? See: https://www.w3schools.com/js/js_arrays.asp or 		check out the Codecademy tutorial above (module on arrays). 
      //These weird strings 'gs$cell' and '$t' are basically Google Sheets-specific markers in the JSON feed. To see where they appear, either pull up the 		URL you see in the HTML or uncomment (and modify as desired) the console statement below. 
      var cell = data[i]["gs$cell"];
      var val = cell["$t"];
      //console.log(val);
      if (cell.col == startCol) {
        drawDiv(divData, $partsContent, (row == 1));
        divData = [];
        row++;
        console.log("is this a PN? " + val);
        partNums.push(val);
      }
      divData.push(val);
    }
    drawDiv(divData, $partsContent);
    partNums.shift();
    //this is for the auto-fill
    return...