I am using GeoJS, to determine a users location then change the query param so it then selects a filter based off their location. For some reason its only working on reload.
I’ve attempted to have it so it selects the filter instead of changing the query param without success.
The issue seems to be that the filters havent been loaded before the script can run.
Heres my script for location checker.
<!-- [Attributes by Finsweet] CMS Filter -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>
<!-- Location API -->
<script async src="https://get.geojs.io/v1/ip/geo.js" onload="initializeGeoIp()"></script>
<script>
function geoip(json) {
// Log the received JSON data to the console
console.log('Received JSON data:', json);
// Extract the region property from the JSON object
var region = json.region;
// Log the region to the console
console.log('Region:', region);
// Determine the state based on the region, default to "VIC" if not recognized
var state = "VIC"; // Default to VIC
if (region === "New South Wales" || region === "NSW") {
state = "NSW";
} else if (region === "Victoria" || region === "VIC") {
state = "VIC";
} else {
// Log a message if the region is not recognized
console.log('Unrecognized region:', region);
}
// Log the determined state to the console
console.log('Determined State:', state);
// Function to update the query parameter based on the determined state
function updateQueryParam(state) {
var currentUrl = window.location.href;
var urlWithoutParams = currentUrl.split('?')[0];
// Construct the new URL with the state query parameter
var newUrl = urlWithoutParams + '?state=' + state;
// Replace the current URL with the new URL
window.history.replaceState({}, '', newUrl);
}
// Update the query parameter based on the determined state
updateQueryParam(state);
}
// Define the fetchGeoData function
function fetchGeoData() {
// Fetch user's location data from GeoJS
fetch('https://get.geojs.io/v1/ip/geo.json')
.then(function(response) {
return response.json();
})
.then(geoip)
.catch(function(error) {
console.error('Error fetching GeoJS data:', error);
// Use default state on error (VIC)
updateQueryParam("VIC");
});
}
// Define the initializeGeoIp function
function initializeGeoIp() {
// This function will be called once the page has fully loaded
fetchGeoData();
}
// Call initializeGeoIp on window.onload
window.onload = function() {
initializeGeoIp();
}
</script>
Hey @Support-Luis
Thanks for replying, was wondering if there is a better way I could target the radio button to listen to the geo location data coming in? So that the filter is applied once its all loaded in
Hey @ethan! you could target the button via a class, id or custom attribute and programmatically click it with JS to fire the filtering after the data has loaded.
Also, I can’t see the geo API working on my end, this is a screenshot of my console.
Sorry was doing some testing, I have used an click event in the past. However it causes my page to jump to where the filters are present, is this a finsweet function? I’ve even tried to force the page to start at the top, this is the new script I am using.
If theres anyway I could target these filters directly with finsweet api I would really appreciate the assistance.
<script>
// Scroll to the top of the page when the page loads
window.scrollTo(0, 0);
// Flag to track whether initializeGeoIp() has already been executed
var geoIpInitialized = false;
// Define the geoip function globally
function geoip(json) {
// Log the received JSON data to the console
console.log('Received JSON data:', json);
// Extract the region property from the JSON object
var region = json.region;
// Log the region to the console
console.log('Region:', region);
// Determine the state based on the region, default to "VIC" if not recognized
var state = "VIC"; // Default to VIC
if (region === "New South Wales" || region === "NSW") {
state = "NSW";
} else if (region === "Victoria" || region === "VIC") {
state = "VIC";
} else {
// Log a message if the region is not recognized
console.log('Unrecognized region:', region);
}
// Log the determined state to the console
console.log('Determined State:', state);
// Select the button based on the determined state and trigger an action
if (state === "NSW") {
var nswButton = document.getElementById("nsw-radio");
if (nswButton) {
// Perform an action on the NSW button
// For example, you can trigger a click event:
nswButton.click();
}
} else if (state === "VIC") {
var vicButton = document.getElementById("vic-radio");
if (vicButton) {
// Perform an action on the VIC button
// For example, you can trigger a click event:
vicButton.click();
}
}
}
// Use window.onload to ensure the entire page is loaded before running the script
window.onload = function() {
// Define the fetchGeoData function
function fetchGeoData() {
// Fetch user's location data from GeoJS
fetch('https://get.geojs.io/v1/ip/geo.json')
.then(function(response) {
return response.json();
})
.then(geoip)
.catch(function(error) {
console.error('Error fetching GeoJS data:', error);
// Use default state on error (VIC)
// You can customize this behavior if needed
});
}
// Call the fetchGeoData function to start the process
fetchGeoData();
};
</script>
<script src="https://get.geojs.io/v1/ip/geo.js" defer></script>
