.
The below example is in react (with Typescript), but you can also do it using regular JavaScript.
Please note that the capitalised placeholders ("ORGANISATION_ID", "ORGANISATION_GET", and "ORGANISATION_POST") in the examples below need to be updated with the corresponding values.
Search Form:
In the below code we are adding the widget script (defined in the addScript function) if it doesn't already exist in the DOM. If it already exists, we don't re-add it ( see this check !document.getElementById("widget-script") ).
In the return we are rendering the search form to the page. Note, the following:
- The data-vw-widget="search" is specifying that we want to use the search widget.
- The data-widget-type="form" is telling the widget that this is a form instance (i.e. is the search part of the, in this case, two-page search widget)
- The data-results-target="/results" is telling the widget that it should redirect to /results to see the results from the search. If the search results were on the same page, we would set this to "self".
import { useEffect } from "react"; export default function Search(): JSX.Element { const addScript = (el: HTMLElement) => { const script = document.createElement("script"); script.id = "widget-script"; script.setAttribute("data-vw-loader", ""); script.setAttribute("data-org-id", "ORGANISATION_ID"); script.setAttribute("data-org-get", "ORGANISATION_GET"); script.setAttribute("data-org-post", "ORGANISATION_POST"); script.innerHTML = ` (function(e, d, u, k, a) { e['VolunteerWidgetNamespace'] = u; e[u] = { l: k, e: a }; var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://d27we5k570jzpl.cloudfront.net/volunteer-widget.js'; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })(window, document, 'VolunteerWidget', '[data-vw-loader]', '[data-vw-widget]'); `; el.appendChild(script); }; useEffect(() => { if (!document.getElementById("widget-script")) { addScript(document.body); } }, []); return ( <div> <h1>Search Form</h1> <div className="search-widget" data-vw-widget="search" data-widget-type="form" data-results-target="/results" data-initial-locations="Western Australia" data-style-btn-primary="btn btn-success" data-filter-by-suitabilities="1,8,11,12" /> </div> ); }
Search Results:
In the below code we are adding the widget script (defined in the addScript function) if it doesn't already exist in the DOM. If it already exists, we don't re-add it ( see this check ( !document.getElementById("widget-script") ).
In the return we are rendering the search form to the page. Note, the following:
- The data-vw-widget="search" is specifying that we want to use the search widget.
- The data-widget-type="results" is telling the widget that this is a results instance (i.e. is the results part of the, in this case, two-page search widget)
import { useEffect } from "react"; export default function Results(): JSX.Element { const addScript = (el: HTMLElement) => { const script = document.createElement("script"); script.id = "widget-script"; script.setAttribute("data-vw-loader", ""); script.setAttribute("data-org-id", "ORGANISATION_ID"); script.setAttribute("data-org-get", "ORGANISATION_GET"); script.setAttribute("data-org-post", "ORGANISATION_POST"); script.innerHTML = ` (function(e, d, u, k, a) { e['VolunteerWidgetNamespace'] = u; e[u] = { l: k, e: a }; var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://d27we5k570jzpl.cloudfront.net/volunteer-widget.js'; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })(window, document, 'VolunteerWidget', '[data-vw-loader]', '[data-vw-widget]'); `; el.appendChild(script); }; useEffect(() => { if (!document.getElementById("widget-script")) { addScript(document.body); } }, []); return ( <div> <h1>Search Results</h1> <div className="vw--search-results" data-vw-widget="search" data-widget-type="results" data-suitabilities="1,8,11,12" data-hide-shortlist-btns data-hide-eoi-volunteer-profile data-style-btn-primary="btn btn-primary" > <p className="lead text-center">Loading, please wait...</p> </div> </div> ); }