Create compatibility with WP Grid Builder

Hi, I’m afraid that is out of the scope of this (small) plugin… Sorry.

That makes sense! I noticed it had Search & Filter Pro compatibility, and plans for FacetWP, hence the question.

Anyway, I’ve been tinkering with it for the last couple of days to make it work myself, and it does!

document.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.wpgb-viewport');

    function getQueryParamFromURL() {
        const urlParams = new URLSearchParams(window.location.search);
        for (const [key, value] of urlParams) {
            if (key.startsWith('_') && key.length > 1) {
                return value;
            }
        }
        return '';  // Returns empty if no matching param is found
    }

    let lastSearchTerm = '';
    let lastHeight = container.style.height;

    function highlightText(force = false) {
        const searchTerm = getQueryParamFromURL();
        if (!searchTerm || (searchTerm === lastSearchTerm && !force)) return;

        lastSearchTerm = searchTerm;
        const elementsToMark = container.querySelectorAll('.wpgb-card');
        const instance = new Mark(elementsToMark);
        instance.unmark({
            done: function() {
                instance.mark(searchTerm, {
                    element: 'mark',
                    className: 'highlight'
                });
            }
        });
    }

    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.attributeName === 'style') {
                let newHeight = container.style.height;
                if (newHeight !== lastHeight) {
                    lastHeight = newHeight;
                    highlightText(true);
                }
            }
        });
    });

    observer.observe(container, {
        attributes: true,
        attributeFilter: ['style']
    });

    highlightText(); // Initial call to highlight any existing content
});

$searchTerm = '';
foreach ($_GET as $key => $value) {
    if (strpos($key, '_') === 0 && strlen($key) > 1) {
        $searchTerm = sanitize_text_field($value);
            break;
    }
}

wp_localize_script('wpgb-highlight-script', 'wpgbParams', array(
    'searchTerm' => $searchTerm
));

Hi, thank you for sharing! ??

I’ll consider adding this to the next version but cannot promise anything. Make sure you keep a copy of your modified plugin or modify the version number to anything much higher than the current number to prevent your modifications from being overwritten by an upgrade.

One question: what is the WP Grid Builder plugin folder and main plugin file name? I woud need those to detect the plugin with is_plugin_active() as (for example) Search Filter Pro is detected with ‘search-filter-pro/search-filter-pro.php’. If you could recover and share that info? ??

Hi there,

I’ve made it a separate plugin for now, so no worries about anything being overwritten. It only utilizes mark.js, not the added functionalities added by hlst-extend, so better integration is definitely possible. The plugin folder is wp-grid-builder and the main file is wp-grid-builder.php. I can send you a copy of the plugin if that helps?

Yeah, I glanced over the code after responding and noticed that is is much more than some adaptations to the plugin ??

So in my mind, it would actually make more sense to make your plugin stand-alone (simply by adding mark.js) than add your WP Grid Builder compatibility to mine… You could then either share or sell your plugin as a WP Grid Builder extension ??