fix: Renamed the id's + fixed logic

Author: lamATnginx

assets/js/product-selector.js

@@ -20,11 +20,8 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   window.addEventListener('click', (event) => {
-    /* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has a classname containing "product-selector" */
-    if (
-      event.target.classList.length === 0 ||
-      !event.target.classList[0].includes('product-selector')
-    ) {
+    /* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has an id containing "product-selector" */
+    if (!event.target.id.includes('product-selector')) {
       productSelectorContent.style.display = 'none';
       productSelectorButton.classList.remove('remove-bottom-radius');
     }

layouts/partials/sidebar-v2.html

@@ -41,11 +41,11 @@
     {{ $type := . }}
     {{ $products := index $groupedProducts $type }}
         <div class="product-selector-content" id="product-selector-content">
-            <p class="product-selector-content-product-group-name">{{ $type | humanize | title | upper }}</p>
-            <ul class="product-selector-content-product-container">
+            <p id="product-selector-content-product-group-name">{{ $type | humanize | title | upper }}</p>
+            <ul id="product-selector-content-product-container">
             {{ range $products }}
-                <li class="product-selector-content-product-name">
-                    <a class="product-selector-content-product-link" href="{{ .url }}">{{ .title }}</a>
+                <li id="product-selector-content-product-name">
+                    <a id="product-selector-content-product-link" href="{{ .url }}">{{ .title }}</a>
                 </li>
             {{ end }}
             </ul>