Load More button and search results filters issue

[aestheticanvas]

Hello there,

I hope you are doing well.

I am currently facing an issue with my load more button, I have created a Javas script code to replace my pagination on my site with a load more button, it is working well across the entire site except when I search in the search bar and then add a filter in the search results. It will then appear with the old pagination and the load more button.

Then If I click on the load more button it will break the site but if I decide to click on the second page of the old pagination, it will load the second page and the old pagination will then disappear and now the load more button will work properly.

Here is the screenshot of the site breaking when clicking the load more button:

Here is a link to the search results after using filters:

https://aestheticanvas.com/search?q=blue&options%5Bprefix%5D=last&filter.v.price.gte=&filter.v.price...

So I am trying to figure out how to fix this issue, but can't really find my way around.

Thank you in advance for your time and help.

Kind regards

[aestheticanvas]

You will probably want to add the filters again as I just tested the link and it seems to appear properly, but once you remove the filter and add it again, the problem will appear.

[webwondersco]

@aestheticanvas Hope you are doing well.

I did not understand properly. Could you please give some short recordings of the issue?

[aestheticanvas]

Yes sorry if I wasn't clear enough.

Here is a link to the video:

https://www.loom.com/share/9c9da260f87747c0b92a36f3dd795600?sid=dc4e12dd-4156-4905-98f4-825cf5046240

Thank you!

[webwondersco]

@aestheticanvas It is custom-developed load more functionality? It looks like something is not working properly with load more 

[aestheticanvas]

Yes, it is custom-developed as I originally did not have this option on my theme. The button works fine everywhere else, for some reason, this issue only happens when I search and add filters.

[webwondersco]

Is it possible to check the code, you have added for the load more on the search page?

[aestheticanvas]

Sure, so this is the javascript code that handles the load more functionality:

document.addEventListener('DOMContentLoaded', function () {
var loadMoreButton = document.getElementById('load-more');
var productGridContainer = document.getElementById('ProductGridContainer');
var productGrid = document.querySelector('.product-grid');
var currentPage = parseInt(productGridContainer.getAttribute('data-page'), 10) || 1;
var totalPages = parseInt(productGridContainer.getAttribute('data-total-pages'), 10);

function initializeLoadMore() {
if (!loadMoreButton) {
loadMoreButton = document.createElement('button');
loadMoreButton.id = 'load-more';
loadMoreButton.textContent = 'Load More';
loadMoreButton.className = 'button';
loadMoreButton.style.display = 'block';
loadMoreButton.style.margin = '20px auto';
productGridContainer.after(loadMoreButton);
}

// Hide pagination on initialization
var paginationNav = document.querySelector('nav.pagination');
if (paginationNav) {
paginationNav.style.display = 'none';
}

loadMoreButton.removeEventListener('click', loadMoreProducts);
loadMoreButton.addEventListener('click', loadMoreProducts);
updateLoadMoreVisibility();
}

function updateLoadMoreVisibility() {
loadMoreButton.style.display = currentPage >= totalPages ? 'none' : 'block';
}

function loadMoreProducts() {
var nextPage = currentPage + 1;
var url = new URL(window.location.href);
url.searchParams.set('page', nextPage);

fetch(url.toString())
.then(response => response.text())
.then(data => {
var parser = new DOMParser();
var htmlDocument = parser.parseFromString(data, 'text/html');
var newProducts = htmlDocument.querySelectorAll('.product-grid .grid__item');

if (newProducts.length > 0) {
newProducts.forEach(function (item) {
productGrid.appendChild(item);
});

currentPage = nextPage;
productGridContainer.setAttribute('data-page', currentPage);
updateLoadMoreVisibility();
} else {
loadMoreButton.style.display = 'none';
}
})
.catch(error => {
console.error('Error loading more products:', error);
});
}

function reinitializeAfterFilter() {
currentPage = 1;
productGridContainer.setAttribute('data-page', currentPage);
totalPages = parseInt(productGridContainer.getAttribute('data-total-pages'), 10);
initializeLoadMore();

// Ensure correct grid layout
var gridItems = productGrid.querySelectorAll('.grid__item');
gridItems.forEach(item => {
item.style.width = ''; // Reset any inline width
item.style.clear = ''; // Reset any clear property
});
}

// Initialize load more functionality
initializeLoadMore();

// Re-initialize when a new search or filter is applied
var searchForm = document.querySelector('form[action="/search"]');
if (searchForm) {
searchForm.addEventListener('submit', function(event) {
setTimeout(reinitializeAfterFilter, 1000);
});
}

var filterForm = document.querySelector('#FacetFiltersForm');
if (filterForm) {
filterForm.addEventListener('submit', function(event) {
event.preventDefault();
var formData = new FormData(filterForm);
var url = new URL(window.location.href);

formData.forEach((value, key) => {
url.searchParams.set(key, value);
});

fetch(url.toString())
.then(response => response.text())
.then(data => {
var parser = new DOMParser();
var htmlDocument = parser.parseFromString(data, 'text/html');
var newProductGrid = htmlDocument.querySelector('.product-grid');

if (newProductGrid) {
productGrid.innerHTML = newProductGrid.innerHTML;
reinitializeAfterFilter();
}
})
.catch(error => {
console.error('Error loading filtered products:', error);
});
});
}

// Handle browser back/forward navigation
window.addEventListener('popstate', initializeLoadMore);
});

I have then added this snippet directly in the main-search.liquid:

<script src="{{ 'load-more.js' | asset_url }}" defer="defer"></script>