Skip to content

Instantly share code, notes, and snippets.

@Ranjanivraman

Ranjanivraman/.js

Last active May 19, 2023 13:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Ranjanivraman/a3eceb1a814e21d5da4f99fefdd5b5b8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Ranjanivraman/a3eceb1a814e21d5da4f99fefdd5b5b8 to your computer and use it in GitHub Desktop.
Download ZIP
papaprints tier quantity selector without canva
Raw
.js
<script>
// Find the element with the class "tt-input-counter"
var counterElement = document.querySelector(".tt-input-counter");
// Create a new select (dropdown) element with Bootstrap classes
var selectElement = document.createElement("select");
selectElement.classList.add("form-select", "selectpicker"); // Add form-select and selectpicker classes for Bootstrap styling
selectElement.setAttribute("name", "quantity"); // Set the name attribute
// Add a label to the select element
var labelElement = document.createElement("label");
labelElement.textContent = "Quantity:";
labelElement.setAttribute("for", "quantity"); // Set the 'for' attribute to match the select's 'name' attribute
// Apply custom styling to the label
labelElement.style.fontWeight = "bold";
labelElement.style.marginBottom = "8px";
// Create a div container for the label and select element
var containerDiv = document.createElement("div");
containerDiv.setAttribute("id", "quantitycontainer");
containerDiv.style.display = "flex";
containerDiv.style.flexDirection = "column";
containerDiv.style.alignItems = "flex-start";
containerDiv.style.padding = "10px";
containerDiv.style.backgroundColor = "#fff";
containerDiv.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";
containerDiv.appendChild(labelElement);
containerDiv.appendChild(selectElement);
// Add an option for the title "Quantity"
// var optionTitle = document.createElement('option');
// optionTitle.value = "50"; // Set an empty value for the title option
// optionTitle.text = "Select Quantity";
// optionTitle.disabled = true;
// optionTitle.selected = true;
// selectElement.add(optionTitle);
// Object with key-value pairs for the options
// var optionsObject = {
// "50": 1,
// "100 (save 40%)": 0.6,
// "200 (save 41%)": 0.59,
// "300 (save 42%)": 0.58,
// "500 (save 45%)": 0.55,
// "1000 (save 50%)": 0.5,
// "2000 (save 55%)": 0.45,
// "3000 (save 68%)": 0.32,
// "5000 (save 75%)": 0.25,
// "10000 (save 80%)": 0.2,
// };
var keysArray = [
"50",
"100 (save 40%)",
"200 (save 41%)",
"300 (save 42%)",
"500 (save 45%)",
"1000 (save 50%)",
"2000 (save 55%)",
"3000 (save 68%)",
"5000 (save 75%)",
"10000 (save 80%)",
];
var quantityArray = [50, 100, 200, 300, 500, 1000, 2000, 3000, 5000, 10000];
var valuesArray = [1, 0.6, 0.59, 0.58, 0.55, 0.5, 0.45, 0.32, 0.25, 0.2];
for (let i = 0; i < keysArray.length; i++) {
const option = document.createElement("option");
option.value = quantityArray[i];
option.text = keysArray[i];
selectElement.add(option);
}
var priceElement = document.querySelector(".new-price");
// Check if the element exists
if (priceElement) {
// Retrieve the price value
const pricestring = priceElement.textContent;
const numberPattern = /(\d+(\.\d+)?)/; // Regex pattern to match the number
const matches = pricestring.match(numberPattern);
if (matches && matches.length > 1) {
var extractedpricevalue = parseFloat(matches[1]);
} else {
console.log("No number found in the price string.");
}
}
// Create a message box to display the selected value
var messageBox = document.createElement("div");
messageBox.classList.add("success-message");
messageBox.style.marginTop = "10px";
messageBox.style.fontSize = "16px";
messageBox.style.padding = "10px";
messageBox.style.borderRadius = "5px";
messageBox.style.display = "none"; // Hide the message box initially
// Add an event listener to the select element
selectElement.addEventListener("change", function () {
// Check if the element exists
if (priceElement) {
// Retrieve the price value
const pricestring = priceElement.textContent;
const numberPattern = /(\d+(\.\d+)?)/; // Regex pattern to match the number
const matches = pricestring.match(numberPattern);
if (matches && matches.length > 1) {
var extractedpricevalue = parseFloat(matches[1]);
console.log("extractedpricevalue:", extractedpricevalue);
} else {
console.log("No number found in the price string.");
}
}
if (this.value !== "") {
messageBox.style.display = "block";
const unitPrice = (valuesArray[this.selectedIndex] * extractedpricevalue).toFixed(2);
const TotalPrice = (unitPrice * quantityArray[this.selectedIndex]).toFixed(2);;
const additionalContent = "<div> Total Price: £ " + TotalPrice + "</div>";
messageBox.textContent =
"Unit Price: £" + unitPrice;
console.log(
"Select box changed and its current index is :",
valuesArray[this.selectedIndex]
);
console.log("extractedpricevalue:", extractedpricevalue);
messageBox.classList.add("success-message");
messageBox.innerHTML += additionalContent;
} else {
messageBox.style.display = "none";
}
});
// Create a new MutationObserver
const observer = new MutationObserver(function (mutationsList, observer) {
// Iterate through the mutations
for (let mutation of mutationsList) {
if (mutation.type === "childList" && mutation.target === priceElement) {
var currentquantitydropdown = document.getElementsByName("quantity");
var currentquantitydropdownvalue = currentquantitydropdown[0].value;
// retrieve price value from price text
// Check if the element exists
if (priceElement) {
// Retrieve the price value
const pricestring = priceElement.textContent;
const numberPattern = /(\d+(\.\d+)?)/; // Regex pattern to match the number
const matches = pricestring.match(numberPattern);
if (matches && matches.length > 1) {
var extractedpricevalue = parseFloat(matches[1]);
} else {
console.log("No number found in the price string.");
}
}
// Handle the change event
messageBox.style.display = "block";
const unitPrice = (valuesArray[
quantityArray.indexOf(parseInt(currentquantitydropdownvalue))
] *
extractedpricevalue).toFixed(2);
const TotalPrice = (unitPrice * parseInt(currentquantitydropdownvalue)).toFixed(2);
const additionalContent = "<div> Total Price: £ " + TotalPrice + "</div>";
messageBox.textContent =
"Unit Price: £" + unitPrice ;
messageBox.innerHTML += additionalContent;
messageBox.classList.add("success-message");
console.log("Price changed:", extractedpricevalue);
console.log("value's array first element:", valuesArray[0]);
console.log("Dropdown value:", currentquantitydropdownvalue);
console.log(
"Dropdown index:",
quantityArray.indexOf(parseInt(currentquantitydropdownvalue))
);
}
}
});
// Configure and start the observer
const config = { childList: true, subtree: true };
observer.observe(priceElement, config);
// Append the message box to the container div
containerDiv.appendChild(messageBox);
// Replace the counter element with the container div
counterElement.parentNode.replaceChild(containerDiv, counterElement);
// Apply custom styling to the select element
selectElement.style.width = "100%";
selectElement.style.padding = "8px";
selectElement.style.fontSize = "16px";
selectElement.style.border = "1px solid #ced4da";
selectElement.style.borderRadius = "4px";
selectElement.style.boxShadow = "none";
selectElement.style.backgroundColor = "#fff";
// Get the element with the ID "quantitycontainer"
var quantityContainer = document.getElementById("quantitycontainer");
// Get the parent element of quantityContainer
var parentElement = quantityContainer.parentNode;
// Get the parent element of the parent element
var grandparentElement = parentElement.parentNode;
// Remove the class name "tt-row-custom-01" from the grandparent element
grandparentElement.classList.remove("tt-row-custom-01");
quantityContainer.parentNode.classList.add("tt-row-custom-01");
var addToBasketElement = document.querySelector(".btn-addtocart");
addToBasketElement.parentNode.classList.add("tt-row-custom-01");
</script>
<style>
.success-message {
background-color: #dff0d8;
color: #3c763d;
border: 1px solid #d6e9c6;
padding: 10px;
margin-bottom: 10px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment