const scriptUrl = new URL(document.currentScript.src);
const urlParams = new URLSearchParams(new URL(scriptUrl).search);
const shop = urlParams.get("shop");
var varientid = urlParams.get("varientid");
const addtocartstring = urlParams.get("addtocartstring");
var isListenToInput = false;
var pix_host = window.Shopify.shop;
var pix_product = window.ShopifyAnalytics.meta.product;
var pix_preorder;
var selectedVariant;
var listOfOnVariants = [];
runpixpreorderapp();
function runpixpreorderapp() {
var pix_url =
"https://stingray-app-n99th.ondigitalocean.app/getpreorder?shop=" +
pix_host +
"&productid=" +
pix_product.id;
fetch(pix_url)
.then((response) => response.json())
.then((result) => {
pix_preorder = result.preorder;
// preorder.buttonText
getaddtocartbtn(varientid, addtocartstring, pix_preorder);
});
}
function getaddtocartbtn(varientid, btnaddtocartstring, preorder) {
const inputs = document.getElementsByTagName("input");
// get select inputs and add them to inputs
const selects = document.getElementsByTagName("select");
// Convert the collections to arrays
const inputArr = Array.from(inputs);
const selectArr = Array.from(selects);
// Concatenate the arrays
const allInputs = inputArr.concat(selectArr);
for (var j = 0; j < allInputs.length; j++) {
if (allInputs[j].value == varientid) {
// console.log(inputs[j].value)
// listent to this input if change value
if (isListenToInput == false) {
listentoinputs(allInputs[j]);
isListenToInput = true;
}
const form = allInputs[j].form;
const buttons = form.getElementsByTagName("button");
const btninpusts = form.getElementsByTagName("input");
// Convert the collections to arrays
const buttonArr = Array.from(buttons);
const btninpustArr = Array.from(btninpusts);
// Concatenate the arrays
const allbuttons = buttonArr.concat(btninpustArr);
for (var i = 0; i < allbuttons.length; i++) {
if (
allbuttons[i].textContent.includes(btnaddtocartstring) ||
allbuttons[i].value == btnaddtocartstring
) {
//console.log(buttons[i])
// return buttons[i]
// check if show == true
if (preorder.show == true) {
// check if current varient show == true
preorder.selectedProducts.map((selectedProduct) => {
selectedProduct.variants.map((variant) => {
console.log(
"variant.id" + variant.id + "varientid : " + varientid
);
if (variant.toggel == true && variant.id == varientid) {
render(allbuttons[i], preorder.buttonText);
}
});
});
}
}
}
}
}
}
function render(addtocartbtn, preorderstring) {
// edit text in button to preorder text
var btnaddtocart = addtocartbtn;
var addToCartText = btnaddtocart.innerText.toLocaleLowerCase();
var newElement = btnaddtocart.innerHTML
.toLocaleLowerCase()
.replaceAll(addToCartText, preorderstring);
btnaddtocart.innerHTML = newElement;
// add css style to button
addtocartbtn.style =
"background-color: " +
pix_preorder.colorBackground +
"; border: " +
pix_preorder.borderWidth +
"px solid " +
pix_preorder.colorBorder +
"; padding-top: " +
pix_preorder.paddingTop +
"px; padding-bottom: " +
pix_preorder.paddingBottom +
"px; color: " +
pix_preorder.colorFont +
"; border-radius: " +
pix_preorder.borderRadius +
"px;";
// add label
if (pix_preorder.preOrderPlacment == "Above") {
addtocartbtn.parentElement.innerHTML =
"" +
pix_preorder.preOrderMessage +
"" +
addtocartbtn.outerHTML;
}
if (pix_preorder.preOrderPlacment == "Below") {
addtocartbtn.parentElement.innerHTML =
addtocartbtn.outerHTML +
"" +
pix_preorder.preOrderMessage +
"";
}
}
function listentoinputs(element) {
element.addEventListener("change", (event) => {
const newValue = event.target.value;
// set the new varient id
varientid = newValue;
runpixpreorderapp();
console.log(`The value of the element has changed to ${newValue}`);
});
}