foamtailor Posted November 28 Posted November 28 Hello all, I have created my own calculator which i can add to my website i am trying to build. The user will input their dimensions into the calculator (think sofa cushion shapes) and this will give them a price for the replacement foam - it works and is functional, however what i want to achieve is linking that price and all the dimensions to the cart. In my code i have an 'add to basket' button - but this does nothing because it is not linked to the website and i cant for the life of me figure that out. What I would like to achieve from this is that when you click 'add to cart' in my code it takes all of the information and puts that into the website checkout ready for the user to put their details in to pay. Im hoping someone might be able to help with this. Thankyou. P.S it wont let me add the code as a text file - i will copy and pase it in. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Horizontal Price Calculator</title> <style> body { font-family: Arial, sans-serif; background-color: #E0E0DB; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; color: #2A2829; } .calculator-container { background-color: white; padding: 6px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); display: flex; flex-direction: row; gap: 10px; align-items: flex-start; max-width: 600px; width: 96%; } .image-container img { max-width: 150px; border-radius: 5px; } .form-column { display: flex; flex-direction: column; gap: 5px; } .form-group { display: flex; flex-direction: column; gap: 2px; } label { font-size: 7px; font-weight: bold; } input, select { width: 100%; padding: 2px; font-size: 7px; border: 1px solid #ddd; border-radius: 3px; box-sizing: border-box; } input:focus, select:focus { border-color: #253551; outline: none; } .bottom-row { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; width: 100%; } button { padding: 4px; font-size: 7px; cursor: pointer; background-color: #253551; color: white; border: none; border-radius: 10px; } button:hover { background-color: #1e2a40; } #result { font-size: 8px; text-align: center; font-weight: bold; } </style> </head> <body> <div class="calculator-container"> <!-- Image Section --> <div class="image-container"> <img src="https://images.squarespace-cdn.com/content/672bce92fdfc4e3623e42b9d/6b79157e-be1e-40f6-9e4e-f5c6d27347a0/Foam+brickedit.JPG?content-type=image%2Fjpeg" alt="Foam Brick"> </div> <!-- Form Inputs Section --> <div class="form-column"> <div class="form-group"> <label for="height">A: Height (mm):</label> <input type="number" id="height" min="0" max="1100" placeholder="Max 1100"> </div> <div class="form-group"> <label for="width">B: Width (mm):</label> <input type="number" id="width" min="0" max="2000" placeholder="Max 2000"> </div> <div class="form-group"> <label for="length">C: Length (mm):</label> <input type="number" id="length" min="0" max="2400" placeholder="Max 2400"> </div> <div class="form-group"> <label for="depth">D: Depth (mm):</label> <input type="number" id="depth" min="0" max="3000" placeholder="Max 3000 (No price impact)"> </div> </div> <!-- Options Section --> <div class="form-column"> <div class="form-group"> <label for="firmness">Firmness:</label> <select id="firmness"> <option value="Soft">Soft</option> <option value="Medium">Medium</option> <option value="Firm">Firm</option> </select> </div> <div class="form-group"> <label for="stockinette">Stockinette:</label> <select id="stockinette"> <option value="0">No Stockinette</option> <option value="2">With Stockinette (+£2)</option> </select> </div> <div class="form-group"> <label for="dacron">Fibre:</label> <select id="dacron"> <option value="0">No Fibre</option> <option value="6">With Fibre (+£6)</option> </select> </div> </div> </div> <!-- Price and Button Row --> <div class="bottom-row"> <div id="result">Price: £0.00</div> <button onclick="addToBasket()">Add to Basket</button> </div> <script> function calculatePrice() { const pricePerUnitVolume = 0.0000006; const height = parseInt(document.getElementById('height').value) || 0; const width = parseInt(document.getElementById('width').value) || 0; const length = parseInt(document.getElementById('length').value) || 0; const depth = parseInt(document.getElementById('depth').value) || 0; // Depth field (does not affect price) const stockinetteCost = parseFloat(document.getElementById('stockinette').value); const fibreCost = parseFloat(document.getElementById('dacron').value); if (height > 0 && height <= 1100 && width > 0 && width <= 2000 && length > 0 && length <= 2400) { const volume = height * width * length; const price = volume * pricePerUnitVolume + stockinetteCost + fibreCost; document.getElementById('result').textContent = `Price: £${price.toFixed(2)} (Height: ${height} mm, Width: ${width} mm, Length: ${length} mm, Depth: ${depth} mm)`; } else { document.getElementById('result').textContent = "Price: £0.00"; } } document.querySelectorAll('input, select').forEach(element => { element.addEventListener('input', calculatePrice); }); </script> </body> </html>
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment