Fix - Refactor attribute id to data selector to fix duplicate ids (#1…

…1866) * Refactor attribute id to data selector to fix duplicate ids * lint:js * prettier --------- Co-authored-by: Ben Morse <[email protected]> Co-authored-by: Mavis Ou <[email protected]>
MozillaFoundation · Feb 29, 2024 · 8d3da0b · 8d3da0b
1 parent e8de847
commit 8d3da0b
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 15 deletions.
diff --git a/maintenance/maintenance.html b/maintenance/maintenance.html
@@ -78,7 +78,7 @@
  </div>
  </div>
  <div class="donate-btn-wrapper">
- <a id="donate-header-btn" class="tw-btn-pop" href="?form=donate">Donate</a>
+ <a data-donate-header-button class="tw-btn-pop" href="?form=donate">Donate</a>
  </div>
  </div>
  </div>

diff --git a/maintenance/static/css/main.css b/maintenance/static/css/main.css
@@ -8258,12 +8258,12 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
  #primary-nav-container .menu-container {
  padding: 16px 0; } }
 
-#primary-nav-container #donate-header-btn {
+#primary-nav-container [data-donate-header-button] {
  font-size: 17px;
  line-height: 1.35294;
  color: #000000;
  font-weight: 700; }
- #primary-nav-container #donate-header-btn:hover {
+ #primary-nav-container [data-donate-header-button]:hover {
  color: #0d10bf;
  cursor: pointer; }
 

diff --git a/network-api/networkapi/templates/fragments/buyersguide/pni_nav_links.html b/network-api/networkapi/templates/fragments/buyersguide/pni_nav_links.html
@@ -17,5 +17,5 @@
 {% endwith %}
 {% routablepageurl home_page 'about-why-view' as about_why_url %}
 <a class="{{ class }} {% bg_active_nav request.get_full_path about_why_url %}" href="{{ about_why_url }}">{% trans "About" %}</a>
-<a id="donate-header-btn" class="{{ class }}" href="?form=donate&utm_medium=FMO&utm_source=PNI&utm_campaign=23-PNI&utm_content=header&c_id=7014x000000eQOD">{% trans "Donate" %}</a>
+<a data-donate-header-button class="{{ class }}" href="?form=donate&utm_medium=FMO&utm_source=PNI&utm_campaign=23-PNI&utm_content=header&c_id=7014x000000eQOD">{% trans "Donate" %}</a>
 {{ post }}
diff --git a/network-api/networkapi/templates/fragments/primary_nav.html b/network-api/networkapi/templates/fragments/primary_nav.html
@@ -63,7 +63,7 @@
 
  {% block donate_and_newsletter %}
  <div class="d-flex align-items-center">
- <a id="donate-header-btn" class="primary-nav-special-link tw-heart-glyph tw-flex" href="?form=donate">{% trans "Donate" %}</a>
+ <a data-donate-header-button class="primary-nav-special-link tw-heart-glyph tw-flex" href="?form=donate">{% trans "Donate" %}</a>
  {% if page.signup == None %}<button class="tw-btn-secondary btn-newsletter d-none d-lg-block ml-md-3">{% trans "Newsletter" %}</button>{% endif %}
  </div>
  {% endblock %}

diff --git a/network-api/networkapi/wagtailpages/templates/maintenance/maintenance.html b/network-api/networkapi/wagtailpages/templates/maintenance/maintenance.html
@@ -77,7 +77,7 @@
  </div>
  </div>
  <div class="donate-btn-wrapper">
- <a id="donate-header-btn" class="tw-btn-pop" href="?form=donate">Donate</a>
+ <a data-donate-header-button class="tw-btn-pop" href="?form=donate">Donate</a>
  </div>
  </div>
  </div>

diff --git a/source/js/buyers-guide/analytics-events.js b/source/js/buyers-guide/analytics-events.js
@@ -9,7 +9,7 @@ import { ReactGA, GoogleAnalytics } from "../common";
 function getQuerySelectorEvents(pageTitle, productName) {
  return {
  // "site-wide" events
- "#donate-header-btn": {
+ "[data-donate-header-button]": {
  category: `buyersguide`,
  action: `donate tap`,
  label: `${pageTitle} donate header`,

diff --git a/source/js/common/template-js-handles/header-donate-button.js b/source/js/common/template-js-handles/header-donate-button.js
@@ -1,17 +1,21 @@
 import { ReactGA } from "../../common";
 
 /**
- * Bind click handler to #donate-header-btn
+ * Bind click handler to data-donate-header-button
  * ("Donate" button on primary nav)
  */
 export default () => {
- let donateHeaderBtn = document.getElementById(`donate-header-btn`);
- if (donateHeaderBtn) {
- donateHeaderBtn.addEventListener(`click`, () => {
- ReactGA.event({
- category: `donate`,
- action: `donate button tap`,
- label: `${document.title} header`,
+ const donateHeaderBtn = document.querySelectorAll(
+ "[data-donate-header-button]"
+ );
+ if (donateHeaderBtn.length > 0) {
+ donateHeaderBtn.forEach((element) => {
+ element.addEventListener(`click`, () => {
+ ReactGA.event({
+ category: `donate`,
+ action: `donate button tap`,
+ label: `${document.title} header`,
+ });
  });
  });
  }