shop-by_dept_home_class_decor_seasonality_spring_frame-material_resin (2024)

`; facetsHTML += facet; }); return facetsHTML;}function setAccordionInitialState() { // Select all accordion sections const accordionSections = document.querySelectorAll('.accordion__section'); // Convert NodeList to Array to use reverse method const sectionsArray = Array.from(accordionSections).reverse(); let lastCheckedSectionOpened = false; let isAnySectionAlreadyOpen = false; // First, check if any section is already open accordionSections.forEach(section => { if (section.classList.contains('open')) { isAnySectionAlreadyOpen = true; } }); sectionsArray.forEach(section => { const id = section.id.split('accordion-section-')[1]; const button = document.getElementById(`accordion-open-${id}`); // Check if any sub-input is checked within the section const anyChecked = section.querySelectorAll('input[type="checkbox"]:checked').length > 0; if (!isAnySectionAlreadyOpen) { if (anyChecked && !lastCheckedSectionOpened) { // Open the section and button, and mark as the last opened section.classList.add('open'); section.setAttribute('aria-hidden', 'false'); if (button) { button.classList.add('expanded'); button.setAttribute('aria-expanded', 'true'); } lastCheckedSectionOpened = true; // Prevent opening any other checked sections } else { // Close the section and button section.classList.remove('open'); section.setAttribute('aria-hidden', 'true'); if (button) { button.classList.remove('expanded'); button.setAttribute('aria-expanded', 'false'); } } } });}// this is a large function can use some refactoring but what it does is it takes the active filters and builds the function buildAccordManual(ArraySelections){ // console.log(ArraySelections) const accordionSections = document.querySelectorAll('.accordion__section'); accordionSections.forEach(section => { //section.setAttribute('aria-hidden', true) //section.classList.remove('open') }) ArraySelections.sort((a, b) => { let aName = Object.keys(a)[0].toLowerCase(); let bName = Object.keys(b)[0].toLowerCase(); let aIndex = orderList.indexOf(aName); let bIndex = orderList.indexOf(bName); if (aIndex === -1 && bIndex === -1) { return aName.localeCompare(bName); } if (aIndex === -1) return 1; if (bIndex === -1) return -1; return aIndex - bIndex; }); document.querySelectorAll('.accordion__section').forEach((section) => { section.innerHTML = ''; }); ArraySelections.forEach(facet => { let facetName = Object.keys(facet)[0]; let facetValues = facet[facetName]; // Sort facetValues alphabetically by their keys facetValues.sort((a, b) => { const keyA = Object.keys(a)[0].toLowerCase(); const keyB = Object.keys(b)[0].toLowerCase(); return keyA.localeCompare(keyB); }); const AccordSection = document.getElementById(`accordion-section-${facetName.toLowerCase()}`); if (AccordSection !== null) { AccordSection.insertAdjacentHTML("beforeEnd", ListedFacets(facetValues, facetName.toLowerCase())); } else { } }); accordionSections.forEach((section) => { // Extract the variable part from section's ID const idTokens = section.id.split('accordion-section-'); const relevantIdPart = idTokens.length > 1 ? idTokens[1] : null; if (relevantIdPart) { // Construct the corresponding button's ID const buttonId = `accordion-open-${relevantIdPart.toLowerCase()}`; const correspondingButton = document.getElementById(buttonId); // Check if section is empty if (section.innerHTML.trim() === '') { // Hide the section and button section.style.display = 'none'; if (correspondingButton) { correspondingButton.style.display = 'none'; } } else { // Make sure the section and button are visible section.style.display = 'block'; if (correspondingButton) { correspondingButton.style.display = 'flex'; } } } }); setAccordionInitialState() // Get all facet containers (assuming they have a class of accordion__section) const facetContainers = document.querySelectorAll('.accordion__section'); // Assume facetContainers is a NodeList or Array of your container elements. facetContainers.forEach(container => { // Get all selectionFilters within this container const filters = container.querySelectorAll('.selectionFilter'); let isChecked = false; // Loop through each filter to find checkboxes within them filters.forEach((filter) => { const childCheckboxes = filter.querySelectorAll('input[type="checkbox"]'); childCheckboxes.forEach((checkbox) => { if (checkbox.checked) { isChecked = true; } }); }); // Only proceed to add "See More" button if none of the child checkboxes are checked, // and if there are more than 10 filters if (!isChecked && filters.length > 10) { // Hide all but the first 10 filters initially for (let i = 10; i < filters.length; i++) { filters[i].style.display = 'none'; } // Create and append the "See More" button const showMoreButton = document.createElement('button'); showMoreButton.innerText = 'See More'; showMoreButton.addEventListener('click', function() { // Show all hidden filters for (let i = 10; i < filters.length; i++) { filters[i].style.display = 'block'; } // Remove the 'See More' button showMoreButton.style.display = 'none'; }); container.appendChild(showMoreButton); } }); }async function fetchAndBuildProductAttributes(removedFilter) { try { async function setupPage() { await collectFacets(); buildAccordManual(mergedFilters); runAfter() view_category() let checkboxes = document.querySelectorAll('.selectionFilter input[type=checkbox]'); checkboxes.forEach(checkbox => { checkbox.addEventListener('change', function(event) { const filterName = event.target.getAttribute('data-filtername'); // console.log(filterName); updateActiveFilters(filterName, event.target.id, event.target.checked); build(1); updateURLWithFacets(); }); }); } setupPage() } catch (error) { console.error(`An error occurred: ${error}`); } if(removedFilter){ // console.log(removedFilter) } }function ToggleMobalFiltersOpen(open){ if (open) { document.querySelector('.modalMobileFilters').classList.remove('Mobilehide') // console.log('Modal opened Toggled'); } else { } // document.querySelector('.modalMobileFilters').classList.remove('Mobilehide') // // console.log('Modal opened Toggled');}function ToggleMobalFiltersClose(){ document.querySelector('.modalMobileFilters').classList.add('Mobilehide') // console.log('Modal closed');}document.querySelector('.mobileFilters').addEventListener('click', () => { // ToggleMobalFiltersOpen()})// Start of codeasync function customFieldsCollection(callCount = 0) { let afterCursorCustom = '' return new Promise(async (resolve, reject) => { try { if (callCount >= maxCalls) { resolve(customFieldsCollectArry); return; } await GraphQLCall(customFields(afterCursorCustom)).then(data => { CustomCallData = data customFieldsCollectArry.push(...data.data.site.search.searchProducts.products.edges); if (data.data.site.search.searchProducts.products.pageInfo.hasNextPage) { afterCursorCustom = data.data.site.search.searchProducts.products.pageInfo.endCursor; ArraySelections = customFieldsCollectArry resolve(customFieldsCollection(callCount + 1)); } else { ArraySelections = customFieldsCollectArry resolve(customFieldsCollectArry); } }); } catch (error) { reject(error); } });}// let DefaultFiltersDebug =[]async function collectFacets() { customFieldsCollectArry = [] ArraySelections = await customFieldsCollection(0); FiltersSet = extractCustomFieldsNew(ArraySelections, keysToCollect) mergedFilters = [] try { //console.log(DefaultFilters) // let DefaultFiltersDebug = DefaultFilters; let convertedDefaultFilters = DefaultFilters.map(item => { const name = item.node.name; let attributes; // Declare `attributes` here for broader scope if (item.node.attributes != undefined) { attributes = item.node.attributes.edges.map(edge => { return { [edge.node.value]: edge.node.productCount }; }); } else { attributes = []; // Assign a default value (e.g., an empty array) to handle the else case } return { [name]: attributes }; }); // console.log(convertedDefaultFilters); // console.log(FiltersSet) mergedFilters = [...FiltersSet, ...convertedDefaultFilters]; // console.log(mergedFilters) addClassObject(mergedFilters.find(obj => 'Class' in obj), imageList) // console.log(mergedFilters); } catch (error) { console.error("An error occurred:", error); }}async function collectFacetsOLD() { customFieldsCollectArry = [] ArraySelections = await customFieldsCollection(0); FiltersSet = extractCustomFieldsNew(ArraySelections, keysToCollect) mergedFilters = [] try { const convertedDefaultFilters = DefaultFilters.map(item => { const name = item.node.name; // console.log(name) const attributes = item.node.attributes.edges.map(edge => { return { [edge.node.value]: edge.node.productCount }; }); // console.log(attributes) return { [name]: attributes }; }); // console.log(convertedDefaultFilters) // console.log(FiltersSet) mergedFilters = [...FiltersSet, ...convertedDefaultFilters]; // console.log(mergedFilters) addClassObject(mergedFilters.find(obj => 'Class' in obj), imageList) // console.log(mergedFilters); } catch (error) { console.error("An error occurred:", error); }}function createFilterOption(Option) { const value = Option.node ? Option.node.value : Object.keys(Option)[0]; return `

${value}

`;}function createFilterGroup(Filter) { const name = Filter.node ? Filter.node.name : Object.keys(Filter)[0]; const attributes = Filter.node ? Filter.node.attributes.edges : Filter[name]; const optionsHTML = attributes.map(createFilterOption).join(''); return `

`;}function additionalFacets(facetNumber, subFacetNumber){ if(atob(facetNumber) == 'arrayconnection:1'){ callFacets(facetNumber); }else{ callFacets(btoa('arrayconnection:' + facetNumber), subFacetNumber) }}function callFacets(AfterFacetCusor, facetCusor = ""){ let setAfterfacetNumber = ', after:' + facetNumber let setAfterAfterFacetCusor = facetCusor ? ', after:' + facetCusor : ''; facetsAdditions = `query { site { search { searchProducts( filters: { hideOutOfStock: true, ${searchFor()} productAttributes:[${att}] } sort: ${sortBySelection()} ) { filters(first: 1 ${facetNumber}) { edges { node { ... on ProductAttributeSearchFilter { __typename name filterName displayProductCount attributes(first: 50 ${setAfterAfterFacetCusor}) { edges { node { value productCount isSelected } cursor } pageInfo { hasNextPage hasPreviousPage startCursor endCursor } } isCollapsedByDefault } name } cursor } pageInfo { startCursor hasPreviousPage hasNextPage endCursor } } } } } }` }