MATTE LIPSTICK - WIFEY (2023)

"; theCarousel = theCarousel + "

"; } else if (product.media[myIMG].media_type == 'video') { theSlides = theSlides + "

"; theCarousel = theCarousel + "

"; } else { console.log("media type was not recognized"); } "

"; i++; } // end for loop if ($(window).width() > 960){ $('.main-product-carousel').slick('unslick'); populateCarousel(theCarousel); $('#sliderThumb').slick("unslick"); populateSlider(theSlides); } else { $('.main-product-carousel').slick('unslick'); populateCarousel(theCarousel); } $('#product-select').val(product.variants[0].id); var url = product.url; window.history.pushState({}, product.title,url); /* Turnto change product */ if (TurnTo){TurnToCmd('set', {sku:product.variants[0].sku});}}); // end getJSON function populateSlider(sliderHTML){ $('#sliderThumb').html(sliderHTML); // refactor this to updated media function $('.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 }); const index = $(this).parents('.slick-slide').attr("data-slick-index"); $('.main-product-carousel').slick("slickGoTo", index); return false; }); $('#sliderThumb').slick({ slidesToShow: 8, arrows: false, infinite: false, responsive: [{ breakpoint: 960, settings: { slidesToShow: 1, arrows: false, dots: true } }] }); } // end populateSlider function photoZoom(Imagezoom) { if($(window).width() > 960){ $('.main-product-image').zoom(); } } function populateCarousel(carouselHTML){ $('.main-product-carousel').html(carouselHTML); photoZoom(); $('.main-product-carousel').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, infinite: 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//pdpObject.defineProperty(HTMLMediaElement.prototype, 'playing', { get: function(){ return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2); }});function isPlaying() { if ($('#vid-1').length > 0) { var myVid = document.getElementById('prodVid'); if (myVid.playing) { // checks if element is playing right now myVid.pause(); } else { return; } } else { return; }}function thumbnailclick(imageid){ //$(".main-product-image").addClass("hide"); $("#ProductImage-" + imageid).removeClass("hide"); var imgSrc = $("#ProductImage-" + imageid).attr('data-zoom'); isPlaying();}function thumbnailclick_video(imageid){ var myVid = document.getElementById('prodVid'); if ($(myVid).length > 0) { if(myVid.playing) { return; } else { myVid.play(); } }}function initPdp2() {$(document).ready(function() { $('#vid-1 > video').attr('id', 'prodVid'); $('.clicker-thumb').click(function() { //var newImage = $(this).attr('href'); var newImage = $(event.currentTarget).prop('href'); var newAlt = $(this).find('img').attr('alt'); $( '#product-main-image img' ).attr({ src: newImage, alt: newAlt }); const index = $(this).closest('.slick-slide').attr("data-slick-index"); //console.log("this is the data index " + index); $('.main-product-carousel').slick("slickGoTo", index); return false; }); if ($(window).width() > 768){ windowLarge = true; $('.main-product-carousel').slick({ slidesToShow: 1, slidesToScroll: 1, infinite: false, arrows: false, fade: true, dots: false }); $('.sliderThumb').slick({ slidesToShow: 8, infinite: false, slidesToScroll: 1, asNavFor: '.main-product-carousel', dots: false, arrows: false, draggable: false }); } else { windowLarge = false; $('.main-product-carousel').slick({ slidesToShow: 1, slidesToScroll: 1, infinite: false, arrows: false, dots: true, fade: false }); } $('.slick-dots > li > button').click(function() { isPlaying(); }); $('.pop').on('click', function(e) { e.preventDefault(); var image = $(this).find('img').attr('data-zoom'); image = "https:" + image; $('.imagepreview').attr('src', image); $('#imagemodal').show(); $('.close-modal').focus(); trapFocusModal("#imagemodal"); }); $('.close-modal, .modal-overlay').on('click', function() { $('#imagemodal').hide(); }); $("#imagemodal").on('keydown click', function(event) { if (event.key === 27) { $('#imagemodal').hide(); } }); function trapFocusModal(element) { var focusableEls = $(element).find('a, object, :input, button, iframe, [tabindex]').filter(':visible'), firstFocusableEl = focusableEls.first()[0], lastFocusableEl = focusableEls.last()[0], TABKEYCODE = 9; $(element).on('keydown', function(e) { var isTabPressed = (e.key === 'Tab' || e.keyCode === TABKEYCODE ); if (!isTabPressed) { return; } if ( e.shiftKey ) /* shift tab keypress */ { if (document.activeElement === firstFocusableEl) { lastFocusableEl.focus(); e.preventDefault(); } } else /* tab keypress */ { if (document.activeElement === lastFocusableEl) { firstFocusableEl.focus(); e.preventDefault(); } } }); } $('.srd_msg').attr('style', 'font-family: "ABCMonumentGrotesk-Regular"'); // shoprunner msg // handle swipe events to stop video var myElement = document.getElementById("MainProduct"); myElement.addEventListener("touchstart", startTouch, false); myElement.addEventListener("touchmove", moveTouch, false); // swipe up / down / left / right var initialX = null; var initialY = null; function startTouch(e) { initialX = e.touches[0].clientX; initialY = e.touches[0].clientY; } function moveTouch(e) { if(initialX === null) { return; } if(initialY === null) { return; } var currentX = e.touches[0].clientX; var currentY = e.touches[0].clientY; var diffX = initialX - currentX; var diffY = initialY - currentY; var myVid = document.getElementById('prodVid'); if(Math.abs(diffX) > Math.abs(diffY)) { // sliding horizontally if(diffX > 0) { isPlaying(); } else { isPlaying(); } } else { // sliding vertically if(diffY > 0) { isPlaying(); } else { isPlaying(); } } // reset initialX/Y values initialX = null; initialY = null; // e.preventDefault(); }});} // end initPdp2$(document).ready(function() { $('#horizontalTab').easyResponsiveTabs({ type: 'default', //Types: default, vertical, accordion width: 'auto', //auto or any width like 600px fit: true, // 100% fit in a container closed: 'accordion', // Start closed if in accordion view activate: function(event) { // Callback function if tab is switched var $tab = $(this); var $info = $('#tabInfo'); var $name = $('span', $info); $name.text($tab.text()); $info.show(); } }); $('#horizontalTabTurnTo').easyResponsiveTabs({ type: 'default', //Types: default, vertical, accordion width: 'auto', //auto or any width like 600px fit: true, // 100% fit in a container closed: 'accordion', // Start closed if in accordion view activate: function(event) { // Callback function if tab is switched var $tab = $(this); var $info = $('#tabInfo'); var $name = $('span', $info); $name.text($tab.text()); $info.show(); } });}); // Easy Responsive Tabs Plugin (function ($) { $.fn.extend({ easyResponsiveTabs: function (options) { //Set the default values, use comma to separate the settings, example: var defaults = { type: 'default', //default, vertical, accordion; width: 'auto', fit: true, closed: false, activate: function(){} } //Variables var options = $.extend(defaults, options); var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion'; //Events $(this).bind('tabactivate', function(e, currentTab) { if(typeof options.activate === 'function') { options.activate.call(currentTab, e) } }); //Main function var count = 0; this.each(function () { var $respTabs = $(this); var $respTabsList = $respTabs.find('ul.resp-tabs-list').attr('role', 'tablist'); $respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item').attr('tabindex', '-1').attr('aria-selected', false); $respTabs.css({ 'display': 'block', 'width': jwidth }); $respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content'); jtab_options(); //Properties Function function jtab_options() { if (jtype == vtabs) { $respTabs.addClass('resp-vtabs'); } if (jfit == true) { $respTabs.css({ width: '100%', margin: '0px' }); } if (jtype == accord) { $respTabs.addClass('resp-easy-accordion'); $respTabs.find('.resp-tabs-list').css('display', 'none'); } } //Assigning the h2 markup to accordion title var $tabItemh2; $respTabs.find('.resp-tab-content').before("

"); var itemCount = 0; $respTabs.find('.resp-accordion').each(function () { $tabItemh2 = $(this); var innertext = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')').html(); $respTabs.find('.resp-accordion:eq(' + itemCount + ')').append(innertext); $tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount)).attr('tabindex', '0').attr('aria-selected', false); itemCount++; }); //Assigning the 'aria-controls' to Tab items var count = 0, $tabContent; $respTabs.find('.resp-tab-item').each(function () { $tabItem = $(this); $tabItem.attr('aria-controls', 'tab_item-' + (count)); $tabItem.attr('role', 'tab'); $tabItem.attr('id', 'tab' + (count)); //First active tab, keep closed if option = 'closed' or option is 'accordion' and the element is in accordion mode if(options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) { $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active').attr('aria-selected', true).attr('tabindex','0'); $respTabs.find('.resp-accordion').first().addClass('resp-tab-active').attr('aria-selected', true); $respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block'); } //Assigning the 'id' attr to tab-content var tabcount = 0; $respTabs.find('.resp-tab-content').each(function () { $tabContent = $(this); $tabContent.attr('id', 'tab_item-' + (tabcount)); $tabContent.attr('aria-labelledby', 'tab' + (tabcount)); $tabContent.attr('role', 'tabpanel'); tabcount++; }); count++; }); //Tab Click action function $respTabs.find("[role=tab]").each(function () { var $currentTab = $(this); $currentTab.on('click keypress change', function (e) { var $tabAria = $currentTab.attr('aria-controls'); if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) { $respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); }); $currentTab.removeClass('resp-tab-active'); $currentTab.attr('tabindex','-1'); return false; } if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) { $respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed').attr('aria-selected', false); $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active').attr('aria-selected', true).attr('tabindex','0'); $respTabs.find('.resp-tab-content[id = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active'); } else { $respTabs.find('.resp-tab-active').removeClass('resp-tab-active').attr('aria-selected', false).attr('tabindex','-1'); $respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed'); $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active').attr('aria-selected', true).attr('tabindex','0'); $respTabs.find('.resp-tab-content[id = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block'); } //Trigger tab activation event $currentTab.trigger('tabactivate', $currentTab); }); //Window resize function $(window).resize(function () { $respTabs.find('.resp-accordion-closed').removeAttr('style'); }); }); }); } }); })(jQuery);initPdp2();