Closed Bug 1338532 Opened 3 years ago Closed 3 years ago

Footer on localized KB articles and product page should be localizable

Categories

(support.mozilla.org - Lithium :: Localization, defect)

defect
Not set

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: paul.trevor, Assigned: mdziewonski)

References

Details

Attachments

(1 file)

Steps to reproduce:

select any KB article or the product page (showing examples:)

https://support.mozilla.org/t5/Mozilla-Hilfe-Deutsch/ct-p/de?profile.language=de
https://support.mozilla.org/t5/Supporto-Mozilla-Italiano/ct-p/it?profile.language=it
https://support.mozilla.org/t5/Sch%C3%BCtzen-Sie-Ihre-Privatsph%C3%A4re/Verd%C3%A4chtige-Aktivit%C3%A4t-auf-meinem-Firefox-Konto/ta-p/36007

and the footer shows complete text in English language (tested with Italian and Dutch, too). 

Expected result:
Footer should appear in the language according to the article/product page language
Status: UNCONFIRMED → NEW
Ever confirmed: true
Thanks for filing this.

[note to self]
1. Requires using a language string (or several) instead of hard-coded text in the footer component.
2. Requires localized versions of the language string(s).

Current footer code:

<footer id="colophon">
  <nav class="row">
    <div class="col col-1">
      <div class="logo">
        <a href="/" data-link-type="footer" data-link-name="Mozilla"><img src="${asset.get("/html/assets/moz-light-logo.svg")}" /></a>
      </div>
      <p class="license">
        Portions of this content are ©1998–<time datetime="2016-10-12T11:14:25.059025-07:00">${.now?string("yyyy")}</time> <br>by individual mozilla.org contributors. Content <br>available under a <a href="//www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a>.
      </p>
    </div>
    <div class="col col-2">
      <ul class="links-join">
        <li><a href="https://www.mozilla.org/about/" data-link-type="footer" data-link-name="About">About</a></li>
        <li class="wrap"><a href="https://www.mozilla.org/contact/spaces/" data-link-type="footer" data-link-name="Contact Us">Contact Us</a></li>
        <li class="wrap"><a href="https://donate.mozilla.org?utm_source=mozilla.org&utm_medium=referral&utm_content=footer" class="donate" data-link-type="footer" data-link-name="Donate">Donate</a></li>
        <li class="clear"><a href="https://www.mozilla.org/contribute/" data-link-type="footer" data-link-name="Contribute to Mozilla">Contribute to Mozilla</a></li>
      </ul>
      <ul class="links-legal">
        <li><a href="https://www.mozilla.org/privacy/websites" data-link-type="footer" data-link-name="Privacy">Privacy</a></li>
        <li class="wrap"><a href="https://www.mozilla.org/privacy/websites/#cookies" data-link-type="footer" data-link-name="Cookies">Cookies</a></li>
        <li class="wrap"><a href="https://www.mozilla.org/about/legal/terms/mozilla" data-link-type="footer" data-link-name="Legal">Legal</a></li>
        <li class="clear"><a href="https://www.mozilla.org/about/legal/fraud-report/" data-link-type="footer" data-link-name="Report Trademark Abuse">Report Trademark Abuse</a></li>
      </ul>
    </div>
    <div class="col col-3">
      <ul class="links-social">
        <li>
          Mozilla:
          <ul>
            <li><a href="https://twitter.com/mozilla" data-link-type="footer" data-link-name="Twitter (@mozilla)">Twitter<span> (@mozilla)</span></a></li>
            <li><a href="https://www.facebook.com/mozilla" data-link-type="footer" data-link-name="Facebook (Mozilla)">Facebook<span> (Mozilla)</span></a></li>
            <li><a href="https://www.instagram.com/mozillagram/" data-link-type="footer" data-link-name="Instagram (@mozillagram)">Instagram<span> (@mozillagram)</span></a></li>
          </ul>
        </li>
        <li>
          Firefox:
          <ul>
            <li><a href="https://twitter.com/firefox" data-link-type="footer" data-link-name="Twitter (@firefox)">Twitter<span> (@firefox)</span></a></li>
            <li><a href="https://www.facebook.com/Firefox" data-link-type="footer" data-link-name="Facebook (Firefox)">Facebook<span> (Firefox)</span></a></li>
            <li><a href="https://www.youtube.com/firefoxchannel" data-link-type="footer" data-link-name="YouTube (firefoxchannel)">YouTube<span> (firefoxchannel)</span></a></li>
          </ul>
        </li>
        <li>
          SUMO:
          <ul>
            <li><a href="https://twitter.com/support_mozilla" data-link-type="footer" data-link-name="Twitter (@sumo_mozilla)">Twitter<span> (@sumo_mozilla)</span></a></li>
            <li><a href="https://blog.mozilla.org/sumo" data-link-type="footer" data-link-name="Blog (SUMO)">Blog<span> (SUMO)</span></a></li>
            <li><a href="https://www.youtube.com/channel/UCaiposaIhA7HfMqH2NIciyA" data-link-type="footer" data-link-name="YouTube (
SUMO)">YouTube<span> (SUMO)</span></a></li>
          </ul>
        </li>
      </ul>
      <div class="lang-switcher">
        <@component id="custom.language-button" />
      </div>
    </div>
  </nav>
</footer>
Assignee: nobody → mdziewonski
Blocks: 1337569
Status: NEW → ASSIGNED
Summary: English language footer on localized KB articles and product page → Footer on localized KB articles and product page should be localizable
Component: Lithium Migration → User Experience & Design
Product: support.mozilla.org → support.mozilla.org - Lithium
Blocks: 1350845
Component: User Experience & Design → Localization
Depends on: 1342695
Available strings updated: https://docs.google.com/spreadsheets/d/1ay5nOasSZLIsjaCvEMc7wT6N_Wrrhb1zIya18hnbS5I/edit#gid=0

Waiting for one additional link for the footer ("Get Community Support") (see https://bugzilla.mozilla.org/show_bug.cgi?id=1342695)

Footer code after replacing hard-coded parts with strings:



<footer id="colophon">
  <nav class="row">
    <div class="col col-1">
      <div class="logo">
        <a href="/" data-link-type="footer" data-link-name="Mozilla"><img src="${asset.get("/html/assets/moz-light-logo.svg")}" /></a>
      </div>
      <p class="license">
        ${text.format("footer.mozilla.copyright")}
      </p>
    </div>
    <div class="col col-2">
      <ul class="links-join">
        <li><a href="https://www.mozilla.org/about/" data-link-type="footer" data-link-name="About">${text.format("footer.mozilla.about")}</a></li>
        <li class="wrap"><a href="https://www.mozilla.org/contact/spaces/" data-link-type="footer" data-link-name="Contact">${text.format("footer.mozilla.contact")}</a></li>
        <li class="wrap"><a href="https://donate.mozilla.org?utm_source=support.mozilla.org&utm_medium=referral&utm_content=footer" class="donate" data-link-type="footer" data-link-name="Donate">${text.format("footer.mozilla.donate")}</a></li>
        <li class="clear"><a href="https://www.mozilla.org/contribute/" data-link-type="footer" data-link-name="Contribute">C${text.format("footer.mozilla.contribute")}</a></li>
      </ul>
      <ul class="links-legal">
        <li><a href=" https://www.mozilla.org/privacy/websites" data-link-type="footer" data-link-name="Privacy">${text.format("footer.mozilla.privacy")}</a></li>
        <li class="wrap"><a href="https://www.mozilla.org/privacy/websites/#cookies" data-link-type="footer" data-link-name="Cookies">${text.format("footer.mozilla.cookies")}</a></li>
        <li class="wrap"><a href="https://www.mozilla.org/about/legal/terms/mozilla" data-link-type="footer" data-link-name="Legal">${text.format("footer.mozilla.legal")}</a></li>
        <li class="clear"><a href="https://www.mozilla.org/about/legal/fraud-report/" data-link-type="footer" data-link-name="Report Trademark Abuse">${text.format("footer.mozilla.report.abuse")}</a></li>
      </ul>
        <li class="clear"><a href="" data-link-type="footer" data-link-name="Get Community Support">${text.format("footer.mozilla.community.support")}</a></li>
      </ul>
    </div>
    <div class="col col-3">
      <ul class="links-social">
        <li>
          Mozilla:
          <ul>
            <li><a href="https://twitter.com/mozilla" data-link-type="footer" data-link-name="Twitter (@mozilla)">Twitter<span> (@mozilla)</span></a></li>
            <li><a href="https://www.facebook.com/mozilla" data-link-type="footer" data-link-name="Facebook (Mozilla)">Facebook<span> (Mozilla)</span></a></li>
            <li><a href="https://www.instagram.com/mozillagram/" data-link-type="footer" data-link-name="Instagram (@mozillagram)">Instagram<span> (@mozillagram)</span></a></li>
          </ul>
        </li>
        <li>
          Firefox:
          <ul>
            <li><a href="https://twitter.com/firefox" data-link-type="footer" data-link-name="Twitter (@firefox)">Twitter<span> (@firefox)</span></a></li>
            <li><a href="https://www.facebook.com/Firefox" data-link-type="footer" data-link-name="Facebook (Firefox)">Facebook<span> (Firefox)</span></a></li>
            <li><a href="https://www.youtube.com/firefoxchannel" data-link-type="footer" data-link-name="YouTube (firefoxchannel)">YouTube<span> (firefoxchannel)</span></a></li>
          </ul>
        </li>
        <li>
          SUMO:
          <ul>
            <li><a href="https://twitter.com/support_mozilla" data-link-type="footer" data-link-name="Twitter (@sumo_mozilla)">Twitter<span> (@sumo_mozilla)</span></a></li>
            <li><a href="https://blog.mozilla.org/sumo" data-link-type="footer" data-link-name="Blog (SUMO)">Blog<span> (SUMO)</span></a></li>
            <li><a href="https://www.youtube.com/channel/UCaiposaIhA7HfMqH2NIciyA" data-link-type="footer" data-link-name="YouTube (
SUMO)">YouTube<span> (SUMO)</span></a></li>
          </ul>
        </li>
      </ul>
      <div class="lang-switcher">
        <@component id="custom.language-button" />
      </div>
    </div>
  </nav>
</footer>
This has been deployed to prod.

[Note] footer strings for localization:

footer.mozilla.copyright = Portions of this content are ©1998-${current.year}<br>by individual mozilla.org contributors. Content <br>available under a <a href="//www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a>.
footer.mozilla.about = About 
footer.mozilla.contact = Contact Us
footer.mozilla.donate = Donate
footer.mozilla.contribute = Contribute
footer.mozilla.privacy = Privacy
footer.mozilla.cookies = Cookies
footer.mozilla.legal = Legal
footer.mozilla.report.abuse = Report Trademark Abuse
footer.mozilla.community.support = Get Community Support
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.