function toggleNav(){ let open = $(".mobile-nav-outer").hasClass("open"); if (open) { $(".mobile-nav-outer").removeClass("open"); } else{ $(".mobile-nav-outer").addClass("open"); } } function toggleNavKmp(){ let open = $(".kmp-mobile-nav-outer").hasClass("open"); if (open) { $(".kmp-mobile-nav-outer").removeClass("open"); } else{ $(".kmp-mobile-nav-outer").addClass("open"); } } function changeKCLType(){ console.log('changeKCLType()'); assignNewVariant(); } function changeKCLCoat(){ console.log('changeKCLCoat()'); assignNewVariant(); } function changeKCLWheel(){ console.log('changeKCLWheel()'); assignNewVariant(); } function changeKCLCorner(){ console.log('changeKCLCorner()'); assignNewVariant(); } function changeKCLColor(colorTitle, colorURL){ console.log('changeKCLColor()'); $("#selectedColor").attr("src", colorURL); //show picture of new color $("#selectedColorTitle").html(colorTitle); //show text title $("#colorSubmit").attr("value", "Color: " + colorTitle); // looking for field ID; changing value to name of color updateColorCharge("#selectedColorTitle"); } function getFirstColorDetails() { console.log('getFirstColorDetails()'); // Get the first .color-div element's data attributes if ($('.premium-color-div').length){ let firstColorDiv = document.querySelector('.premium-color-div'); let colorTitle = firstColorDiv.querySelector('.color-title').textContent; let colorURL = firstColorDiv.querySelector('.color-swatch').getAttribute('src'); return { colorTitle: colorTitle, colorURL: colorURL }; } } function changeSecondaryColor(colorTitle, colorURL){ console.log('changeSecondaryColor()'); $("#selectedSecondaryColor").attr("src", colorURL); //show picture of new color $("#selectedSecondaryTitle").html(colorTitle); //show text title $("#secondaryColorSubmit").attr("value", "Color: " + colorTitle); updateColorCharge("#selectedSecondaryTitle"); } function changeTertiaryColor(colorTitle, colorURL){ console.log('changeTertiaryColor()'); $("#selectedTertiaryColor").attr("src", colorURL); //show picture of new color $("#selectedTertiaryTitle").html(colorTitle); //show text title $("#tertiaryColorSubmit").attr("value", "Tertiary Color: " + colorTitle); // looking for field ID; changing value to name of color updateColorCharge("#selectedTertiaryTitle"); } function changeKmpFont(fontTitle, fontURL){ console.log('changeKmpFont()'); $("#selectedFont").attr("src", fontURL); $("#selectedFontTitle").html(fontTitle); $("#fontSubmit").attr("value", "Font: " + fontTitle); } function changeCutoutImage(index, colorTitle, colorURL) { console.log('changeCutoutImage()'); $("#selectedColor" + index).attr("src", colorURL); $("#selectedColorTitle" + index).html(colorTitle); $("#colorSubmit" + index).attr("value",colorTitle); updateSelectedCutoutOption(index, colorTitle); } var selectedTitles = {}; function updateSelectedCutoutOption(index, title) { console.log('updateSelectedCutoutOption()'); var selectedColorLabel = document.getElementById("selectedColorTitle" + index); var colorTitle = title; if (colorTitle !== "No Cutout (Blank panel or Custom)") { // Check if the title has already been selected for any other index var isTitleSelected = Object.values(selectedTitles).includes(title); if (!isTitleSelected) { colorTitle += " + $5"; // Add the title to the list of selected titles selectedTitles[index] = title; updateVariantPrice(); } else { // If the title is already selected for another index, remove the title from the current index if (selectedTitles[index]) { delete selectedTitles[index]; subtractVariantPrice(); } } } else { // Remove the title from the list of selected titles if (selectedTitles[index]) { delete selectedTitles[index]; } colorTitle = "No Cutout (Blank panel or Custom)"; } selectedColorLabel.innerHTML = colorTitle; } var currentPrice = parseFloat($("#variantPrice").data("base-price")); // Function to update the variant price function updateVariantPrice() { var element = document.querySelector("#variantPrice"); var priceText = element.innerText; // Returns "Starting at $445.00" var newPrice = parseFloat(priceText.replace('STARTING AT $', '')); var variantPriceElement = document.getElementById("variantPrice"); var numTitles = Object.keys(selectedTitles).length; if ( numTitles >= 1 ) { var priceToSubtract = numTitles * 5 - 5; if (numTitles == 5){ priceToSubtract = numTitles * 5; } newPrice = newPrice - priceToSubtract; } // Calculate the additional cost for selected cutout titles var additionalCost = numTitles * 5; var totalPrice = newPrice + additionalCost; $("#variantPrice").data("current-price", totalPrice.toFixed(2)); variantPriceElement.innerHTML = "Starting at $" + totalPrice.toFixed(2); } function removeVariantPrice() { console.log('removeVariantPrice()'); var element = document.querySelector("#variantPrice"); var priceText = element.innerText; // Returns "Starting at $445.00" var newPrice = parseFloat(priceText.replace('STARTING AT $', '')); var variantPriceElement = document.getElementById("variantPrice"); var numTitles = Object.keys(selectedTitles).length; var priceToSubtract = numTitles * 5; console.log(priceToSubtract); newPrice = newPrice - priceToSubtract; console.log(newPrice); var totalPrice = newPrice; $("#variantPrice").data("current-price", totalPrice.toFixed(2)); variantPriceElement.innerHTML = "Starting at $" + totalPrice.toFixed(2); } function subtractVariantPrice() { console.log('subtractVariantPrice()'); var element = document.querySelector("#variantPrice"); var priceText = element.innerText; // Returns "Starting at $445.00" var newPrice = parseFloat(priceText.replace('STARTING AT $', '')); var variantPriceElement = document.getElementById("variantPrice"); var numTitles = Object.keys(selectedTitles).length; if ( numTitles >= 1 ) { newPrice = newPrice - 5; } // Calculate the additional cost for selected cutout titles var totalPrice = newPrice; $("#variantPrice").data("current-price", totalPrice.toFixed(2)); variantPriceElement.innerHTML = "Starting at $" + totalPrice.toFixed(2); } function removeRegularPrice() { console.log('removeRegularPrice()'); var element = document.querySelector("#variantPrice"); var priceText = element.innerText; // Returns "Starting at $445.00" var newPrice = parseFloat(priceText.replace('STARTING AT $', '')); var variantPriceElement = document.getElementById("variantPrice"); var price = $("#variantPrice").data("current-price"); variantPriceElement.innerHTML = "Starting at $" + price.toFixed(2); } var premiumColorCharge = parseFloat("{{ powderCoatPrice.replace('$', '') }}"); // Function to update the premium color charge function updateColorCharge(id) { console.log('updateColorCharge()'); var selectedColor = $(id).text(); // Get the selected color title console.log("Newly Selected Color: "+selectedColor); var updatedPrice = calculateTotalPrice(selectedColor); console.log("new price: " + updatedPrice); var priceText = "Starting at $" + updatedPrice.toFixed(2); $("#variantPrice").attr("data-current-price", updatedPrice); $("#variantPrice").html(priceText); // Update the inner HTML } // Function to calculate the total price based on the selected color function calculateTotalPrice(selectedColor) { console.log('calculateTotalPrice()'); var variantPriceElement = document.getElementById("variantPrice"); var totalPrice = parseFloat(variantPriceElement.innerText.replace(/[^0-9.-]+/g, "")); if (isNaN(totalPrice)) { totalPrice = parseFloat($("#variantPrice").data("base-price")); } console.log('base price of item: '+ totalPrice); if ($('#selectedColorTitle').hasClass('site-marker')){ totalPrice = parseFloat($("#variantPrice").data("base-price")); var priceString = selectedColor.match(/\$\d+(\.\d+)?/); // Extract the price from the color title if (priceString) { var price = parseFloat(priceString[0].replace("$", "")); // Convert the price to a number totalPrice += price; // Add the price to the total price if (isNaN(totalPrice)) { console.log('nan'); totalPrice = parseFloat($("#variantPrice").data("base-price")); } $("#variantPrice").attr("data-current-price", totalPrice); // Update the data attribute } } else { // Check if the selected color is a premium color var isPremiumColor = selectedColor.includes("$"); if (isPremiumColor) { console.log('the color has an additional cost'); } // Check if the premium color charge has already been added var isPremiumColorAdded = isPremiumColor && totalPrice - currentPrice > 0; if (isPremiumColorAdded) { console.log('the color charge has already been added'); } else { console.log('the color charge has not been added already'); } // Add or subtract the premium color charge accordingly if (isPremiumColor && !isPremiumColorAdded) { var priceString = selectedColor.match(/\$\d+(\.\d+)?/); // Extract the price from the color title if (priceString) { var price = parseFloat(priceString[0].replace("$", "")); // Convert the price to a number totalPrice += price; // Add the price to the total price if (isNaN(totalPrice)) { console.log('nan'); totalPrice = parseFloat($("#variantPrice").data("base-price")); } $("#variantPrice").attr("data-current-price", totalPrice); // Update the data attribute } } else if (!isPremiumColor && isPremiumColorAdded) { // Subtract the premium color charge if (shouldSubtractPremiumColorCharge() === false) { totalPrice -= premiumColorCharge; } if (isNaN(totalPrice)) { totalPrice = parseFloat($("#variantPrice").data("base-price")); } $("#variantPrice").attr("data-current-price", totalPrice); // Update the data attribute } } return totalPrice; } function shouldSubtractPremiumColorCharge() { var selectedColorTitle = $("#selectedColorTitle").text(); var selectedSecondaryTitle = $("#selectedSecondaryTitle").text(); var selectedTertiaryTitle = $("#selectedTertiaryTitle").text(); var isPremiumColorSelected = false; console.log(selectedColorTitle); if (selectedColorTitle.includes("$") || selectedSecondaryTitle.includes("$") || selectedTertiaryTitle.includes("$")) { console.log('a premium color is selected, we should not subtract'); isPremiumColorSelected = true; } return isPremiumColorSelected; } function resetCutoutOptions() { console.log('resetCutoutOptions()'); // todo: I'm not sure why this was here... I'm not deleting it, just commenting it out to see what breaks // removeVariantPrice(); var cutoutOptionContainers = document.querySelectorAll(".cutout-holder"); cutoutOptionContainers.forEach(function(container) { var defaultCutoutOption = container.querySelector("div[data-color]"); if (defaultCutoutOption) { var i = 1; var defaultTitle = defaultCutoutOption.dataset.color; var defaultImageUrl = defaultCutoutOption.dataset.imageurl; var selectedColor = container.parentNode.querySelector(".selected-color-title"); var selectedColorImage = container.parentNode.querySelector(".selected-color img"); selectedColor.innerHTML = defaultTitle; selectedColorImage.src = defaultImageUrl; $("#colorSubmit" + i).val("No Cutout (Blank panel or Custom)"); // Clear the selectedCutoutTitles array selectedTitles = {}; i++; } }); } function changeKMPStyle() { console.log('changeKMPStyle()'); var hasLettering = false; var hasDesign = false; var hasEngraving = false; var firstColorDetails = getFirstColorDetails(); var primaryCoatType = $('#kclTwoCoatSelector').val(); var siteMarkerCoatType = $('#kclTwoCoatSelector.site-marker').val(); var secondaryCoatType = $('#kclTwoCoatSelector-secondary').val(); var tertiaryCoatType = $('#kclTwoCoatSelector-tertiary').val(); var primaryHolderRegular = $('#powder-coat-color-holder.primary-coat-holder-regular'); var primaryHolderPremium = $('#powder-coat-color-holder.primary-coat-holder-premium'); var secondaryHolderRegular = $('#powder-coat-color-holder.secondary-color-holder-regular'); var secondaryHolderPremium = $('#powder-coat-color-holder.secondary-color-holder-premium'); var tertiaryHolderRegular = $('#powder-coat-color-holder.tertiary-color-holder-regular'); var tertiaryHolderPremium = $('#powder-coat-color-holder.tertiary-color-holder-premium'); // // if (primaryCoatType === 'premiumPowderCoat') { // primaryHolderRegular.hide(); // primaryHolderPremium.show(); // } else { // primaryHolderRegular.show(); // primaryHolderPremium.hide(); // } if (primaryCoatType === 'noCoat') { console.log('no coat selected'); $('.coat-selection').hide(); var basePrice = parseFloat($("#variantPrice").data("base-price")); $("#variantPrice").text("Starting at $" + basePrice.toFixed(2)); } else { $('.coat-selection').show(); if (primaryCoatType === 'premiumPowderCoat') { console.log('Premium coat selected'); primaryHolderRegular.hide(); primaryHolderPremium.show(); changeKCLColor(firstColorDetails.colorTitle, firstColorDetails.colorURL); } else { console.log('must be regular coat selected... its not nocoat, and its not premiumcoat'); primaryHolderRegular.show(); primaryHolderPremium.hide(); } } if (secondaryCoatType === 'premiumPowderCoat-secondary') { secondaryHolderRegular.hide(); secondaryHolderPremium.show(); } else { secondaryHolderRegular.show(); secondaryHolderPremium.hide(); } if (tertiaryCoatType === 'premiumPowderCoat-tertiary') { tertiaryHolderRegular.hide(); tertiaryHolderPremium.show(); } else { tertiaryHolderRegular.show(); tertiaryHolderPremium.hide(); } $('.styledSelect').each(function () { var selectedOption = $(this).attr('data-selected'); if (selectedOption === 'lettering') { hasLettering = true; } if (selectedOption === 'design') { hasDesign = true; var basePrice = parseFloat($("#variantPrice").data("current-price")); $("#variantPrice").text("Starting at $" + basePrice.toFixed(2)); } if (selectedOption === 'no-design') { resetCutoutOptions(); hasDesign = false; $('.custom-design').hide(); } if (selectedOption === 'engraving'){ hasEngraving = true; } }); if (hasLettering) { $('.custom-lettering').show(); } else { $('.custom-lettering').hide(); } if (hasDesign) { $('.custom-design').show(); } else { $('.custom-design').hide(); } if (hasEngraving) { $('.custom-engraving').show(); } else { $('.custom-engraving').hide(); } } function displayImageId(imageId) { var url = "{{ siteUrl }}assets/" + imageId; $("#uploadedImageId").html("Image ID: " + imageId + ""); } function hideLargeProductImages(){ if ($('#product-image-slider').hasClass("force-hide") == false) { $('.slider-normal').slick("unslick"); $('#product-image-slider').addClass("force-hide"); } if ($('#product-image-slider-large').hasClass("force-hide") == true) { $('#product-image-slider-large').removeClass("force-hide"); $('.slider-large').slick({ dots: true, }); } } function hideProductImages(){ console.log('hideProductImages()'); if ($('#product-image-slider').hasClass("force-hide") == true) { $('#product-image-slider').removeClass("force-hide"); $('.slider-normal').slick({ dots: true, }); } if ($('#product-image-slider-large').hasClass("force-hide") == false) { $('.slider-large').slick("unslick"); $('#product-image-slider-large').addClass("force-hide"); } } function updateColorPrice(type, style, coating){ let priceAdd = "0"; if (style == "single") { if (type == "ar15Case") { if (coating == "powderCoat") { priceAdd = "65"; } else if(coating == "premiumPowderCoat"){ priceAdd = "80"; } else{ priceAdd = "0"; } } if (type == "rifleCase") { if (coating == "powderCoat") { priceAdd = "65"; } else if(coating == "premiumPowderCoat"){ priceAdd = "80"; } else{ priceAdd = "0"; } } if (type == "bowCase") { if (coating == "powderCoat") { priceAdd = "80"; } else if(coating == "premiumPowderCoat"){ priceAdd = "95"; } else{ priceAdd = "0"; } } if (type == "shotgunCase") { if (coating == "powderCoat") { priceAdd = "65"; } else if(coating == "premiumPowderCoat"){ priceAdd = "80"; } else{ priceAdd = "0"; } } if (type == "safariCase") { console.log("Adding to safari price") if (coating == "powderCoat") { priceAdd = "65"; } else if(coating == "premiumPowderCoat"){ priceAdd = "80"; } else{ priceAdd = "0"; } } } else if(style == "double"){ if (type == "ar15Case") { if (coating == "powderCoat") { priceAdd = "65"; } else if(coating == "premiumPowderCoat"){ priceAdd = "80"; } else{ priceAdd = "0"; } } if (type == "rifleCase") { if (coating == "powderCoat") { priceAdd = "65"; } else if(coating == "premiumPowderCoat"){ priceAdd = "80"; } else{ priceAdd = "0"; } } if (type == "pistolCase"){ if (coating == "powderCoat") { priceAdd = "30"; } else if(coating == "premiumPowderCoat"){ priceAdd = "45"; } else{ priceAdd = "0"; } } if (type == "bowCase") { if (coating == "powderCoat") { priceAdd = "80"; } else if(coating == "premiumPowderCoat"){ priceAdd = "95"; } else{ priceAdd = "0"; } } if (type == "shotgunCase") { if (coating == "powderCoat") { priceAdd = "65"; } else if(coating == "premiumPowderCoat"){ priceAdd = "80"; } else{ priceAdd = "0"; } } if (type == "safariCase") { console.log("Adding to safari price") if (coating == "powderCoat") { priceAdd = "65"; } else if(coating == "premiumPowderCoat"){ priceAdd = "80"; } else{ priceAdd = "0"; } } } else if(style == "large"){ if (type == "pistolCase"){ if (coating == "powderCoat") { priceAdd = "30"; } else if(coating == "premiumPowderCoat"){ priceAdd = "45"; } else{ priceAdd = "0"; } } } else if(style == "triple"){ if (type == "safariCase"){ if (coating == "powderCoat") { priceAdd = "65"; } else if(coating == "premiumPowderCoat"){ priceAdd = "80"; } else{ priceAdd = "0"; } } } //console.log(priceAdd); $("#selectedColorAddCost").html("+ $" + priceAdd); } function assignNewVariantKMPCoat(){ console.log('starting KMP Coat switch') //console.log($("#plasticCoatCheckbox").prop('checked')); $('.variantsDataKMPCoat').each(function(index, element){ //console.log(element); if ($("#plasticCoatCheckbox").prop('checked') && element.dataset.plasticcoat == "1") { //console.log("match"); $("#submitId").attr("value", element.dataset.id); $("#variantPrice").html("$ " + element.dataset.price); $("#plasticCoatSubmit").attr("value", "Plastic Coat: Yes +$" + element.dataset.extracost); } if($("#plasticCoatCheckbox").prop('checked') == false && element.dataset.plasticcoat == "0"){ //console.log("match"); $("#submitId").attr("value", element.dataset.id); $("#variantPrice").html("$ " + element.dataset.price); $("#plasticCoatSubmit").attr("value", "Plastic Coat: No"); } }); } function assignNewVariant(){ $('.variantsData').each(function(index, element){ //console.log('checking item variants.......'); //check for matches.... console.log(element.dataset.style); //console.log(element.dataset.coating); //console.log(element.dataset.wearguardcorners); var selections = []; $('.styledSelect').each(function(i, e){ console.log(e.dataset.selected); selections.push(e.dataset.selected); }); // let style = $("#kclTypeSelector").val(); // let coating = $("#kclCoatSelector").val(); // let wearguardcorners = $("#kclWheelSelector").val(); // let wheels = $("#kclCornerSelector").val(); // console.log(`logging the style val... ${style}, ${coating}, ${wearguardcorners}, ${wheels}`); //console.log("might need to hide..."); //console.log(element.dataset.type); if (selections[0] == "single") { //console.log("Hiding product images"); hideProductImages(); } else if (selections[0] == "double" && element.dataset.type ==='safariCase'){ hideProductImages(); } else{ if(element.dataset.type != 'k9Crate' && element.dataset.type != 'tacticalCase'){ //console.log("Hiding large product images") hideLargeProductImages(); } } console.log(selections); if ( selections[0] === element.dataset.style && selections[1] === element.dataset.coating && selections[2] === element.dataset.wheels //&& selections[3] === element.dataset.wearguardcorners ){ console.log('we have a variant to match!!!!'); console.log(`that matching variant is ${element.dataset.id}`); $("#submitId").attr("value", element.dataset.id); $("#variantPrice").html("$ " + element.dataset.price); $("#product-page-description").html(element.dataset.description); updateColorPrice(element.dataset.type, element.dataset.style, element.dataset.coating); $("#styleSubmit").attr("value", "Style: " + element.dataset.style); //console.log(element.dataset); if (element.dataset.wearguardcorners == "1") { $("#cornersSubmit").attr("value", "Corner: yes +$15"); } else{ $("#cornersSubmit").attr("value", "Corner: no"); } if (element.dataset.wheels == "1") { $("#wheelsSubmit").attr("value", "Wheels: yes +$15"); } else{ $("#wheelsSubmit").attr("value", "Wheels: no"); } } }); } function coatColorReset(colorKey){ console.log('coatColorReset()'); //console.log(`lets see what we are working with... ${colorKey}`); if (colorKey === "noCoat") { hideNoCoat(); hidePowderCoat(); hidePremiumPowderCoat(); hideK9PowderCoat(); //$("#no-coat-color-holder").removeClass("force-hide"); let colorTitle = $("#default-no-coat").data("color"); let colorURL = $("#default-no-coat").data("imageurl"); changeKCLColor(colorTitle, colorURL); } if (colorKey === "powderCoat") { hideNoCoat(); hidePremiumPowderCoat(); $("#powder-coat-color-holder").removeClass("force-hide"); let colorTitle = $("#default-powder-coat").data("color"); let colorURL = $("#default-powder-coat").data("imageurl"); changeKCLColor(colorTitle, colorURL) } if (colorKey === "premiumPowderCoat") { hideNoCoat(); hidePowderCoat(); $("#premium-powder-coat-color-holder").removeClass("force-hide"); let colorTitle = $("#default-premium-powder-coat").data("color"); let colorURL = $("#default-premium-powder-coat").data("imageurl"); changeKCLColor(colorTitle, colorURL) }if (colorKey === "k9PowderCoat") { hideNoCoat(); hidePowderCoat(); hidePremiumPowderCoat(); $("#k9-color-holder").removeClass("force-hide"); let colorTitle = $("#default-powder-coat").data("color"); let colorURL = $("#default-powder-coat").data("imageurl"); changeKCLColor(colorTitle, colorURL) } } function hideNoCoat(){ if (!$("#no-coat-color-holder").hasClass("force-hide")) { $("#no-coat-color-holder").addClass("force-hide"); } } function hidePowderCoat(){ if (!$("#powder-coat-color-holder").hasClass("force-hide")) { $("#powder-coat-color-holder").addClass("force-hide"); } } function hidePremiumPowderCoat(){ if (!$("#premium-powder-coat-color-holder").hasClass("force-hide")) { $("#premium-powder-coat-color-holder").addClass("force-hide"); } } function hideK9PowderCoat(){ if (!$("#k9-color-holder").hasClass("force-hide")) { $("#k9-color-holder").addClass("force-hide"); } } $(document).ready(function(){ //changeKMPStyle(); $('.styledSelect').on('DOMSubtreeModified', changeKMPStyle); $("#productForm").on("submit", function() { var currentPrice = parseFloat($("#variantPrice").text().replace("Starting at $", "")); var encodedPrice = btoa(currentPrice); $("#iE346Tf").val(encodedPrice); }); console.log("Logging"); $('.slider-normal').slick({ dots: true, autoplay: true, autoplaySpeed: 4000, speed: 600, fade: true, cssEase: 'linear' }); // Iterate over each select element $('.kcl-custom-select').each(function () { // Cache the number of options var $this = $(this), numberOfOptions = $(this).children('option').length; // Hides the select element $this.addClass('s-hidden'); // Wrap the select element in a div $this.wrap('
'); // Insert a styled div to sit over the top of the hidden select element $this.after('
'); // Cache the styled div var $styledSelect = $this.next('div.styledSelect'); // Show the first select option in the styled div $styledSelect.text($this.children('option').eq(0).text()); $styledSelect.attr("data-selected", $this.children('option').eq(0).val()); // Insert an unordered list after the styled div and also cache the list var $list = $('