WPIntell

Source evidence

Create compatibility with WP Grid Builder

Highlight Search Terms · support · 2024-04-22T18:54:00+00:00

mixedsentiment
mediumseverity
0.84relevance
5replies
Evidence linked to opportunitycommercial context

Proof Health

Open evidence

Commercial opportunities need traceable source links before they are treated as build-worthy.

3 / 22 rows with source links

13.6% of this page's analysis has direct source links.

0 build-decision rows missing links

0 rows here require auditable proof before promotion.

19 rows with no attached evidence

0 rows have source counts but still need direct links.

Conversation

support
ThomDJ resolved
Hi there! Is there any chance this plugin will get compatibility with WP Grid Builder in the future? I enjoy your plugin, but the search facet from WP Grid Builder does not work with it, unfortunately. Would love to see this work. 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 🙂

Comments

5 shown
Rolf Allard van Hagen 2024-04-23T20:54:00+00:00

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

ThomDJ 2024-04-25T15:26:00+00:00

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 ));

Rolf Allard van Hagen 2024-04-30T23:31:00+00:00

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? 🙂

ThomDJ 2024-05-01T07:08:00+00:00

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?

Rolf Allard van Hagen 2024-05-01T12:44:00+00:00

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 🙂