Hi, I have created a custom size calculator using HTML & Javascript. I’m trying to add this to my store but am unable to. When I try to embed it through an iframe or custom liquid it does not work. What is the best way to display my size calculator on the page?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shopify store</title>
<style type="text/css">
h1 {
font-family: 'Kranky', cursive;
text-align: center;
font-size: 35px;
}
.disclaimer {
font-weight: bold;
font-style: italic;
}
#bra-calculator {
background: #D6E6C3;
padding: 30px 40px 40px;
max-width: 600px;
margin: 50px auto 20px;
text-align: center;
border-radius: 10px;
}
.title {
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
}
.half {
width: calc( 50% - 40px);
float: left;
padding: 0 20px;
}
label {
font-size: 16px;
display: block;
text-align: left;
margin: 10px auto;
}
.error-message {
font-size: 14px;
margin: 15px auto;
text-align: left;
font-weight: bold;
display: none;
}
.error-message.show {
display: block;
}
input[type="number"] {
border: 0;
border-radius: 10px;
font-size: 14px;
padding: 10px 10px;
outline: none;
font-family: 'Open Sans', sans-serif;
width: 100%;
}
input[type="number"].error {
border: 2px solid red;
}
input[type="submit"] {
background: #fff;
border: 3px dashed #000;
border-radius: 10px;
padding: 10px;
font-size: 22px;
font-weight: bold;
margin-top: 18px;
cursor: pointer;
letter-spacing: 1px;
outline: none;
width: 50%;
}
input[type=submit]:hover,
input[type=submit]:active {
transform: scale( .95);
}
#bra-results {
font-size: 28px;
padding: 20px;
}
#bra-results.show {
display: block;
}
#bra-results span {
font-weight: bold;
}
@media screen and ( max-width: 767px) {
#bra-calculator {
padding-left: 15px;
padding-right: 15px;
}
.half {
float: none;
width: 100%;
padding: 20px 0;
}
input[type="number"] {
width: 80%;
}
}
</style>
</head>
<body>
<form id="bra-calculator">
<div class="title">Enter Your Measurements in Inches</div>
<div class="half">
<label for="rib-measurement">Enter Your Band Size:</label>
<input type="number" name="rib-measurement" id="rib-measurement" placeholder="Enter Your Band Size">
<div class="error-message">Please enter a value greater than 26 to 54</div>
</div>
<div class="half">
<label for="bust-measurement">Enter Your Bust Size:</label>
<input type="number" name="bust-measurement" id="bust-measurement" placeholder="Cup Measurement">
<div class="error-message">Your bust measurement must be at least 1 inch larger than your Band Size</div>
</div>
<input type="submit" id="submit" value="Calculate!">
<div id="bra-results"></div>
</form>
<script type="text/javascript">
// namespace object
var bra_calculator = bra_calculator || (function() {
var inputs = document.getElementsByTagName('input'),
ribs_input = document.getElementById('rib-measurement'),
bust_input = document.getElementById('bust-measurement'),
validation_flag = false,
results_div = document.getElementById('bra-results');
function results_message(message) {
results_div.innerHTML = message;
}
function find_sibling(input) {
return input.nextSibling.nextSibling;
}
function add_error(input) {
input.classList.add('error');
find_sibling(input).classList.add('show');
}
function remove_error(input) {
input.classList.remove('error');
find_sibling(input).classList.remove('show');
}
function error_checker(input) {
if (input.value == 0) {
add_error(input);
} else {
if (input.type.toLowerCase() === 'number') {
remove_error(input);
}
}
}
function validator() {
// check for empty values
for (i = 0; i < inputs.length; ++i) {
error_checker(inputs[i]);
}
// rib measurement should be be >= 26
if (ribs_input.value < 26) {
add_error(ribs_input);
} else {
remove_error(ribs_input);
}
// bust should be at least 1 inch greater than ribs!
if (bust_input.value !== '' && ribs_input.value !== '') {
if (Number(bust_input.value) <= Number(ribs_input.value)) {
add_error(bust_input);
} else {
remove_error(bust_input);
}
}
if (!ribs_input.classList.contains('error') && !bust_input.classList.contains('error')) {
validation_flag = true;
} else {
validation_flag = false;
results_message('');
}
if (validation_flag) {
var cup_sizes = ['A', 'B', 'C', 'D', 'DD', 'DDD'],
bust = Math.ceil(bust_input.value),
ribs = Math.ceil(ribs_input.value),
difference = (bust - ribs) - 1;
if (cup_sizes[difference] === null) {
results_message('Your size is out-of-range! Please try again.');
} else {
results_message('Your cup size is: <span>' + ribs + cup_sizes[difference] + '</span>');
}
}
}
return {
validator: validator
}
})();
(function() {
document.getElementById('bra-calculator').addEventListener('submit', function(e) {
e.preventDefault();
bra_calculator.validator();
});
})();
</script>
</body>
</html>