// Version: 1.2 | Author: Zach | Date: 6/26/2024 // THIS TEMPLATE IS MEANT TO BE USED WITH BUTTON #90 // DEBUG MODE -- Set to true if you want console logs to show. var approve_debug_mode = true; approve_debug_log("APPROVE SCRIPT LOADED"); // ****************************************************************** // PRODUCT PAGE // ****************************************************************** // IS MOBILE CHECK var mobile = false; if ( window.innerWidth <= 600 ) { mobile = true; } var approve_gallery_wrapper_check_ele_name = "table"; var approve_selects = document.querySelectorAll('select'); approve_selects.forEach(function (item, index) { item.addEventListener('change',event => { init_approve_gallery_page_buttons(approve_gallery_wrapper_check_ele_name); }) }); // INTEGRATION BUTTON STYLING var custom_button_color = ""; var custom_button_hover_color = ""; var custom_button_height = ""; var custom_button_border = ""; var custom_button_border_radius = ""; var custom_background_gradient = ""; var custom_background_gradient_hover = ""; var custom_font = ""; var custom_font_color = ""; var custom_font_size = ""; var custom_text_transform = ""; var custom_font_hover_color = ""; var custom_powered_by_color = ""; var custom_font_weight = ""; var button_max_width = ""; var button_min_width = ""; var button_width = "100%"; var minimum_threshold = null; // const paths = [ // "/Boss-Jet-Basic-Skid-jetter.html", // "/Boss-Jet-Max-Skid-jetter.html", // "/Boss-Jet-Pro-Skid-jetter.html", // "/bossjet-hot-box.html", // "/bossjet-max-trailer-jetters.html", // "/bossjet-mini-max-hot-jetters.html", // "/bossjet-mini-max-trailer-jetters.html", // "/bossjet-pro-trailer-jetters.html", // "/camera-and-cable-drum-package-CCL-002.html", // "/camera-and-sectional-machine-package-SCCL-002.html", // "/chimney-cameras.html", // "/CYCLONE-38-CAT5.html", // "/duebre-blue.html", // "/electric-eel-800-cleaner.html", // "/electric-eel-Model-325-Sectional-drain-cleaner.html", // "/electric-eel-sewer-cameras.html", // "/forbest-longrange-sewer-cameras.html", // "/forbest-midrange-sewer-cameras.html", // "/gas-engine-vacuum-pumps.html", // "/gen-eye-Prism-big.html", // "/gen-eye-Prism-Mini.html", // "/gen-eye-SDP-big.html", // "/gen-eye-SDP-Mini.html", // "/gen-eye-SDW-big.html", // "/gen-eye-SDW-Mini.html", // "/gen-eye-USB-P-big.html", // "/gen-eye-USB-P-Mini.html", // "/gen-eye-USB-W-big.html", // "/gen-eye-USB-W-Mini.html", // "/gen-eye-x-pod.html", // "/general-Maxi-Rooter.html", // "/general-wire-compact-system-package.html", // "/general-wire-mini-pod.html", // "/GI-commercial-flex-cable-machines.html", // "/hathorn-H2.html", // "/hathorn-H7.html", // "/hathorn-large.html", // "/hathorn-mid.html", // "/hathorn-mini.html", // "/jetter-hot-pressure-washer-products.html", // "/jetter-hot-skid.html", // "/jetter-hot-trailer-bossjet-max.html", // "/jetter-hot-trailer-bossjet-pro.html", // "/jetter-mini-max-hot-skid.html", // "/JM-2900-sewer-jetter.html", // "/JM-3000-sewer-jetter.html", // "/JM-3080-sewer-jetter.html", // "/milwaukee-3972-22.html", // "/milwaukee-3973-22.html", // "/milwaukee-3974-22.html", // "/milwaukee-3975-22.html", // "/milwaukee-3976-22.html", // "/milwaukee-MXF512-2XC.html", // "/opticam-sewer-camera.html", // "/pump-byos.html", // "/pump-grease-trap.html", // "/RIDGID-74683.html", // "/RIDGID-CS12X-camera.html", // "/RIDGID-CS65XR.html", // "/RIDGID-drain-package.html", // "/RIDGID-K-4310-Adwords.html", // "/RIDGID-K-4310.html", // "/RIDGID-microreel.html", // "/RIDGID-minipro.html", // "/RIDGID-nanoreel.html", // "/RIDGID-seesnake-C40.html", // "/RIDGID-seesnake-Compact2.html", // "/RIDGID-seesnake-M40.html", // "/RIDGID-seesnake-mini.html", // "/RIDGID-seesnake-rM200B.html", // "/RIDGID-seesnake-standard.html", // "/wohler-video-cameras.html", // "/TEST.html" // ]; // run = false; // paths.forEach((item, index) => { // if (item == window.location.pathname) run = true; // }); // if (run) { // gallery wrapper if (approve_gallery_wrapper_check_ele_name && document.querySelector(approve_gallery_wrapper_check_ele_name) ) { function init_approve_gallery_page_buttons(gallery_wrapper_ele_name) { // ****************************************************************** // PRODUCT GALLERY Variable Configuration // ****************************************************************** // Check to make sure that we are on a product gallery page var approve_product_gallery_page_check_ele_name = gallery_wrapper_ele_name; // Wrapper for each item relative to document with approve_product_gallery_page_check_ele_name var approve_product_gallery_item_ele = approve_product_gallery_page_check_ele_name+' .container_for_approve'; // Model for each item relative to the item var approve_product_gallery_item_model_ele_name = ' .price_for_approve'; // Price for each item relative to the item var approve_product_gallery_item_price_ele_name = ' .price_for_approve'; // Insert button after relative to the item var approve_product_gallery_item_insert_after_ele_name = ' .price_for_approve'; // Qty button relative to the item (optional) var approve_product_gallery_item_qty_ele_name = ''; var approve_product_gallery_item_inc_quantity_ele_name = ''; var approve_product_gallery_item_dec_quantity_ele_name = ''; // Options relative to the item (optional) (Watcher and event change not programmed) var approve_product_gallery_item_options_wrapper_ele_name = ''; var approve_product_gallery_item_select_ele_name = ''; // CSS for button var approve_product_gallery_item_button_display_style = 'block'; // var approve_product_gallery_item_button_display_margin = '20px 0px 0px 0px'; var approve_product_gallery_item_button_to_remove_ele = ''; // PRODUCT GALLERY // check for items, loop through and init button function with each var approve_product_gallery_page_check = (approve_product_gallery_page_check_ele_name ? document.querySelector(approve_product_gallery_page_check_ele_name) : null); if (approve_product_gallery_page_check){ var approve_gallery_product_array = document.querySelectorAll(approve_product_gallery_item_ele); approve_gallery_product_array.forEach(function(item, idx) { console.log(item); init_approve_product_gallery_item_button(item, idx); }); } function init_approve_product_gallery_item_button(item, idx) { // model var approve_product_gallery_item_model_ele = (approve_product_gallery_item_model_ele_name ? item.querySelector(approve_product_gallery_item_model_ele_name) : null); if (!approve_product_gallery_item_model_ele){ approve_debug_log("APPROVE: No dynamic approve_product_gallery_item_model_ele found.",0,1); return; } var approve_product_gallery_item_model = window.location.pathname.replace(/^\//, '').replace(/-/g, ' ').replace(/\.html$/, ''); approve_product_gallery_item_model += ' (Model Number: ' + approve_product_gallery_item_model_ele.getAttribute('model') + ')'; // price var approve_product_gallery_item_price_ele = (approve_product_gallery_item_price_ele_name ? item.querySelector(approve_product_gallery_item_price_ele_name) : null); if (!approve_product_gallery_item_price_ele){ approve_debug_log("APPROVE: No dynamic approve_product_gallery_item_price_ele found.",0,1); return; } var approve_product_gallery_item_price = approve_product_gallery_item_price_ele.getAttribute('value'); approve_product_gallery_item_price = parseFloat(approve_product_gallery_item_price); if (!approve_product_gallery_item_price || approve_product_gallery_item_price == 0){ approve_debug_log("APPROVE: approve_product_gallery_item_price not found (or is 0) after removing non-numerical characters.",1); } // qty var approve_product_gallery_item_qty_ele = (approve_product_gallery_item_qty_ele_name ? item.querySelector(approve_product_gallery_item_qty_ele_name) : null); var approve_product_gallery_item_qty = 1; if (!approve_product_gallery_item_qty_ele){ approve_debug_log("APPROVE: No dynamic approve_product_gallery_item_qty_ele found.",1); } else { approve_product_gallery_item_qty = approve_product_gallery_item_qty_ele.value; } approve_product_gallery_item_qty = parseInt(approve_product_gallery_item_qty); // element to insert after var approve_product_gallery_item_insert_after_ele = (approve_product_gallery_item_insert_after_ele_name ? item.querySelector(approve_product_gallery_item_insert_after_ele_name) : null); var wrapper = item.closest('td'); var select_ele = wrapper.querySelector('select[name="os0"]'); if (select_ele) { var option = select_ele.value; var selection = document.querySelector('option[value="'+option+'"]'); selection = selection.textContent.trim(); var price_text = selection.substring(selection.indexOf('$'), selection.length); var title = selection.substring(0, selection.indexOf('$')-1); var approve_option_price = price_text.replace(/[^0-9.]/g, ''); if (parseFloat(approve_option_price) > 500){ approve_product_gallery_item_price = parseFloat(approve_option_price); } approve_product_gallery_item_model = window.location.pathname.replace(/^\//, '').replace(/-/g, ' ').replace(/\.html$/, ''); approve_product_gallery_item_model += ' (Model Number: ' + title + ')'; } // approve_product_gallery_item_model = window.location.pathname.replace(/^\//, '').replace(/-/g, ' ').replace(/\.html$/, ''); // approve_product_gallery_item_model += ' (Model Number: ' + title + ')'; // if (!approve_product_gallery_item_price) { // var price = document.querySelector('.price18'); // var approve_price = price.textContent.replace(/[^0-9.]/g, ''); // approve_product_gallery_item_price = parseFloat(approve_price); // } // if (!approve_product_gallery_item_price) { // var price = document.querySelector(' p.textcentered .price'); // var approve_price = price.textContent.replace(/[^0-9.]/g, ''); // approve_product_gallery_item_price = parseFloat(approve_price); // } // Options if (approve_product_gallery_item_options_wrapper_ele_name){ var approve_product_gallery_item_options_wrapper_ele = document.querySelector(approve_product_gallery_item_options_wrapper_ele_name); if (!approve_product_gallery_item_options_wrapper_ele){ approve_debug_log("No approve_product_gallery_item_options_wrapper_ele found."); } else { // TRH - added else to prevent js error when options dont exist var approve_product_gallery_item_selected_options = approve_product_gallery_item_options_wrapper_ele.querySelectorAll(approve_product_gallery_item_select_ele_name); if (!approve_product_gallery_item_selected_options){ approve_debug_log("No approve_product_gallery_item_selected_options found."); } approve_product_gallery_item_selected_options.forEach(function (item, index) { // CONFIGURE OPTIONS HERE }); } } // console.log("CHECK FOR ITEM BUTTON ", item, item.querySelector('#approve_product_gallery_item_button_'+idx)) var approve_product_gallery_item_button = item.querySelector('#approve_product_gallery_item_button_'+idx); if (!approve_product_gallery_item_button){ // If event listener is needed for options, here is where it can be initiated. if (approve_product_gallery_item_options_wrapper_ele_name){ var approve_product_gallery_item_options_wrapper_ele = document.querySelector(approve_product_gallery_item_options_wrapper_ele_name); if (approve_product_gallery_item_options_wrapper_ele){ // If a change listener is needed for options, it is initliazed here. var approve_product_gallery_item_options1 = approve_product_gallery_item_options_wrapper_ele.querySelectorAll(approve_product_gallery_item_select_ele_name); approve_product_gallery_item_options1.forEach(function (opt_item) { opt_item.addEventListener('change',event => { init_approve_product_gallery_item_button(item, idx); }) }); } } // Insert Button var approve_product_gallery_item_button = document.createElement('approve-button'); approve_product_gallery_item_button.id = "approve_product_gallery_item_button_"+idx; approve_product_gallery_item_button.setAttribute('application-type',"embedded_app"); var approve_product_gallery_item_btn_wrapper = document.createElement("div"); approve_product_gallery_item_btn_wrapper.appendChild(approve_product_gallery_item_button); approve_product_gallery_item_btn_wrapper.style.margin = "5px 0px 0px 0px"; approve_product_gallery_item_btn_wrapper.style.scale = "0.75"; approve_product_gallery_item_insert_after_ele.after(approve_product_gallery_item_btn_wrapper); } // Removing a button if (approve_product_gallery_item_button_to_remove_ele){ var approve_product_gallery_item_button_to_remove = document.querySelector(approve_product_gallery_item_button_to_remove_ele); if (approve_product_gallery_item_button_to_remove){ approve_product_gallery_item_button_to_remove.style.display = "none"; } } // If price is below $200, teaser rate breaks. Let's ensure that it's above $500. if ((parseFloat(approve_product_gallery_item_price) * parseInt(approve_product_gallery_item_qty)) < 500){ approve_debug_log("Price is below $500."); approve_product_gallery_item_button.style.display = "none"; return; } // Set approve button variables. approve_product_gallery_item_button.setAttribute('price',approve_product_gallery_item_price); approve_product_gallery_item_button.setAttribute('model',approve_product_gallery_item_model); approve_product_gallery_item_button.setAttribute('qty',approve_product_gallery_item_qty); approve_product_gallery_item_button.setAttribute('type',"new_product"); if (approve_product_gallery_item_qty_ele){ // Add change watcher to qty input approve_product_gallery_item_qty_ele.addEventListener('change',event => { var this_item = item; approve_product_gallery_item_update_qty(approve_product_gallery_item_qty_ele.value, this_item, idx); }) if (approve_product_gallery_item_inc_quantity_ele_name && approve_product_gallery_item_dec_quantity_ele_name ){ approve_product_gallery_item_activate_increase_and_decrease_buttons(item, idx); } } } // ****************************************************************** // Simple set button qty. Must pass the new QTY to the button. // ****************************************************************** function approve_product_gallery_item_update_qty(new_qty, item, idx){ var approve_product_gallery_item_button = item.querySelector('#approve_product_gallery_item_button_'+idx); if (approve_product_gallery_item_button){ var approve_product_gallery_item_btn_qty = parseInt(approve_product_gallery_item_button.getAttribute('qty')); if (new_qty != approve_product_gallery_item_btn_qty){ approve_product_gallery_item_button.setAttribute('qty',new_qty); } } } function approve_product_gallery_item_activate_increase_and_decrease_buttons(item, idx, number_of_tries=0) { // console.log("INSIDE FUNCTION approve_product_gallery_item_activate_increase_and_decrease_buttons ", item, idx, number_of_tries); number_of_tries++; // buttons that raise or lower the quantity. var approve_product_gallery_item_qty_btn_inc = item.querySelector(approve_product_gallery_item_inc_quantity_ele_name); var approve_product_gallery_item_qty_btn_dec = item.querySelector(approve_product_gallery_item_dec_quantity_ele_name); if ((!approve_product_gallery_item_qty_btn_inc || !approve_product_gallery_item_qty_btn_dec ) && number_of_tries < 10 ){ setTimeout(() => { approve_product_gallery_item_activate_increase_and_decrease_buttons(item, idx, number_of_tries) },500); return; } // Assign click events to these buttons so that qty is updated on click. if(approve_product_gallery_item_qty_btn_inc && approve_product_gallery_item_qty_btn_dec ){ approve_product_gallery_item_qty_btn_inc.addEventListener('click',event => { var this_item = item; // console.log("INSIDE CLICK EVENT FOR BUTTON ", item); var approve_product_gallery_item_button = item.querySelector('#approve_product_gallery_item_button_'+idx); if (approve_product_gallery_item_button){ var approve_product_gallery_item_btn_qty = parseInt(approve_product_gallery_item_button.getAttribute('qty')); approve_product_gallery_item_btn_qty = approve_product_gallery_item_btn_qty + 1; approve_product_gallery_item_update_qty(approve_product_gallery_item_btn_qty, item, idx); } }); approve_product_gallery_item_qty_btn_dec.addEventListener('click',event => { var approve_product_gallery_item_button = item.querySelector('#approve_product_gallery_item_button_'+idx); if (approve_product_gallery_item_button){ var approve_product_gallery_item_btn_qty = parseInt(approve_product_gallery_item_button.getAttribute('qty')); if (approve_product_gallery_item_btn_qty > 1){ approve_product_gallery_item_btn_qty = approve_product_gallery_item_btn_qty - 1; approve_product_gallery_item_update_qty(approve_product_gallery_item_btn_qty, item, idx); } } }); } else { approve_debug_log("APPROVE: No approve_qty_btn_inc or approve_qty_btn_dec found.",1); } } } init_approve_gallery_page_buttons(approve_gallery_wrapper_check_ele_name); } // } // IF YOU WANT TO USE A LOG WITH COLORS YOU CAN USE function approve_debug_log(log, warn, err) { warn = warn || false; err = err || false; let css = "padding: 5px 20px; "; if (err) { css += "background:#8B0000; color:#fff; "; } else if(warn) { css += "background:#FFBF00; color:#000; "; } else { css += "background:#418AC9; color:#fff; "; } if (approve_debug_mode) console.log("%c"+log,css); }