我一直在通过squarespace创建一个网站，我销售的产品是一个定制产品，有9种不同的选项可供选择，在这9个选项中有6种不同的子选项。
将每个产品变体添加到方形空间似乎是不合理的，必须有更好的解决方法。我已经制作了用于设置我自己的产品定制页面的代码，但我需要帮助使我的页面上的结帐按钮与squarespace的结帐页面链接。 （列出每个产品的剂量）有什么建议吗？提前谢谢！
a{
font-size:25px;
}
html {
background-color: #333;
}
body {
background-color: white;
width: 100%;
margin: 0 auto;
}
select {
outline: 0;
overflow: hidden;
height: 30px;
width: 100px;
margin-right: 100%;
background: #2c343c;
color: #747a80;
border: #2c343c;
padding: 5px 3px 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 10px;
}
select option {
border: 1px solid #000;
background: #010;
}<html>
<body>
<div1>
<a>Caffeine</a>
<select id="caffeine" onchange="myFunction(this.value)">
<option value="0">0</option>
<option value="0.02">150</option>
<option value="0.04">200</option>
<option value="0.06">250</option>
<option value="0.08">300</option>
<option value="0.1">350</option>
</select>
<br>
<br>
<a> Beta-Alanine</a>
<select id="ba" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">1000</option>
<option value="0.04">1500</option>
<option value="0.06">2000</option>
<option value="0.08">2500</option>
<option value="0.1">3000</option>
</select>
<br>
<br>
<a>Creatine HCL</a>
<select id="Creatine" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">1000</option>
<option value="0.04">1250</option>
<option value="0.06">1500</option>
<option value="0.08">1750</option>
<option value="0.1">2000</option>
</select>
<br>
<br>
<a>BCAA's 2:1:1</a>
<select id="BCAA" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">2000</option>
<option value="0.04">4000</option>
<option value="0.06">6000</option>
<option value="0.08">8000</option>
<option value="0.15">10000</option>
</select>
<br>
<br>
<a>Citrulline Malate</a>
<select id="CM" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">1000</option>
<option value="0.04">2000</option>
<option value="0.06">3500</option>
<option value="0.08">6000</option>
<option value="0.18">8000</option>
</select>
<br>
<br>
<a>Taurine</a>
<select id="Taurine" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">250</option>
<option value="0.04">500</option>
<option value="0.06">750</option>
<option value="0.08">1000</option>
<option value="0.05">1250</option>
</select>
<br>
<br>
<a>Betaine</a>
<select id="Betaine" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">500</option>
<option value="0.04">1000</option>
<option value="0.06">1500</option>
<option value="0.08">2000</option>
<option value="0.05">2500</option>
</select>
<br>
<br>
<a>Arginine</a>
<select id="Arginine" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">500</option>
<option value="0.04">750</option>
<option value="0.06">1000</option>
<option value="0.08">1250</option>
<option value="0.05">1500</option>
</select>
<br>
<br>
<a>Tyrosine</a>
<select id="Tyrosine" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">500</option>
<option value="0.04">750</option>
<option value="0.06">1000</option>
<option value="0.08">1250</option>
<option value="0.05">1500</option>
</select>
<br>
<br>
</div1>
<a>Price per Serving: </a>
<div id="pps">0</div>
<br>
<a>Price per Container (30 Servings): </a>
<div id="priceresults">20</div>
<br>
<a>Mg Total: </a>
<div id="mgresults">0</div>
<button>Add to cart</button>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function myFunction(val) {
var price1 = $(caffeine).val();
var price2 = $(ba).val();
var price3 = $(Creatine).val();
var price4 = $(BCAA).val();
var price5 = $(CM).val();
var price6 = $(Taurine).val();
var price7 = $(Betaine).val();
var price8 = $(Arginine).val();
var price9 = $(Tyrosine).val();
var mg1 = document.getElementById('caffeine').options[document.getElementById('caffeine').selectedIndex].text;
var mg2 = document.getElementById('ba').options[document.getElementById('ba').selectedIndex].text;
var mg3 = document.getElementById('Creatine').options[document.getElementById('Creatine').selectedIndex].text;
var mg4 = document.getElementById('BCAA').options[document.getElementById('BCAA').selectedIndex].text;
var mg5 = document.getElementById('CM').options[document.getElementById('CM').selectedIndex].text;
var mg6 = document.getElementById('Taurine').options[document.getElementById('Taurine').selectedIndex].text;
var mg7 = document.getElementById('Betaine').options[document.getElementById('Betaine').selectedIndex].text;
var mg8 = document.getElementById('Arginine').options[document.getElementById('Arginine').selectedIndex].text;
var mg9 = document.getElementById('Tyrosine').options[document.getElementById('Tyrosine').selectedIndex].text;
var totalprice = Number(price1) + Number(price2) + Number(price3) + Number(price4) + Number(price5) + Number(price6) + Number(price7) + Number(price8) + Number(price9);
var totalmg = Number(mg1) + Number(mg2) + Number(mg3) + Number(mg4) + Number(mg5) + Number(mg6) + Number(mg7) + Number(mg8) + Number(mg9);
var numb1 = (totalprice*30+20)/30;
var x = numb1.toFixed(2);
var numb2 = totalprice*30+20;
var y = numb2.toFixed(2);
$("#pps").html(x);
$("#priceresults").html(y);
$("#mgresults").html(totalmg);
}
</script>