Merge pull request #2536 from bigcommerce/remove-inline-handler

Remove inline handlers in cart, payment account page
bigcommerce · Feb 5, 2025 · 8447dd3 · 8447dd3
2 parents 4ac6945 + 2f260a2
commit 8447dd3
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Refactor cart, payment account page inline event handlers to event listeners [#2536](https://github.com/bigcommerce/cornerstone/pull/2536)
 
 ## 6.16.0 (01-15-2025)
 - Remove escaping of "=" symbol for <head> for blog and brand [#2528](https://github.com/bigcommerce/cornerstone/pull/2528)

diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js
@@ -402,6 +402,10 @@ export default class Cart extends PageManager {
                 this.bindGiftWrappingForm();
             });
         });
+
+        $('.cart-item-option-remove').on('click', () => {
+            window.confirm(this.context.giftWrappingRemoveMessage);
+        });
     }
 
     bindGiftWrappingForm() {

diff --git a/templates/components/cart/item-giftwrap.html b/templates/components/cart/item-giftwrap.html
@@ -7,7 +7,7 @@
             <dd class="cart-item-option-description">
                 {{gift_wrapping.name}}: {{gift_wrapping.price.formatted}}
                 <span class="cart-item-option-actions">
-                    (<a href="" data-item-giftwrap="{{id}}">{{lang 'cart.gift_wrapping.change'}}</a> or <a href="{{gift_wrapping.remove_url}}" onclick="return confirm('{{lang 'cart.gift_wrapping.remove_confirm'}}')">{{lang 'cart.gift_wrapping.remove'}}</a>)
+                    (<a href="" data-item-giftwrap="{{id}}">{{lang 'cart.gift_wrapping.change'}}</a> or <a class="cart-item-option-remove" href="{{gift_wrapping.remove_url}}">{{lang 'cart.gift_wrapping.remove'}}</a>)
                 </span>
             </dd>
             {{#if gift_wrapping.message}}

diff --git a/templates/components/common/quick-search.html b/templates/components/common/quick-search.html
@@ -1,5 +1,5 @@
 <div class="container">
-    <form class="form" onsubmit="return false" data-url="{{urls.search}}" data-quick-search-form>
+    <form class="form" data-url="{{urls.search}}" data-quick-search-form>
         <fieldset class="form-fieldset">
             <div class="form-field">
                 <label class="is-srOnly" for="{{name}}">{{lang "search.quick_search.input_label"}}</label>

diff --git a/templates/layout/base.html b/templates/layout/base.html
@@ -47,6 +47,7 @@
         {{~inject 'carouselArrowAndDotAriaLabel' (lang 'carousel.arrow_and_dot_aria_label')}}
         {{~inject 'carouselActiveDotAriaLabel' (lang 'carousel.active_dot_aria_label')}}
         {{~inject 'carouselContentAnnounceMessage' (lang 'carousel.content_announce_message')}}
+        {{~inject 'giftWrappingRemoveMessage' (lang 'cart.gift_wrapping.remove_confirm')}}
     </head>
     <body>
         <svg data-src="{{cdn 'img/icon-sprite.svg'}}" class="icons-svg-sprite"></svg>
@@ -79,7 +80,16 @@
                 }
             }
         </script>
-        <script nonce="{{nonce}}" async defer src="{{cdn 'assets/dist/theme-bundle.main.js' resourceHint='preload' as='script'}}" onload="onThemeBundleMain()"></script>
+        <script id="theme-bundle-main" nonce="{{nonce}}" async defer src="{{cdn 'assets/dist/theme-bundle.main.js' resourceHint='preload' as='script'}}"></script>
+        <script nonce="{{nonce}}">
+            const scriptElement = document.getElementById('theme-bundle-main');
+
+            if (scriptElement) {
+                addEventListener('load', onThemeBundleMain);
+            } else {
+                console.error('Could not find script element with id "theme-bundle-main"');
+            }
+        </script>
 
         {{{footer.scripts}}}
     </body>