var EcStaticPageUtils = (function () function isEmpty(str) function isNotEmpty(str) return !isEmpty(str); function findFirstNotEmpty(urlArray) if (!urlArray) return ""; for (var i = 0; i < urlArray.length; i++) if (isNotEmpty(urlArray[i])) return urlArray[i]; return ""; return findFirstNotEmpty: function(urlArray) return findFirstNotEmpty(urlArray); , isEmpty: function(str) return isEmpty(str); , isNotEmpty: function(str) return isNotEmpty(str); ; ) (); (function processProductPictures() var productsPicturesData = buildProductPicturesData(); var lastWidth = document.body.clientWidth; function buildProductPicturesData() return [ thumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757934.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757928.jpg", hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757936.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757929.jpg", additionalImage: thumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757960.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757955.jpg", hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757959.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757958.jpg", borderInfo: alpha: "255", red: "255", green: "255", blue: "255" , thumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757969.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757967.jpg", hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757973.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757968.jpg", additionalImage: thumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757987.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757981.jpg", hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757986.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757985.jpg", borderInfo: alpha: "255", red: "255", green: "255", blue: "255" , thumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757995.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757988.jpg", hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757998.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757989.jpg", additionalImage: thumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758018.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758011.jpg", hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758017.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758016.jpg", borderInfo: alpha: "255", red: "255", green: "255", blue: "255" , thumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758160.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758156.jpg", hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758163.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758157.jpg", additionalImage: thumbnailUrl: "", originalImageUrl: "", hdThumbnailUrl: "", pictureUrl: "", borderInfo: alpha: "", red: "", green: "", blue: "" , thumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757917.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757915.jpg", hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757925.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757916.jpg", additionalImage: thumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757948.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757939.jpg", hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757947.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806757946.jpg", borderInfo: alpha: "255", red: "255", green: "255", blue: "255" , thumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758046.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758044.jpg", hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758051.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758045.jpg", additionalImage: thumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758065.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758056.jpg", hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758064.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806758063.jpg", borderInfo: alpha: "255", red: "255", green: "255", blue: "255" ]; function addSrcSetAttribute(element, retinaThumbnailUrl) if (!element) return; var thumbnailUrl = element.getAttribute('src'); var srcSetAttribute; if (EcStaticPageUtils.isNotEmpty(thumbnailUrl) && EcStaticPageUtils.isNotEmpty(retinaThumbnailUrl)) srcSetAttribute = thumbnailUrl + " 1x, " + retinaThumbnailUrl + " 2x"; else if (EcStaticPageUtils.isNotEmpty(thumbnailUrl)) srcSetAttribute = thumbnailUrl + " 1x"; else if (EcStaticPageUtils.isNotEmpty(retinaThumbnailUrl)) srcSetAttribute = retinaThumbnailUrl + " 2x"; if (srcSetAttribute) var lazyLoadingEnabled = "false"; if (lazyLoadingEnabled === "true") element.setAttribute("data-srcset", srcSetAttribute); else element.setAttribute("srcset", srcSetAttribute); function setBackgroundImageStyle(element, thumbnailUrl, retinaThumbnailUrl, borderInfo) (EcStaticPageUtils.isEmpty(thumbnailUrl) && EcStaticPageUtils.isEmpty(retinaThumbnailUrl))) return; var notEmptyRetinaThumbnailUrl = retinaThumbnailUrl; if (EcStaticPageUtils.isEmpty(retinaThumbnailUrl)) notEmptyRetinaThumbnailUrl = thumbnailUrl; element.setAttribute("style", "background-image: url(" + thumbnailUrl + "); background-image: -webkit-image-set(url(" + thumbnailUrl + ") 1x, url(" + notEmptyRetinaThumbnailUrl + ") 2x); background-image: -moz-image-set(url(" + thumbnailUrl + ") 1x, url(" + notEmptyRetinaThumbnailUrl + ") 2x); background-image: -o-image-set(url(" + thumbnailUrl + ") 1x, url(" + notEmptyRetinaThumbnailUrl + ") 2x); background-image: -ms-image-set(url(" + thumbnailUrl + ") 1x, url(" + notEmptyRetinaThumbnailUrl + ") 2x);" + backgroundColor(borderInfo)); function backgroundColor(borderInfo) if (borderInfo.alpha == 0) return ""; return " background-color: rgba" + "(" + borderInfo.red + ", " + borderInfo.green + ", " + borderInfo.blue + ", 1)" function hdProductImage(pictureModel) var imageSize = "MEDIUM"; var browserWidth = document.body.clientWidth; switch (imageSize) case "SMALL": if (browserWidth < 520) return hdThumbnailUrl(pictureModel); return thumbnailUrl(pictureModel); case "MEDIUM": return hdThumbnailUrl(pictureModel); case "LARGE": return pictureUrl(pictureModel); function productImage(pictureModel) var imageSize = "MEDIUM"; switch (imageSize) case "SMALL": case "MEDIUM": return thumbnailUrl(pictureModel); case "LARGE": return hdThumbnailUrl(pictureModel); function hdThumbnailUrl(pictureModel) var urls = [ pictureModel.hdThumbnailUrl, pictureModel.thumbnailUrl, pictureModel.pictureUrl, pictureModel.originalImageUrl ]; return EcStaticPageUtils.findFirstNotEmpty(urls); function thumbnailUrl(pictureModel) var urls = [ pictureModel.thumbnailUrl, pictureModel.hdThumbnailUrl, pictureModel.pictureUrl, pictureModel.originalImageUrl ]; return EcStaticPageUtils.findFirstNotEmpty(urls); function pictureUrl(pictureModel) var urls = [ pictureModel.pictureUrl, pictureModel.hdThumbnailUrl, pictureModel.originalImageUrl, pictureModel.thumbnailUrl ]; return EcStaticPageUtils.findFirstNotEmpty(urls); function process() var pictureElements = document.querySelectorAll('.grid-product__image'); if (productsPicturesData.length !== pictureElements.length) return; productsPicturesData.forEach(function (item, i) var pictureElement = pictureElements[i].querySelector('.grid-product__picture'); var additionalPictureElement = pictureElements[i].querySelector('.grid-product__picture-additional'); addSrcSetAttribute(pictureElement, hdProductImage(item)); setBackgroundImageStyle(additionalPictureElement, productImage(item.additionalImage), hdProductImage(item.additionalImage), item.additionalImage.borderInfo); ); function onResize() if (document.body.clientWidth !== lastWidth) lastWidth = document.body.clientWidth; process(); window.addEventListener("resize", onResize); process(); )(); (function processRibbonColor() function getColorValues(color) if (!color) return; if (color.toLowerCase() === 'transparent') return [0, 0, 0, 0]; if (color[0] === '#') // #12345 invalid color if (color.length == 6) return; if (color.length < 7) // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA var r = color[1], g = color[2], b = color[3], a = color[4]; color = '#' + r + r + g + g + b + b + (color.length > 4 ? a + a : ''); return [ parseInt(color.substr(1, 2), 16), parseInt(color.substr(3, 2), 16), parseInt(color.substr(5, 2), 16), color.length > 7 ? parseInt(color.substr(7, 2), 16)/255 : 1 ]; if (color.indexOf('rgb') === -1) if (color.indexOf('rgb') === 0) if (color.indexOf('rgba') === -1) color += ',1'; // convert 'rgb(R,G,B)' to 'rgb(R,G,B)A' which looks awful but will pass the regxep below return color.match(/[\.\d]+/g).map(function (a) return +a ); function isColorDark(color) var c = getColorValues(color); // расчет Photoshop’s RGB-to-Greyscale на основе HSP Color Model http://alienryderflex.com/hsp.html var hsp = Math.sqrt( 0.299 * (c[0] * c[0]) + 0.587 * (c[1] * c[1]) + 0.114 * (c[2] * c[2]) ); // считаем цвет темным если его яркость не больше 200 return !!(hsp <= 200); function process() var ribbonElements = document.querySelectorAll('.grid-product__label'); if (ribbonElements) ribbonElements.forEach(function (item, i) var ribbonElement = ribbonElements[i].querySelector('.ec-label'); var color = ribbonElement.style.color; if (color) ribbonElement.classList.toggle('label--inversed', !isColorDark(color)); ); process(); )(); (function processCategoryPictures() var categoryPicturesData = buildCategoryPicturesData(); var lastWidth = document.body.clientWidth; var sizeBorder = 400; function buildCategoryPicturesData() return [ hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806752805.jpg", mainImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806752806.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806752801.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806752802.jpg", pictureWidth: "270", pictureHeight: "270" , hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806752811.jpg", mainImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806752812.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806752807.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806752808.jpg", pictureWidth: "400", pictureHeight: "400" , hdThumbnailUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806752817.jpg", mainImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806752818.jpg", originalImageUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806752813.jpg", pictureUrl: "https://d2j6dbq0eux0bg.cloudfront.net/images/13433173/806752814.jpg", pictureWidth: "270", pictureHeight: "270" ]; function setBackgroundImageStyle(element, thumbnailUrl, retinaThumbnailUrl) (EcStaticPageUtils.isEmpty(thumbnailUrl) && EcStaticPageUtils.isEmpty(retinaThumbnailUrl))) return; var notEmptyRetinaThumbnailUrl = retinaThumbnailUrl; if (EcStaticPageUtils.isEmpty(retinaThumbnailUrl)) notEmptyRetinaThumbnailUrl = thumbnailUrl; element.setAttribute("style", "background-image: url(" + thumbnailUrl + "); background-image: -webkit-image-set(url(" + thumbnailUrl + ") 1x, url(" + notEmptyRetinaThumbnailUrl + ") 2x); background-image: -moz-image-set(url(" + thumbnailUrl + ") 1x, url(" + notEmptyRetinaThumbnailUrl + ") 2x); background-image: -o-image-set(url(" + thumbnailUrl + ") 1x, url(" + notEmptyRetinaThumbnailUrl + ") 2x); background-image: -ms-image-set(url(" + thumbnailUrl + ") 1x, url(" + notEmptyRetinaThumbnailUrl + ") 2x);"); function categoryImage(pictureModel) var imageSize = "MEDIUM"; switch (imageSize) case "SMALL": case "MEDIUM": return thumbnailUrl(pictureModel); case "LARGE": return hdThumbnailUrl(pictureModel); function hdCategoryImage(pictureModel) var imageSize = "MEDIUM"; var browserWidth = document.body.clientWidth; switch (imageSize) case "SMALL": if (browserWidth < 520) return hdThumbnailUrl(pictureModel); return thumbnailUrl(pictureModel); case "MEDIUM": return hdThumbnailUrl(pictureModel); case "LARGE": if (browserWidth < 1060) return hdThumbnailUrl(pictureModel); return mainImageUrl(pictureModel) function hdThumbnailUrl(pictureModel) var urls = [ pictureModel.hdThumbnailUrl, pictureModel.mainImageUrl, pictureModel.originalImageUrl, pictureModel.pictureUrl ]; return EcStaticPageUtils.findFirstNotEmpty(urls); function mainImageUrl(pictureModel) var urls = [ pictureModel.mainImageUrl, pictureModel.originalImageUrl, pictureModel.pictureUrl ]; return EcStaticPageUtils.findFirstNotEmpty(urls); function thumbnailUrl(pictureModel) if (pictureModel.pictureWidth < sizeBorder && pictureModel.pictureHeight < sizeBorder) return hdThumbnailUrl(pictureModel); else return pictureModel.pictureUrl; function process() var categoryImageElements = document.querySelectorAll('.grid-category__image'); if (categoryImageElements.length !== categoryPicturesData.length) return; categoryPicturesData.forEach(function (item, i) var categoryImageUrl = categoryImage(item); var hdCategoryImageUrl = hdCategoryImage(item); var categoryPictureElement = categoryImageElements[i].querySelector('.grid-category__picture'); var categoryBgImageElement = categoryImageElements[i].querySelector('.grid-category__bg-image'); setBackgroundImageStyle(categoryPictureElement, categoryImageUrl, hdCategoryImageUrl); setBackgroundImageStyle(categoryBgImageElement, categoryImageUrl, hdCategoryImageUrl); ); function onResize() if (document.body.clientWidth !== lastWidth) lastWidth = document.body.clientWidth; process(); window.addEventListener("resize", onResize); process(); )(); (function() ; if (window.ec.static_category_evaluated === true) return; window.ec.static_category_evaluated = true; var Grid = function() var params = productListImageSize : "MEDIUM", categoryImageSize : "MEDIUM", productCellSpacing : "", categoryCellSpacing : "" ; var settings = productBreakpoints: LARGE : [0, 680, 1060, 1440, 10000], MEDIUM : [0, 260, 680, 1060, 1370, 1700, 10000], SMALL : [0, 260, 520, 680, 870, 1060, 1280, 1450, 1750, 10000] , categoryBreakpoints: LARGE : [0, 680, 1060, 1440, 10000], MEDIUM : [0, 480, 680, 1060, 1370, 1700, 10000], SMALL : [0, 390, 520, 680, 870, 1060, 1280, 1450, 1750, 10000] ; function setAttributes(grids, breakpoints) if (!grids) return; grids.forEach(function (grid) var w = grid.offsetWidth; var columnCount = 0; for (var i = 1; i <= breakpoints.length; i++) if (w < Math.ceil(breakpoints[i])) if (i !== columnCount) columnCount = i; grid.setAttribute('data-cols', i); break; ); function checkProductGridsLayout() var productGrids = document.querySelectorAll('.grid__products'); var productBreakpoints = settings.productBreakpoints[params.productListImageSize]; setAttributes(productGrids, productBreakpoints); function checkCategoryGridsLayout() var categoryGrids = document.querySelectorAll('.grid__categories'); var categoryBreakpoints = settings.categoryBreakpoints[params.categoryImageSize]; setAttributes(categoryGrids, categoryBreakpoints); function checkLayout() checkProductGridsLayout(); checkCategoryGridsLayout(); function setCellInterval(p, c) var style = document.getElementById('customCss') function init() setCellInterval(params.productCellSpacing, params.categoryCellSpacing); checkLayout(); window.addEventListener('resize', function() checkLayout(); ); init(); ; var ecwidContainer = document.querySelector('.ec-static-container .ec-size'); var breakpoints = 320: 'ec-size--xxs', 414: 'ec-size--xs', 480: 'ec-size--s', 768: 'ec-size--m', 1024: 'ec-size--l', 1100: 'ec-size--xl', 1440: 'ec-size--xxl' ; function onResize() var w = ecwidContainer.offsetWidth; for (var i in breakpoints) if (w >= i) ecwidContainer.classList.add(breakpoints[i]); else ecwidContainer.classList.remove(breakpoints[i]); onResize(); window.addEventListener('load', onResize); window.addEventListener('resize', onResize); var links = document.querySelectorAll(".ec-static-container a"); for (var i = 0; i < links.length; i++) var link = links[i]; link.addEventListener('click',function() document.querySelector('.ec-static-container').classList.add("ec-static-container__wait"); ) var grid = new Grid(); )();