cliffordp · November 21, 2024 08:21 · QuinnMarketing · Oct 3, 2024 · cliffordp · Oct 6, 2024
diff --git a/0-not-needed.txt b/0-not-needed.txt
 I did not know at the time of writing this code and recording this video (https://www.youtube.com/watch?v=MHKzHf1BhrY) that THIS IS POSSIBLE NATIVELY FROM GHL, NO CUSTOM CODE NEEDED, NO CUSTOM VALUE NEEDED!
 Please use GHL Native functionality as documented here: https://help.gohighlevel.com/support/solutions/articles/48001172004
diff --git a/tourkick-ghl-url-query-param-replacement.js b/tourkick-ghl-url-query-param-replacement.js
 <script id="tourkick-ghl-url-query-param-replacement">
 	// Source: https://gist.github.com/cliffordp/9856cdd1497802996f472d3d31299026

 	// Get and decode the query parameter from the URL.
 	function getQueryParam( param ) {
 		const urlParams = new URLSearchParams( window.location.search );
 		const paramValue = urlParams.get( param );
 		// Return null if the parameter is not present or is an empty string.
 		return (paramValue !== null && paramValue.trim() !== '') ? decodeURIComponent( paramValue ) : null;
 	}

 	// Replace or insert the text content of all children that are text nodes.
 	function replaceTextContent( element, newText ) {
 		if ( element.hasChildNodes() ) {
 			element.childNodes.forEach( function ( child ) {
 				if ( child.nodeType === Node.TEXT_NODE ) {
 					child.textContent = newText; // Replace text of text nodes.
 				} else if ( child.nodeType === Node.ELEMENT_NODE ) {
 					if ( !child.hasChildNodes() ) {
 						// If the child element is empty, add a text node.
 						child.appendChild( document.createTextNode( newText ) );
 					} else {
 						// Recursive call for non-empty child elements
 						replaceTextContent( child, newText );
 					}
 				}
 			} );
 		} else if ( element.nodeType === Node.ELEMENT_NODE ) {
 			// If the element itself is empty, add a text node
 			element.appendChild( document.createTextNode( newText ) );
 		}
 	}

 	// Replace the text content of all elements with a specific class, including itself.
 	function replaceContentWithQueryParam( className, queryParam ) {
 		const elements = document.querySelectorAll( '.' + className );
 		const queryParamValue = getQueryParam( queryParam );

 		// Check if queryParamValue is neither null nor an empty string.
 		if ( queryParamValue ) {
 			elements.forEach( function ( element ) {
 				replaceTextContent( element, queryParamValue );
 			} );
 			console.log( `Replaced content in ${elements.length} elements.` );
 		} else {
 			console.log( 'No valid query parameter value found for: ', queryParam );
 		}
 	}

 	// Instantiate a MutationObserver to wait for changes and update text. Required for GHL because it uses Nuxt (Vue.js).
 	const observer = new MutationObserver( function ( mutations ) {
 		mutations.forEach( function ( mutation ) {
 			if ( document.querySelector( '.replace_location' ) ) {
 				observer.disconnect(); // Stop observing once we make the changes.
 				replaceContentWithQueryParam( 'replace_location', 'location' );
 			}
 		} );
 	} );

 	// Observer configuration.
 	const config = { childList: true, subtree: true };

 	// Start observing the target node for configured mutations.
 	observer.observe( document.body, config );
 </script>
	I did not know at the time of writing this code and recording this video (https://www.youtube.com/watch?v=MHKzHf1BhrY) that THIS IS POSSIBLE NATIVELY FROM GHL, NO CUSTOM CODE NEEDED, NO CUSTOM VALUE NEEDED!
	Please use GHL Native functionality as documented here: https://help.gohighlevel.com/support/solutions/articles/48001172004
	<script id="tourkick-ghl-url-query-param-replacement">
	// Source: https://gist.github.com/cliffordp/9856cdd1497802996f472d3d31299026

	// Get and decode the query parameter from the URL.
	function getQueryParam( param ) {
	const urlParams = new URLSearchParams( window.location.search );
	const paramValue = urlParams.get( param );
	// Return null if the parameter is not present or is an empty string.
	return (paramValue !== null && paramValue.trim() !== '') ? decodeURIComponent( paramValue ) : null;
	}

	// Replace or insert the text content of all children that are text nodes.
	function replaceTextContent( element, newText ) {
	if ( element.hasChildNodes() ) {
	element.childNodes.forEach( function ( child ) {
	if ( child.nodeType === Node.TEXT_NODE ) {
	child.textContent = newText; // Replace text of text nodes.
	} else if ( child.nodeType === Node.ELEMENT_NODE ) {
	if ( !child.hasChildNodes() ) {
	// If the child element is empty, add a text node.
	child.appendChild( document.createTextNode( newText ) );
	} else {
	// Recursive call for non-empty child elements
	replaceTextContent( child, newText );
	}
	}
	} );
	} else if ( element.nodeType === Node.ELEMENT_NODE ) {
	// If the element itself is empty, add a text node
	element.appendChild( document.createTextNode( newText ) );
	}
	}

	// Replace the text content of all elements with a specific class, including itself.
	function replaceContentWithQueryParam( className, queryParam ) {
	const elements = document.querySelectorAll( '.' + className );
	const queryParamValue = getQueryParam( queryParam );

	// Check if queryParamValue is neither null nor an empty string.
	if ( queryParamValue ) {
	elements.forEach( function ( element ) {
	replaceTextContent( element, queryParamValue );
	} );
	console.log( `Replaced content in ${elements.length} elements.` );
	} else {
	console.log( 'No valid query parameter value found for: ', queryParam );
	}
	}

	// Instantiate a MutationObserver to wait for changes and update text. Required for GHL because it uses Nuxt (Vue.js).
	const observer = new MutationObserver( function ( mutations ) {
	mutations.forEach( function ( mutation ) {
	if ( document.querySelector( '.replace_location' ) ) {
	observer.disconnect(); // Stop observing once we make the changes.
	replaceContentWithQueryParam( 'replace_location', 'location' );
	}
	} );
	} );

	// Observer configuration.
	const config = { childList: true, subtree: true };

	// Start observing the target node for configured mutations.
	observer.observe( document.body, config );
	</script>