Fix - Refactor attribute id to data selector to fix duplicate ids (#11866)

* Refactor attribute id to data selector to fix duplicate ids

* lint:js

* prettier

---------

Co-authored-by: Ben Morse <ben.morse@torchbox.com>
Co-authored-by: Mavis Ou <mmmavis@users.noreply.github.com>

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>

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; }
 

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 }}

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 %}

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>

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`,

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`,
+        });
       });
     });
   }