How to embed a price calculator that adds to basket correctly?

AshleighApex
Visitor
1 0 0

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>
Replies 0 (0)