[Resolved] Archive Page Built with Blocks – Insert Views 'frontend' event handler

[Author]

Posts

[Adrian Robbins]

Hi

We have had to build the Archive Page with Blocks, and the nine filters use Ajax to refresh the page content and filter the options.

How do we Insert the Frontend event handler, as we need to run some Javascript after each filter is used to effect the Custom search?

We want to update the Text overlays on the images.

hidden link

Just now we get around it with this code:

<script>
function initializeOverlays() {
var thumbnailContainers = document.querySelectorAll('.archive-image');

thumbnailContainers.forEach(function(container) {
// Check if the overlay already exists
var existingOverlay = container.querySelector('.year-round-overlay');
if (!existingOverlay) {
var overlay = document.createElement('div');
overlay.className = 'year-round-overlay';

// Retrieve the custom field value from the data attribute
var overlayText = container.getAttribute('data-overlay-text');
if (overlayText) {
overlay.textContent = overlayText;
container.appendChild(overlay);
}
}
});
}

// Run initializeOverlays on DOMContentLoaded
document.addEventListener("DOMContentLoaded", function() {
initializeOverlays();
});

// Function to check for URL change
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
initializeOverlays();
lastUrl = location.href;
}
}, 1000); // Check every 1000 milliseconds (1 second)
</script>

But it's a bit messy, and not how it should be done.

Is there a better way to achieve this?

[Mateus Getulio]

Hello there,

Using blocks, you can go to the JavaScript tab in the side bar and add your code: https://toolset.com/course-lesson/adding-custom-javascript-to-views-templates-and-archives/

You can track when the filter is executed using 'js_event_wpv_parametric_search_results_updated', that should replace the need of running the code every X seconds.

Please check the explanation of my colleague here for further reference: https://toolset.com/forums/topic/javascript-call-back-function-of-scroll-to-top-map-while-using-ajax-pagination/#post-1437607

And here a skeleton of how you'd use js_event_wpv_parametric_search_results_updated: https://toolset.com/forums/topic/trigger-js-event-after-ajax-filtering-finished/#post-477382

Please give it a try and let us know.
Mateus