Hey, I simply created a view that returned all products based on product_tag, included that view inside a template that was used as the archive-template.
Said view included a template that simply displayed sku, price some other fields and an add to cart.
After all that I removed duplicates with JS, it's actually very performant strangely, since we're filtering upward of 30k products at times.
One thing to keep in mind is using a high number of return products from the archive, I use 12 which works in filtering a lot of products and removing duplicates without messing with pagination.
the js in question (if you could do the formatting for the code I dont' know how in this chat):
document.addEventListener('DOMContentLoaded', () => {
let displayedTagsWithProductIds = JSON.parse(sessionStorage.getItem('displayedTagsWithProductIds')) || {};
const filterProducts = () => {
let productItems = document.querySelectorAll('#BlockMainSingle'); // Adjust the selector as needed, this would be the id from the div containing each product card in the archive
// First pass: Collect tags and their potential product IDs
let tagToProductMapping = {};
productItems.forEach(productItem => {
let tagElement = productItem.querySelector('#paFlexSingle > div:nth-child(2) > div > p'); // adjust selectors as needed
if (tagElement) {
let productId = tagElement.dataset.productArchiveId;
let productTags = tagElement.textContent.split(',')
.map(tag => tag.trim())
.filter(tag => tag !== '');
productTags.forEach(tag => {
if (!tagToProductMapping[tag]) {
tagToProductMapping[tag] = [];
}
tagToProductMapping[tag].push(productId);
});
}
});
// Second pass: Apply visibility logic
productItems.forEach(productItem => {
let tagElement = productItem.querySelector('#paFlexSingle > div:nth-child(2) > div > p'); // adjust selectors as needed
if (tagElement) {
let productId = tagElement.dataset.productArchiveId;
let productTags = tagElement.textContent.split(',')
.map(tag => tag.trim())
.filter(tag => tag !== '');
let shouldBeVisible = productTags.some(tag => {
if (tagToProductMapping[tag][0] === productId) {
// This product is the first in line for this tag, show it
return true;
}
return false; // This tag has another product to be displayed
});
productItem.style.display = shouldBeVisible ? '' : 'none';
}
});
sessionStorage.setItem('displayedTagsWithProductIds', JSON.stringify(displayedTagsWithProductIds));
};
filterProducts();
// Bind to AJAX pagination (adjust the event and selector as per your site's structure)
jQuery(document).on('js_event_wpv_pagination_completed', filterProducts);
jQuery(document).on('js_event_wpv_parametric_search_triggered', filterProducts);
jQuery(document).on('js_event_wpv_parametric_search_started', filterProducts);
jQuery(document).on('js_event_wpv_parametric_search_form_updated', filterProducts);
jQuery(document).on('js_event_wpv_parametric_search_results_updated', filterProducts);
});
It uses the events from toolset also to work with pagination and filters.
hidden link
