How to run a js function on a specific subdomain

Design help Custom code
1

Hi, so my main goal is to be able to show or hide an element depending on if the user is on the main domain in english (domain.com) or a subdomain in other languages (de.domain, esp.domain, etc…).
the subdomains will not be connected via the project settings, but by the weglot third party service.

in the past i was on wix, which was a terrible and sluggish experience and i am so glad i never have to touch it again now that i have been on webflow this past year. but while on wix i had this function working with their built in multi-lingual options + some custom code.
im afraid the code needs to be changed in order to work properly with webflow. i have been learning javascript the past few weeks but still would appreciate some help with this. i will paste the wix code below for reference. Thanks!

$w.onReady(function () {
    if (wixWindow.multilingual.currentLanguage ===  'de') {
      $w("#buttonDE").hide();
    	$w("#highlightDE").show();
    } else if (wixWindow.multilingual.currentLanguage ===  'zh') {
      $w("#buttonTW").hide();
    	$w("#highlightTW").show();
    } else if (wixWindow.multilingual.currentLanguage ===  'ca') {
      $w("#buttonCN").hide();
    	$w("#highlightCN").show();
    } else {
      $w("#buttonEN").hide();
    	$w("#highlightEN").show();
    }
    });

TLDR; I need to adjust this code to fit webflow + weglot. i want to check or pars the subdomain and then with an if\else function - hide or show an element either by class or id. Thanks

2

Hello,

You could try something like this:

document.addEventListener("DOMContentLoaded", () => {
  const url = window.location.href, // www.de.domain.com
    subdomain = url.split(".")[1]; // de

  switch (subdomain) {
    case "de":
      document.getElementById("buttonDE").style.display = "none";
      document.getElementById("highlightDE").style.display = "block";
      break;
    case "zh":
      document.getElementById("buttonTW").style.display = "none";
      document.getElementById("highlightTW").style.display = "block";
      break;
    case "ca":
      document.getElementById("buttonCN").style.display = "none";
      document.getElementById("highlightCN").style.display = "block";
      break;
    default:
      document.getElementById("buttonEN").style.display = "none";
      document.getElementById("highlightEN").style.display = "block";
  }
});

hope that helps.

2 Likes
3

You don’t really need the switch if you just mutate the class name strings right?

4

I think a switch statement looks much cleaner than an if else in that case. We still need to check the value of the string so yes I believe a switch statement makes sense.

5

Hi, Thanks for your inputs and i apologize for the late reply. i was supposed to post this shortly after the original post but seems i hastily pressed the submit button and it didn’t actually go through.

SOLUTION UPDATE: i obviously searched around for this before posting but couldn’t find what i needed. and of course by murphy’s law, not long after posting i searched again and found this code (that i hadn’t learned yet) posted elsewhere:

var host = window.location.host
var subdomain = host.split('.')[0]

from there on out i used the JS that i have learnt over the past few weeks to get the code working as i needed:

const host = window.location.host
const subdomain = host.split('.')[0] // currently on staging so subdomain is the first string
const hideElement = document.getElementById('hide-element');
if (subdomain == 'yoursubdomainhere') {
hideElement.style.display = 'none';
} else {
hideElement.style.display = "block";
}

this is working for me, but i will look into your solutions as well just to learn more and broaden my knowledge. Thanks again!

1 Like
6

Hi medabrim,

I want to do the same thing as you, but I think am not as “technically fluent” as you are.

How do I implement your solution? I currently did this:

  1. Put all your JS into the head tag for a specific site
  2. Insert my subdomain
  3. add ID ‘hide-element’

But it doens’t work.

How do I have to implement your code to show certain elements only on certain languages (/urls?)

Many Thanks in advance!!

7

Hi Jimmy,

My first guess would be that it has to do with the index number of the value in the array for the URL it is checking, and if your default domain is set to: yourdomain.com in which case the number should be host.split('.')[0] as it is in my example, or if you have it set to www.yourdomain.com, in which case the number should be set to host.split('.')[1] as ‘0’ will be pointing to ‘www’.

Hope this helps.