1/* CONSTANTS FOR CLASS NAMES */ 2var THEME_BLUR_LOADING = 'theme-blur-loading'; 3var THEME_ACTIVE_SORT_BY = 'theme-active-sortby'; 4 5/* CONSTANTS FOR IDs */ 6var FILTER_ERROR_VALIDATION_MESSAGES = "zs-filter-error-validation-messages"; 7var FILTER_PRICE_MAX_LESSTHAN_MIN_ERROR_CONTAINER = 'zs-filter-price-maxlessthanmin-error'; 8var FILTER_PRICE_EMPTY_ERROR_CONTAINER = 'zs-filter-price-empty-error'; 9var FILTER_PRICE_INVALID_ERROR_CONTAINER = 'zs-filter-price-invalid-error'; 10 11/* CONSTANTS FOR DATA ATTRIBUTES */ 12var DATA_ERROR_MESSAGE = "data-zs-error-message"; 13var DATA_HREF = 'data-href'; 14var DATA_SELECTED = 'data-selected'; 15var DATA_CURRENCY_LIST = 'data-zs-currency-list'; 16var DATA_THEME_CURRENCY_LIST = 'data-theme-currency-list'; 17var DATA_CURRENCY_CODE = 'data-zs-currency-code'; 18var SORT_BY_PLACEHOLDER = '[data-sort-by-products]'; 19var SORT_BY_WITH_FILTER = '[data-theme-sortby-with-filter]'; 20var SORT_BY_TARGET = '[data-sort-by-products-target]'; 21var DATA_MORE_PRODUCT = 'data-has-more-products'; 22var DATA_LAZY_LOAD = 'data-lazy-load-products'; 23var DATA_SORT_BY_VALUE = 'data-sort-by-val'; 24var DATA_THEME_CONTENT_CONTAINER = "data-theme-content-container"; 25var DATA_SELLING_PRICE = 'data-zs-selling-price'; 26var DATA_FILTER_CONTAINER = 'data-zs-filter-container'; 27var DATA_FILTER_OPTION_CONTAINER = 'data-zs-filter-option-container'; 28var DATA_FILTER_OPTION_TYPE = 'data-zs-filter-option-type'; 29var DATA_FILTER_OPTION_NAME = 'data-zs-filter-option-name'; 30var DATA_FILTER_OPTION_CLEAR = 'data-zs-filter-option-clear'; 31var DATA_FILTER_OPTION_DEFAULT_VALUE_TO_SHOW = 'data-zs-filter-option-default-value-to-show'; 32var DATA_FILTER_OPTION_VALUE_CONTAINER = 'data-zs-filter-option-value-container'; 33var DATA_FILTER_OPTION_CATEGORY = 'data-zs-filter-option-category'; 34var DATA_FILTER_OPTION_VALUE = 'data-zs-filter-option-value'; 35var DATA_FILTER_OPTION_VALUES_WRAPPER = 'data-zs-filter-option-values-wrapper'; 36var DATA_FILTER_OPTION_VALUE_TYPE = 'data-zs-filter-option-value-type'; 37var DATA_FILTER_OPTION_VALUE_ID = 'data-zs-filter-option-value-id'; 38var DATA_FILTER_OPTION_GROUP_ID = 'data-zs-filter-option-group-id'; 39var DATA_FILTER_OPTION_VALUE_DATA = 'data-zs-filter-option-value-data'; 40var DATA_FILTER_OPTION_VALUE_FORMATTED = 'data-zs-filter-option-value-formatted'; 41var DATA_FILTER_OPTION_VALUE_PRICE_FORMATTED = 'data-zs-filter-option-value-price-formatted'; 42var DATA_FILTER_OPTION_VALUE_PRICE_MIN = 'data-zs-filter-option-value-price-min'; 43var DATA_FILTER_OPTION_VALUE_PRICE_MAX = 'data-zs-filter-option-value-price-max'; 44var DATA_FILTER_OPTION_PRICE_CUSTOM_CONTAINER = 'data-zs-filter-option-price-custom-container'; 45var DATA_FILTER_OPTION_PRICE_CUSTOM_MIN_ELM = 'data-zs-filter-option-price-custom-min-elm'; 46var DATA_FILTER_OPTION_PRICE_CUSTOM_MAX_ELM = 'data-zs-filter-option-price-custom-max-elm'; 47var DATA_FILTER_OPTION_PRICE_CUSTOM_SEPARATOR = 'data-zs-filter-option-price-custom-separator'; 48var DATA_FILTER_OPTION_PRICE_CUSTOM_MIN_BOX = 'data-zs-filter-option-price-custom-min-box'; 49var DATA_FILTER_OPTION_PRICE_CUSTOM_MAX_BOX = 'data-zs-filter-option-price-custom-max-box'; 50var DATA_FILTER_OPTION_PRICE_CUSTOM_BTN = 'data-zs-filter-option-price-custom-btn'; 51var DATA_FILTER_OPTION_PRICE_CUSTOM_ERROR_CONTAINER = 'data-zs-filter-option-price-custom-error-container'; 52var DATA_FILTER_OPTION_BRAND_NAME = 'data-zs-filter-option-brand-name'; 53var DATA_FILTER_OPTION_SEARCH_BRAND = 'data-zs-filter-option-search-brand'; 54var DATA_FILTER_OPTION_SEARCH_BRAND_CONTAINER = 'data-zs-filter-option-search-brand-container'; 55var DATA_FILTER_OPTION_BRAND_HIDDEN_SEARCH_MATCHED = 'data-zs-filter-option-brand-hidden-search-matched'; 56var DATA_FILTER_OPTION_SEARCH_BRAND_RESULT = 'data-zs-filter-option-search-brand-result'; 57var DATA_FILTER_OPTION_SHOW_MORE_BTN = 'data-zs-filter-option-showmore-btn'; 58var DATA_FILTER_OPTION_SHOW_LESS_BTN = 'data-zs-filter-option-showless-btn'; 59var DATA_SELECTED_FILTERS_CONTAINER = 'data-zs-selected-filters-conatainer'; 60var DATA_FILTER_REFINE_BY_CONTAINER = 'data-zs-filter-refineby-container'; 61var DATA_FILTER_REFINE_BY_CLEAR_BTN = 'data-zs-filter-refineby-clear-btn'; 62var DATA_SELECTED_FILTER_SYNTAX = 'data-zs-selected-filter-syntax'; 63var DATA_SELECTED_FILTER = 'data-zs-selected-filter'; 64var DATA_SELECTED_FILTER_GROUP_ID = 'data-zs-selected-filter-group-id'; 65var DATA_SELECTED_FILTER_VALUE = 'data-zs-selected-filter-value';
66var DATA_SELECTED_FILTER_TYPE = 'data-zs-selected-filter-type'; 67var DATA_SELECTED_FILTER_TEXT_CONTAINER = 'data-zs-selected-filter-text-container'; 68var DATA_SELECTED_FILTER_TEXT = 'data-zs-selected-filter-text'; 69var DATA_SELECTED_FILTER_COLOR_CONTAINER = 'data-zs-selected-filter-color-container'; 70var DATA_SELECTED_FILTER_COLOR = 'data-zs-selected-filter-color'; 71var DATA_SELECTED_FILTER_COLOR_NAME = 'data-zs-selected-filter-color-name'; 72var DATA_SELECTED_FILTER_USER_RATINGS_CONTAINER = 'data-zs-selected-filter-userratings-container'; 73var DATA_SELECTED_FILTER_USER_RATINGS = 'data-zs-selected-filter-userratings'; 74var DATA_SELECTED_FILTER_PRICE_CONTAINER = 'data-zs-selected-filter-price-container'; 75//var DATA_SELECTED_FILTER_PRICE = 'data-zs-selected-filter-price'; 76var DATA_SELECTED_FILTER_PRICE_MIN = 'data-zs-selected-filter-price-min'; 77var DATA_SELECTED_FILTER_PRICE_MAX = 'data-zs-selected-filter-price-max'; 78var DATA_SELECTED_FILTER_PRICE_SEPARATOR = 'data-zs-selected-filter-price-separator'; 79var DATA_SEARCH_ON_ALWAYS = 'data-search-on-always'; // No I18N 80 81/* CONSTANTS FOR MEESAGES/VALUES */ 82var FILTER_PRICE_MAX_LESSTHAN_MIN_ERROR = ""; 83var FILTER_PRICE_EMPTY_ERROR = ""; 84var FILTER_PRICE_INVALID_ERROR = ""; 85var STORE_CURRENCY_META = "store_currency_meta"; 86var SEARCH_TERM_IN_CATEGORY = "search_term_in_category"; 87var MAX_LAZY_COUNT = 2; 88var FILTER_TYPE = { 89 CATEGORY : "1", 90 PRICE : "2", 91 USER_RATINGS : "3", 92 COLOR : "4", 93 ATTRIBUTES : "5", 94 SPECIFICATION : "6", 95 CUSTOM_FIELD : "7", 96 BRAND : "8", 97 TAGS : "9", 98 SEARCH_TERM : "10" 99} 100var EVENT_TYPE = { 101 CLICK : "click", 102 CHANGE : "change", 103 SCROLL : "scroll", 104 KEY_DOWN : "keydown", 105 PRODUCTS_LIST_SUCCESS : "zs-event-get-products-list-success" 106} 107var INSERT_TYPE = { 108 APPEND : "append", 109 INNER_HTML : "innerHTML" 110} 111var TAG_NAME = { 112 SELECT : "SELECT" 113} 114 115var api_requested = false; 116var lazy_load_count; 117 118function toggleFilterValue(elem) { 119 const isChecked = elem.getAttribute('aria-checked') === 'true'; 120 elem.setAttribute('aria-checked', !isChecked); 121 let inputElem = elem.parentElement.querySelector('input'); 122 inputElem.click(); 123} 124 125function showFilterSearch(elem) { 126 let filter = elem.closest('[data-zs-filter-option-container]');// No I18N 127 if (filter) { 128 let search = filter.querySelector('.theme-product-filter-search'); 129 if (search) { 130 filter.classList.toggle('theme-product-filter-search-open');// No I18N 131 if (filter.classList.contains('theme-product-filter-search-open')) { 132 setTimeout(() => { 133 search.querySelector('[data-zs-filter-option-search-brand]').focus(); 134 }, 300); 135 document.addEventListener('click', handleFilterSearchOutsideClick); 136 } else { 137 document.removeEventListener('click', handleFilterSearchOutsideClick); 138 } 139 } 140 } 141 142 function handleFilterSearchOutsideClick(event) { 143 if (!filter.contains(event.target) && !elem.contains(event.target)) { 144 filter.classList.remove('theme-product-filter-search-open');// No I18N 145 document.removeEventListener('click', handleFilterSearchOutsideClick); 146 } 147 } 148} 149 150function initSortByPorducts() { 151 lazy_load_count = 0; 152 bindSortByProducts(); 153 bindPagination(); 154 bindProductFilters(); 155 loadFilterErrorMessagesFromFace(); 156 selectFilterOptionsFromURLParams(true, true); 157 toggleFilterOptions(); 158 bindShowMoreLessHandlers(); 159 selectAttributeOnLoad(); 160 setAttrOptionImages(); 161 162} 163 164function bindSortByProducts() { 165 var sortByDD = document.querySelectorAll(SORT_BY_PLACEHOLDER); 166 if(sortByDD.length == 0){ 167 return; 168 } 169 sortByDD.forEach(function(sortByDDItem){ 170 if(sortByDDItem && sortByDDItem.tagName === TAG_NAME.SELECT) { 171 sortByDDItem.addEventListener(EVENT_TYPE.CHANGE, changeSortByProducts, false); 172 } else { 173 sortByDDItem.forEach(function(sort_by) { 174 sort_by.addEventListener(EVENT_TYPE.CLICK, clickSortByProducts, false); 175 }); 176 } 177 }); 178} 179 180function bindPagination() { 181 var scroll_area = document.querySelector('[' + DATA_LAZY_LOAD + ']'); 182 if(scroll_area) { 183 if('IntersectionObserver' in window) { 184 var options = { 185 root : null, 186 rootMargin : '0px', 187 threshold : 0.2 188 }; 189 var observer = new IntersectionObserver(lazyLoadCallBack, options); 190 observer.observe(scroll_area); 191 } else { 192 document.removeEventListener(EVENT_TYPE.SCROLL, onSrollLazyLoad, false); 193 document.addEventListener(EVENT_TYPE.SCROLL, onSrollLazyLoad, false); 194 } 195 196 } else { 197 var more_product = document.querySelector('[' + DATA_MORE_PRODUCT + ']'); 198 if(!more_product) { 199 return; 200 } 201 more_product.addEventListener(EVENT_TYPE.CLICK, loadMoreProduct, false); 202 } 203 204} 205 206function onSrollLazyLoad() { 207 var scroll_area = document.querySelector('[' + DATA_LAZY_LOAD + ']'); 208 if(scroll_area && isElementInViewport(scroll_area)) { 209 fnLazyLoad(scroll_area); 210 } 211} 212 213function isElementInViewport (el) { 214 var scroll = window.pageYOffset || document.documentElement.scrollTop 215 return scroll > el.offsetTop - window.innerHeight/2; 216} 217function syncSelectedFilters(filterBar) { 218 const selectedFilterInSlider = document.querySelectorAll('.theme-filter-slider-overlay [' + DATA_FILTER_OPTION_VALUE + ']:checked'); 219 const filterBarOptionValue = filterBar.querySelectorAll('[' + DATA_FILTER_OPTION_VALUE + ']'); 220 221 selectedFilterInSlider.forEach((filterValue) => { 222 const filterID = filterValue.getAttribute(DATA_FILTER_OPTION_VALUE_ID); 223 224 const filterOptionValue = Array.from(filterBarOptionValue).find((filter_option_value) => { 225 return filter_option_value.getAttribute(DATA_FILTER_OPTION_VALUE_ID) === filterID; 226 }); 227 228 if (filterOptionValue) { 229 if (filterOptionValue.type === 'checkbox') { 230 filterOptionValue.checked = filterValue.checked; 231 232 const filter_option_clear = filterOptionValue.closest('[' + DATA_FILTER_OPTION_VALUES_WRAPPER + ']').querySelector('[' + DATA_FILTER_OPTION_CLEAR + ']'); 233 234 if (filterOptionValue.checked && filter_option_clear) { 235 filter_option_clear.style.display = 'block'; 236 } 237 } 238 } 239 }); 240} 241 242function collapseFilters(filterBar) { 243 let activeFilters = filterBar.querySelectorAll('.zpfilter-active');
244 activeFilters.forEach((activeFilter) => { 245 activeFilter.classList.remove('zpfilter-active'); // No I18N 246 }); 247} 248 249function toggleFilterOptions() { 250 let filterBar = document.querySelector('.theme-category-filter-bar'); 251 if(filterBar) { 252 let filterBarOptions = filterBar.querySelectorAll('[' + DATA_FILTER_OPTION_CONTAINER + ']'); 253 if(filterBarOptions) { 254 filterBarOptions.forEach((filter) => { 255 if (!filter.hasAttribute('data-listener-attached')) { 256 filter.addEventListener('click', function () { 257 if (filter.classList.contains('zpfilter-active')) { 258 filter.classList.remove('zpfilter-active'); // No I18N 259 } else { 260 collapseFilters(filterBar); 261 filter.classList.add('zpfilter-active'); // No I18N 262 } 263 }); 264 filter.setAttribute('data-listener-attached', 'true'); 265 } 266 }); 267 } 268 syncSelectedFilters(filterBar); 269 } 270} 271 272function bindShowMoreLessHandlers() { 273 let showMoreLessBtns = document.querySelectorAll(".theme-category-filter-bar [data-zs-filter-option-showmore-btn], .theme-category-filter-bar [data-zs-filter-option-showless-btn]"); 274 showMoreLessBtns.forEach(btn => { 275 btn.addEventListener("click", () => {
276 let container = btn.closest("[data-zs-filter-option-container]"); // No I18N 277 if (container) { 278 container.classList.toggle("zpfilter-active"); // No I18N 279 } 280 }); 281}); 282} 283 284function lazyLoadCallBack(entries, observer) { 285 entries.forEach( function(entry) { 286 if(entry.isIntersecting) { 287 var target_element = entry.target; 288 if(target_element == null) { 289 return; 290 } 291 fnLazyLoad(target_element); 292 } 293 }); 294} 295 296function fnLazyLoad(lazy_load_element) { 297 var current_page = parseInt(lazy_load_element.getAttribute('data-current-page-number')); 298 current_page++; 299 300 var params = { 301 page_number : current_page 302 } 303 304 var sortByDD = document.querySelectorAll(SORT_BY_PLACEHOLDER); 305 if(sortByDD.length > 0) { 306 var clickSortByProducts = document.querySelector('[data-sort-by-products][data-selected]'); 307 if(clickSortByProducts) { 308 params.sort_by = clickSortByProducts.getAttribute('data-sort-by-val'); 309 } else { 310 if(sortByDD[0] && sortByDD[0].value != "") { 311 params.sort_by = sortByDD[0].value; 312 } 313 } 314 } 315 setProductFilterParams(params, false, false); 316 317 if(api_requested) { 318 return; 319 } 320 api_requested = true 321 lazy_load_count++; 322 params.send_facet = false; 323 loadProducts(params, INSERT_TYPE.APPEND); 324} 325 326function showBlurLoading(element) { 327 if(element) { 328 addClass(element, THEME_BLUR_LOADING); 329 } 330} 331 332function changeSortByProducts() { 333 // Show blur loading 334 var blurEl = document.querySelector(SORT_BY_TARGET); 335 showBlurLoading(blurEl); 336 337 var params = { 338 sort_by : this.value 339 }; 340 setProductFilterParams(params, false, true); 341 342 params.send_facet = false; 343 loadProducts(params, INSERT_TYPE.INNER_HTML); 344} 345 346function clickSortByProducts(e) { 347 var elem = e.target; 348 var params = { 349 sort_by : elem.getAttribute(DATA_SORT_BY_VALUE) 350 }; 351 setProductFilterParams(params, false, true); 352 var sortByDD = document.querySelectorAll(SORT_BY_PLACEHOLDER); 353 sortByDD.forEach(function(sort_by) { 354 sort_by.removeAttribute(DATA_SELECTED); 355 removeClass(sort_by, THEME_ACTIVE_SORT_BY); 356 }) 357 elem.setAttribute(DATA_SELECTED, 'true'); 358 addClass(elem, THEME_ACTIVE_SORT_BY); 359 360 params.send_facet = false; 361 loadProducts(params, INSERT_TYPE.INNER_HTML); 362} 363 364function loadMoreProduct() { 365 366 if(api_requested) { 367 return; 368 } 369 api_requested = true; 370 371 var current_page = parseInt(this.getAttribute('data-current-page-number')); 372 current_page++; 373 374 var params = { 375 page_number : current_page 376 } 377 378 var sortByDD = document.querySelectorAll(SORT_BY_PLACEHOLDER); 379 if(sortByDD.length > 0) { 380 var clickSortByProducts = document.querySelector('[data-sort-by-products][data-selected]'); 381 if(clickSortByProducts) { 382 params.sort_by = clickSortByProducts.getAttribute('data-sort-by-val'); 383 } else { 384 if(sortByDD[0] && sortByDD[0].value != "") { 385 params.sort_by = sortByDD[0].value; 386 } 387 } 388 } 389 setProductFilterParams(params, false, false); 390 391 params.send_facet = false; 392 loadProducts(params, INSERT_TYPE.APPEND); 393} 394 395function loadProducts(params, insert_type) { 396 sort_by_products.getProducts(params, insert_type); 397} 398 399function showProductCount () { 400 let productCount = document.querySelectorAll(`${SORT_BY_TARGET} [data-zs-product-id]`).length; 401 let displayCount = document.querySelector('.theme-product-count'); 402 if (displayCount) { 403 displayCount.textContent = `( ${productCount} Products Available )`; 404 } 405} 406 407function getProductsResponse(e) { 408 api_requested = false; 409 410 var data = e.detail; 411 var target = document.querySelector(SORT_BY_TARGET); 412 if(!target) { 413 return; 414 } 415 416 //remove load more or lazy load element 417 var lazy_load_elem = document.querySelector('[' + DATA_LAZY_LOAD + ']'); 418 if(lazy_load_elem) { 419 $D.remove(lazy_load_elem); 420 } 421 422 var load_more_elelment = document.querySelector('[' + DATA_MORE_PRODUCT + ']'); 423 if(load_more_elelment) { 424 $D.remove(load_more_elelment); 425 } 426 427 if(data.insert_type === INSERT_TYPE.APPEND) { 428 target.insertAdjacentHTML('beforeend', data.content); 429 //three time lazy load and then convert to load more button 430 if(lazy_load_count >= MAX_LAZY_COUNT) { 431 var lazy_load_elem = document.querySelector('[' + DATA_LAZY_LOAD + ']'); 432 if(lazy_load_elem) { 433 lazy_load_elem.removeAttribute(DATA_LAZY_LOAD); 434 lazy_load_elem.setAttribute(DATA_MORE_PRODUCT, ""); 435 var lazy_load_content = '<span class="zpbutton-wrapper zpbutton zpbutton-type-primary zpbutton-size-md zpbutton-style-none">'+i18n.get("product.pagination.loadmore")+'</span>'; 436 setInnerHTMLForElement(lazy_load_elem, lazy_load_content); 437 } 438 } 439 /* on selection of wishlist at scroll */ 440 if (typeof wishlist != "undefined" && window.zs_wishlist_enabled) {
441 wishlist.init(); 442 } 443 } else if(data.insert_type === INSERT_TYPE.INNER_HTML) { 444 setInnerHTMLForElement(target, data.content); 445 446 /* Hiding Sortby when there is one or no products in the filter result */ 447 448 var filteredProd = target.querySelectorAll('[data-zs-product-id]'); 449 var sortbyWithFilter = document.querySelector(SORT_BY_WITH_FILTER); 450 if(sortbyWithFilter){ 451 sortbyWithFilter.style.display = (filteredProd.length < 2)?"none":"flex"; 452 } 453 454 /* Remove blur loading on product list container */ 455 removeClass(target, THEME_BLUR_LOADING); 456 457 /* If filters response available */ 458 459 var filter_container = document.querySelector('[' + DATA_FILTER_CONTAINER+ ']'); 460 461 var filterContainerOverlay = document.querySelector('[data-theme-product-filter-overlay]'); 462 if(filter_container){ 463 var isFilterContainer = filter_container.classList.contains('theme-mobile-filter-show'); 464 } 465 if(filterContainerOverlay){ 466 var isFilterOverlay = filterContainerOverlay.classList.contains('theme-mobile-filter-overlay-show'); 467 } 468 469 if(data.is_filters && data.is_facet_sent && filter_container) { 470 /* Remove blur loading on filter container */ 471 if(typeof data.filters_content != "undefined") { 472 setInnerHTMLForElement(filter_container, data.filters_content); 473 (data.filters_content == "") ? hideElement(filter_container) : showElement(filter_container); 474 } 475 476 selectFilterOptionsFromURLParams(false, false); 477 removeClass(filter_container, THEME_BLUR_LOADING); 478 479 if(isFilterContainer){ 480 removeClass(filter_container,'theme-mobile-filter-show'); 481 } 482 if(filterContainerOverlay && isFilterOverlay){ 483 removeClass(filterContainerOverlay,'theme-mobile-filter-overlay-show'); 484 } 485 if(isFilterContainer && filterContainerOverlay && isFilterOverlay){ 486 document.getElementsByTagName("body")[0].style.overflow = 'auto'; 487 } 488 } 489 490 lazy_load_count = 0; 491 try { 492 product_review.clearCache(); 493 /* on selection sorting clearing wishlist cache */ 494 if (typeof wishlist != "undefined" && window.zs_wishlist_enabled) { 495 wishlist.clearCache();
496 wishlist.init(); 497 } 498 } catch(e) { 499 } 500 product_list_coupon.clearLoadedIds(); 501 } 502 503 try { 504 cart.productQuickLookAddToCart(target); 505 } catch (e) { 506 } 507 toggleFilterOptions(); 508 bindShowMoreLessHandlers(); 509 product_list_coupon.init(); 510 multi_currency.convertCurrencyPrice(); 511 512 product_option.init(); 513 product_option.resetAddToCart("", document); 514 image_lazy_load.init(); 515 bindPagination(); 516 bindProductFilters(); 517 showProductCount(); 518 selectAttributeOnLoad(); 519 setAttrOptionImages(); 520 productViewBy(); 521} 522 523/* START: Product Filters - Facet Search */ 524 525function isFilterContainerPresent() { 526 /* 527 * Returns true, if filter container available [Filter enabled case] 528 * Returns false, if filter container is not available [Filter disabled/unavailable case] 529 */ 530 var filter_container = document.querySelector('[' + DATA_FILTER_CONTAINER + ']'); 531 if(filter_container) { 532 return true; 533 } 534 return false; 535} 536 537function loadFilterErrorMessagesFromFace() { 538 if(!isFilterContainerPresent()) { 539 return; 540 } 541 /* Get error messages from face */ 542 var filter_error_validation_messages = $D.getById(FILTER_ERROR_VALIDATION_MESSAGES); 543 if(filter_error_validation_messages) { 544 var price_max_less_than_min_error = $D.getById(FILTER_PRICE_MAX_LESSTHAN_MIN_ERROR_CONTAINER); 545 if(price_max_less_than_min_error) { 546 FILTER_PRICE_MAX_LESSTHAN_MIN_ERROR = price_max_less_than_min_error.getAttribute(DATA_ERROR_MESSAGE); 547 } 548 var price_empty_error = $D.getById(FILTER_PRICE_EMPTY_ERROR_CONTAINER); 549 if(price_empty_error) { 550 FILTER_PRICE_EMPTY_ERROR = price_empty_error.getAttribute(DATA_ERROR_MESSAGE); 551 } 552 var price_invalid_error = $D.getById(FILTER_PRICE_INVALID_ERROR_CONTAINER); 553 if(price_invalid_error) { 554 FILTER_PRICE_INVALID_ERROR = price_invalid_error.getAttribute(DATA_ERROR_MESSAGE); 555 } 556 } 557} 558 559window.addEventListener('popstate', (event) => { 560 /* 561 * This section would be executed if browser back or forward is triggered 562 * Clear all selected filter & apply filters present in URL params 563 */ 564 var filter_container = document.querySelector('[' + DATA_FILTER_CONTAINER + ']'); 565 var selected_filters_container = document.querySelector('[' + DATA_SELECTED_FILTERS_CONTAINER + ']'); 566 var selected_filters = selected_filters_container.querySelectorAll('[' + DATA_SELECTED_FILTER + ']'); 567 for(var i=0; i < selected_filters.length; i++) { 568 var selected_filter = selected_filters[i]; 569 selected_filter.remove(); 570 } 571 var filter_refine_by_container = selected_filters_container.querySelector('[' + DATA_FILTER_REFINE_BY_CONTAINER + ']'); 572 hideElement(filter_refine_by_container); 573 hideElement(selected_filters_container); 574 var queryString = window.location.search; 575 (!queryString) ? getProductsBasedOnFilter() : selectFilterOptionsFromURLParams(true, true); 576}); 577 578function bindProductFilters() { 579 if(!isFilterContainerPresent()) { 580 return; 581 } 582 var filter_container = document.querySelector('[' + DATA_FILTER_CONTAINER + ']'); 583 584 /* Bind checkbox & radio of filter options */ 585 var filter_option_values = filter_container.querySelectorAll('[' + DATA_FILTER_OPTION_VALUE + ']'); 586 filter_option_values.forEach(function(filter_option_value) { 587 if(filter_option_value.type == "radio") { 588 filter_option_value.addEventListener(EVENT_TYPE.CHANGE, click
588FilterOptionValue, false); 589 } else { 590 filter_option_value.addEventListener(EVENT_TYPE.CLICK, clickFilterOptionValue, false); 591 } 592 let customCheck = filter_option_value.parentElement.querySelector('.theme-product-filter-custom-check'); 593 if(customCheck){ 594 if(filter_option_value.checked){ 595 customCheck.setAttribute('aria-checked', 'true'); 596 } 597 else { 598 customCheck.setAttribute('aria-checked', 'false'); 599 } 600 } 601 }); 602 /* Bind mobile close overlay */ 603 var filterContainerOverlay = document.querySelector('[data-theme-product-filter-overlay]'); 604 if(filter_container && filterContainerOverlay){ 605 filterContainerOverlay.addEventListener(EVENT_TYPE.CLICK, mobileFilter, false); 606 } 607 608 609 /* Bind anchor element of categories */ 610 var anchor_elms = filter_container.querySelectorAll('[' + DATA_FILTER_OPTION_CATEGORY + ']'); 611 anchor_elms.forEach(function(anchor_elm) { 612 anchor_elm.addEventListener(EVENT_TYPE.CLICK, clickAnchorCategories, false); 613 }); 614 615 /* Bind 'show more' button */ 616 var show_more_btns = filter_container.querySelectorAll('[' + DATA_FILTER_OPTION_SHOW_MORE_BTN + ']'); 617 show_more_btns.forEach(function(show_more_btn) { 618 show_more_btn.addEventListener(EVENT_TYPE.CLICK, clickFilterShowMore, false); 619 }); 620 621 /* Bind 'show less' button */ 622 var show_less_btns = filter_container.querySelectorAll('[' + DATA_FILTER_OPTION_SHOW_LESS_BTN + ']'); 623 show_less_btns.forEach(function(show_less_btn) { 624 show_less_btn.addEventListener(EVENT_TYPE.CLICK, clickFilterShowLess, false); 625 }); 626 627 /* Bind collapse toggle */ 628 var filter_option_names = filter_container.querySelectorAll('[' + DATA_FILTER_OPTION_NAME + ']'); 629 filter_option_names.forEach(function(filter_option_name) { 630 filter_option_name.addEventListener(EVENT_TYPE.CLICK, toggleFilterCollapse, false); 631 }); 632 633 /* Bind 'custom button' - price custom range */ 634 var filter_option_price_custom_btn = filter_container.querySelector('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_BTN + ']'); 635 filter_option_price_custom_btn && filter_option_price_custom_btn.addEventListener(EVENT_TYPE.CLICK, applyCustomPriceFilter, false); 636 637 /* Bind 'clear' of individual filter option containers */ 638 var filter_options_clear = filter_container.querySelectorAll('[' + DATA_FILTER_OPTION_CLEAR + ']'); 639 filter_options_clear.forEach(function(filter_option_clear) { 640 filter_option_clear.addEventListener(EVENT_TYPE.CLICK, clickIndividualFilterClear, false); 641 }); 642 643 /* Bind 'clear all' of refine by */ 644 var filter_refine_by_clear_btn = document.querySelector('[' + DATA_FILTER_REFINE_BY_CLEAR_BTN + ']'); 645 filter_refine_by_clear_btn && filter_refine_by_clear_btn.addEventListener(EVENT_TYPE.CLICK, clickFilterRefineByClear, false); 646 647 /* Hide/Show brand search field */ 648 var brand_search_fields = document.querySelectorAll('[' + DATA_FILTER_OPTION_SEARCH_BRAND + ']'); 649 for(var i=0; i< brand_search_fields.length; i++) { 650 var brand_search_field = brand_search_fields[i]; 651 var brand_filter_container = brand_search_field.closest('[' + DATA_FILTER_OPTION_CONTAINER + ']'); 652 var brand_filter_show_more = brand_filter_container.querySelector('[' + DATA_FILTER_OPTION_SHOW_MORE_BTN + ']'); 653 var brand_search_container = brand_filter_container.querySelector('[' + DATA_FILTER_OPTION_SEARCH_BRAND_CONTAINER + ']'); 654 var filter_with_search = brand_filter_container.querySelector('[' + DATA_SEARCH_ON_ALWAYS + ']'); 655 if(brand_search_container) { 656 (brand_filter_show_more || filter_with_search) ? showElement(brand_search_container) : hideElement(brand_search_container); 657 } 658 } 659} 660 661function closeMobileFilter() { 662 var filterContainer = document.querySelector('[data-zs-filter-container]'); 663 removeClass(filterContainer, 'theme-mobile-filter-show'); 664 removeClass(this, 'theme-mobile-filter-overlay-show'); 665 document.getElementsByTagName("body")[0].style.overflow = 'auto'; 666} 667 668function clickIndividualFilterClear(e) { 669 /* 670 * 'clear' button click in any of the filter option container 671 * Remove all selected filter option values in that container 672 */ 673 var elem = e.target; 674 var filter_option_container = elem.closest('[' + DATA_FILTER_OPTION_CONTAINER + ']'); 675 var filter_option_value_elms = filter_option_container.querySelectorAll('[' + DATA_FILTER_OPTION_VALUE + ']'); 676 for(var i=0; i < filter_option_value_elms.length; i++) { 677 var filter_option_value_elm = filter_option_value_elms[i]; 678 if(filter_option_value_elm.checked) { 679 filter_option_value_elm.checked = false;
680 removeFromSelectedFilters(filter_option_value_elm, false); 681 } 682 } 683 getProductsBasedOnFilter(); 684} 685 686function clickFilterRefineByClear(e) { 687 /* 688 * 'clear all' button click of refine by 689 * Remove all selected filter containers 690 * Uncheck/Unselect the filter option value elements 691 */ 692 var filter_container = document.querySelector('[' + DATA_FILTER_CONTAINER + ']'); 693 var selected_filters_container = document.querySelector('[' + DATA_SELECTED_FILTERS_CONTAINER + ']'); 694 var selected_filters = selected_filters_container.querySelectorAll('[' + DATA_SELECTED_FILTER + ']'); 695 for(var i=0; i < selected_filters.length; i++) { 696 var selected_filter = selected_filters[i]; 697 var selected_filter_option_value_id = selected_filter.getAttribute(DATA_SELECTED_FILTER); 698 var selected_filter_option_value_elm = filter_container.querySelector('[' + DATA_FILTER_OPTION_VALUE_ID + '="' + selected_filter_option_value_id + '"]'); 699 if(selected_filter_option_value_elm) { 700 selected_filter_option_value_elm.checked = false; 701 } 702 selected_filter.remove(); 703 } 704 getProductsBasedOnFilter(); 705} 706 707function clickAnchorCategories(e) { 708 /* 709 * anchor element click on any of the categories listed 710 * Check whether current page is a search page 711 * If yes, then navigate to data-href along with search term and selected filters 712 * else just navigate to data-href 713 */ 714 var elem = e.target; 715 var filter_option_category_elm = elem.closest('[' +DATA_FILTER_OPTION_CATEGORY + ']'); 716 if(!filter_option_category_elm) { return; } 717 var href = filter_option_category_elm.getAttribute(DATA_HREF); 718 if(window.zs_view == "search-products") { 719 var filters_query_URL = ""; 720 var product_filter_key = "pf="; 721 var encoded_product_filter_key = encodeURI(product_filter_key); 722 var query_string = window.location.search; 723 if(query_string && query_string!="") { 724 // Handling to resolve the case: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#preserving_plus_signs 725 query_string = query_string.replaceAll('+', '%2B'); 726 var url_params = new URLSearchParams(query_string); 727 var search_term = url_params.get("q"); 728 if(search_term) { 729 filters_query_URL = "?"+SEARCH_TERM_IN_CATEGORY+"=" + search_term; 730 } 731 var product_filters = url_params.getAll("pf"); 732 for(var i=0; i < product_filters.length; i++) { 733 var product_filter_value = encodeURIComponent(product_filters[i]); 734 filters_query_URL = filters_query_URL + ((!search_term && i == 0) ? "?" : "&") + encoded_product_filter_key + product_filter_value; 735 } 736 } 737 href = href + filters_query_URL; 738 window.location.href = href; 739 } else { 740 window.location.href = href; 741 } 742} 743 744function clickFilterShowMore(e) { 745 /* 746 * 'show more' button click on any of the filter conatiner 747 * Display hidden filter option value elements 748 * Display 'show less' button 749 */ 750 var elem = e.target; 751 var filter_option_container = elem.closest('[' + DATA_FILTER_OPTION_CONTAINER + ']'); 752 var filter_option_type = filter_option_container.getAttribute(DATA_FILTER_OPTION_TYPE); 753 var filter_option_value_containers = filter_option_container.querySelectorAll('[' + DATA_FILTER_OPTION_VALUE_CONTAINER + ']'); 754 for(var i=0; i < filter_option_value_containers.length; i++) { 755 var filter_option_value_container = filter_option_value_containers[i]; 756 if(filter_option_type == FILTER_TYPE.BRAND) { 757 filter_option_value_container.hasAttribute(DATA_FILTER_OPTION_BRAND_HIDDEN_SEARCH_MATCHED) && showElement(filter_option_value_container); 758 } else if(filter_option_type == FILTER_TYPE.PRICE) { 759 if(filter_option_value_container.hasAttribute(DATA_FILTER_OPTION_PRICE_CUSTOM_CONTAINER)) { 760 var filter_option_value_elm = filter_option_value_container.querySelector('[' + DATA_FILTER_OPTION_VALUE + ']'); 761 var filter_option_value_data = (filter_option_value_elm) ? filter_option_value_elm.getAttribute(DATA_FILTER_OPTION_VALUE_DATA) : ""; 762 (filter_option_value_data != "") && showElement(filter_option_value_container); 763 } else { 764 showElement(filter_option_value_container); 765 } 766 } else { 767 showElement(filter_option_value_container); 768 } 769 } 770 var show_more_btn = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_SHOW_MORE_BTN + ']'); 771 hideElement(show_more_btn); 772 var show_less_btn = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_SHOW_LESS_BTN + ']'); 773 showElement(show_less_btn); 774} 775 776function clickFilterShowLess(e) { 777 /* 778 * 'show less' button click on any of the filter conatiner 779 * Hide filter option value elements based on the configuration 780 * Display 'show more' button 781 */ 782 var elem = e.target; 783 var filter_option_container = elem.closest('[' + DATA_FILTER_OPTION_CONTAINER + ']'); 784 var default_value_to_show = filter_option_container.getAttribute(DATA_FILTER_OPTION_DEFAULT_VALUE_TO_SHOW); 785 var filter_option_type = filter_option_container.getAttribute(DATA_FILTER_OPTION_TYPE); 786 var filter_option_value_containers = filter_option_container.querySelectorAll('[' + DATA_FILTER_OPTION_VALUE_CONTAINER + ']'); 787 for(var i=0; i < filter_option_value_containers.length; i++) { 788 var filter_option_value_container = filter_option_value_containers[i]; 789 if(filter_option_type == FILTER_TYPE.BRAND) { 790 filter_option_value_container.hasAttribute(DATA_FILTER_OPTION_BRAND_HIDDEN_SEARCH_MATCHED) && hideElement(filter_option_value_container); 791 } else if(i > default_value_to_show-1) { 792 !filter_option_value_container.hasAttribute(DATA_FILTER_OPTION_PRICE_CUSTOM_CONTAINER) && hideElement(filter_option_value_container); 793 } 794 } 795 var show_more_btn = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_SHOW_MORE_BTN + ']'); 796 showElement(show_more_btn); 797 var show_less_btn = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_SHOW_LESS_BTN + ']'); 798 hideElement(show_less_btn); 799} 800 801function toggleFilterCollapse(e) { 802 /* 803 * Contianer show/hide toggle click on any of the filter container 804 * Either show or hide that particular filter container based on toggle value 805 */ 806 var elem = e.target; 807 var filter_option_container = elem.closest('[' + DATA_FILTER_OPTION_CONTAINER + ']'); 808 var filter_option_values_wrapper = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_VALUES_WRAPPER + ']'); 809 var filter_option_toggle = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_NAME + ']'); 810 if(filter_option_values_wrapper && filter_option_values_wrapper.style.display == "none"){ 811 showElement(filter_option_values_wrapper); 812 removeClass(filter_option_toggle,'theme-filter-expand-toggle'); 813 addClass(filter_option_toggle,'theme-filter-close-toggle'); 814 }else{ 815 hideElement(filter_option_values_wrapper); 816 addClass(filter_option_toggle,'theme-filter-expand-toggle'); 817 removeClass(filter_option_toggle,'theme-filter-close-toggle'); 818 } 819 // (filter_option_values_wrapper && filter_option_values_wrapper.style.display == "none") ? showElement(filter_option_values_wrapper) : hideElement(filter_option_values_wrapper) ; 820} 821 822function applyCustomPriceFilter(e) { 823 /* 824 * 'Apply' button click on Price filter container 825 * Fetch min and max range values from the custom box & filter based on that price 826 */ 827 e.preventDefault(); 828 var elem = e.target; 829 var is_custom_price_needed = false;
830 var filter_option_container = elem.closest('[' + DATA_FILTER_OPTION_CONTAINER + ']'); 831 var price_custom_error_container = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_ERROR_CONTAINER + ']'); 832 var price_custom_min_box = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_MIN_BOX + ']'); 833 var price_custom_max_box = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_MAX_BOX + ']'); 834 835 if(isNaN(price_custom_min_box.value) || isNaN(price_custom_max_box.value)) { 836 setInnerHTMLForElement(price_custom_error_container, FILTER_PRICE_INVALID_ERROR); 837 price_custom_error_container && showElement(price_custom_error_container); 838 return; 839 } 840 841 var price_from = Number(price_custom_min_box.value); 842 var price_to = Number(price_custom_max_box.value); 843 if(price_to==0 && price_from==0) { 844 setInnerHTMLForElement(price_custom_error_container, FILTER_PRICE_EMPTY_ERROR); 845 price_custom_error_container && showElement(price_custom_error_container); 846 return; 847 } else if((price_to <= price_from) && price_to!=0) { 848 setInnerHTMLForElement(price_custom_error_container, FILTER_PRICE_MAX_LESSTHAN_MIN_ERROR); 849 price_custom_error_container && showElement(price_custom_error_container); 850 return; 851 } else { 852 is_custom_price_needed = true; 853 var filter_option_value_containers = filter_option_container.querySelectorAll('[' + DATA_FILTER_OPTION_VALUE_CONTAINER + ']'); 854 for(var i=0; i < filter_option_value_containers.length; i++) { 855 var filter_option_value_container = filter_option_value_containers[i]; 856 var filter_option_value_elm = filter_option_value_container.querySelector('[' + DATA_FILTER_OPTION_VALUE + ']'); 857 var filter_option_value_data = filter_option_value_elm.getAttribute(DATA_FILTER_OPTION_VALUE_DATA); 858 if(filter_option_value_data) { 859 var filter_option_value_price_data = filter_option_value_data.split("_"); 860 var filter_option_value_price_from = Number(filter_option_value_price_data[0]); 861 var filter_option_value_price_to = Number(filter_option_value_price_data[1]); 862 if(filter_option_value_price_from==price_from && filter_option_value_price_to==price_to) { 863 is_custom_price_needed = false; 864 filter_option_value_elm.click(); 865 break; 866 } 867 } 868 } 869 } 870 if(is_custom_price_needed) { 871 var filter_option_price_custom_container = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_CONTAINER + ']'); 872 setCustomPriceDataInCustomContainer(filter_option_price_custom_container, price_from, price_to, true); 873 } 874} 875 876function searchBrands(elem) { 877 /* 878 * 'key down' on search field of brand filter container 879 * Show brand filter options based on search term, and hide rest 880 * If no filter option matches, then show respective message 881 */ 882 //var elem = e.target; 883 var brand_search_text = elem.value; 884 brand_search_text = brand_search_text.trim().toLowerCase(); 885 var filter_option_container = elem.closest('[' + DATA_FILTER_OPTION_CONTAINER + ']'); 886 var default_value_to_show = filter_option_container.getAttribute(DATA_FILTER_OPTION_DEFAULT_VALUE_TO_SHOW); 887 var filter_option_value_containers = filter_option_container.querySelectorAll('[' + DATA_FILTER_OPTION_VALUE_CONTAINER + ']'); 888 var show_count = 0; 889 var matched_count = 0; 890 for(var i=0; i < filter_option_value_containers.length; i++) { 891 var filter_option_value_container = filter_option_value_containers[i]; 892 var brand_name = filter_option_value_container.getAttribute(DATA_FILTER_OPTION_BRAND_NAME); 893 if(brand_name) { 894 brand_name = brand_name.toLowerCase(); 895 if(brand_name.includes(brand_search_text)) { 896 matched_count++; 897 if(show_count >= default_value_to_show) { 898 hideElement(filter_option_value_container); 899 filter_option_value_container.setAttribute(DATA_FILTER_OPTION_BRAND_HIDDEN_SEARCH_MATCHED, ""); 900 } else { 901 showElement(filter_option_value_container); 902 filter_option_value_container.removeAttribute(DATA_FILTER_OPTION_BRAND_HIDDEN_SEARCH_MATCHED); 903 show_count++; 904 } 905 } else { 906 hideElement(filter_option_value_container); 907 filter_option_value_container.removeAttribute(DATA_FILTER_OPTION_BRAND_HIDDEN_SEARCH_MATCHED); 908 } 909 } 910 } 911 var brand_result_error_elm = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_SEARCH_BRAND_RESULT + ']'); 912 (show_count == 0) ? showElement(brand_result_error_elm) : hideElement(brand_result_error_elm); 913 var show_more_btn = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_SHOW_MORE_BTN + ']'); 914 (matched_count <= default_value_to_show) ? hideElement(show_more_btn) : showElement(show_more_btn); 915 var show_less_btn = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_SHOW_LESS_BTN + ']'); 916 hideElement(show_less_btn); 917} 918 919function getFormattedCurrency(value, currency_code) { 920 var locale = navigator.language || navigator.browserLanguage || navigator.languages[0] || 'en'; 921 return new Intl.NumberFormat(locale, { 922 style : 'decimal', 923 currency : currency_code, 924 maximumFractionDigits:2, 925 minimumFractionDigits:2 926 }).format(value); 927} 928 929function setFormattedCurrencyForElement(currency_data, element) { 930 if(!element) { 931 return; 932 } 933 var element_price = element.getAttribute(DATA_SELLING_PRICE); 934 if(element_price && element_price != "") { 935 element.innerText = currency_data.symbol_formatted + getFormattedCurrency(element_price, currency_data.code); 936 } 937} 938 939function constructFormattedCurrencyForCustomPrice() { 940 $X.get({ 941 url: '/api/store-meta', // No I18N 942 handler: function () { 943 var response = JSON.parse(this.responseText); 944 if(response.status_code === '0') { 945 var payload = response.payload; 946 var currency_data = payload.currency; 947 if(currency_data) { 948 var filter_option_price_custom_min_elm_list = document.querySelectorAll('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_MIN_ELM + ']'); 949 var filter_option_price_custom_max_elm_list = document.querySelectorAll('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_MAX_ELM + ']'); 950 for(var i=0; i<filter_option_price_custom_min_elm_list.length; i++) { 951 filter_option_price_custom_min_elm = filter_option_price_custom_min_elm_list[i]; 952 filter_option_price_custom_max_elm = filter_option_price_custom_max_elm_list[i]; 953 var price_custom_container = filter_option_price_custom_min_elm.closest('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_CONTAINER + ']'); 954 var price_custom_element = price_custom_container.querySelector('[' + DATA_FILTER_OPTION_VALUE_ID + ']'); 955 var filter_option_value_id = price_custom_element.getAttribute(DATA_FILTER_OPTION_VALUE_ID); 956 var filter_option_value_data = price_custom_element.getAttribute(DATA_FILTER_OPTION_VALUE_DATA); 957 if(filter_option_value_data != "") { 958 setFormattedCurrencyForElement(currency_data, filter_option_price_custom_min_elm); 959 setFormattedCurrencyForElement(currency_data, filter_option_price_custom_max_elm); 960 var selected_filters_container = document.querySelector('[' + DATA_SELECTED_FILTERS_CONTAINER + ']'); 961 var selected_filter_option_value_elm = selected_filters_container.querySelector('[' + DATA_SELECTED_FILTER + '="' + filter_option_value_id + '"]'); 962 var selected_filter_option_price_custom_min_elm = selected_filter_option_value_elm.querySelector('[' + DATA_SELECTED_FILTER_PRICE_MIN + ']'); 963 var selected_filter_option_price_custom_max_elm = selected_filter_option_value_elm.querySelector('[' + DATA_SELECTED_FILTER_PRICE_MAX + ']'); 964 setFormattedCurrencyForElement(currency_data, selected_filter_option_price_custom_min_elm); 965 setFormattedCurrencyForElement(currency_data, selected_filter_option_price_custom_max_elm); 966 } 967 } 968 if(filter_option_price_custom_min_elm_list.length == 0) { 969 var queryString = window.location.search; 970 if(!queryString) { 971 return; 972 } 973 // Handling to resolve the case: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#preserving_plus_signs 974 queryString = queryString.replaceAll('+', '%2B');
975 var urlParams = new URLSearchParams(queryString); 976 var product_filters = urlParams.getAll("pf"); 977 if(product_filters.length == 0) { 978 return; 979 } 980 for(var i=0; i < product_filters.length; i++) { 981 var product_filter_value = encodeURIComponent(product_filters[i]); 982 if(product_filter_value.includes("custom_price")) { 983 var selected_filters_container = document.querySelector('[' + DATA_SELECTED_FILTERS_CONTAINER + ']'); 984 var selected_filter_option_value_elm = selected_filters_container.querySelector('[' + DATA_SELECTED_FILTER + '="' + product_filter_value + '"]'); 985 var selected_filter_option_price_custom_min_elm = selected_filter_option_value_elm.querySelector('[' + DATA_SELECTED_FILTER_PRICE_MIN + ']'); 986 var selected_filter_option_price_custom_max_elm = selected_filter_option_value_elm.querySelector('[' + DATA_SELECTED_FILTER_PRICE_MAX + ']'); 987 setFormattedCurrencyForElement(currency_data, selected_filter_option_price_custom_min_elm); 988 setFormattedCurrencyForElement(currency_data, selected_filter_option_price_custom_max_elm); 989 } 990 } 991 } 992 } 993 } 994 } 995 }); 996} 997 998function setCurrencyCodeInLocalStorage() { 999 var data = localStorage.getItem(STORE_CURRENCY_META); 1000 if(data) { 1001 var currency_data = JSON.parse(data); 1002 if(!currency_data || currency_data.selected_currency_code) { 1003 return; 1004 } 1005 var first_currency_in_list = document.querySelector('[' + DATA_THEME_CURRENCY_LIST + ']'); 1006 currency_data.selected_currency_code = first_currency_in_list.getAttribute(DATA_CURRENCY_CODE); 1007 localStorage.setItem(STORE_CURRENCY_META, JSON.stringify(currency_data)); 1008 } 1009} 1010 1011function setFormattedCurrencyForCustomPrice() { 1012 /* 1013 * Check whether currency converter dropdown element is present 1014 * If true, then call convertCurrencyPrice() method in multi_currency 1015 * Else manually format the price by getting the org's currency 1016 */ 1017 var currency_converter_elm = document.querySelector('[' + DATA_CURRENCY_LIST + ']'); 1018 if(currency_converter_elm) { 1019 if(typeof multi_currency != "undefined") { 1020 setCurrencyCodeInLocalStorage(); 1021 multi_currency.convertCurrencyPrice(); 1022 return; 1023 } 1024 } 1025 constructFormattedCurrencyForCustomPrice(); 1026} 1027 1028function clickFilterOptionValue(e) { 1029 /* 1030 * Click on any of the filter option element 1031 * If checked/selected, then call method to add that element to selected filter 1032 * Else call method to remove that element from the selected filter 1033 */ 1034 var elem = e.target; 1035 if(elem.checked) { 1036 addToSelectedFilters(elem, true); 1037 let customCheck = elem.parentElement.querySelector('.theme-product-filter-custom-check'); 1038 if(customCheck) { 1039 customCheck.setAttribute('aria-checked', 'true'); 1040 } 1041 } else { 1042 removeFromSelectedFilters(elem, true); 1043 let customCheck = elem.parentElement.querySelector('.theme-product-filter-custom-check'); 1044 if(customCheck) { 1045 customCheck.setAttribute('aria-checked', 'false'); 1046 } 1047 } 1048} 1049 1050function selectFilterOptionsFromURLParams(set_in_selected_filters, reload_product_list_as_whole) { 1051 var queryString = window.location.search; 1052 if(!isFilterContainerPresent() || !queryString) { 1053 return; 1054 } 1055 // Handling to resolve the case: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#preserving_plus_signs 1056 queryString = queryString.replaceAll('+', '%2B'); 1057 var urlParams = new URLSearchParams(queryString); 1058 var product_filters = urlParams.getAll("pf"); 1059 var search_terms_in_category = urlParams.getAll(SEARCH_TERM_IN_CATEGORY); 1060 if(product_filters.length == 0 && search_terms_in_category.length == 0) { 1061 return; 1062 } 1063 if(search_terms_in_category.length > 0 && set_in_selected_filters) { 1064 var search_term_in_category = urlParams.get(SEARCH_TERM_IN_CATEGORY); 1065 var filter_option_obj = {}; 1066 filter_option_obj.filter_option_value_type = FILTER_TYPE.SEARCH_TERM; 1067 filter_option_obj.filter_option_value_id = SEARCH_TERM_IN_CATEGORY + "_" + search_term_in_category; 1068 filter_option_obj.filter_option_value_data = search_term_in_category; 1069 filter_option_obj.filter_option_value_formatted = search_term_in_category; 1070 addToSelectedFilters(false, false, filter_option_obj); 1071 } 1072 var filter_container = document.querySelector('[' + DATA_FILTER_CONTAINER + ']'); 1073 for(var i=0; i < product_filters.length; i++) { 1074 var product_filter_value = encodeURIComponent(product_filters[i]); 1075 if(product_filter_value.includes("custom_price")) { 1076 var filter_option_price_custom_container = filter_container.querySelector('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_CONTAINER + ']'); 1077 var price_data = product_filter_value.split("_"); 1078 var price_from = Number(price_data[2]); 1079 var price_to = Number(price_data[3]); 1080 setCustomPriceDataInCustomContainer(filter_option_price_custom_container, price_from, price_to, false); 1081 } 1082 var filter_option_value_elm = filter_container.querySelector('[' + DATA_FILTER_OPTION_VALUE_ID + '="' + product_filter_value + '"]'); 1083 if(!filter_option_value_elm) { 1084 continue; 1085 } 1086 var filter_option_values_wrapper = filter_option_value_elm.closest('[' + DATA_FILTER_OPTION_VALUES_WRAPPER + ']'); 1087 filter_option_values_wrapper.style.display = ""; 1088 var filter_option_clear = filter_option_values_wrapper.querySelector('[' + DATA_FILTER_OPTION_CLEAR + ']'); 1089 showElement(filter_option_clear); 1090 var filter_option_value_type = filter_option_value_elm.getAttribute(DATA_FILTER_OPTION_VALUE_TYPE); 1091 filter_option_value_elm.checked = true; 1092 if(filter_option_value_type == FILTER_TYPE.PRICE) { 1093 var filter_option_value_data = filter_option_value_elm.getAttribute(DATA_FILTER_OPTION_VALUE_DATA); 1094 setSelectedPriceInCustomBox(filter_option_value_elm, filter_option_value_data); 1095 } 1096 set_in_selected_filters && addToSelectedFilters(filter_option_value_elm, false); 1097 } 1098 reload_product_list_as_whole ? getProductsBasedOnFilter() : setFormattedCurrencyForCustomPrice(); 1099} 1100 1101function setCustomPriceDataInCustomContainer(filter_option_price_custom_container, price_from, price_to, select_elm) { 1102 if(filter_option_price_custom_container) { 1103 var filter_option_price_custom_min_elm = filter_option_price_custom_container.querySelector('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_MIN_ELM + ']'); 1104 var filter_option_price_custom_max_elm = filter_option_price_custom_container.querySelector('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_MAX_ELM + ']'); 1105 var filter_option_price_custom_separator_elm = filter_option_price_custom_container.querySelector('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_SEPARATOR + ']'); 1106 1107 if(price_from == 0) { 1108 filter_option_price_custom_min_elm && filter_option_price_custom_min_elm.setAttribute(DATA_SELLING_PRICE, price_to); 1109 setInnerHTMLForElement(filter_option_price_custom_min_elm, price_to); 1110 setInnerTextForElement(filter_option_price_custom_separator_elm, ""); 1111 setInnerHTMLForElement(filter_option_price_custom_max_elm, " & " + i18n.get("product_filters.and_below.label")); 1112 filter_option_price_custom_max_elm && filter_option_price_custom_max_elm.removeAttribute(DATA_SELLING_PRICE); 1113 } else if(price_to == 0) { 1114 filter_option_price_custom_min_elm && filter_option_price_custom_min_elm.setAttribute(DATA_SELLING_PRICE, price_from); 1115 setInnerHTMLForElement(filter_option_price_custom_min_elm, price_from); 1116 setInnerTextForElement(filter_option_price_custom_separator_elm, ""); 1117 setInnerHTMLForElement(filter_option_price_custom_max_elm, " & " + i18n.get("product_filters.and_above.label")); 1118 filter_option_price_custom_max_elm && filter_option_price_custom_max_elm.removeAttribute(DATA_SELLING_PRICE); 1119 } else { 1120 filter_option_price_custom_min_elm && filter_option_price_custom_min_elm.setAttribute(DATA_SELLING_PRICE, price_from); 1121 setInnerHTMLForElement(filter_option_price_custom_min_elm, price_from); 1122 filter_option_price_custom_max_elm && filter_option_price_custom_max_elm.setAttribute(DATA_SELLING_PRICE, price_to); 1123 setInnerHTMLForElement(filter_option_price_custom_max_elm, price_to); 1124 setInnerTextForElement(filter_option_price_custom_separator_elm, " - "); 1125 } 1126 1127 var filter_option_value_elm = filter_option_price_custom_container.querySelector('[' + DATA_FILTER_OPTION_VALUE + ']'); 1128 var custom_price_filter_option_value_data = price_from + "_" + price_to; 1129 filter_option_value_elm && filter_option_value_elm.setAttribute(DATA_FILTER_OPTION_VALUE_DATA, custom_price_filter_option_value_data); 1130 var custom_price_filter_option_value_id = "custom_price_" + custom_price_filter_option_value_data; 1131 filter_option_value_elm && filter_option_value_elm.setAttribute(DATA_FILTER_OPTION_VALUE_ID, custom_price_filter_option_value_id); 1132 if(select_elm && filter_option_value_elm) { 1133 filter_option_value_elm.checked = true; 1134 addToSelectedFilters(filter_option_value_elm, true); 1135 } 1136 showElement(filter_option_price_custom_container); 1137 } 1138} 1139 1140function setSelectedPriceInCustomBox(elem, filter_option_value_data) { 1141 var price_data = filter_option_value_data.split("_"); 1142 var price_from = Number(price_data[0]); 1143 var price_to = Number(price_data[1]); 1144 1145 var filter_option_container = elem.closest('[' + DATA_FILTER_OPTION_CONTAINER + ']'); 1146 var price_custom_min_box = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_MIN_BOX + ']'); 1147 price_custom_min_box.value = (price_from != 0) ? price_from : ""; 1148 var price_custom_max_box = filter_option_container.querySelector('[' + DATA_FILTER_OPTION_PRICE_CUSTOM_MAX_BOX + ']'); 1149 price_custom_max_box.value = (price_to != 0) ? price_to : ""; 1150} 1151 1152function addToSelectedFilters(elem, reload_product_list, filter_option_obj) { 1153 /* 1154 * Add that element which is passed in parameter to selected filter 1155 * If type is 'price' or 'user rating' : replace the values if container is already present for each respectively 1156 */ 1157 var filter_option_value_type = ""; 1158 var filter_option_value_id = ""; 1159 var filter_option_value_data = ""; 1160 var filter_option_value_formatted = ""; 1161 1162 if(elem) { 1163 filter_option_value_type = elem.getAttribute(DATA_FILTER_OPTION_VALUE_TYPE); 1164 filter_option_value_id = elem.getAttribute(DATA_FILTER_OPTION_VALUE_ID); 1165 filter_option_value_data = elem.getAttribute(DATA_FILTER_OPTION_VALUE_DATA); 1166 filter_option_value_formatted = elem.getAttribute(DATA_FILTER_OPTION_VALUE_FORMATTED); 1167 } else { 1168 filter_option_value_type = filter_option_obj.filter_option_value_type; 1169 filter_option_value_id = filter_option_obj.filter_option_value_id; 1170 filter_option_value_data = filter_option_obj.filter_option_value_data; 1171 filter_option_value_formatted = filter_option_obj.filter_option_value_formatted; 1172 } 1173 1174 var selected_filter_syntax = document.querySelector('[' + DATA_SELECTED_FILTER_SYNTAX + ']'); 1175 var selected_filters_container = document.querySelector('[' + DATA_SELECTED_FILTERS_CONTAINER + ']'); 1176 1177 if(filter_option_value_type == FILTER_TYPE.PRICE) { 1178 //setSelectedPriceInCustomBox(elem, filter_option_value_data); 1179 var filter_option_value_container = elem.closest('[' + DATA_FILTER_OPTION_VALUE_CONTAINER + ']'); 1180 var filter_option_value_price_formatted = filter_option_value_container.querySelector('[' + DATA_FILTER_OPTION_VALUE_PRICE_FORMATTED + ']'); 1181 var selected_filter_price_container = selected_filters_container.querySelector('[' + DATA_SELECTED_FILTER_PRICE_CONTAINER + ']'); 1182 if(selected_filter_price_container != null) { 1183 // Price container already available 1184 1185 var filter_option_value_price_min_elm = filter_option_value_price_formatted.querySelector('[' + DATA_FILTER_OPTION_VALUE_PRICE_MIN + ']'); 1186 var data_selling_price_min = (filter_option_value_price_min_elm.hasAttribute(DATA_SELLING_PRICE)) ? filter_option_value_price_min_elm.getAttribute(DATA_SELLING_PRICE) : ""; 1187 var selected_filter_price_min = selected_filter_price_container.querySelector('[' + DATA_SELECTED_FILTER_PRICE_MIN + ']'); 1188 setInnerTextForElement(selected_filter_price_min, filter_option_value_price_min_elm.innerText); 1189 selected_filter_price_min.setAttribute(DATA_SELLING_PRICE, data_selling_price_min); 1190 1191 var filter_option_value_price_max_elm = filter_option_value_price_formatted.querySelector('[' + DATA_FILTER_OPTION_VALUE_PRICE_MAX + ']'); 1192 var data_selling_price_max = (filter_option_value_price_max_elm.hasAttribute(DATA_SELLING_PRICE)) ? filter_option_value_price_max_elm.getAttribute(DATA_SELLING_PRICE) : ""; 1193 var selected_filter_price_max = selected_filter_price_container.querySelector('[' + DATA_SELECTED_FILTER_PRICE_MAX + ']'); 1194 setInnerTextForElement(selected_filter_price_max, filter_option_value_price_max_elm.innerText); 1195 1196 var selected_filter_price_separator_elm = selected_filter_price_container.querySelector('[' + DATA_SELECTED_FILTER_PRICE_SEPARATOR + ']'); 1197 if(data_selling_price_max != "") { 1198 showElement(selected_filter_price_separator_elm); 1199 selected_filter_price_max.setAttribute(DATA_SELLING_PRICE, data_selling_price_max); 1200 } else { 1201 hideElement(selected_filter_price_separator_elm); 1202 selected_filter_price_max.removeAttribute(DATA_SELLING_PRICE); 1203 } 1204 1205 selected_filter_price_container.setAttribute(DATA_SELECTED_FILTER, filter_option_value_id); 1206 selected_filter_price_container.setAttribute(DATA_SELECTED_FILTER_VALUE, filter_option_value_data); 1207 1208 } else { 1209 // Add price container syntax 1210 var selected_filter_price_syntax = selected_filter_syntax.querySelector('[' + DATA_SELECTED_FILTER_PRICE_CONTAINER + ']'); 1211 selected_filter_price_container = selected_filter_price_syntax.cloneNode(true); 1212 1213 var filter_option_value_price_min_elm = filter_option_value_price_formatted.querySelector('[' + DATA_FILTER_OPTION_VALUE_PRICE_MIN + ']'); 1214 var data_selling_price_min = (filter_option_value_price_min_elm.hasAttribute(DATA_SELLING_PRICE)) ? filter_option_value_price_min_elm.getAttribute(DATA_SELLING_PRICE) : ""; 1215 var selected_filter_price_min = selected_filter_price_container.querySelector('[' + DATA_SELECTED_FILTER_PRICE_MIN + ']'); 1216 setInnerTextForElement(selected_filter_price_min, filter_option_value_price_min_elm.innerText); 1217 selected_filter_price_min.setAttribute(DATA_SELLING_PRICE, data_selling_price_min); 1218 1219 var filter_option_value_price_max_elm = filter_option_value_price_formatted.querySelector('[' + DATA_FILTER_OPTION_VALUE_PRICE_MAX + ']'); 1220 var data_selling_price_max = (filter_option_value_price_max_elm.hasAttribute(DATA_SELLING_PRICE)) ? filter_option_value_price_max_elm.getAttribute(DATA_SELLING_PRICE) : ""; 1221 var selected_filter_price_max = selected_filter_price_container.querySelector('[' + DATA_SELECTED_FILTER_PRICE_MAX + ']'); 1222 setInnerTextForElement(selected_filter_price_max, filter_option_value_price_max_elm.innerText); 1223 1224 var selected_filter_price_separator_elm = selected_filter_price_container.querySelector('[' + DATA_SELECTED_FILTER_PRICE_SEPARATOR + ']'); 1225 if(data_selling_price_max != "") { 1226 showElement(selected_filter_price_separator_elm); 1227 selected_filter_price_max.setAttribute(DATA_SELLING_PRICE, data_selling_price_max); 1228 } else { 1229 hideElement(selected_filter_price_separator_elm); 1230 selected_filter_price_max.removeAttribute(DATA_SELLING_PRICE); 1231 } 1232 1233 selected_filter_price_container.setAttribute(DATA_SELECTED_FILTER, filter_option_value_id); 1234 selected_filter_price_container.setAttribute(DATA_SELECTED_FILTER_TYPE, filter_option_value_type); 1235 selected_filter_price_container.setAttribute(DATA_SELECTED_FILTER_VALUE, filter_option_value_data); 1236 selected_filters_container.appendChild(selected_filter_price_container); 1237 } 1238 } else if(filter_option_value_type == FILTER_TYPE.USER_RATINGS) { 1239 var selected_filter_user_ratings_container = selected_filters_container.querySelector('[' + DATA_SELECTED_FILTER_USER_RATINGS_CONTAINER + ']'); 1240 if(selected_filter_user_ratings_container != null) { 1241 // User ratings container already available 1242 var selected_filter_user_ratings = selected_filter_user_ratings_container.query
1242Selector('[' + DATA_SELECTED_FILTER_USER_RATINGS + ']'); 1243 setInnerHTMLForElement(selected_filter_user_ratings, filter_option_value_data + "★ & up"); 1244 selected_filter_user_ratings_container.setAttribute(DATA_SELECTED_FILTER, filter_option_value_id); 1245 selected_filter_user_ratings_container.setAttribute(DATA_SELECTED_FILTER_VALUE, filter_option_value_data); 1246 } else { 1247 // Add user ratings container syntax 1248 var selected_filter_user_ratings_syntax = selected_filter_syntax.querySelector('[' + DATA_SELECTED_FILTER_USER_RATINGS_CONTAINER + ']'); 1249 selected_filter_user_ratings_container = selected_filter_user_ratings_syntax.cloneNode(true); 1250 var selected_filter_user_ratings = selected_filter_user_ratings_container.querySelector('[' + DATA_SELECTED_FILTER_USER_RATINGS + ']'); 1251 setInnerHTMLForElement(selected_filter_user_ratings, filter_option_value_data + "★ & up"); 1252 selected_filter_user_ratings_container.setAttribute(DATA_SELECTED_FILTER, filter_option_value_id); 1253 selected_filter_user_ratings_container.setAttribute(DATA_SELECTED_FILTER_VALUE, filter_option_value_data); 1254 selected_filter_user_ratings_container.setAttribute(DATA_SELECTED_FILTER_TYPE, filter_option_value_type); 1255 selected_filters_container.appendChild(selected_filter_user_ratings_container); 1256 } 1257 } else if(filter_option_value_type == FILTER_TYPE.COLOR) { 1258 var color_data = filter_option_value_formatted.split("_"); 1259 var color_name = color_data[0]; 1260 var color_code = color_data[1]; 1261 var selected_filter_color_syntax = selected_filter_syntax.querySelector('[' + DATA_SELECTED_FILTER_COLOR_CONTAINER + ']'); 1262 var selected_filter_color_container = selected_filter_color_syntax.cloneNode(true); 1263 var selected_filter_color = selected_filter_color_container.querySelector('[' + DATA_SELECTED_FILTER_COLOR + ']'); 1264 selected_filter_color.style.background = color_code; 1265 var selected_filter_color_name = selected_filter_color_container.querySelector('[' + DATA_SELECTED_FILTER_COLOR_NAME + ']'); 1266 setInnerTextForElement(selected_filter_color_name, color_name); 1267 selected_filter_color_container.setAttribute(DATA_SELECTED_FILTER, filter_option_value_id); 1268 selected_filter_color_container.setAttribute(DATA_SELECTED_FILTER_VALUE, filter_option_value_data); 1269 selected_filter_color_container.setAttribute(DATA_SELECTED_FILTER_TYPE, filter_option_value_type); 1270 selected_filters_container.appendChild(selected_filter_color_container); 1271 } else { 1272 var selected_filter_text_syntax = selected_filter_syntax.querySelector('[' + DATA_SELECTED_FILTER_TEXT_CONTAINER + ']'); 1273 var selected_filter_text_container = selected_filter_text_syntax.cloneNode(true); 1274 var selected_filter_text = selected_filter_text_container.querySelector('[' + DATA_SELECTED_FILTER_TEXT + ']'); 1275 setInnerTextForElement(selected_filter_text, filter_option_value_formatted); 1276 selected_filter_text_container.setAttribute(DATA_SELECTED_FILTER, filter_option_value_id); 1277 selected_filter_text_container.setAttribute(DATA_SELECTED_FILTER_VALUE, filter_option_value_data); 1278 selected_filter_text_container.setAttribute(DATA_SELECTED_FILTER_TYPE, filter_option_value_type); 1279 if(filter_option_value_type == FILTER_TYPE.ATTRIBUTES || filter_option_value_type == FILTER_TYPE.SPECIFICATION) { 1280 var filter_option_group_id = elem.getAttribute(DATA_FILTER_OPTION_GROUP_ID); 1281 selected_filter_text_container.setAttribute(DATA_SELECTED_FILTER_GROUP_ID, filter_option_group_id); 1282 } 1283 selected_filters_container.appendChild(selected_filter_text_container); 1284 } 1285 (reload_product_list) ? getProductsBasedOnFilter() : toggleRefineBy() ; 1286} 1287 1288function removeFromSelectedFilters(elem, reload_product_list) { 1289 /* 1290 * Remove that element which is passed in parameter from the selected filters 1291 */ 1292 var filter_option_value_id = elem.getAttribute(DATA_FILTER_OPTION_VALUE_ID); 1293 var selected_filters_container = document.querySelector('[' + DATA_SELECTED_FILTERS_CONTAINER + ']'); 1294 var selected_filter = selected_filters_container.querySelector('[' + DATA_SELECTED_FILTER + '="' + filter_option_value_id + '"]'); 1295 selected_filter && selected_filter.remove(); 1296 (reload_product_list) ? getProductsBasedOnFilter() : toggleRefineBy() ; 1297} 1298 1299function unSelectFilterOptionValue(elem) { 1300 /* 1301 * 'X' icon click on any of the selected filter in 'refine by' container 1302 * Call click method for that element which is passed in parameter 1303 */ 1304 var selected_filter_container = elem.closest('[' + DATA_SELECTED_FILTER + ']'); 1305 var filter_option_value_id = selected_filter_container.getAttribute(DATA_SELECTED_FILTER); 1306 var filter_option_value_type = selected_filter_container.getAttribute(DATA_SELECTED_FILTER_TYPE); 1307 var filter_container = document.querySelector('[' + DATA_FILTER_CONTAINER + ']'); 1308 var filter_option_value_elm = filter_container.querySelector('[' + DATA_FILTER_OPTION_VALUE_ID + '="' + filter_option_value_id + '"]'); 1309 if(filter_option_value_elm) { 1310 filter_option_value_elm.checked = false;
1311 } 1312 selected_filter_container.remove(); 1313 getProductsBasedOnFilter(); 1314} 1315 1316function toggleRefineBy() { 1317 /* 1318 * Show/hide 'Refine by' text and 'clear all' button based on toggle value 1319 */ 1320 var selected_filters_container = document.querySelector('[' + DATA_SELECTED_FILTERS_CONTAINER + ']'); 1321 var selected_filters = selected_filters_container.querySelectorAll('[' + DATA_SELECTED_FILTER + ']'); 1322 var filter_refine_by_container = selected_filters_container.querySelector('[' + DATA_FILTER_REFINE_BY_CONTAINER + ']'); 1323 if(selected_filters.length > 0) { 1324 showElement(filter_refine_by_container); 1325 showElement(selected_filters_container); 1326 } else { 1327 hideElement(filter_refine_by_container); 1328 hideElement(selected_filters_container); 1329 } 1330} 1331 1332function setProductFilterParams(params, push_filters_query_URL, scroll_to_top) { 1333 if(!isFilterContainerPresent()) { 1334 return; 1335 } 1336 params.is_filters = true; 1337 1338 var tag_ids = ""; 1339 var brand_ids = ""; 1340 var specification_ids = ""; 1341 var attribute_color_ids = ""; 1342 var attribute_ids = ""; 1343 var price_start = ""; 1344 var price_end = ""; 1345 var price_greater_equals = ""; 1346 var search_term_in_category = ""; 1347 var filters_query_URL = ""; 1348 var product_filter_key = "pf="; 1349 var encoded_product_filter_key = encodeURI(product_filter_key); 1350 var query_string = window.location.search; 1351 // Handling to resolve the case: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#preserving_plus_signs 1352 query_string = query_string.replaceAll('+', '%2B'); 1353 var url_params = new URLSearchParams(query_string); 1354 var search_term = url_params.get("q"); 1355 if(search_term) { 1356 filters_query_URL = "?q=" + search_term; 1357 } 1358 var selected_filters_container = document.querySelector('[' + DATA_SELECTED_FILTERS_CONTAINER + ']'); 1359 var selected_filters = selected_filters_container.querySelectorAll('[' + DATA_SELECTED_FILTER + ']'); 1360 for(var i=0; i < selected_filters.length; i++) { 1361 var selected_filter = selected_filters[i]; 1362 var filter_option_value_type = selected_filter.getAttribute(DATA_SELECTED_FILTER_TYPE); 1363 var filter_option_value = selected_filter.getAttribute(DATA_SELECTED_FILTER_VALUE); 1364 1365 if(push_filters_query_URL) { 1366 var filter_option_value_id = selected_filter.getAttribute(DATA_SELECTED_FILTER); 1367 filters_query_URL = filters_query_URL + ((!search_term && i == 0) ? "?" : "&"); 1368 filters_query_URL = filters_query_URL + ((filter_option_value_type != FILTER_TYPE.SEARCH_TERM) ? (encoded_product_filter_key + filter_option_value_id) : (SEARCH_TERM_IN_CATEGORY + "=" + filter_option_value)); 1369 } 1370 1371 if(filter_option_value_type == FILTER_TYPE.PRICE) { 1372 var price_data = filter_option_value.split("_"); 1373 if(price_data[1] == 0) { 1374 price_greater_equals = price_data[0]; 1375 } else { 1376 price_start = price_data[0]; 1377 price_end = price_data[1]; 1378 } 1379 } else if(filter_option_value_type == FILTER_TYPE.BRAND) { 1380 if(brand_ids != "") { 1381 brand_ids = brand_ids + ","; 1382 } 1383 brand_ids = brand_ids + filter_option_value; 1384 } else if(filter_option_value_type == FILTER_TYPE.TAGS) { 1385 if(tag_ids != "") { 1386 tag_ids = tag_ids + ","; 1387 } 1388 tag_ids = tag_ids + filter_option_value; 1389 } else if(filter_option_value_type == FILTER_TYPE.SEARCH_TERM) { 1390 search_term_in_category = filter_option_value; 1391 } else if(filter_option_value_type == FILTER_TYPE.COLOR) { 1392 if(attribute_color_ids != "") { 1393 attribute_color_ids = attribute_color_ids + ","; 1394 } 1395 attribute_color_ids = attribute_color_ids + filter_option_value; 1396 } else if(filter_option_value_type == FILTER_TYPE.ATTRIBUTES) { 1397 var filter_group_id = selected_filter.getAttribute(DATA_SELECTED_FILTER_GROUP_ID); 1398 if(!params["attribute_"+ filter_group_id +"_option_ids"]) { 1399 if(attribute_ids != "") { 1400 attribute_ids = attribute_ids + ","; 1401 } 1402 attribute_ids = attribute_ids + filter_group_id; 1403 params["attribute_"+ filter_group_id +"_option_ids"] = filter_option_value; 1404 } else { 1405 var attribute_group_option_ids = params["attribute_"+ filter_group_id +"_option_ids"]; 1406 if(attribute_group_option_ids != "") { 1407 attribute_group_option_ids = attribute_group_option_ids + ","; 1408 } 1409 params["attribute_"+ filter_group_id +"_option_ids"] = attribute_group_option_ids + filter_option_value; 1410 } 1411 } else if(filter_option_value_type == FILTER_TYPE.SPECIFICATION) { 1412 var filter_group_id = selected_filter.getAttribute(DATA_SELECTED_FILTER_GROUP_ID); 1413 if(!params["specification_"+ filter_group_id +"_value_ids"]) { 1414 if(specification_ids != "") { 1415 specification_ids = specification_ids + ","; 1416 } 1417 specification_ids = specification_ids + filter_group_id; 1418 params["specification_"+ filter_group_id +"_value_ids"] = filter_option_value; 1419 } else { 1420 var specification_group_option_ids = params["specification_"+ filter_group_id +"_value_ids"]; 1421 if(specification_group_option_ids != "") { 1422 specification_group_option_ids = specification_group_option_ids + ","; 1423 } 1424 params["specification_"+ filter_group_id +"_value_ids"] = specification_group_option_ids + filter_option_value; 1425 } 1426 } 1427 } 1428 1429 /* add filter_option_value_data in params */ 1430 if(tag_ids != "") { 1431 params.tag_ids = tag_ids; 1432 } 1433 if(search_term_in_category != "") { 1434 params.search_term_in_category = search_term_in_category; 1435 } 1436 if(brand_ids != "") { 1437 params.brand_ids = brand_ids; 1438 } 1439 if(attribute_color_ids != "") { 1440 params.attribute_color_ids = attribute_color_ids; 1441 } 1442 if(attribute_ids != "") { 1443 params.attribute_ids = attribute_ids; 1444 } 1445 if(specification_ids != "") { 1446 params.specification_ids = specification_ids; 1447 } 1448 if(price_start != "") { 1449 params.price_start = price_start; 1450 params.price_end = price_end; 1451 } 1452 if(price_start != "") { 1453 params.price_start = price_start; 1454 params.price_end = price_end; 1455 } else if(price_greater_equals != "") { 1456 params.price_greater_equals = price_greater_equals; 1457 } 1458 1459 /* Push filters_query_URL in current window.location.href */
1460 if(push_filters_query_URL) { 1461 filters_query_URL = (filters_query_URL == "") ? "?" : filters_query_URL; 1462 window.history.pushState("", "", filters_query_URL); 1463 } 1464 1465 /* Scroll to filter result */ 1466 if(scroll_to_top) { 1467 var headerFloat = document.querySelector('[data-header]'); 1468 var refinedFilter = document.querySelector('[' + DATA_FILTER_CONTAINER + ']'); 1469 var refinePos = refinedFilter.offsetTop; 1470 if(headerFloat){ 1471 var isHeaderFloat = headerFloat.classList.contains('theme-header-animate'); 1472 var headerFloatHeight = headerFloat.clientHeight; 1473 var scrollPos = refinePos-headerFloatHeight; 1474 } 1475 if(refinedFilter && headerFloat && isHeaderFloat && document.documentElement.clientWidth > 992){ 1476 window.scrollTo(0, scrollPos-50); 1477 } 1478 else if(refinedFilter && document.documentElement.clientWidth > 992){ 1479 window.scrollTo(0, refinePos-50); 1480 } 1481 } 1482 1483} 1484 1485function getProductsBasedOnFilter() { 1486 /* 1487 * Fetch selected filter values 1488 * Push selected filter values in URL 1489 */ 1490 1491 toggleRefineBy(); 1492 1493 var elem = document.querySelector(SORT_BY_PLACEHOLDER); 1494 var params = {}; 1495 if(elem) { 1496 params.sort_by = elem.value; 1497 } 1498 1499 setProductFilterParams(params, true, true); 1500 1501 /* Show blur loading on product list container */ 1502 var blurEl = document.querySelector(SORT_BY_TARGET); 1503 showBlurLoading(blurEl); 1504 1505 /* Show blur loading on filter container */ 1506 blurEl = document.querySelector('[' + DATA_FILTER_CONTAINER+ ']'); 1507 showBlurLoading(blurEl); 1508 1509 params.send_facet = true; 1510 loadProducts(params, INSERT_TYPE.INNER_HTML); 1511} 1512 1513function productViewBy() { 1514 let viewby = document.querySelector('[data-view-by]'); 1515 if(viewby) { 1516 let products = document.querySelectorAll('[data-zs-product-id]'); 1517 products.forEach(product => { 1518 if(viewby.getAttribute('data-view-by') === "list") { 1519 product.classList.add('theme-view-by-list'); // No I18N 1520 } 1521 else { 1522 product.classList.remove('theme-view-by-list'); // No I18N 1523 } 1524 }) 1525 } 1526} 1527 1528 1529/* END: Product Filters - Facet Search */ 1530 1531initSortByPorducts(); 1532document.addEventListener(EVENT_TYPE.PRODUCTS_LIST_SUCCESS, getProductsResponse, false);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.