Dynamic content based on url parameters

Support
#1

Hi!

Probably way out of the scope, but maybe it is a simple answer which I don’t see, and you are master wizards. :slight_smile:

I want to display dynamic content based on the url parameters.

Following one blog post, I have placed this test code into the Raw content:

<!-- Default Dynamic Section -->
<div id="default-content" class="dynamic-content">
  This is the default content
</div>
<!-- Dynamic Section 1 -->
<div id="apples" class="dynamic-content">
  I like apples
</div>
<!-- Dynamic Section 2 -->
<div id="oranges" class="dynamic-content">
  I like oranges
</div>
<!-- Dynamic Section 3 -->
<div id="bananas" class="dynamic-content">
  I like bananas
</div>

This code goes into Cornerstone Custom CSS:

.dynamic-content {
    display:none;
}

And this code (Without script tags), into Custom JS:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
	// Parse the URL parameter
	function getParameterByName(name, url) {
	    if (!url) url = window.location.href;
	    name = name.replace(/[\[\]]/g, "\\$&");
	    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
	        results = regex.exec(url);
	    if (!results) return null;
	    if (!results[2]) return '';
	    return decodeURIComponent(results[2].replace(/\+/g, " "));
	}
	// Give the parameter a variable name
	var dynamicContent = getParameterByName('dc');
 
	 $(document).ready(function() {
 
		// Check if the URL parameter is apples
		if (dynamicContent == 'apples') {
			$('#apples').show();
		} 
		// Check if the URL parameter is oranges
		else if (dynamicContent == 'oranges') {
			$('#oranges').show();
		} 
		// Check if the URL parameter is bananas
		else if (dynamicContent == 'bananas') {
			$('#bananas').show();
		} 
		// Check if the URL parmeter is empty or not defined, display default content
		else {
			$('#default-content').show();
		}
	});
</script>

However, when I place ?dc=apples to the end of the url, nothing happens.

I know WordPress Jquery is a modified one. Is it so different that this one doesn’t work in WP? Or it is another reason?
If it can easily be adjusted to make it work in WP and X, I’d be very happy, and I believe the community would benefit too! :slight_smile:

Displaying Dynamic content this way is a step into personalization, an important part of marketing. My intention is to display different contact forms, based on the source of the traffic, while focusing all link juice to a single landing page, so there is no dilution of ranking power.

Thanks!

#2

Hello There,

Thanks for writing in! There is an error in your JS code. For simplier solution, you can make use of this code instead:

(function($){
	// Parse the URL parameter
	function getParameterByName(name, url) {
	    if (!url) {
	    	url = location.href.split("?dc=").slice(-1)[0];
	    }

	    return url;
	    
	}
	// Give the parameter a variable name
	var dynamicContent = getParameterByName('dc');
 
	 $(document).ready(function() {
 
		// Check if the URL parameter is apples
		if (dynamicContent == 'apples') {
			$('#apples').show();
		} 
		// Check if the URL parameter is oranges
		else if (dynamicContent == 'oranges') {
			$('#oranges').show();
		} 
		// Check if the URL parameter is bananas
		else if (dynamicContent == 'bananas') {
			$('#bananas').show();
		} 
		// Check if the URL parmeter is empty or not defined, display default content
		else {
			$('#default-content').show();
		}
	});
})(jQuery);

Hope this helps. Please let us know how it goes.

1 Like
#3

Bingo!

It works like a charm. :cowboy_hat_face:

Now I will replace apples and bananas with form shortcodes, and that’s it!

Thank you!

#4

You’re welcome! :slight_smile:

#5

Hello Ruenel,

This code works really well the only issue I am running into is if the Url Parameter has additional variables it defaults back to the default content? Is there any tweak to this that would have it ignore other variables?

#6

Hi @artistn8,

Thanks for reaching out!

Enhancing or tweaking the code is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps and thank you for understanding.