John Davidson

javascript - Set default value for GET-parameter in URL

0 comments
Message:


I have a multi-language website. I have a own implementation of the multi-lang system: In the header the user can select the flag matching his language. When he clicks a language he gets redirected from https://example.com to https://example.com/?lang=nl when he for example selects Belgium (Dutch -> Nederlands -> nl).


When a page loads the Javascript code checks if the lang GET-parameter is set. If it is set, the code searches for all the on-site anchor-tags in the HTML and appends the correct lang-tag (nl, en, fr,...) to the href-attribute of that anchor-tag.


So for example <a href="/about">about us</a> becomes <a href="/about?lang=nl">about us</a>. This way the user always stays in the same 'language bubble'.


I then have a PHP function output($text_tag) which checks the lang GET-parameter and searches in the database for the text matching the text_tag and the required language.


E.g:


+----+----------+------+------------+
| Id | text_tag | lang | text |
+----+----------+------+------------+
| 1 | %hello% | EN | Hello! |
| 2 | %hello% | NL | Goedendag! |
| 3 | %hello% | FR | Bonjour! |
+----+----------+------+------------+

output("%hello%") with $_GET['lang'] == "FR" will for example return Bonjour!.


This system works perfectly fine. It probably isn't the most effective one but changing this is out of question.


But the problem is that when the user makes his first entry on the site he just visits the base-url and a lang GET-parameter is not yet set. This resulting in words on the first page he visits not getting translated accordingly. When he clicks on an anchor-tag a default language gets chosen when the lang GET-param is not set.


So I want to solve the problem that a default parameter should be set when he makes his first entry on the site.


I tried two solutions:


Server-side:


 if (!isset($_GET['lang'])) {
$url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$url .= (parse_url($url, PHP_URL_QUERY) ? '&' : '?') . 'lang=nl';

header("Location: " . $url);
}

This gets the job done. Visiting https://example.com will take you to https://example.com?lang=nl. But the problem is that this messes up a lot. POST-requests for example now often fail because I lose the posted data due to the redirect.


So I tried a client-side approach.
Client-side:


$(document).ready(function() {
//findGetParameter: https://stackoverflow.com/a/5448595/6533037
if (findGetParameter("lang") == null) {
let url = new URL(window.location.href);
url.searchParams.append("lang", "nl");

window.location.href = url;
}
}

This also works fine and doesn't cause any issues with requests or anything. But I am searching for a more efficient method. Because now EVERY user who visits the site for the first time loads the site, and then immediately gets a reload to have the lang GET-parameter appended. I can imagine this will result in a bad loading performance, user-experience, and worse SEO-results.


So, what is the most efficient way to set a default value for a GET-parameter and to make the GET-parameter required?



My Answer:
One possible solution could be to check if the lang GET parameter is set in the URL when the page loads, and if it is not set, then set a default value using JavaScript without reloading the page. Here's an example of how you could achieve this:

javascript
$(document).ready(function() {
// Check if lang parameter is not set
if (!getUrlParameter('lang')) {
// Set default lang parameter
var url = new URL(window.location.href);
url.searchParams.set('lang', 'nl');

// Replace the current URL without reloading the page
window.history.replaceState(null, null, url);
}
});

// Function to get URL parameter by name
function getUrlParameter(name) {
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
var results = regex.exec(window.location.href);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}


This way, the default lang parameter will be set if it is not already present in the URL, without causing a page reload. This should help improve the loading performance and user experience.

Rate this post

5 of 5 based on 9125 votes

Comments




© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us