Online Shop

Developer
Billy Brown
Size
4,282 Kb
Views
20,240
  1. Online Shop Previews
  2. Online Shop HTML Codes
  3. Online Shop CSS Codes
  4. Online Shop JS Codes

How do I make an online shop?

What is a online shop? How do you make a online shop? This script and codes were developed by Billy Brown on 29 September 2022, Thursday.

Online Shop Previews
IQ Test

Online Shop - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Online Shop</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="shop js-shop"> <script src="js/index.js"></script>
</body>
</html>

Online Shop - Script Codes CSS Codes

*,
button,
input,
select { box-sizing: inherit;
}
html { background: #e5eaee; box-sizing: border-box; font-family: sans-serif;
}
body { margin: 0;
}
.shop { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-pack: distribute; justify-content: space-around;
}
.item { background: white; box-shadow: 0 2px 5px #c5cacc; -webkit-box-flex: 0; -ms-flex: 0 auto; flex: 0 auto; margin: 1em; text-align: center; width: 15em;
}
.item__name { text-transform: capitalize;
}
.item__money-container,
.item__count-container { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.item__price,
.item__cost,
.item__remove,
.item__count,
.item__add { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 2.5rem; line-height: 1rem; padding: 0.75rem;
}
.item__price,
.item__cost { position: relative;
}
/* add a name just above the field */
.item__price::before,
.item__cost::before { display: block; font-size: 0.8em; position: absolute; text-align: center; top: -6px; right: 0; left: 0;
}
.item__price::before { content: "price";
}
.item__cost { color: #59b;
}
.item__cost::before { content: "cost";
}
.item__remove,
.item__add { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; color: white; cursor: pointer; font-size: 1.25em; margin: 0; outline: none;
}
.item__remove { background: #f77;
}
.item__count { background: #ed6;
}
.item__add { background: #6d6;
}

Online Shop - Script Codes JS Codes

/* * Make sure to read this from the bottom up to see what's going on.
*/
function Item(name, description, price, photo) { // Make sure that the object is accessible from at any scope inside it var _this = this; (function init() { // Initialise Item object, probably from JSON file _this.name = name; _this.description = description; _this.price = price; _this.photo = photo; // Count and cost start off at 0 _this.count = 0; _this.cost = 0; // Have the wrapper, which is the node for this item _this.wrapper = null; // Their values will need to change, so keep track of them here _this.countView = null; _this.costView = null; _this.countHidden = null; _this.costHidden = null; })();
} // Update the visible and hidden fields for count and cost
Item.prototype.update = function() { var _this = this; _this.costView.textContent = poundify(_this.cost); _this.countView.textContent = _this.count; _this.costHidden.value = _this.cost; _this.countHidden.value = _this.count;
};
Item.prototype.addItem = function(e) { var _this = this; // Prevent button from submitting the form e.preventDefault(); // Add to the count and price _this.count++; _this.cost += _this.price; // Update the item's markup _this.update();
};
Item.prototype.removeItem = function(e) { var _this = this; // Prevent button from submitting the form e.preventDefault(); // Do not allow count/cost to go negative if (_this.count > 0) { // Subtract from the count and price _this.count--; _this.cost -= _this.price; // Update the item's markup _this.update(); }
};
// Prints the item to a container
// It's a big function with lots of similar code, but no logic.
// Counter is used for creating PHP POST variable
Item.prototype.print = function(container, counter) { var _this = this; // Create all elements that will make up the HTML element _this.wrapper = document.createElement("article"); var header = document.createElement("header"); var name = document.createElement("h2"); var nameHidden = document.createElement("input"); var img = document.createElement("img"); var desc = document.createElement("p"); var moneyContainer = document.createElement("div"); var price = document.createElement("span"); _this.costView = document.createElement("span"); var countContainer = document.createElement("div"); var remove = document.createElement("button"); _this.countView = document.createElement("span"); var add = document.createElement("button"); // Add hidden inputs that will post their data with the form _this.countHidden = document.createElement("input"); _this.costHidden = document.createElement("input"); // Using BEM for Object Oriented styling/markup _this.wrapper.classList.add("item"); // Give the item a name and append the name and header to the wrapper name.appendChild(document.createTextNode(_this.name)); name.classList.add("item__name"); nameHidden.setAttribute("type", "hidden"); nameHidden.setAttribute("name", "item["+counter+"][name]"); nameHidden.setAttribute("value", _this.name); header.appendChild(name); header.appendChild(nameHidden); header.classList.add("item__header"); _this.wrapper.appendChild(header); // Give the image a source, alt and title, then append to wrapper img.setAttribute("src", _this.photo); img.setAttribute("alt", _this.name); img.setAttribute("title", _this.name); img.classList.add("item__img"); _this.wrapper.appendChild(img); // Now add the description desc.appendChild(document.createTextNode(_this.description)); desc.classList.add("item__description"); _this.wrapper.appendChild(desc); // Price and cost are displayed together in boxes // Use poundify function to make them into prices price.appendChild(document.createTextNode(poundify(_this.price))); _this.costView.appendChild(document.createTextNode(poundify(_this.cost))); price.classList.add("item__price"); _this.costView.classList.add("item__cost"); moneyContainer.classList.add("item__money-container"); moneyContainer.appendChild(price); moneyContainer.appendChild(_this.costView); _this.wrapper.appendChild(moneyContainer); // These inputs will hold the information to be posted to the php file _this.countHidden.setAttribute("type", "hidden"); _this.costHidden.setAttribute("type", "hidden"); _this.countHidden.setAttribute("name", "item["+counter+"][count]"); _this.costHidden.setAttribute("name", "item["+counter+"][cost]"); _this.countHidden.setAttribute("value", _this.count); _this.costHidden.setAttribute("value", _this.cost); _this.wrapper.appendChild(_this.countHidden); _this.wrapper.appendChild(_this.costHidden); // Now add + and - buttons, and count display remove.appendChild(document.createTextNode("-")); _this.countView.appendChild(document.createTextNode(_this.count)); add.appendChild(document.createTextNode("+")); remove.classList.add("item__remove"); remove.classList.add("js-remove"); _this.countView.classList.add("item__count"); add.classList.add("item__add"); add.classList.add("js-add"); // Add click event listeners remove.addEventListener("click", _this.removeItem.bind(_this), false); add.addEventListener("click", _this.addItem.bind(_this), false); countContainer.classList.add("item__count-container"); countContainer.appendChild(remove); countContainer.appendChild(_this.countView); countContainer.appendChild(add); _this.wrapper.appendChild(countContainer); // Finally, add the wrapper to its container container.appendChild(_this.wrapper);
};
// Create an item object and add it to the shop
Shop.prototype.addItem = function(element) { this.items.push(new Item( element.name, element.description, element.price, element.photo));
};
function Shop(filename) { // Allows this keyword to be used in all contexts var _this = this; (function init() { // Get the array of items in the JSON file var items = makeXHR(filename, function(s) { return JSON.parse(s); }).items; // Initialise the list of items as an empty array _this.items = []; // Add each element to the shop items.forEach(function (element, index, array) { _this.addItem(element); }); // HTML elements for the shop _this.vatView = document.querySelector("input[name=vat]"); _this.subtotalView = document.querySelector("input[name=subtotal]"); _this.deliveryView = document.querySelector("input[name=delivery]"); _this.totalCostView = document.querySelector("input[name=total_cost]"); })();
}
// Print each item in the shop
Shop.prototype.print = function(container) { var _this = this; _this.items.forEach(function (element, index, array) { element.print(container, index); });
};
// Although inconsequential, it keeps the code grouped together and scoped
(function() { // Get the shop element in the document var shopContainer = document.querySelector(".js-shop"); // Initiate the shop object var shop = new Shop("https://codepen.io/_Billy_Brown/pen/FAucG.js"); shop.print(shopContainer); setCardTypeListener(); addChecks(); highlightRequired();
})();
// Convert amount into pounds
function poundify(amount) { return "£" + amount.toFixed(2);
}
// Make HTTP request to a location and run the callback on its response
function makeXHR(loc, callback) { var req = new XMLHttpRequest(); req.open("get", loc, false); req.send(); // Return the result of the callback return callback(req.responseText);
}
Online Shop - Script Codes
Online Shop - Script Codes
Home Page Home
Developer Billy Brown
Username _Billy_Brown
Uploaded September 29, 2022
Rating 3
Size 4,282 Kb
Views 20,240
Do you need developer help for Online Shop?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Billy Brown (_Billy_Brown) Script Codes
Name
Aperture-style lens
Simple jQuery dice roller
Pure CSS change stylesheet
A Pen by Billy Brown
Better Transparent input boxes
Slideout Sidebar
CSS-Tricks lodge button
Number game
Chaos
Mandelbrot Fractal
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!