Continuous Prep & Set Mist+ (2024)

"); $('.show-levels').text("+"); }); $('.clicker-thumb').click(function() { var newImage = $(this).attr('href');; var newAlt = $(this).find('img').attr('alt'); $( '#product-main-image img' ).attr({ src: newImage, alt: newAlt }); return false; }); function onHover(imgSource, pName, pTone, pUndertone, mySwatch, pAvailable) { $('.p-swatch').each(function(index, element) { element = this; $(element).on('mouseenter', function() { $('#product-main-image img').attr('src', imgSource); $('.myName').html(pName + " (" + pTone + ")
" + pUndertone); $('.option-swatch-FF').attr('src', mySwatch); }).on('mouseout', function() { $('#product-main-image img').attr('src', productMainImg); $('.myName').html(productCode + " (" + productTone + ")
" + productName); $('.option-swatch-FF').attr('src', productSwatch); }); }); }});// this is for dropdown list li $(document).on("keydown", "[role=option]", function (e) { $(this).parent().find("[aria-selected=true]").attr("aria-selected", "false"); }); function keydownOnMe(mypid, optCode, optTone, optName, optSwatch, optStatus){ var currentElement = event.currentTarget; $('#dd-control').attr("aria-activedescendant", currentElement.id); $('ul li.flex-wrap').each(function() { $(this).removeAttr('aria-selected'); }) currentElement.setAttribute('aria-selected', true); if(this.event.code == "Enter"){ clickOnMe(mypid, optCode, optTone, optName, optSwatch, optStatus) } }var arrAll; function filterProducts(filterValue){ if (filterValue == "") { populateSelectors(arrAll); } else { var sfilter = filterValue.slice(-1); var arrfiltered = $.grep(arrAll,function( a ) { return a.shade_level == sfilter; }); populateSelectors(arrfiltered); } } function populateSelectors(inputarr){ var sProductIcon =""; var sProductPulldown = ""; var myImg = ""; var strikethroughImage = "//eu.morphe.com/cdn/shop/t/610/assets/swatch-strikethrough_75x75_5px_75x75.png?v=12459095261427818851720543896"; var strikethroughImage2 = "//eu.morphe.com/cdn/shop/t/610/assets/swatch-strikethrough_80x49_3px_80x49.png?v=7192973324577180981720543897"; var ilength = inputarr.length; for (i = 0; i < ilength; i++) { var id = inputarr[i].shade_code.replace(/\s+/g, '-').replace("'", "").toLowerCase(); var shade = inputarr[i].shade_code.replace("'", "’"); if (id ==""){ shade = inputarr[i].variantTitle.replace("'", "’"); } var sclick ="clickOnMe('" + inputarr[i].handle + "','" + shade + "','" + inputarr[i].tone + "','" + inputarr[i].undertone + "','" + inputarr[i].bg_swatch + "' ," + inputarr[i].available + ")"; var skeydown ="keydownOnMe('" + inputarr[i].handle + "','" + shade + "','" + inputarr[i].tone + "','" + inputarr[i].undertone + "','" + inputarr[i].bg_swatch + "' ," + inputarr[i].available + ")"; /* Swatch clicker*/ sProductIcon = sProductIcon +"

"; sProductPulldown = sProductPulldown + "

"; sProductPulldown = sProductPulldown + "" + shade + "
" + inputarr[i].undertone + "" + availableIcon2 + "

"; if('continuous-prep-set-mist' == inputarr[i].handle) { myImg = '#' + inputarr[i].handle + '-img'; } } // end for loop $(".pdp_shades .swatch-wrapper").html(sProductIcon); $(".inner-flex-wrap").html(sProductPulldown); $(myImg).closest('.pdp_shades .img-wrapper-ff').addClass('img-selected').attr('aria-checked', 'true'); } function outputFunction(myObj){ arrAll = myObj.products; populateSelectors(arrAll); //place array into global array. }function swatchSelect() { $('.p-swatch').focus(function() { $(this).closest('.img-wrapper-ff').addClass('img-selected').attr('aria-current', 'color'); }); $('.p-swatch').focusout(function() { $(this).closest('.img-wrapper-ff').removeClass('img-selected').removeAttr('aria-current', 'color'); }); }$(window).on("load", function() { swatchSelect();});function isDOMNode(v) { if ( v===null ) return false; if ( typeof v!=='object' ) return false; if ( !('nodeName' in v) ) return false; var nn = v.nodeName; try { v.nodeName = 'is readonly?'; } catch (e) { return true; } if ( v.nodeName===nn ) return true; v.nodeName = nn; return false;}$(function() { $('.product-single__media video').attr('tabindex', '-1'); $('.video-thumb').on('click', function() { $('.product-single__media video').attr('tabindex', '0') }); // drop down options// keyboard controls for swatches function selectPreviousColorButton(colorButton) { var index = Array.prototype.slice.call(colorButtons).indexOf(colorButton); if(index > 0) { selectColorButton(colorButtons[index - 1]); } else { selectColorButton(colorButtons[colorButtons.length - 1]); } } function selectNextColorButton(colorButton) { var index = Array.prototype.slice.call(colorButtons).indexOf(colorButton); if(index < colorButtons.length - 1) { selectColorButton(colorButtons[index + 1]); } else { selectColorButton(colorButtons[0]); } } function selectColorButton(colorButton) { colorButton.focus(); }/** Color swatches*/ colorGroup = document.querySelector('.pdp_shades #swatch-wrapper'); // element has [role="radiogroup"] colorButtons = document.querySelectorAll('.pdp_shades .img-wrapper-ff'); // each color has [role="radio"] colorButtons.forEach(function(colorButton) { colorButton.addEventListener('click', function(e) { selectColorButton(e.target); }); }); if (colorGroup){ colorGroup.addEventListener('keyup', function(e) { switch(e.key) { case 'ArrowUp': case 'ArrowLeft': selectPreviousColorButton(e.target); break; case 'ArrowDown': case 'ArrowRight': selectNextColorButton(e.target); break; case ' ': selectColorButton(e.target); break; } });}// keyboard controls for drop down $('#dd-control').keydown('span#down', function() { $("[role=listbox]").focus(); ddHighlight(); $('.inner-flex-wrap').css({ "opacity": 1, "height": "100%", "display": "block", "background-color": "#fff" }); $('.flex-wrap').css('border-bottom', '1px solid #e5e5e5'); $('.options-wrapper').css({ 'height': '295px', }); var collectionSize = '3'; if(collectionSize > 5) { $('.options-wrapper').css({ 'overflow-y': 'scroll', 'height': '287px' }); } else { var smallHeight = (parseInt(collectionSize) + 1) * 49; smallHeight = (smallHeight + 'px'); $('.options-wrapper').css({ 'height': smallHeight, }); } $('#dd-control').html(''); }); // if no item is selected, focus on first item // if item already selected when listbox receives focus, move focus to it $("[role=listbox]").on('focus', function() { // if no selected element, select the first by default if (!$(this).find("[aria-selected=true]").length) { $(this).find("[role=option]:first").attr("aria-selected", "true").focus(); } else { $(this).find("[aria-selected=true]").focus; } }); // handle the keyboard interaction $("[role=listbox]").on("keydown", function (e) { var currentItem = $(this).find("[aria-selected=true]"); switch (e.keyCode) { case 38: // Up arrow if (currentItem.prev().length) { currentItem.attr("aria-selected", "false"); currentItem.prev().attr("aria-selected", "true").focus(); } e.preventDefault(); break; case 40: // Down arrow if (currentItem.next().length) { currentItem.attr("aria-selected", "false"); currentItem.next().attr("aria-selected", "true").focus(); } e.preventDefault(); break; } });}); $(document).on("keydown", "[role=option]", function (e) { $(this).parent().find("[aria-selected=true]").attr("aria-selected", "false"); }); var productName = 'Regular - 2.8 Oz'; var productDesc = ""; var productSwatch = "//eu.morphe.com/cdn/shop/files/Morphe-2024-CSM-Swatch-Regular_150x150@2x.jpg?v=12706996580440528354"; var productMainImg = "//eu.morphe.com/cdn/shop/files/M_SettingSpray_CSM_Supercharged_PDP_Closed_1400x.jpg?v=1709746197"; var productTags = "25OFFall-faceall-morpheballet-blogBEST SELLERcsmpluscsmplusprodhazmatjun-23-newnessnew arrivalssetting-powder-spraysetting-spraysetting-sprays-24"; var productStatus = false; $('.filter-clk').click(function(){ //Hide all $('.pdp_shades .v-ALL').addClass('hide'); //show filtered. //get value and show $($(this).data("target")).removeClass('hide'); var aria_control = $(this).attr('aria-controls'); $('.pdp_shades .swatch-wrapper').attr('id', aria_control); var id = $(this).attr('id'); $('.pdp_shades .swatch-wrapper').attr('aria-labelledby', id); //loop thru the items and call click on the 1st visable $('.v-ALL').each(function(i,obj){ if ($(obj).is(':visible')){ $(obj).trigger('click'); return false; } }); }); function onHover(imgSource, pName, pDesc, mySwatch, pAvailable) { $('.pdp_shades .img-wrapper').each(function(index, element) { $(this).on('mouseenter', function() { $('.product-single__image').attr('src', imgSource); $('.myName').html(pName + "
" + "" + pDesc + ""); $('.undertone').text(pDesc); $('.option-swatch').attr('src', mySwatch); if (pAvailable == true) { $('.option-swatch-wrapper img.strikethrough').css('display', 'none'); } if (pAvailable == false) { $('.option-swatch-wrapper img.strikethrough').css('display', 'block'); } }).on('mouseout', function() { $('.product-single__image').attr('src', productMainImg); $('.myName').html(productName + "
" + "" + productDesc + ""); $('.option-swatch').attr('src', productSwatch); $('.option-swatch-wrapper img.strikethrough').css('display', 'none'); if (productStatus == false) { $('.option-swatch-wrapper img.strikethrough').css('display', 'block'); } }); }); } function clickOnMe(mypid, optName, optDesc, optTags, optSwatch, optStatus) { productName = optName; productDesc = optDesc; productTags = optTags; productSwatch = optSwatch; productStatus = optStatus;//$('#dd-control').html(''); if ($('.pdp_shades .img-wrapper-ff').hasClass('img-selected')) { $('.pdp_shades .img-wrapper-ff').removeClass('img-selected').attr({ 'aria-checked': 'false', 'tabindex': '-1' }); } var thisImg = '#' + mypid + '-img'; $(thisImg).parent().addClass('img-selected'); $(thisImg).parent().attr({ 'aria-checked': 'true', 'tabindex': '0'}); $('.inner-flex-wrap').css({ "opacity": 0, "height": 0, "display": "none", "background-color": "transparent" }); $('.inner-flex-wrap').css('height'); $('.inner-flex-wrap').css('transition', 'all 2s ease-out'); /* $('.options-wrapper').css({ 'height': '49px', 'overflow-y': 'hidden' });*/ $('.myName').html(optName + "
" + "" + optDesc + ""); //$('.option-swatch').attr('src', optSwatch); //get the json jQuery.getJSON('/products/' + mypid + '.js', function(product) { //change the required part of the page var titleShade = product.title.split(/-+/); var titleName; if (titleShade.length === 2) { titleName = titleShade[0]; titleShade = titleShade[1].trim(); } else if (titleShade.length === 3) { titleName = titleShade[0]; titleShade = `${titleShade[1]} / ${titleShade[2]}`; } else { titleShade = ""; } if (product.variants[0].title){ titleShade = product.variants[0].title; } $('.pdp_variant_selector span').text(titleShade); $('.pdp_details h1').text(titleName); $('h3.product-title-bar').text(titleName); $('.product-color-text-bar').text(titleShade); $('.product-image-bar img').attr("src", product.media[0].src) var mformat = "€{{amount_with_comma_separator}}"; $('.product-price').text(theme.Currency.formatMoney(product.price,mformat));// change selected option text and image if (product.tags.includes('COMING SOON')) { $('#AddToCart').attr('style', 'display: block'); $('#AddToCart').removeClass('disabled'); $('#bisShowModal').attr('style', 'display: none'); $('#AddToCart').attr( "disabled", "true" ); $('#AddToCart').addClass('btn-comingSoon'); $('#AddToCart').val("Coming Soon").trigger('change');}else if(product.available == false || product.tags.includes('ActOOS')) { if('true' == 'true' && !product.tags.includes('doNotNotify')) { window.console.log("Show notify me"); $('#bisShowModal').attr('data-pid', product.variants[0].id); $('#bisShowModal').attr('data-ptitle', product.title); $('#bisShowModal').attr('style', 'display: block'); $('#AddToCart').attr('style', 'display: none'); $('span.product-price').text('Sold Out'); } else { $('#AddToCart').attr('style', 'display: none');$('span.product-price').text('Sold Out'); $('.option-swatch-wrapper img.strikethrough').css('display', 'block'); } } else { $('#AddToCart').attr('style', 'display: block'); $('#bisShowModal').attr('style', 'display: none'); $('#AddToCart').val("Add to Bag").trigger('change'); $("#AddToCart").removeAttr("disabled"); $('#AddToCart').removeClass('disabled');$('#AddToCart').removeClass('btn-comingSoon'); $('.option-swatch-wrapper img.strikethrough').css('display', 'none'); } var theSlides = ""; var theCarousel = ""; var i=0; var firstOne= true; var productImages = ""; $('#AddToCartForm').attr( "data-product", product); if ($("#addtoBagfloatimg")) {$("#addtoBagfloatimg").attr("src",product.media[0].src); } productImages = `

`; for (var myIMG in product.media) { if (product.media[myIMG].media_type == 'image') { productImages += `
`; } else if (product.media[myIMG].media_type == 'video') { theSlides = theSlides + "
• " + "
"; theCarousel = theCarousel + "
• " + "
"; } else { console.log("media type was not recognized"); } "



"; i++; } // end for loop productImages += `

`; populateSlider(productImages); var url = product.url; window.history.pushState({}, product.title,url); sliderControl(); $('#product-select').val(product.variants[0].id);window.pwrSwitchProduct(product.id);}); // end getJSON function populateSlider(sliderHTML){ var mainCarousel = $(".main-image-carousel"); mainCarousel.slick('unslick'); $('.pdp_image').html(sliderHTML); initSlickCarousel(); } // end populateSlider function photoZoom(Imagezoom) { if($(window).width() > 960){ $('.main-product-image').zoom(); } } function populateCarousel(carouselHTML){ $('.pdp_image').html(carouselHTML); photoZoom(); $('.main-product-carousel').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, infinite: false, accessibility: false, responsive: [{ breakpoint: 960, settings: { slidesToShow: 1, arrows: false, dots: true } }] }); $('#vid-1 > video').attr('id', 'prodVid'); $('.slick-dots > li > button').click(function() { isPlaying(); }); } // end populateCarousel } // end clickOnMe function populateSelectors(inputarr) { var sProductIcon =""; //var sProductPulldown = ""; var myImg = ""; var strikethroughImage = "//eu.morphe.com/cdn/shop/t/610/assets/swatch-strikethrough_75x75_5px_75x75.png?v=12459095261427818851720543896"; var strikethroughImage2 = "//eu.morphe.com/cdn/shop/t/610/assets/swatch-strikethrough_80x49_3px_80x49.png?v=7192973324577180981720543897"; var ilength = inputarr.length; for (i = 0; i < ilength; i++) { if (inputarr[i].available) { var availableIcon = ""; var availableIcon2 = ""; } else { availableIcon = ""; availableIcon2 = ""; } var sclick ="clickOnMe('" + inputarr[i].handle + "','" + inputarr[i].title + "','" + inputarr[i].undertone + "','" + inputarr[i].tags + "','" + inputarr[i].bg_swatch + "'," + inputarr[i].available + ")"; /* Swatch clicker*/ sProductIcon = sProductIcon + "

800) { sProductIcon = sProductIcon + "\" onmouseover=\"onHover('" + inputarr[i].featuredImage + "', '" + inputarr[i].title + "', '" + inputarr[i].undertone + "', '" + inputarr[i].bg_swatch + "', "+ inputarr[i].available + ")\" "; } sProductIcon = sProductIcon + "\">" ; sProductIcon = sProductIcon + "" + availableIcon + "

"; if('continuous-prep-set-mist' == inputarr[i].handle) { myImg = '#' + inputarr[i].handle + '-img'; } } // end for loop $(".pdp_shades .swatch-wrapper").html(sProductIcon); //$("#shade-list").html(sProductPulldown); } function outputFunction(myObj){ arrAll = myObj.products; populateSelectors(arrAll); //place array into global array. } function fetchPProducts(lengthRemain,collectionHandle, startpage, myObj) { myObj = myObj || {}; startpage = startpage ||1; var the_url = '/pages/collectionjson?collection=' + collectionHandle +'&page='+ startpage; $.ajax({ type: "GET", url: the_url, success: function(responseData, textStatus, XMLHttpRequest) { if (responseData != null) { var newObj = {}; var outObj= {}; newObj = JSON.parse(responseData); var i; var iLength = newObj.products.length; var iLengthRemain = lengthRemain - iLength; if (startpage > 1 ) { mergeRecursive(myObj,newObj); }else{ myObj =newObj; } if (iLengthRemain >0){ startpage++; fetchPProducts(iLengthRemain,collectionHandle,startpage,myObj); }else{ outputFunction(myObj); } } } }); } function mergeRecursive() { // _mergeRecursive does the actual job with two arguments. var _mergeRecursive = function (dst, src) { if ( isDOMNode(src) || typeof src!=='object' || src===null) { return dst; } for ( var p in src ) { if ($.isArray(src[p])){ $.merge(dst[p],src[p]); continue; } if( !src.hasOwnProperty(p) ) continue; if ( src[p]===undefined ) continue; if ( typeof src[p]!=='object' || src[p]===null) { dst[p] = src[p]; } else if ( typeof dst[p]!=='object' || dst[p]===null ) { dst[p] = _mergeRecursive(src[p].constructor===Array ? [] : {}, src[p]); } else { _mergeRecursive(dst[p], src[p]); } } return dst; } // Loop through arguments and merge them into the first argument. var out = arguments[0]; if ( typeof out!=='object' || out===null) return out; for ( var i=1, il=arguments.length; i