Title: Custom Algolia widgets Last modified: February 28, 2025 --- # Custom Algolia widgets * Resolved [kmarcink2](https://wordpress.org/support/users/kmarcink2/) * (@kmarcink2) * [1 year, 3 months ago](https://wordpress.org/support/topic/custom-algolia-widgets/) * Hi, * I need to customise a lot the default behaviour of some widgets. I read about for example connectRefinementList. Does your plugin already provide support for it or do I need to figure other way to use it? Viewing 6 replies - 1 through 6 (of 6 total) * Plugin Contributor [Michael Beckwith](https://wordpress.org/support/users/tw2113/) * (@tw2113) * The BenchPresser * [1 year, 3 months ago](https://wordpress.org/support/topic/custom-algolia-widgets/#post-18334751) * With potential exception to features not available in the Instantsearch version we ship with (we do try to stay current as able), all of the code we ship with at [https://github.com/WebDevStudios/wp-search-with-algolia/blob/2.8.2/templates/instantsearch.php](https://github.com/WebDevStudios/wp-search-with-algolia/blob/2.8.2/templates/instantsearch.php) should be overall fully ready to match up with Algolia’s documentation around Instantsearch, including customization with connectors. * That file is essentially a custom PHP file used to load vanilla JS InstantSearch code, outside of a couple of custom PHP spots. The hit template usage can totally be converted to JS template literals if you prefer, as an extra example instead of the `data.*` version found on lines 47-72. * Thread Starter [kmarcink2](https://wordpress.org/support/users/kmarcink2/) * (@kmarcink2) * [1 year, 3 months ago](https://wordpress.org/support/topic/custom-algolia-widgets/#post-18336499) * Great to hear. * I see that to access for example “connectRefinementList”, I nee dto use the following code in my js file. * ```wp-block-code const { connectRefinementList } = instantsearch.connectors; ``` * Source: [https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/?client=With+a+CDN](https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/?client=With+a+CDN) * Thank you. * Plugin Contributor [Michael Beckwith](https://wordpress.org/support/users/tw2113/) * (@tw2113) * The BenchPresser * [1 year, 3 months ago](https://wordpress.org/support/topic/custom-algolia-widgets/#post-18339057) * Yep, most likely. I haven’t done much with connectors personally, but I can try and help best i can on that front. However that’s also slightly out of the realm of support specifically for our plugin as well. * Thread Starter [kmarcink2](https://wordpress.org/support/users/kmarcink2/) * (@kmarcink2) * [1 year, 3 months ago](https://wordpress.org/support/topic/custom-algolia-widgets/#post-18339844) * Thank you, that’s very kind of you. * Algolia code examples are a great starting point. It works our of the box after adding it to the project. Then I just need to customize it for my needs. So it should not be a challenge. Example. * ```wp-block-code // 1. Create a render functionconst renderRefinementList = (renderOptions, isFirstRender) => { const { items, isFromSearch, refine, createURL, isShowingMore, canToggleShowMore, searchForItems, toggleShowMore, widgetParams, } = renderOptions; if (isFirstRender) { const input = document.createElement('input'); const ul = document.createElement('ul'); const button = document.createElement('button'); button.textContent = 'Show more'; input.addEventListener('input', event => { searchForItems(event.currentTarget.value); }); button.addEventListener('click', () => { toggleShowMore(); }); widgetParams.container.appendChild(input); widgetParams.container.appendChild(ul); widgetParams.container.appendChild(button); } const input = widgetParams.container.querySelector('input'); if (!isFromSearch && input.value) { input.value = ''; } widgetParams.container.querySelector('ul').innerHTML = items .map( item =>

  • href="${createURL(item.value)}"
    data-value="${item.value}"
    style="font-weight: ${item.isRefined ? 'bold' : ''}"
    >
    ${item.label} (${item.count})


    • ) .join(''); [...widgetParams.container.querySelectorAll('a')].forEach(element => { element.addEventListener('click', event => { event.preventDefault(); refine(event.currentTarget.dataset.value); }); }); const button = widgetParams.container.querySelector('button'); button.disabled = !canToggleShowMore; button.textContent = isShowingMore ? 'Show less' : 'Show more';};// 2. Create the custom widgetconst customRefinementList = connectRefinementList( renderRefinementList);// 3. Instantiatesearch.addWidgets([ customRefinementList({ container: document.querySelector('#refinement-list'), attribute: 'brand', showMoreLimit: 20, })]); ``` * Source: [https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/?client=With+a+CDN#full-example](https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/?client=With+a+CDN#full-example) - This reply was modified 1 year, 3 months ago by [kmarcink2](https://wordpress.org/support/users/kmarcink2/). * Thread Starter [kmarcink2](https://wordpress.org/support/users/kmarcink2/) * (@kmarcink2) * [1 year, 3 months ago](https://wordpress.org/support/topic/custom-algolia-widgets/#post-18339849) * My current challenge is adding a proxy server that caches Algolia responses, to not go bankrupt when Algolia sends a bill. * I have came across an example of Algolia cache proxy – Cloudflare worker, but having difficulties make it work. Source: [https://gist.github.com/etdev/bb49f0f60ea5ec9deb5977b1fbfb4046](https://gist.github.com/etdev/bb49f0f60ea5ec9deb5977b1fbfb4046) * So you know of any solutions to this challenge? * Plugin Contributor [Michael Beckwith](https://wordpress.org/support/users/tw2113/) * (@tw2113) * The BenchPresser * [1 year, 3 months ago](https://wordpress.org/support/topic/custom-algolia-widgets/#post-18339897) * Can’t say I have, but I wonder if this would help you a bit [https://www.algolia.com/doc/ui-libraries/autocomplete/guides/debouncing-sources/](https://www.algolia.com/doc/ui-libraries/autocomplete/guides/debouncing-sources/) Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘Custom Algolia widgets’ is closed to new replies. * ![](https://ps.w.org/wp-search-with-algolia/assets/icon-256x256.png?rev=2894668) * [WP Search with Algolia](https://wordpress.org/plugins/wp-search-with-algolia/) * [Frequently Asked Questions](https://wordpress.org/plugins/wp-search-with-algolia/#faq) * [Support Threads](https://wordpress.org/support/plugin/wp-search-with-algolia/) * [Active Topics](https://wordpress.org/support/plugin/wp-search-with-algolia/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/wp-search-with-algolia/unresolved/) * [Reviews](https://wordpress.org/support/plugin/wp-search-with-algolia/reviews/) * 6 replies * 2 participants * Last reply from: [Michael Beckwith](https://wordpress.org/support/users/tw2113/) * Last activity: [1 year, 3 months ago](https://wordpress.org/support/topic/custom-algolia-widgets/#post-18339897) * Status: resolved