I’m creating an ecommerce website and I’m having issue on the pricing of product page based on radio (product) button.
Issue 1 – the price is not displayed when the page is loaded
Issue 2 – the price displayed has lots of decimal point (I tried used number_format(“price”,2) but it couldn’t be displayed)
Below are the codes of the page
code
window.addEventListener('DOMContentLoaded', function() {
const groups = [...document.querySelectorAll(".swatch")].slice(1); // drop the first div
document.getElementById("container").addEventListener("click", function(e) {
const tgtDiv = e.target.closest(".swatch-element")
if (tgtDiv) {
const groupId = tgtDiv.querySelector("input[type=radio]").dataset.group;
groups.forEach(aGroup => aGroup.classList.toggle("hide", groupId !== aGroup.id))
}
});
});
function check() {
$("#swatch-1-9").prop("checked", true);
}
function check2() {
$("#swatch-1-6").prop("checked", true);
}
function check3() {
$("#swatch-1-4").prop("checked", true);
}
function check4() {
$("#swatch-1-1").prop("checked", true);
}
function displayRadioValue() {
var ele = document.getElementsByName('length');
for(i = 0; i < ele.length; i++) {
if(ele[i].checked)
document.getElementById("price").innerHTML
= "RM " + ele[i].value*<?php echo $product['wesell'];?>
;
}
}
.swatch {
margin: 1em 0;
display:flex;
flex-flow: row;
}
.header { width:70px}
.hide { display: none; }
.swatch .header {
margin: 0.5em 0;
}
.swatch input {
display: none;
}
.swatch label {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
float: left;
min-width: 50px;
height: 35px;
margin: 0;
border: #ccc 1px solid;
background-color: #ddd;
font-size: 13px;
text-align: center;
line-height: 35px;
white-space: nowrap;
text-transform: uppercase;
}
.swatch-element label {
padding: 0 10px;
}
.color.swatch-element label {
padding: 0;
}
.swatch input:checked+label {
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
border-color: transparent;
}
.swatch .swatch-element {
float: left;
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
margin: 0px 10px 10px 0;
position: relative;
}
.crossed-out {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.swatch .swatch-element .crossed-out {
display: none;
}
.swatch .swatch-element.soldout .crossed-out {
display: block;
}
.swatch .swatch-element.soldout label {
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.swatch .tooltip {
text-align: center;
background: gray;
color: #fff;
bottom: 100%;
padding: 10px;
display: block;
position: absolute;
width: 100px;
left: -23px;
margin-bottom: 15px;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
z-index: 10000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.swatch .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.swatch .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid gray 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.swatch .swatch-element:hover .tooltip {
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.swatch.error {
background-color: #E8D2D2!important;
color: #333!important;
padding: 1em;
border-radius: 5px;
}
.swatch.error p {
margin: 0.7em 0;
}
.swatch.error p:first-child {
margin-top: 0;
}
.swatch.error p:last-child {
margin-bottom: 0;
}
.swatch.error code {
font-family: monospace;
}<div class="swatch color clearfix" id="container" data-option-index="0">
<div class="header">
Product
</div>
<div data-value="black" class="swatch-element color black available">
<div class="tooltip">black</div>
<input id="swatch-0-black" checked name="option-0" value="0.96" type="radio" data-group="group1" checked onclick="displayRadioValue() ">
<label for="swatch-0-black" style="background-color: black; background-image: url(./assets/images/black.png)"><img class="crossed-out" src="./assets/images/soldout.png" alt=""></label>
</div>
<div data-value="red" class="swatch-element color red available">
<div class="tooltip">
red
</div>
<input id="swatch-0-red" name="option-0" value="1.34" type="radio" data-group="group2" onclick="check2(),displayRadioValue()">
<label for="swatch-0-red" style="background-color: red; background-image: url(./assets/images/red.png)">
<img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
<div data-value="white" class="swatch-element color white available">
<div class="tooltip">
white
</div>
<input id="swatch-0-white" name="option-0" value="1.48" type="radio" data-group="group3" onclick="check3(),displayRadioValue()">
<label for="swatch-0-white" style="background-color: white; background-image: url(./assets/images/white.png)">
<img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
<div data-value="blue" class="swatch-element color blue available">
<div class="tooltip">
blue
</div>
<input id="swatch-0-blue" name="option-0" value="1.52" type="radio" data-group="group4" onclick="check4(),displayRadioValue()">
<label for="swatch-0-blue" style="background-color: blue; background-image: url(./assets/images/blue.png)">
<img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
</div>
<div class="swatch clearfix" data-option-index="1" id="group1">
<div class="header">
Weight
</div>
<div data-value="small" class="swatch-element small available">
<input id="swatch-1-9" name="length" value="0.96" type="radio" id="group4a" checked onclick="displayRadioValue()">
<label for="swatch-1-9">
0.96g <img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
</div>
<div class="swatch clearfix hide" id="group2">
<div class="header">
Weight
</div>
<div data-value="small" class="swatch-element small available">
<input id="swatch-1-6" name="length" value="1.34" type="radio" onclick="displayRadioValue()">
<label for="swatch-1-6">
1.34g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-7" name="length" value="1.44" type="radio" id="group3b" onclick="displayRadioValue()">
<label for="swatch-1-7">
1.44g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-8" name="length" value="1.54" type="radio" id="group3c" onclick="displayRadioValue()">
<label for="swatch-1-8">
1.54g
</label>
</div>
</div>
<div class="swatch clearfix hide" id="group3">
<div class="header">
Weight
</div>
<div data-value="small" class="swatch-element small available">
<input id="swatch-1-4" name="length" value="1.48" type="radio" onchange="displayRadioValue()">
<label for="swatch-1-4">
1.48g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-5" name="length" value="1.49" type="radio" id="group2b" onclick="displayRadioValue()">
<label for="swatch-1-5">
1.49g <img class="crossed-out" src="./assets/images/soldout.png" alt="">
</label>
</div>
</div>
<div class="swatch clearfix hide" id="group4">
<div class="header">
Weight
</div>
<div data-value="small" class="swatch-element small available">
<input id="swatch-1-1" name="length" value="1.52" type="radio" onclick="displayRadioValue()">
<label for="swatch-1-1">
1.52g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-2" name="length" value="1.54" type="radio" onclick="displayRadioValue()">
<label for="swatch-1-2">
1.54g
</label>
</div>
<div data-value="medium" class="swatch-element medium available">
<input id="swatch-1-3" name="length" value="1.57" type="radio" onclick="displayRadioValue()">
<label for="swatch-1-3">
1.57g
</label>
</div>
</div>
<div id="purchase-1293235843">
<div class="detail-price" itemprop="price">
<span class="price" id="price">
</span>
</div>
</div>