I'm very new to coding. I am trying to embed this price calculator on my website. I just inserted it in a custom liquid box on the product page. It works somewhat, the customer enters width and depth and it generates the price correctly but it does not add to basket, when I did get it to add to basket it was adding the selected quantity but nothing else, it was auto-allocating the products first variations and lowest price. It was not retaining any of the input data either.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shelf Pricing Calculator</title>
<script>
function calculatePrice() {
var width = parseFloat(document.getElementById("width").value);
var depth = parseFloat(document.getElementById("depth").value);
var quantity = parseInt(document.getElementById("quantity").value);
// Calculate the price based on the width, depth, and quantity
var price = calculatePriceByRange(width, depth); // Calculate price based on range
var totalPrice = price * quantity;
document.getElementById("totalPrice").innerText = "Total Price: £" + totalPrice.toFixed(2);
}
function calculatePriceByRange(width, depth) {
// Example ranges with corresponding prices
if (width >= 200 && width <= 300 && depth >= 200 && depth <= 300) {
return 22;
} else if (width >= 200 && width <= 300 && depth >= 301 && depth <= 400) {
return 25;
} else if (width >= 200 && width <= 300 && depth >= 401 && depth <= 500) {
return 27;
} else if (width >= 200 && width <= 300 && depth >= 501 && depth <= 600) {
return 30;
} else if (width >= 200 && width <= 300 && depth >= 601 && depth <= 700) {
return 35;
} else if (width >= 200 && width <= 300 && depth >= 701 && depth <= 800) {
return 37;
} else if (width >= 301 && width <= 400 && depth >= 200 && depth <= 300) {
return 27;
} else if (width >= 301 && width <= 400 && depth >= 301 && depth <= 400) {
return 31;
} else if (width >= 301 && width <= 400 && depth >= 401 && depth <= 500) {
return 32;
} else if (width >= 301 && width <= 400 && depth >= 501 && depth <= 600) {
return 38;
} else if (width >= 301 && width <= 400 && depth >= 601 && depth <= 700) {
return 42;
} else if (width >= 301 && width <= 400 && depth >= 701 && depth <= 800) {
return 53;
} else if (width >= 401 && width <= 500 && depth >= 200 && depth <= 300) {
return 31;
} else if (width >= 401 && width <= 500 && depth >= 301 && depth <= 400) {
return 33;
} else if (width >= 401 && width <= 500 && depth >= 401 && depth <= 500) {
return 34;
} else if (width >= 401 && width <= 500 && depth >= 501 && depth <= 600) {
return 40;
} else if (width >= 401 && width <= 500 && depth >= 601 && depth <= 700) {
return 42;
} else if (width >= 401 && width <= 500 && depth >= 701 && depth <= 800) {
return 55;
} else if (width >= 501 && width <= 600 && depth >= 200 && depth <= 300) {
return 36;
} else if (width >= 501 && width <= 600 && depth >= 301 && depth <= 400) {
return 41;
} else if (width >= 501 && width <= 600 && depth >= 401 && depth <= 500) {
return 56;
} else if (width >= 501 && width <= 600 && depth >= 501 && depth <= 600) {
return 58;
} else if (width >= 501 && width <= 600 && depth >= 601 && depth <= 700) {
return 60;
} else if (width >= 501 && width <= 600 && depth >= 701 && depth <= 800) {
return 62;
} else if (width >= 601 && width <= 700 && depth >= 200 && depth <= 300 ) {
return 39;
} else if (width >= 601 && width <= 700 && depth >= 301 && depth <= 400 ) {
return 42;
} else if (width >= 601 && width <= 700 && depth >= 401 && depth <= 500 ) {
return 59;
} else if (width >= 601 && width <= 700 && depth >= 501 && depth <= 600 ) {
return 61;
} else if (width >= 601 && width <= 700 && depth >= 601 && depth <= 700 ) {
return 65;
} else if (width >= 601 && width <= 700 && depth >= 701 && depth <= 800 ) {
return 67;
} else if (width >= 701 && width <= 800 && depth >= 200 && depth <= 300) {
return 53;
} else if (width >= 701 && width <= 800 && depth >= 301 && depth <= 400) {
return 56;
} else if (width >= 701 && width <= 800 && depth >= 401 && depth <= 500) {
return 62;
} else if (width >= 701 && width <= 800 && depth >= 501 && depth <= 600) {
return 65;
} else if (width >= 701 && width <= 800 && depth >= 601 && depth <= 700) {
return 68;
} else if (width >= 701 && width <= 800 && depth >= 701 && depth <= 800) {
return 71;
} else if (width >= 801 && width <= 900 && depth >= 200 && depth <= 300) {
return 59;
} else if (width >= 801 && width <= 900 && depth >= 301 && depth <= 400) {
return 61;
} else if (width >= 801 && width <= 900 && depth >= 401 && depth <= 500) {
return 64;
} else if (width >= 801 && width <= 900 && depth >= 501 && depth <= 600) {
return 68;
} else if (width >= 801 && width <= 900 && depth >= 601 && depth <= 700) {
return 71;
} else if (width >= 801 && width <= 900 && depth >= 701 && depth <= 800) {
return 106;
} else if (width >= 901 && width <= 1000 && depth >= 200 && depth <= 300) {
return 66;
} else if (width >= 901 && width <= 1000 && depth >= 301 && depth <= 400) {
return 68;
} else if (width >= 901 && width <= 1000 && depth >= 401 && depth <= 500) {
return 70;
} else if (width >= 901 && width <= 1000 && depth >= 501 && depth <= 600) {
return 72;
} else if (width >= 901 && width <= 1000 && depth >= 601 && depth <= 700) {
return 108;
} else if (width >= 901 && width <= 1000 && depth >= 701 && depth <= 800) {
return 112;
} else if (width >= 1001 && width <= 1100 && depth >= 200 && depth <= 300) {
return 68;
} else if (width >= 1001 && width <= 1100 && depth >= 301 && depth <= 400) {
return 70;
} else if (width >= 1001 && width <= 1100 && depth >= 401 && depth <= 500) {
return 72;
} else if (width >= 1001 && width <= 1100 && depth >= 501 && depth <= 600) {
return 74;
} else if (width >= 1001 && width <= 1100 && depth >= 601 && depth <= 700) {
return 82;
} else if (width >= 1101 && width <= 1200 && depth >= 200 && depth <= 300) {
return 70;
} else if (width >= 1101 && width <= 1200 && depth >= 301 && depth <= 400) {
return 72;
} else if (width >= 1101 && width <= 1200 && depth >= 401 && depth <= 500) {
return 74;
} else if (width >= 1101 && width <= 1200 && depth >= 501 && depth <= 600) {
return 76;
} else if (width >= 1201 && width <= 1300 && depth >= 200 && depth <= 300) {
return 72;
} else if (width >= 1201 && width <= 1300 && depth >= 301 && depth <= 400) {
return 74;
} else if (width >= 1201 && width <= 1300 && depth >= 401 && depth <= 500) {
return 76;
} else if (width >= 1201 && width <= 1300 && depth >= 501 && depth <= 600) {
return 78;
} else if (width >= 1301 && width <= 1400 && depth >= 200 && depth <= 300) {
return 74;
} else if (width >= 1301 && width <= 1400 && depth >= 301 && depth <= 400) {
return 76;
} else if (width >= 1301 && width <= 1400 && depth >= 401 && depth <= 500) {
return 78;
} else if (width >= 1301 && width <= 1400 && depth >= 501 && depth <= 600) {
return 80;
} else if (width >= 1401 && width <= 1500 && depth >= 200 && depth <= 300) {
return 76;
} else if (width >= 1401 && width <= 1500 && depth >= 301 && depth <= 400) {
return 78;
} else if (width >= 1401 && width <= 1500 && depth >= 401 && depth <= 500) {
return 80;
} else if (width >= 1401 && width <= 1500 && depth >= 501 && depth <= 600) {
return 82;
} else if (width >= 1501 && width <= 1600 && depth >= 200 && depth <= 300) {
return 78;
} else if (width >= 1501 && width <= 1600 && depth >= 301 && depth <= 400) {
return 80;
} else if (width >= 1501 && width <= 1600 && depth >= 401 && depth <= 500) {
return 82;
} else if (width >= 1601 && width <= 1700 && depth >= 200 && depth <= 300) {
return 84;
} else if (width >= 1601 && width <= 1700 && depth >= 301 && depth <= 400) {
return 86;
} else if (width >= 1601 && width <= 1700 && depth >= 401 && depth <= 500) {
return 88;
} else if (width >= 1701 && width <= 1800 && depth >= 200 && depth <= 300) {
return 86;
} else if (width >= 1701 && width <= 1800 && depth >= 301 && depth <= 400) {
return 88;
} else if (width >= 1701 && width <= 1800 && depth >= 401 && depth <= 500) {
return 90;
// Add more range conditions and corresponding prices as needed
} else {
return 60; // Default price if no range matches
}
}
function addToBasket() {
// Retrieve form data
var width = document.getElementById("width").value;
var depth = document.getElementById("depth").value;
var quantity = document.getElementById("quantity").value;
// Store data in localStorage
localStorage.setItem("shelf_width", width);
localStorage.setItem("shelf_depth", depth);
localStorage.setItem("shelf_quantity", quantity);
// Redirect to basket page or perform other actions as needed
// window.location.href = "basket.html";
}
// Load stored data from localStorage
window.onload = function() {
document.getElementById("width").value = localStorage.getItem("shelf_width") || "";
document.getElementById("depth").value = localStorage.getItem("shelf_depth") || "";
document.getElementById("quantity").value = localStorage.getItem("shelf_quantity") || "1";
};
</script>
</head>
<body>
<h2>Shelf Pricing Calculator</h2>
<form>
<label for="width">Width (mm):</label>
<input type="number" id="width" name="width" required><br><br>
<label for="depth">Depth (mm):</label>
<input type="number" id="depth" name="depth" required><br><br>
<label for="quantity">Quantity:</label>
<select id="quantity" name="quantity" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<!-- Add more options as needed -->
</select><br><br>
<button type="button" id="calculatePriceBtn" onclick="calculatePrice()">Calculate Price</button><br><br>
<div id="totalPrice"></div>
</form>
<!-- Add to Basket Button -->
<button id="addToBasket" onclick="addToBasket()">Add to Basket</button>
</body>
</html>
