Dynamic Parts Page
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 Alex Cowan
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/1hGC-C4dtXXi6hB3BuV0HLerSfZZ7NQDC8oR_Tm6khbs/1/public/values?alt=json-in-script&callback=doData"></script>
<!-- To see the file itself: https://docs.google.com/spreadsheets/d/1hGC-C4dtXXi6hB3BuV0HLerSfZZ7NQDC8oR_Tm6khbs/ -->
<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">
<!-- parts search -->
<form id='part-num-form' method='post' onsubmit="return false">
<input type="text" placeholder="Search by Part Number" id="pn-input">
<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>
<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>
</select>
...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
//To test: http://fiddle.jshell.net/acowan/2bux8zcL/show/?pn=BR2048
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;
}
//these are constants- handy for porting this over to WordPress, for instance
const homeURL = 'https://fiddle.jshell.net/acowan/2bux8zcL/show?';
const partDetailURL = 'https://fiddle.jshell.net/acowan/vom68xwp/show?';
const checkoutURL = 'https://fiddle.jshell.net/acowan/skh9v1nj/show?';
$(document).ready(function() {
//this code sorts out what's in the shopping cart
var startURL = top.location;
console.log(startURL);
var startQuery = decodeURIComponent(top.location.search.substring(1));
console.log('the deal w/ the4 start query is that it is now ' + startQuery);
var pnArgs = getQueryArgs();
orderItems = [];
var orderItems = getPNs(pnArgs);
console.log('the order is this big ' + orderItems.length);
//this calls the read stuff (which calls the draw stuff) and gets an array of part numbers for use in auto-complete
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...