<style> /* Make Side Nav, Quick Shop Red Button Font Bold */ #holiday-2015_container .holiday-2015_side-nav ul li, #holiday-2015_container .holiday-2015_side-nav-wrapper a, #holiday-2015_container .rollover .quickshop.button { font-weight: bold; } /* Fix for MPP styles Headers and spacing */ #holiday-2015_container ul.holiday-2015_product-mpp-wrapper li p.product-eyebrow, #holiday-2015_container .product_brief__misc-flag { font-weight: 100; } #holiday-2015_container ul.holiday-2015_product-mpp-wrapper li h3, #holiday-2015_container .product_brief__header { font-family: "Optima LT W02 Roman"; font-weight: normal; } #holiday-2015_container ul.holiday-2015_product-mpp-wrapper li h4, #holiday-2015_container .product_brief__headers h4.product_brief__sub-header { font-weight: normal; margin: 5% 0 0; } /* This makes the height of the products li smaller. */ #holiday-2015_container ul.holiday-2015_product-mpp-wrapper .product_brief__panel { margin-bottom: 8%; } /* Keep border transparent on Sort By Select Box */ #holiday-2015_container div.mpp__product-sort-container a.selectBox, #holiday-2015_container div.mpp__product-sort-container a.selectbox { border: 1px solid transparent; } /* Bring back gray border on Quantity Select Box */ #holiday-2015_container div.product_brief__quantity-container a.selectBox, #holiday-2015_container div.product_brief__quantity-container a.selectbox { border: 1px solid #ced0d9; } /* Bring back gray border on Color Picker Box */ #holiday-2015_container a.product_brief__button-panel.button-color-picker { border: 1px solid #ccc; } /* Bring back black border on Quantity Select Box when box is open */ #holiday-2015_container div.mpp__product-sort-container a.selectBox.selectBox-menuShowing, #holiday-2015_container div.mpp__product-sort-container a.selectbox.selectBox-menuShowing, #holiday-2015_container div.product_brief__quantity-container a.selectBox.selectBox-menuShowing, #holiday-2015_container div.product_brief__quantity-container a.selectbox.selectBox-menuShowing { border: 1px solid #040a2b; } /* Remove Underline on Quantity Select Box Numbers */ #holiday-2015_container a.selectBox:hover span, #holiday-2015_container a.selectbox:hover span { text-decoration: none; } /* Add Pointer Cursor to Rollover Tiles */ .device-pc #holiday-2015_container .rollover:hover, #holiday-2015_container #landing_3-2 a.button:hover { cursor: pointer; } /* Most Wanted Page Needs Max-Height Removed */ #holiday-2015_container.most-wanted { max-height: none; } /* Might fix sorting display issue */ #holiday-2015_container .mpp__product-grid .mpp__product:nth-child(3n+1) { clear: left; } /* Hide Load More Button on Full MPP Pages */ #holiday-2015_container.mpp-full-page #holiday-2015_load-more { display: none; } /* Now Remove the Underline on the word 'shop' on Category Rollovers */ #holiday-2015_container .rollover .category_button span:hover, #holiday-2015_container .rollover a:hover span { border-bottom: 1px solid transparent; } /* Resize Dropdown List Filter Text */ #holiday-2015_container .dropdown li a { font-size: 14px; line-height: 23px; } @media screen and (max-device-width: 768px) and (orientation: portrait) { /* Landing Positioning for iPad Portrait */ #holiday-2015_container.landing .content_container { left: 0px; width: 99%; } /* MPP and Tile Page Positioning for iPad Portrait */ #holiday-2015_container.skincare .content_container, #holiday-2015_container.makeup .content_container, #holiday-2015_container.fragrance .content_container { left: 25px; width: 99%; } /* MPP Page Positioning for iPad Portrait */ #holiday-2015_container.mpp-full-page .content_container { left: 30px; width: 99%; } } </style>

<script> $(function () { setTimeout(function () { var debug = true; var $mpp_grid = $('.mpp__product-grid'); var $original_products = null; var $tiles = $('.image_container'); var $load_more = $('#holiday-2015_load-more'); if (debug) console.log('setTimeout'); var href = window.location.href; if (href.indexOf('holiday-makeup') === -1 && href.indexOf('holiday-skincare') === -1 && href.indexOf('holiday-fragrance') === -1) { $('#holiday-2015_load-more').click(); } // if (!$mpp_grid.length) { // if (debug) console.log('mpp grid not found'); // return; // } // if (!$tiles.length) { // if (debug) console.log('no tiles found'); // return; // } // Create your wishlist button click $('#wishlist_popup_wrapper div a').on('click', function(e) { //e.preventDefault(); window.location.href = 'https://www.esteelauder.com/account/wishlist.tmpl'; }); // tile to proxy child click event using DOM native click $('.image_container').on('click', function (e) { var $button = $(this).find('.rollover a.button'), $button_get_0 = $button.get(0); if (!$(e.target).is('a')) $button_get_0.click(); }); var methods = { set_products : function ($products) { var default_visible_rows = 2, default_boundry_index = 3; $products.each(function (i) { var $product = $(this); if (debug) console.log('set_products: log', $product, i); // flag the initial products that are at the left edge if (i % default_boundry_index === 0) { $product.addClass('left'); } // flag all products that are not in the initial rows if (i >= default_boundry_index * default_visible_rows) { $product.addClass('row-hidden'); } }); if (!$products.filter('.row-hidden').length) { $load_more.addClass('disabled'); } else { $load_more.removeClass('disabled'); } }, add_dropdown : function ($tile) { // if not mobile, carry out filtering. $tile.find('li a').bind('click', function (e) { if (!$('body').hasClass('device-mobile')) { e.preventDefault(); if (debug) console.log('dropdown: li link clicked'); var $parent, $product_target, sort_name, product_list; $parent = $(this).parent(); if ($parent.hasClass('active')) { if (debug) console.log('dropdown: already active'); return; } $parent.addClass('active').siblings().removeClass('active'); sort_name = typeof $parent.data('slot_name') === 'undefined' ? false : $parent.data('slot_name'); if (sort_name === false) { if (debug) console.log('dropdown: no sort name found', $parent, $parent.data()); return; } $product_target = $('#' + sort_name); if (!$product_target.length) { if (debug) console.log('dropdown: product container not found'); return; } product_list = $product_target.text(); product_list = $.trim(product_list).toLowerCase(); if (!product_list) { if (debug) console.log('dropdown: no product list found'); return; } if (debug) console.log('dropdown: product list', product_list); product_list = product_list.split(','); if ($original_products === null) { if (debug) console.log('dropdown: original products not set'); return; } var $new_set = $original_products.filter(function () { var $li = $(this); if (typeof $li.data('product-id') === 'undefined') { return false; } var product_id = $li.data('product-id').toLowerCase(); var match = false; for (var i = 0; i < product_list.length; i++) { if (product_id === $.trim(product_list[i])) { match = true; break; } } return match; }).removeClass('row-hidden').css('display', ''); $mpp_grid.children().detach(); $mpp_grid.append($new_set); methods.set_products($new_set); // run grid adjust function here if (!window.site || !window.site.mpp_filter) { if (debug) console.log('dropdown: site or mpp_filter not set'); return; } if (typeof window.site.mpp_filter.adjustMppProductGrid !== 'function') { if (debug) console.log('dropdown: adjustMppProductGrid not set or not a function'); return; } window.site.mpp_filter.adjustMppProductGrid(); var $target = $('.mpp__product-sort-container'); if (!$target.length) { if (debug) console.log('dropdown: mpp container not found'); return; } $('html, body').animate({ scrollTop : $target.offset().top }, 800); } }); } }; $tiles.find('li a').off('click'); // store original set of products methods.set_products($mpp_grid.find('li.mpp__product')); $original_products = $mpp_grid.find('li.mpp__product');//.clone(true, true); $mpp_grid.addClass('enable-row-hidden'); // iterate through all tiles $tiles.each(function () { var $tile = $(this); // tile has a dropdown menu if ($tile.hasClass('holiday-dropdown')) { //if (debug) console.log('will add dropdown', this); methods.add_dropdown($tile); } }); ///////////// // QuickShop ///////////// (function() { var product_ids = [], quickshops = $('#holiday-2015_container .rollover .quickshop.button'); if (debug) console.log('quickshop 2 wins'); if (!quickshops.length) { if (debug) console.log('QUICKSHOP FAILED: targets not found'); return; } // Build list of product ids // NOTE: each quickshop <a> should have a data-productID="PROD###" where ### is the specific product ID // If not it will attempt to parse the product url ex url : /product/12883/6600/Product-Catalog/Makeup/Accessories/Brushes/Concealer-Brush quickshops.each(function() { if ($(this).data('product')) { product_ids.push($(this).data('product')); } else { var pathname = this.pathname; if (pathname.charAt(0) != '/') { pathname = '/'+pathname; } product_ids.push('PROD' + pathname.split('/')[3]); } }); // Run the fetch for all required fields for quickshop generic.jsonrpc.fetch({ method: 'prodcat', params: [{ products: product_ids, sku_fields: [ 'HEX_VALUE_STRING', 'INVENTORY_STATUS', 'LARGE_IMAGE', 'MEDIUM_IMAGE', 'XL_SMOOSH', 'PRICE', 'PRODUCT_ID', 'PRODUCT_SIZE', 'SHADENAME', 'SKU_BASE_ID', 'SKU_ID', 'XL_IMAGE', 'formattedPrice' ], product_fields: [ 'ATTRIBUTE_DESC_1', 'ATTRIBUTE_DESC_2', 'ATTRIBUTE_LABEL_1', 'ATTRIBUTE_LABEL_2', 'PRODUCT_DETAILS_MOBILE', 'DEFAULT_CAT_ID', 'DISPLAY_STATUS', 'FAMILY_CODE', 'MPP_DESC_1', 'MPP_DESC_2', 'PRODUCT_ID', 'PROD_RGN_NAME', 'PROD_RGN_SUBHEADING', 'RATING_IMAGE', 'SHORT_DESC', 'TOTAL_REVIEW_COUNT', 'priceRange', 'shaded', 'sized', 'skus', 'url' ] }], onSuccess: function(results) { var product_results = results.getValue().products; // Simple 1:1 bind of product data to buttons quickshops.each(function(index) { $(this).click(function(e) { e.preventDefault(); // Launch the quickshop site.quickshop(product_results[index]); }); }); }, onFail: function(error) { console.log('QUICKSHOP FAILURE: ', error); } }); })(); // // // MPP Hacks // // /* add an "all" option in the dropdown menu , used for browser refresh */ $('<li class="mpp_reset" data-slot_name="filter_slot_6"><a href="#" class="propoText">').insertAfter('.dropdown ul li:nth-child(5)'); $('.mpp_reset a').text('Everyone').processPropoText({debug:true}); $(window).trigger('resize'); // rerun propo //$.processPropoItems({debug: true, overrideNonPropoOffsetParents: true}); $('.mpp_reset a').on('click', function(e) { e.preventDefault(); window.location.reload(true); }); // // // tile to proxy child click event using DOM native click // // $('.image_container').on('click', function (e) { var $button = $(this).find('.rollover a.button'), $button_get_0 = $button.get(0); if (!$(e.target).is('a')) $button_get_0.click(); }); $('.rollover a.button').on('click', function(e) { if (debug) console.log('proxy click triggered child click'); }); }, 5000); }); </script>