var loaded = 0 ;;(function(){ setTimeout(function(){ loadJQuery(function(){ $(document).ready(function(){ openIdentifierIframe(); createStyleWithDiv(); listenToCart(); }); }); loadStylesheet(); // Add event listener to take method calls from the iframe window.addEventListener('message', function(event){ var func = (event.data || {})['func']; var args = (event.data || {})['args'] || []; var validFuncs = ['sizeForMessages', 'hideChat', 'closeChat', 'redirectPageTo', 'playMessageSound', 'playNotificationSound', 'sizeForDesktopRecs', 'hideDesktopRecs', 'openIframe', 'sizeForNotification', 'botLoaded']; console.log("Running parent function: " + func); if (~validFuncs.indexOf(func)){ window[func].apply(this, args); } }); }, 4000) // Attempts to call a method on the iframe function callIframeMethod(func, args){ console.log('Calling iframe method '+func+' with args '+args); document.getElementById('fadstir-iframe').contentWindow.postMessage({'func': func, 'args':args}, '*'); // TODO specify url } // Loads jQuery if the window does not already have it loaded function loadJQuery(callback){ if (! (window.jQuery || window.$)) { var script = document.createElement('SCRIPT'); script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'; script.type = 'text/javascript'; document.getElementsByTagName("head")[0].appendChild(script); } return callback(); } // Loads custom sylesheet for iframe sizing function loadStylesheet(){ var sheet = document.createElement('link'); sheet.rel = "stylesheet"; sheet.href = "https://fadstir-chat-static-east.s3.amazonaws.com/css/iframe-stylesheet.css?v1-2" document.getElementsByTagName('head')[0].appendChild(sheet); } // Opens an identifier iframe to exract a cookie/localstorage user id to // send back to the main page load function openIdentifierIframe(){ var iframe = document.createElement('iframe'); iframe.id = 'fadstir-identifier'; iframe.src = "https://chatfadstir.com/chat/identifier";; document.body.appendChild(iframe); $('#fadstir-identifier').css('display', 'none'); } function createStyleWithDiv(){ var cart_addition = document.createElement('div'); cart_addition.id = 'fad-cart-style-identifier'; document.body.appendChild(cart_addition); $('#fad-cart-style-identifier').css('display', 'none'); } // Adds listener to cart button function listenToCart(){ var identifier = '.add_to_cart' || 'cart-add-button'; $(identifier).click(function(){ console.log("Cart add event noticed"); console.log('adding style pop up') getRecommendations('lisa2', determineProduct()) callIframeMethod('pingUrl', ["https://chatfadstir.com/chat/event?action=cart&store=lisa2&product="+determineProduct()]); //add cart local storage here callIframeMethod('addToStorage', [determineProduct(), 'carted', 'lisa2', '']) }); } //tracking function boughtTrack(store, cartItems){ console.log('bought something') var numItems = cartItems.length var pricing = 0 cartItems.forEach(function(item, index){ var productName = item.handle; console.log(item.handle) console.log(item.quantity) console.log(item.price) pricing = parseFloat(item.price)*parseFloat(item.quantity) callIframeMethod('addToStorage', [productName, 'bought', store, pricing]) // addToStorage(productName, 'bought', 'lisa2', pricing, function(storedup){ // var pipelineData = { // 'lisa2':storedup, // 'customer':accessCookieStore() // } // console.log("the index is: "+index+ " and the cart length is: "+numItems) // if (index == numItems){ // recordPipeline('pipeline', pipelineData) // } // }) }); } })(); // Regex for the current page's product, will change between stores function determineProduct(){ var regex = /\/products\/([^?/]+)\??/; if ('lisa2' == 'hbx'){ regex = /\/brands\/([^?]+)\??/; } if ('lisa2' == 'supply'){ regex = /\.com\/([^?/]+)\??/; } if ('lisa2' == 'muji'){ regex = /\/store\/([^?/]+)\??/; } if ('lisa2' == 'gslove'){ regex = /ProductDetail\.aspx\?id=([^?/&]+)\??/; } var match = regex.exec(window.location.href); if (match){console.log('handle is: ' + match[1])} if (! match) return undefined; else return match[1]; } // Opens a fixed iframe to a specified url, and sizes it accordingly function openIframe(shopperId){ var url = "https://chatfadstir.com/chat/?store=lisa2&page=&init_conversation=true"; url = (shopperId) ? (url+"&u="+shopperId):url; var product = determineProduct(); if (product) { url += "&init_product=" + product; } var iframe = document.createElement('iframe'); iframe.id = 'fadstir-iframe'; iframe.src = url; document.body.appendChild(iframe); $('#fadstir-iframe').css('z-index', '8' || 1); hideChat(); } // Redirects the store webpage to another url (used for recommendations) function redirectPageTo(url){ window.location.href = url; } // Before resizing iframe, reset all properties to original values function restoreState(){ console.log("restoring state"); $('#fadstir-iframe').removeClass(); $('body,html').css('overflow', 'initial'); } // Sizes the chat iframe for message content function sizeForMessages(){ restoreState(); $('#fadstir-iframe').addClass('message-container'); var height = $('#fadstir-iframe').css('height'); $("#fadstir-iframe").css('height', '0px'); $("#fadstir-iframe").animate({'height': height}, 300); } function sizeForDesktopRecs(){ restoreState(); $('#fadstir-iframe').addClass('rec-message-container'); $("#fadstir-iframe")[0].style.transitionDuration = "0.5s" $("#fadstir-iframe")[0].style.transitionProperty = "width" $("#fadstir-iframe")[0].style.transitionTimingFunction = "cubic-bezier(0.65, 0.05, 0.36, 1)" $("#fadstir-iframe")[0].style.transform = "translate3d(0,0,0)" //$("#fadstir-iframe")[0].style.width = "700px" setTimeout(function(){ $("#fadstir-iframe")[0].style.transitionDuration = "0s"; }, 2000); } function hideDesktopRecs(){ restoreState(); $("#fadstir-iframe")[0].style.transitionDuration = "0.5s" $('#fadstir-iframe').addClass('message-container'); setTimeout(function(){ $("#fadstir-iframe")[0].style.transitionDuration = "0s"; }, 2000); } // sizes chat for notifications function sizeForNotification(ratio){ restoreState(); if (ratio){ console.log('the ratio from index is: ' + ratio) new_height = '250px' injectStyles('.notification-container2 { cursor:pointer; height:'+new_height+' !important; width:270px; }'); //$('#fadstir-iframe').removeClass('rec-message-container'); $('#fadstir-iframe').addClass('notification-container2'); } else { $('#fadstir-iframe').addClass('notification-container'); } //Use for removing picture altogether //$('#fadstir-iframe').addClass('notification-container'); } // Attempts to call a method on the iframe function callIframeMethod(func, args){ console.log('Calling iframe method '+func+' with args '+args); document.getElementById('fadstir-iframe').contentWindow.postMessage({'func': func, 'args':args}, '*'); // TODO specify url } function boughtTrack(store, cartItems){ console.log('bought something') console.log(cartItems) var numItems = cartItems.length var pricing = 0 var position = 'normal' cartItems.forEach(function(item, index){ console.log('going through cart') var productName = item.handle; if (index == cartItems.length -1){position = 'last'} console.log("current position is:"+index+ " |wording is: "+position) console.log(item.handle) console.log(item.quantity) console.log(item.price) pricing = parseFloat(item.price)*parseFloat(item.quantity) callIframeMethod('addToStorage', [productName, 'bought', store, pricing, position]) // addToStorage(productName, 'bought', 'lisa2', pricing, function(storedup){ // var pipelineData = { // 'lisa2':storedup, // 'customer':accessCookieStore() // } // console.log("the index is: "+index+ " and the cart length is: "+numItems) // if (index == numItems){ // recordPipeline('pipeline', pipelineData) // } // }) }); } function botLoaded(){ loaded = 1 } // Sizes chat for ping by setting height and width to the thumbnail size function hideChat(){ //$("#fadstir-iframe")[0].style.width = "360px" restoreState(); //$('#fadstir-iframe').removeClass('rec-message-container'); $('#fadstir-iframe').addClass('default-state'); $("#desktop-rec-container").hide() console.log("closing chat") } // Closes the chat iframe by setting height and width to 0 function closeChat(){ $('#fadstir-iframe').css({ 'height': '0px', 'width': '0px', }); } function injectStyles(rule) { var div = $("
", { html: '­' }).appendTo("body"); } // Sounds function playMessageSound(){ new Audio("https://fadstir-chat-static-east.s3.amazonaws.com/sounds/message_sound.mp3").play(); } function playNotificationSound(){ new Audio("https://fadstir-chat-static-east.s3.amazonaws.com/sounds/message_sound.mp3").play(); } ///////////////////////////////style pop up function getRecommendations(retailer, productHandle){ // add recommendations callIframeMethod('recordEvent', ['shown-popup']) var retailerID = 'none' var fadCart = '
Added To Bag

Continue Shopping

CHECKOUT

Style It With
x
' console.log(productHandle) getTheAPIRecs(productHandle, retailer, function(recType, result){ if (result.all){ // console.log(result) if (recType == "bs"){ fadCart = '
Added To Bag

Continue Shopping

CHECKOUT

Style It With
x
'} var recsFound = 0; var garmentsUsed = []; var bottomsUsed = []; for (i = 0; i < result.all.length; i++) { if (recsFound === 3) { break; } var info = result.all[i]; var garmentType = info.garment_type_name; var bottomName = info.garment_type var garmentFound = $.inArray(garmentType, garmentsUsed); var bottomFound = $.inArray(bottomName, bottomsUsed); if (garmentFound == -1 || i+1 == result.all.length) { garmentsUsed.push(garmentType) var hideId = info.product_id; hideId = hideId.split(' ').join('_'); var purchaseUrl = info.purchase_url var priceInfo = '' if (info.price == info.previous_price){ priceInfo = info.price.toFixed(2) } else if (!info.previous_price) { priceInfo = info.price.toFixed(2) priceInfo = '$ '+priceInfo } else { priceInfo = ' $'+info.price.toFixed(2)+'$'+info.previous_price.toFixed(2)+'' } console.log(info) fadCart += '' recsFound += 1; } } fadCart += '
' $("#fad-cart-style-identifier").html(fadCart) if($(".fad-overlay").length > 0){ $(".fad-overlay").show() }else{ $("#fad-cart-style-identifier").before('
') } // var fadCartContainer = '
'+fadCart+'
' adjustStyling() $("#fad-cart-style-identifier").show() // return fadCartContainer } }) } function getTheAPIRecs(product, retailer, callback) { console.log("setting up fadstir recs---45-- "+product) var settings = { "url": "https://chatfadstir.com/admin/recst/"+retailer+"/?product="+product+"&use_best_selling=1&callback=jsonp", "method": "GET", "dataType": 'jsonp' } $.ajax(settings).done(function(response) { if (!response.result) { console.log("no recs here"); var resp = 4; callback(0, resp); } else { var recs = JSON.parse(response.result); var recType = "" if(response["rec_type"]){recType = response["rec_type"]} var options = Object.keys(recs); callback(recType, JSON.parse(response.result)); }; }); } function adjustStyling(){ $('.fad-img-group-dropdown').css({ 'width':'75%', 'border-left':'1px solid white','text-align':'center' }); $('.fad-style-inner').css({ 'text-align': 'center', 'font-size': '1em',"background":'#fff3f4', 'margin':'0' }); $('.fad-style-with').css({ 'text-align': 'center', 'font-size': '1.3em',"width":'25%' }); $('#fad-cart-style-identifier').css({ 'box-shadow':'0px 0px 10px 4px #d0d0d0', 'width': '60%','background': '#fff3f4','color': 'white','position': 'fixed','top': '20%','left': '0','right': '0','margin': 'auto', 'display':'flex', 'z-index':'99999999999999999999999999999' }); $('.fad-img-dropdown').css({ 'width': '100%', 'position': 'relative', 'top':'0px','padding-bottom':'20%' }); $('.fad-img-details').css({ 'width': '100%', 'position': 'absolute', 'bottom':'-15px', 'font-size': '0.8em' }); $('.fad-rec-dropdown .product-brand').css({ 'line-height':'1.1','display':'block', 'padding-bottom':'2%' }); $('.fad-rec-dropdown .cart-item-title').css({ 'line-height':'1', 'display':'block' }); $('.fad-logo-dropdown').css({ 'float': 'right', 'position': 'absolute', 'bottom': '0', 'right': '31%', 'line-height':'1', 'font-size':'2em' }); $('.fad-overlay').css({ 'z-index': '99999999999999999999999999999','background': 'none','position': 'fixed','width': '100%','height': '100%','top': '0' }); $('.fad-img-group-top').css({ 'color':'white','font-size':'1.3em', 'padding': '10px','background': '#ffcccc','text-align': 'center' }); $('.fad-rec-dropdown').css({ 'width': '30%', 'display': 'inline-block', 'margin': '4% 1%', 'text-align': 'left', 'vertical-align':'bottom', 'height':'100%', 'position':'relative' }); $('.fad-rec-dropdown p').css({ 'vertical-align': 'top', 'display': 'inline-block', 'margin': '0', 'color': '#2d2d2d', 'font-weight':'600' }); $('.fad-rec-dropdown p.fad-price').css({ 'float':'right','vertical-align': 'top', 'display': 'block', 'margin': '5px 0', 'color': '#2d2d2d', 'font-weight':'600' }); $('.fad-rec-dropdown p.fad-name').css({ 'display': 'block', 'font-weight':'100', 'margin':'-5px 0 0 0' }); $('.fad-rec-dropdown p a').css({ 'text-decoration':'none', 'color':'#333' }); $('#fad-style-with-texth1').css({ 'color': 'white','padding': '10px','background': '#ffcccc','text-align': 'center' }); $('.fad-continue').css({ 'cursor':'pointer','font-size': '0.6em','text-transform': 'uppercase','font-weight':'600', 'border-radius': '13px', 'width':'85%', 'background': '#F07F7D','padding': '7px 8px','margin': '10px auto' }); $('.fad-checkout').css({ 'cursor':'pointer','font-size': '0.6em','text-transform': 'uppercase','font-weight':'600', 'border-radius': '13px', 'width':'85%', 'color': '#F07F7D','padding': '7px 8px','margin': '10px auto', 'border':'1px solid #F07F7D' }); $('.span-fad').css({ 'position': 'absolute','top': '5px','right': '10px','cursor': 'pointer','font-weight': '600','height': '20px','width': '20px','color': '#fff','font-family': 'sans-serif','text-transform': 'lowercase' }) $(".fad-overlay").on('click', function(){ closeFadStyle() }) //check for added image var added_image = $(".image__container img") if (added_image.length > 0){ var added = $(".image__container img")[0].src added = '' $('.fad-continue').before(added) }else{ $('.fad-continue').css({'margin-top':'50%'}) } $('.fad-added-img').css({ 'width': '70%','margin': '5%' }); } function closeFadStyle(){ $("#fad-cart-style-identifier").hide() $(".fad-overlay").hide() } function goToCart(){ window.location.href = 'https://lisasaysgah.com/cart' || "/" } function clickTrack(handle, retailer, retailerID){ console.log('clicked on '+ handle+ ' from ' + retailer) callIframeMethod('addToStorage', [handle, 'clicked', retailer, '']) callIframeMethod('recordEvent', ['click-popup']) } //////////////////////////////////style pop up (function(){ })();