yes, you are right @Made4uo-Ribe but I am a software developer not a shopify developer and I write the code for it and It is working but can you please help me How can I find the id and checkout page so, I will add few more code in my existing code
Can you please check my code and edit the code If you available.
-----------------------------------------------------------------------------------------------------------------------
<!-- You may also add functionality -->
<div class="checkbox-meta">
<h1 class="checkheading">You may also add</h1>
<input type="checkbox" id="clothed2" name="clothed2" value="34.75">
<label for="clothed2"> Alma Azaar (As Shown) [+$34.75] </label><br>
<input type="checkbox" id="cloths2" name="cloths2" value="30.89">
<label for="cloths2"> Zuri Pants [+$30.89] </label><br>
<input type="checkbox" id="cloth3" name="cloth3" value="19.31">
<label for="cloth3"> Plain Dupatta [+$19.31] </label><br><br>
<h2 id="total-price">Total Price: $0.00</h2>
<script>
document.addEventListener("DOMContentLoaded", function () {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const totalPriceElement = document.getElementById("total-price");
const basePrice = 100; // Replace with your actual base product price
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", updateTotalPrice);
});
function updateTotalPrice() {
let totalPrice = basePrice;
checkboxes.forEach((checkbox) => {
if (checkbox.checked) {
const checkboxValue = parseFloat(checkbox.value);
if (!isNaN(checkboxValue)) {
totalPrice += checkboxValue;
}
}
});
totalPriceElement.textContent = "Total Price: $" + totalPrice.toFixed(2);
}
});
</script>
<div class="contined-width">
<label class="tyh"> TYPE </label>
<button id="unstitchedBtn" class="selection-button">Unstitched</button>
<button id="stitchedBtn" class="selection-button">Stitched</button>
<div id="unstitchedImage" class="hidden">
<label class="tyh"> ADDON </label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<b>LINING + RS.2000</b>
</span> <br>
<img src="unstitched-image.jpg" alt="Unstitched Image"> <br>
<div class="sizechartfixed">
<button id="sizeChartBtn" class="selection-button" style="color: #fff; background: #000; border: #000;">Size Chart</button>
<div id="sizeChartImage" class="hidden">
</div>
</div>
</div>
<div id="stitchedOptions" class="hidden">
<div class="size-buttons">
<label class="tyh">Size</label>
<button class="size-button" data-size="XS">XS</button>
<button class="size-button" data-size="S">S</button>
<button class="size-button" data-size="M">M</button>
<button class="size-button" data-size="L">L</button>
<button class="size-button" data-size="custom">CUSTOM SIZE</button>
</div>
<label class="tyh">Style</label>
<label class="radi-lengh">
<input type="radio" name="style" value="lengha"> Lengha
</label>
<label>
<input type="radio" name="style" value="angrahka"> Angrahka
</label>
<div id="customSizeImage" class="hidden">
<p style="font-size: 13px; font-weight: 500;">NOTE</p>
<ul>
<li>Please provide your final stitching measurements below (not body measurements).</li>
<li>You can provide the measurements that require alterations as rest of the measurements will be chosen from your nearest size.</li>
<li>Changes in custom stitched orders can only be made within 3 days of order placement and will require a confirmation from our end.</li>
<li>The length for articles with front embroidery cannot be altered under the custom size option. The length will remain the same as mentioned in the size chart.</li>
</ul> <br>
<p style="font-weight: 700;"> Please select one option from nearest size*</p>
<p>*Choose your nearest size:</p>
<div class="size-buttons">
<button class="size-button" data-size="XS">XS</button>
<button class="size-button" data-size="S">S</button>
<button class="size-button" data-size="M">M</button>
<button class="size-button" data-size="L">L</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const selectionButtons = document.querySelectorAll(".selection-button");
const sizeButtons = document.querySelectorAll(".size-button[data-size]:not([data-size='custom'])");
const customSizeButton = document.querySelector(".size-button[data-size='custom']");
const customSizeImage = document.getElementById("customSizeImage");
const sizeChartBtn = document.getElementById("sizeChartBtn");
const sizeChartImage = document.getElementById("sizeChartImage");
let isSizeChartOpen = false;
let isCustomSizeOpen = false;
selectionButtons.forEach(button => {
button.addEventListener("click", event => {
event.preventDefault();
selectionButtons.forEach(btn => {
btn.classList.remove("button-active");
});
button.classList.add("button-active");
if (button.id === "unstitchedBtn") {
unstitchedImage.style.display = "block";
stitchedOptions.style.display = "none";
} else if (button.id === "stitchedBtn") {
unstitchedImage.style.display = "none";
stitchedOptions.style.display = "block";
}
customSizeImage.style.display = "none";
isCustomSizeOpen = false;
if (isSizeChartOpen) {
sizeChartImage.style.display = "none";
isSizeChartOpen = false;
}
});
});
sizeButtons.forEach(button => {
button.addEventListener("click", event => {
event.preventDefault();
sizeButtons.forEach(btn => {
btn.classList.remove("button-active");
});
button.classList.add("button-active");
const size = button.getAttribute("data-size");
if (size === "custom") {
customSizeImage.style.display = "block";
isCustomSizeOpen = true;
} else {
customSizeImage.style.display = "none";
isCustomSizeOpen = false;
}
if (isSizeChartOpen) {
sizeChartImage.style.display = "none";
isSizeChartOpen = false;
}
});
});
sizeChartBtn.addEventListener("click", event => {
event.preventDefault();
if (isSizeChartOpen) {
sizeChartImage.style.display = "none";
isSizeChartOpen = false;
} else {
sizeChartImage.style.display = "block";
customSizeImage.style.display = "none";
isCustomSizeOpen = false;
isSizeChartOpen = true;
}
});
customSizeButton.addEventListener("click", event => {
event.preventDefault();
if (isCustomSizeOpen) {
customSizeImage.style.display = "none";
isCustomSizeOpen = false;
} else {
customSizeImage.style.display = "block";
sizeChartImage.style.display = "none";
isSizeChartOpen = false;
isCustomSizeOpen = true;
}
});
});
</script>
------------------------------------------------------------------------------------------------------------------------
