Translate reflowhq elements in bss (and product texts) dynamically

Bootstrap Studio Help
21

This is very useful, thank you. I’m not used to working like this. Is it possible for you to tell me how to switch between languages in Bootstrap Studio (BSS)? Thank you.

22

I appreciate this, I’ll look more into it. Thanks.

23

Each of the language links has a class of pickLang and a data-lang attribute set to the language; english, french, spanish

<a class="pickLang " href="#" data-lang="english"><img class="flagIcon" src="england.png" /></a>

In the JS there is a function to check if a pickLang link has been pressed and then it will add a class of the language to the body of the page

<body class="french">

The JS will also set a cookie for the users prefered language

The CSS:

/* Shift the main section down */
main {
  padding-top: 5rem;
}

/* Hide the original product description and  title */
.ref-description, .reflow-product .ref-name {
  display: none;
}

/* Hide all languages description */
div[class^="language-"] {
  display: none;
}

/* Hide all languages titles */
h5[class^="language-"] {
  display: none;
  font-size: 2.4rem;
}

/* Show only the relevant language */
.english .language-en, .french .language-fr, .spanish .language-es {
  display: block;
}

/* Some simple styling for the flagicons */
.flagIcon {
  width: 20px;
}

The main JS will once the page has loaded from reflow search the .ref-description element generated by reflow and create new divs for each of the languages, and then the css will only display the relevant language.

JS:

// The Main Function to generate the different language blocks
function processLanguageBlocks() {
  const refDescription = document.querySelector(".ref-description");
  const content = refDescription.innerHTML;

  const regex = /{lang="([^"]+)"}(.*?)\{\/lang}/gs;
  const regexHead = /{header="([^"]+)"}(.*?)\{\/header}/gs;

  const matches = [...content.matchAll(regex)];
  const matchesHead = [...content.matchAll(regexHead)];

  const refNameElement =
    refDescription.parentElement.querySelector(".ref-name");

  // First the headers
  matchesHead.forEach((match) => {
    const lang = match[1];
    const langContent = match[2];

    const h5Element = document.createElement("h5");
    h5Element.className = `language-${lang}`;
    h5Element.innerHTML = langContent;

     refNameElement.parentElement.insertBefore(
      h5Element,
      refNameElement.nextSibling
    );
  });

  // Now the Body
  matches.forEach((match) => {
    const lang = match[1];
    const langContent = match[2];

    const newDiv = document.createElement("div");
    newDiv.className = `language-${lang}`;
    newDiv.innerHTML = langContent;

    // Append the new div to the parent element of .ref-description
    refDescription.parentElement.appendChild(newDiv);
  });
}
 

// Function to set a cookie
function setCookie(name, value, days) {
  const expires = days
    ? `; expires=${new Date(
        Date.now() + days * 24 * 60 * 60 * 1000
      ).toUTCString()}`
    : "";
  document.cookie = `${name}=${value}${expires}; path=/`;
}

// Function to get a cookie
function getCookie(name) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(";");
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == " ") c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}


// Function to set the language when link is clicked and set the cookie
function handlePickLanguage() {

  // Check cookie on page load
  const storedLang = getCookie("lang");

  if (storedLang) {
    document.body.className = storedLang;

    // Optionally, log the selected language
    console.log(`Loaded language: ${storedLang}`);
  }


  const pickLinks = document.querySelectorAll(".pickLang");

  pickLinks.forEach((link) => {
    link.addEventListener("click", (event) => {
      event.preventDefault();

      // Get the data-lang attribute value
      const langCode = link.getAttribute("data-lang");

      // Set the cookie
      setCookie("lang", langCode, 365); // Cookie expires after 365 days

      // Set the class of the body to match the data-lang attribute value
      document.body.className = langCode;

      console.log(`Language selected: ${langCode}`);
    });
  });

  
}

// Call the language function when the DOM is loaded
document.addEventListener("DOMContentLoaded", handlePickLanguage);


// Call the processLanguage function when reflow has loaded plus 300ms delay to allow full load
document.addEventListener("reflow-ready", function () {
  setTimeout(() => {
    processLanguageBlocks();
  }, 300);
});