if (!gwpstyle) { var gwpstyle = document.createElement('style'); gwpstyle.textContent = ' .gwp-div { clear: both; position:relative; } .sm-gwp-img-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0px; width: 100%; overflow-y: auto; max-height:225px; } .gwp-opt { box-sizing: border-box; text-align: center; border:2px solid transparent; padding:1px; margin:0px; border-radius:7px; overflow-x:hidden; position: relative; } .gwp-opt:hover { border-top:0px solid #EEEEEE; padding:1px; } .gwp-opt:hover .gwp-opt-name { padding-top:2px; } .gwp-opt-sel:hover .gwp-opt-name { padding-top: 0px; } .gwp-opt-sel { border:2px solid #777777 !important; padding:1px; } .gwp-opt-sel:hover { padding:1px; } .gwp-opt-name { text-align: center; width: 100%; } .gwp-opt-title { min-height: 1em; padding: 11px 0px; } .gwp-opt-prev { position:relative; } .gwp-opt-prev div { position:absolute; left:-505px; width:500px; display:none; z-index:1000; border:1px solid #bcbcbc; background-color:#FFFFFF; box-shadow:3px 3px 6px #AAAAAA; } .gwp-opt img { cursor:pointer; border-radius:7px; } .gwp-opt-more { position:relative; cursor:pointer; border-radius:7px; border:1px solid #888888; color:#888888; padding-top:100%; } .gwp-opt-more div { font-size:14px; text-align:center; line-height:12px; position:absolute; top:50%; left:0px; width:100%; margin-top:-0.5em; } .gwp-opt-prev-title { display: block; text-align: center; } .gwp-opt-title { font-weight:bold; padding: 0px 20px; display: inline-block; }'; document.head.appendChild(gwpstyle); } gwpNo = {101: "1", 102: "1", 103: "1", 104: "2", 105: "2", 106: "2", 135: "2", 119: "2", 111: "2", 118: "2", 116: "2", 131: "2", 113: "2", 123: "2", 109: "2", 107: "2", 110: "2", 117: "2", 136: "2", 125: "2", 112: "2", 126: "2", 124: "2", 132: "2", 108: "2", 120: "2", 114: "2", 138: "2", 133: "2", 137: "2", 134: "2", 115: "2", 128: "3", 127: "2", 122: "2", 121: "2", 130: "2", 129: "2", 139: "2", 140: "2", 141: "2", 142: "2", 143: "1", 147: "1", 144: "1", 145: "1", 146: "1", 148: "1", 149: "1", 150: "1", 151: "1", 152: "1", 153: "1", 154: "1", 155: "1", 156: "1", 157: "1", 158: "1", 159: "1", 160: "1", 161: "1", 162: "1", 163: "1", 165: "1", 166: "1", 167: "1", 168: "1", 169: "1", 170: "1", 173: "3", 174: "2", 175: "2", 176: "3", 177: "2", 178: "4", 183: "1", 180: "1", 184: "1", 181: "1", 182: "1", 185: "1", 188: "1", 186: "1", 187: "1", 191: "1", 190: "1", 189: "1", 193: "1", 192: "1", 194: "1", 195: "1", 196: "1", 197: "1", 198: "1", 199: "1", 200: "1", 201: "1", 202: "1", 203: "1", 204: "1", 205: "1", 206: "1", 207: "1", 208: "1", 209: "1", 210: "1", 211: "2", 212: "2", 213: "2", 214: "2", 215: "2", 216: "2", 217: "2", 218: "2", 219: "2", 220: "2", 221: "2", 222: "2", 223: "2", 224: "2", 225: "2", 226: "2", 227: "2", 228: "2", 229: "2", 230: "2", 179: "4", 231: "3", 232: "2", 233: "2", 234: "2", 235: "2", 236: "2", 237: "3", 238: "2", 239: "2", 240: "2", 241: "2", 242: "2", 243: "2", 244: "2", 245: "2", 246: "2", 247: "1", 248: "1", 249: "1", 250: "1", 251: "1", 252: "1", 253: "1", 254: "1", 255: "1", 256: "1", 257: "1", 258: "1", 259: "1", 260: "1", 261: "1", 262: "1", 263: "1", 264: "1", 265: "1", 266: "1", 267: "1", 268: "1", 269: "1", 270: "1", 271: "1", 272: "1", 273: "1", 274: "1", 275: "1", 276: "1", 277: "1", 278: "1", 279: "1", 280: "1", 281: "1", 282: "1", 283: "1", 284: "1", 285: "1", 286: "1", 287: "1", 288: "1", 289: "1", 290: "1", 291: "1", 292: "1", 293: "1", 294: "1", 295: "1", 296: "1", 297: "1", 298: "1", 299: "1", 300: "1", 301: "1", 302: "1", 303: "1", 304: "1", 305: "1", 306: "1", 307: "1", 308: "1", 309: "1", 310: "1", 311: "1", 312: "1", 313: "1", 314: "1", 315: "1", 316: "1", 319: "1", 320: "2", 321: "2", 322: "2", 323: "1", 324: "1", 325: "2", 326: "1", 327: "1", 328: "1", 329: "1", 330: "1", 331: "1", 332: "1", 333: "1", 334: "1", 335: "1", 336: "1", 337: "1", 338: "1", 339: "1", 340: "1", 341: "1", 342: "1", 343: "1", 344: "1", 345: "1", 346: "1", 347: "1", 348: "1", 349: "1", 350: "1", 351: "1", 352: "1", 354: "1", 355: "1", 353: "1", 356: "1", 357: "1", 358: "1", 359: "1", 360: "1", 361: "1", 362: "1", 363: "1", 364: "1", 365: "1", 366: "1", 367: "1", 368: "1", 369: "1", 370: "1", 371: "1", 372: "1", 373: "1", 374: "1", 375: "2", 376: "2", 377: "2", 378: "2", 379: "2", 380: "2", 381: "2", 382: "2", 383: "2", 384: "2", 385: "2", 386: "2", 387: "2", 388: "2", 389: "2", 390: "2", 391: "2", 392: "2", 393: "2", 394: "2", 395: "2", 396: "2", 397: "2", 398: "2", 399: "2", 400: "2", 401: "2", 402: "2", 403: "2", 404: "2", 405: "2", 406: "2", 407: "2", 408: "2", 409: "2", 410: "1", 411: "1", 412: "1", 413: "1", 414: "1", 415: "1", 416: "1", 417: "1", 418: "1", 419: "1", 420: "1", 421: "1", 422: "1", 423: "1", 424: "1", 425: "2", 426: "2", 428: "1", 438: "1", 429: "1", 433: "1", 437: "1", 436: "1", 432: "1", 430: "1", 435: "1", 439: "1", 434: "1", 431: "1", 440: "1", 441: "1", 442: "1", 443: "1", 444: "1", 445: "1", 446: "1", 447: "1", 448: "1", 449: "1", 450: "1", 451: "2", 455: "1", 456: "1", 457: "1", 458: "1", 459: "1", 460: "1", 461: "1", 462: "1", 463: "1", 464: "1", 465: "1", 466: "1", 467: "1", 468: "1", 469: "1", 470: "1", 471: "1", 472: "1", 473: "1", 474: "1", 475: "1", 476: "1", 477: "1", 478: "1", 479: "1", 480: "1", 481: "1", 482: "1", 483: "1", 484: "1", 485: "1", 486: "1", 487: "1", 488: "1", 489: "1", 490: "1", 491: "1", 492: "1", 493: "1", 494: "1", 495: "1", 496: "1", 497: "1", 498: "1", 499: "1", 500: "1", 501: "1", 502: "1", 503: "1", 504: "2", };var opt_list = [18,21]; var more_txt = [], less_txt = [], optTmp = [], optTmpVal = [], isStock = 0; var changeStock = 0; var sid = '353'; var gwpurl = 'https://gwp.brweb.pl/i/353/'; var imgLimit = '6'; var moreLabel = '+'; var lessLabel = '-'; var showMLcnt = 1; var prevMopen = ''; var selectLangVal = ['','wybierz','choose','wählen','Vybrat','vali','izvēlēties','pasirinkti','választ','vyberte si','вибрати','-1']; function showPrev(e) { if (window.innerWidth < 700) return null; var id = e.id; var aId = id.split('__'); var aSO = aId[0].split('_'); var soptid = aSO[1]; var pid = soptid; var prev_div = document.getElementById('gwp_div_preview_'+pid); prev_div.style.display = 'block'; prev_div.innerHTML = ''; setTimeout(movePrev,10,pid); } function hidePrev(e) { if (window.innerWidth < 700) return null; var id = e.id; var aId = id.split('__'); var aSO = aId[0].split('_'); var soptid = aSO[1]; var pid = soptid; var prev_div = document.getElementById('gwp_div_preview_'+pid); prev_div.style.display = 'none'; prev_div.innerHTML = ''; prev_div.style.top = '0px'; } function movePrev(pid) { var prev_div = document.getElementById('gwp_div_preview_'+pid); if (prev_div) { var imgH = prev_div.getElementsByTagName('IMG')[0]; if (!imgH) { setTimeout(movePrev,10,pid); return false; } const recti = imgH.getBoundingClientRect(); if (recti.height == 0) { setTimeout(movePrev,10,pid); return false; } var hcorr = (recti.top + recti.height - window.innerHeight + 20) * -1; hcorr = (hcorr < 0 ? hcorr : 0); if (recti.top < 20) { hcorr = (recti.top + hcorr - 20) * -1; } if (recti.top > 20 && recti.height + 40 > window.innerHeight) { hcorr = (recti.top - 20) * -1; } prev_div.style.top = hcorr + 'px'; } } function showPrevMobile(e) { var id = e.id; var aId = id.split('__'); var aSO = aId[0].split('_'); var soptid = aSO[1]; var prev_id = 'gwp_div_preview_'+soptid; var prev_div = document.getElementById(prev_id); if (prevMopen != '' && prevMopen != prev_div) document.getElementById(prevMopen).style.display = 'none'; prev_div.style.display = 'block'; prev_div.innerHTML = ''; prev_div.style.position = 'absolute'; prev_div.style.left = '0px'; prev_div.style.bottom = '20px'; prev_div.style.margin = '0px 10px'; prev_div.style.width = 'calc(100% - 20px)'; prevMopen = prev_id; } function hidePrevMobile(e) { var id = e.id; var aId = id.split('__'); var aSO = aId[0].split('_'); var soptid = aSO[1]; var prev_id = 'gwp_div_preview_'+soptid; var prev_div = document.getElementById(prev_id); prev_div.style.display = 'none'; prev_div.innerHTML = ''; } function hideDiv() { document.getElementById(prevMopen).style.display = 'none'; } function oClick(e,type) { if (type == 'S') { selectClick(e); } else { radioClick(e); } setTimeout(showGWP,500); } function setValToInput(optInput,optValue) { if (optInput) { optInput.value = optValue; } else { setTimeout(function() { setValToInput(optInput,optValue); }, 500); } } function selectClick(e) { var id = e.id; var aId = id.split('__'); var optId = aId[0].replace('option_',''); var srl = document.getElementsByName(aId[0]); var sr = null; var optInput = null; var optValue = null; for( var k = 0; k < srl.length; k++){ if (srl[k].tagName == 'H-DROPDOWN-CONTENT') { sr = srl[k]; } if (srl[k].tagName == 'INPUT') { optInput = srl[k]; } } if (sr == null) { srl[1].click(); setTimeout(function() { selectClick(e); }, 500); return false; } sr = document.getElementsByTagName('H-OPTION'); for( var k = 0; k < sr.length; k++){ if (sr[k].value == aId[1]) { sr[k].click(); optValue = aId[1]; setValToInput(optInput,optValue); var aSO = aId[0].split('_'); var soptid = aSO[1]; if (document.getElementById('gwp_div_title_'+soptid)) document.getElementById('gwp_div_title_'+soptid).innerHTML = e.title; if (window.innerWidth < 700) showPrevMobile(e); } } var c = document.getElementsByClassName('c_' + aId[0]); for( var i = 0; i < c.length; i++){ c[i].parentElement.className = c[i].parentElement.className.replace(' gwp-opt-sel'); if ( c[i].id == id ) { c[i].parentElement.className = c[i].parentElement.className + ' gwp-opt-sel'; } } } function radioClick(e) { var id = e.id; if (window.innerWidth < 700) showPrevMobile(e); var aId = id.split('__'); document.getElementById(aId[0].replaceAll('_','-')+'-'+aId[1]).click(); var aSO = aId[0].split('_'); var soptid = aSO[1]; if (document.getElementById('gwp_div_title_'+soptid)) document.getElementById('gwp_div_title_'+soptid).innerHTML = e.title; var c = document.getElementsByClassName('c_' + aId[0]); for( var i = 0; i < c.length; i++){ c[i].parentElement.className = c[i].parentElement.className.replace(' gwp-opt-sel',''); if ( c[i].id == id ) c[i].parentElement.className = c[i].parentElement.className + ' gwp-opt-sel'; } } function gwpMore(oid) { var h = document.getElementsByClassName('gwpHidden'+oid); var type = more_txt[oid] == document.getElementById('gwp_more'+oid).innerHTML ? 'block' : 'none'; for( var i = 0; i < h.length; i++){ h[i].style.display = (h[i].className == 'gwp-opt gwpHidden'+oid+' gwp-opt-sel') ? 'block' : type; } document.getElementById('gwp_more'+oid).innerHTML = type == 'block' ? less_txt[oid] : more_txt[oid] ; } function showGWP() { var isLoading = 0; var isDiff = 0; opt_list.forEach(function(opt_id) { var pv = document.getElementsByTagName('product-variants')[0]; var radiov = ''; var srl = document.getElementsByName('option_'+opt_id); if (pv && srl.length == 0) { radiov = '_'+pv.getAttribute("product-instance-key"); srl = document.getElementsByName('option_'+opt_id+radiov); } if (srl.length == 0) { return; } var optValue = ''; var sr = null; if (srl[0].tagName == 'H-DROPDOWN') { srl[0].style.display = 'none'; var smain = srl[0].parentElement.parentElement.parentElement.parentElement; for( var k = 0; k < srl.length; k++){ if (srl[k].tagName == 'H-DROPDOWN-CONTENT') { sr = srl[k]; } if (srl[k].tagName == 'INPUT') { optValue = srl[k].value; } } if (sr == null) { srl[1].click(); setTimeout(function() { var srl = document.getElementsByName('option_'+opt_id); for( var k = 0; k < srl.length; k++){ if (srl[k].tagName == 'H-DROPDOWN-CONTENT') { sr = srl[k]; } if (srl[k].tagName == 'INPUT') { optValue = srl[k].value; } } }, 500); } var optType = 'S'; var s = sr; var c = sr.getElementsByTagName('h-option'); } else { var optType = 'R'; var s = srl[0].parentElement.parentElement.parentElement.parentElement; var smain = srl[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement; if (sid == 388 || sid == 497) { s = srl[0].parentElement.parentElement.parentElement.parentElement.parentElement; smain = srl[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement; } s.parentElement.style.display = 'none'; var c = srl; for( var j = 0; j < c.length; j++){ if (c[j].checked == true) { optValue = c[j].dataset.userValue; } } } isDiff = (!optTmp[opt_id] || optTmp[opt_id] != s.innerText.replace(/\s+/g, '') || (sid != 367 && optTmpVal[opt_id] != optValue)) ? 1 : 0; if (smain.getAttribute("stock-order") > 0 && smain.className.indexOf('loading') != -1) { isLoading++; } if (isDiff == 1 || changeStock == 1) { var sOptions = '', sPreview = '', sTitle = ''; var imgNo = 0; var optCnt = (optType == 'S') ? c.length : c.length; if (optType == 'R') { for( var j = 0; j < c.length; j++){ if (c[j].parentElement.getAttribute("hidden") != null) { optCnt--; } } } more_txt[opt_id] = moreLabel + (showMLcnt == 1 ? (optCnt - imgLimit + 1) : ''); less_txt[opt_id] = lessLabel + (showMLcnt == 1 ? (optCnt - imgLimit + 1) : ''); var smTitle = ''; for( var j = 0; j< c.length; j++){ if (!selectLangVal.includes(c[j].value) && c[j].parentElement.className != 'radio-wrap none') { imgNo++; var smIsSelect = ((optType == 'S' && (optValue == c[j].value)) || (optType == 'R' && c[j].checked == true)) ? 1 : 0; smItenSelect = smIsSelect == 1 ? ' gwp-opt-sel' : ''; smItenDisplay = (imgNo < imgLimit || (imgNo == imgLimit && imgNo == optCnt)) ? 'block' : 'none'; var lastOpt = (imgNo == imgLimit - 1) ? '!important' : ''; var lastOptClass = (imgNo == imgLimit - 1) ? ' toHidden ' : ''; var lastOptId = (imgNo == imgLimit - 1) ? ' id="gwp_loi_'+oId+'" ' : ''; if (smIsSelect == 1) { smItenDisplay = 'block'; if (imgNo > imgLimit || (imgNo == imgLimit && imgNo < optCnt)) { sOptions = sOptions.replace('block!important','none'); sOptions = sOptions.replace('toHidden','gwpHidden'+opt_id); } } smItenHidden = (imgNo > imgLimit || (imgNo == imgLimit && imgNo != optCnt)) ? ' gwpHidden'+opt_id+' ' : ''; oName = c[j].dataset.userValue ; if (c[j].dataset.priceModifier && c[j].dataset.priceModifier != '') { oName += ' (' + c[j].dataset.priceModifier + ')'; } oId = (optType == 'S') ? s.name : c[j].name; if (smItenSelect == ' gwp-opt-sel') { smTitle = oName; } sOptions += '
'; } } if (optCnt > imgLimit) { sOptions += '
' + more_txt[opt_id] + '
'; } sPreview = '
'; sTitle = smTitle != '' ? smTitle : ''; if (document.getElementById('gwp_div_list_'+opt_id)) { if (document.getElementById('gwp_div_title_'+opt_id)) { document.getElementById('gwp_div_title_'+opt_id).innerHTML = sTitle; } document.getElementById('gwp_div_list_'+opt_id).innerHTML = sOptions; } else { const div_title = document.createElement('div'); div_title.id = 'gwp_div_title_'+opt_id; div_title.className = 'gwp-opt-title'; div_title.innerHTML = sTitle; const div_prev = document.createElement('div'); div_prev.id = 'gwp_div_prev_'+opt_id; div_prev.className = 'gwp-opt-prev'; div_prev.innerHTML = sPreview; const div_list = document.createElement('div'); div_list.id = 'gwp_div_list_'+opt_id; div_list.className = 'sm-gwp-img-list'; div_list.innerHTML = sOptions; if (optType == 'S') { var div4title = s.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.getElementsByTagName('LABEL')[0]; } else { var div4title = s.parentElement.parentElement.parentElement.getElementsByTagName('LABEL')[0]; } div4title.appendChild(div_title); s.parentElement.parentElement.parentElement.appendChild(div_prev); s.parentElement.parentElement.parentElement.appendChild(div_list); } optTmp[opt_id] = s.innerText.replace(/\s+/g, ''); optTmpVal[opt_id] = optValue; } }); changeStock = 0; if (isLoading > 0 || isDiff == 1) { setTimeout(showGWP,1000); } } window.onload = function(){ showGWP(); }; showGWP(); setTimeout(showGWP,1000);