YSHOP2-1031: COD themes > theme 1 > dropdown menu bugs (#416)

## Ticket

[YSHOP2-1031](https://youcanshop.atlassian.net/browse/YSHOP2-1031)

## QA Steps

- [ ] `pnpm i`
- [ ] `pnpm dev`
- [ ] Make sure that you have more than one dropdown variant in your
product
- [ ] Verify that we have corrected the functionality of the dropdown
menu


[YSHOP2-1031]:
https://youcanshop.atlassian.net/browse/YSHOP2-1031?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

assets/dropdown-menu.js

@@ -1,42 +1,66 @@
-const dropdownBtn = $('.dropbtn');
-const dropdownContent = $('.dropdown-content');
-const dropdownOptions = dropdownContent?.querySelectorAll('li');
-
-function showDropDownMenu(customContent) {
-  if(customContent) {
-      customContent.classList.toggle('show');
-  } else if (dropdownContent) {
-      dropdownContent.classList.toggle('show');
-  }
+/**
+ * @param {HTMLElement} element
+ */
+function showDropDownMenu(element) {
+  element.classList.toggle('show');
 }
 
-const hideDropDownMenu = (event) => {
+/**
+ * @param {HTMLElement} element
+ * @param {Event} event
+ */
+function hideDropDownMenu(element, event)  {
   if (!event.target.matches('.dropbtn, .dropbtn *')) {
-    dropdownContent?.classList.remove('show');
+    element?.classList.remove('show');
   }
-};
-
-window.addEventListener('click', (event) => hideDropDownMenu(event));
+}
 
-function selectOption(e) {
-  const selectedOption = e.target;
+/**
+ * @param {HTMLElement} element
+ * @param {HTMLElement} options
+ * @param {Event} event
+ */
+function selectOption(element, options, event) {
+  const selectedOption = event.target;
 
-  dropdownOptions.forEach((option) => {
+  options.forEach((option) => {
     option.classList.remove('selected');
   });
 
   selectedOption.classList.add('selected');
-  dropdownBtn.firstElementChild.textContent = selectedOption.textContent;
+  element.firstElementChild.textContent = selectedOption.textContent;
 }
 
-if(dropdownOptions) {
-  dropdownOptions.forEach((option) => {
-    option.addEventListener('click', selectOption);
+function dropdownMenu() {
+  const dropdownInputs = document.querySelectorAll('.dropdown-input');
+
+  if(dropdownInputs.length === 0) {
+    return;
+  }
+
+  dropdownInputs.forEach((dropDownInput) => {
+    const selectInput = dropDownInput.querySelector('.dropbtn');
+    const dropdownContent = dropDownInput.querySelector('.dropdown-content');
 
-    window.addEventListener('DOMContentLoaded', (event) => {
-      if (option.classList.contains('selected')) {
-        dropdownBtn.firstElementChild.textContent = option.textContent;
-      }
+    selectInput.addEventListener('click', () => showDropDownMenu(dropdownContent));
+    window.addEventListener('click', (event) => hideDropDownMenu(dropdownContent, event));
+
+    const selectOptions = dropdownContent.querySelectorAll('li');
+
+    if(selectOptions.length === 0) {
+      return;
+    }
+
+    selectOptions.forEach((option) => {
+      option.addEventListener('click', (event) => selectOption(selectInput, selectOptions, event));
+
+      window.addEventListener('DOMContentLoaded', (event) => {
+        if (option.classList.contains('selected')) {
+          selectInput.firstElementChild.textContent = option.textContent;
+        }
+      });
     });
   });
 }
+
+dropdownMenu();

assets/queries-handler.js

@@ -53,10 +53,7 @@ if (searchTitle) {
   searchTitle.innerHTML = query;
 }
 // dropdown select
-function setupDropdown(dropdownBtn, dropdownContent, convertUrlWithMultipleQuery) {
-  // Handle the click event for the dropdown button
-  dropdownBtn.addEventListener('click', () => showDropDownMenu(dropdownContent));
-
+function setupDropdown(dropdownContent, convertUrlWithMultipleQuery) {
   // Handle the click event for the options in the dropdown
   dropdownContent.addEventListener('click', (event) => {
     event.preventDefault();
@@ -89,7 +86,7 @@ function filterProduct() {
 
     selectedOption.style.fontWeight = 'bold';
 
-    setupDropdown(filterDropdownBtn, filterDropdownContent, convertUrlWithMultipleQuery);
+    setupDropdown(filterDropdownContent, convertUrlWithMultipleQuery);
   }
 }
 

snippets/product-variants.liquid

@@ -12,9 +12,9 @@
       </label>
       {% case option.type %}
         {% when 'dropdown' %}
-          <div class='dropdown-input' onclick='showDropDownMenu()'>
+          <div class='dropdown-input'>
             <div class='dropbtn'>
-              <span class='option-name'>hello</span>
+              <span class='option-name'></span>
               <ion-icon name='chevron-down-outline' class='dropdown-icon'/>
             </div>
             <ul class='dropdown-content' name='{{ option.name }}'>