function approve_get_iframe_content(frame) { var frame_content = frame.contentWindow; return frame_content; } // DEBUG MODE -- Set to true if you want console logs to show. var approve_debug_mode = false; approve_debug_log("APPROVE SCRIPT LOADED"); // ****************************************************************** // ****************************************************************** // PRODUCT PAGE // ****************************************************************** // ****************************************************************** var iframe_wrapper = null; setTimeout(()=>{ iframe_wrapper = document.querySelectorAll('.shopify-buy-frame iframe'); iframe_wrapper.forEach(function (iframe, index) { // FOREACH IFRAME ON PAGE approve_init_product_button_code(iframe); }); },500); // ****************************************************************** // ****************************************************************** // PRODUCT GALLERY WITH BUTTONS // ****************************************************************** // ****************************************************************** function approve_init_product_button_code(frame) { var approve_iframe_content_document = frame.contentWindow.document; var approve_iframe_content_body = approve_iframe_content_document.body; // gallery wrapper if (approve_iframe_content_body && approve_iframe_content_document) { function init_approve_gallery_page_buttons() { // ****************************************************************** // PRODUCT GALLERY Variable Configuration // ****************************************************************** // Check to make sure that we are on a product gallery page // Wrapper for each item relative to document with approve_product_gallery_page_check_ele_name var approve_product_gallery_item_ele = ' .shopify-buy__product'; // Model for each item relative to the item var approve_product_gallery_item_model_ele_name = ' .shopify-buy__product__title'; // Price for each item relative to the item var approve_product_gallery_item_price_ele_name = '.shopify-buy__product__actual-price'; // Insert button after relative to the item var approve_product_gallery_item_insert_after_ele_name = '.shopify-buy__btn-wrapper'; // Qty button relative to the item (optional) var approve_product_gallery_item_qty_ele_name = ' input.shopify-buy__quantity'; 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 = '.shopify-buy__product__variant-selectors'; var approve_product_gallery_item_select_ele_name = '.shopify-buy__product__variant-selectors select.shopify-buy__option-select__select'; // CSS for button // APPROVE BUTTON STYLING var approve_button_display_style = 'inline-block'; var approve_button_display_margin = '10px 0px'; if (window.location.pathname == "/u-locate") { approve_button_display_margin = '10px 0px 0px 25px'; } var approve_product_gallery_item_button_display_style = 'block'; var approve_product_gallery_item_button_display_margin = '10px 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_gallery_product_array = approve_iframe_content_body.querySelectorAll(approve_product_gallery_item_ele); //console.log("array contents: ", approve_gallery_product_array); approve_gallery_product_array.forEach(function(item, idx) { init_approve_product_gallery_item_button(item, idx); }); function init_approve_product_gallery_item_button(item, idx) { //console.log("init_approve_product_gallery_item_button item: ", item); // 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 = approve_product_gallery_item_model_ele.textContent // 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.innerHTML.replace(/[^0-9.]/g, ''); 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); } var approve_qty_ele_name_wrapper = '.shopify-buy__btn-and-quantity' var approve_item_qty_ele_wrapper = (approve_qty_ele_name_wrapper ? item.querySelector(approve_qty_ele_name_wrapper) : null); // 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); approve_debug_log(approve_product_gallery_item_qty_ele,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); //console.log("gallery item qty: ", 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); if (!approve_product_gallery_item_insert_after_ele){ approve_debug_log("APPROVE: No dynamic approve_product_gallery_item_insert_after_ele found.",0,1); return; } // Options if (approve_product_gallery_item_options_wrapper_ele_name){ var approve_product_gallery_item_options_wrapper_ele = approve_iframe_content_body.querySelector(approve_product_gallery_item_options_wrapper_ele_name); if (!approve_product_gallery_item_options_wrapper_ele){ //console.log(approve_product_gallery_item_options_wrapper_ele_name); 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 (option_item, index) { // CONFIGURE OPTIONS HERE if (option_item.value) { approve_product_gallery_item_model += ' | ' + (option_item.value ? option_item.value : ''); } }); } } // 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 = approve_iframe_content_body.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 => { setTimeout(()=>{ init_approve_product_gallery_item_button(item, idx); },500); }) }); } } // Insert Button var approve_product_gallery_item_button = document.createElement('approve-button'); approve_product_gallery_item_button.id = "approve_product_gallery_item_button_"+idx; // BUTTON CSS if (approve_product_gallery_item_button_display_style){ approve_product_gallery_item_button.style.display = approve_button_display_style; } if (approve_product_gallery_item_button_display_margin){ approve_product_gallery_item_button.style.margin = approve_button_display_margin; } approve_product_gallery_item_button.setAttribute('application-type',"embedded_app"); var approve_product_gallery_item_btn_wrapper = approve_iframe_content_document.createElement("div"); approve_product_gallery_item_btn_wrapper.appendChild(approve_product_gallery_item_button); approve_product_gallery_item_insert_after_ele.after(approve_product_gallery_item_btn_wrapper); // IF ITS A SINGLE PRODUCT COLLECTION, TWEAK IFRAME HEIGHT BY 120PX TO FIT BUTTON if (approve_gallery_product_array.length == 1) { var approve_height = parseInt(frame.style.height); frame.style.height = approve_height + 120 + "px"; } } // 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"; } } //console.log("model: ", approve_product_gallery_item_model); //console.log("price: ", approve_product_gallery_item_price); // 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 //console.log("approve_product_gallery_item_qty_ele", approve_qty_ele_name_wrapper); approve_product_gallery_item_qty_ele.addEventListener('change',event => { var this_item = item; //console.log("change", 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); } } // 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; } } // ****************************************************************** // 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(); var approve_iframe_document_watcher = approve_iframe_content_document; // Add observer to price element const approve_iframe_document_observer = new MutationObserver(function() { init_approve_gallery_page_buttons(); }); approve_iframe_document_observer.observe(approve_iframe_document_watcher,{subtree: true, childList: true}); } } // 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); }