Custom drop-down menus in shop

Stock drop-down menus are limited when it comes to styling them. I wanted to have a specific appearance for my menus, so I made my own to replace the stock ones. In order to keep the functionality of the old ones I didn’t get rid of the stock menus, instead I’ve hidden them and routed the events from the new menu to the old one. This way squarespace keeps all the functionality which is tied to product variant selection, and I get to style my menus. I have also merged my previous blog post about adding spinning gear icons in front of the menus, into this code. If you followed my blog post about the gear icons, you can delete the pertaining code. During placement of the menu, I divide the position by the zoom factor, which may be applied to the body in CSS, to not be affected by it. It is normally 1, but if you followed my previous blog post about adjusting zoom for lower resolutions, it is especially handy to have. It is also good future proofing practice to account for zoom levels when positioning elements so that later changes will not produce unwieldy results.

HTML:

JAVASCRIPT:

<script>
document.addEventListener('DOMContentLoaded', function () {
//mobile check
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
const subString = '/shop';
const subStringTwo = 'shop/p/';
const getURL = window.location.href;
//make custom options button with gear spinner icon
function substituteSelect(select) {
const newSelectButton = document.createElement('div');
newSelectButton.classList.add('newSelectButton');
const selectText = select.getAttribute('data-variant-option-name') || 'Choose an option';
select.style.display = 'none';
select.parentNode.appendChild(newSelectButton);
const gearDiv = document.createElement('div');
gearDiv.id = "spinner";
gearDiv.classList.add('option-select-gear', 'spinner');
newSelectButton.appendChild(gearDiv);
const buttonText = document.createElement('div');
newSelectButton.appendChild(buttonText);
buttonText.innerHTML = selectText;
buttonText.classList.add('newSelectButtonText');
//adjust positioning
if (getURL.includes(subStringTwo)) { //product page
newSelectButton.style.marginTop = '20px'
gearDiv.style.top = isTouch ? '6px' : '1px';
} else { //shop grid category view
gearDiv.style.top = isTouch ? '15px' : '10px';;
}
// When the custom button is clicked, show the custom dropdown
newSelectButton.addEventListener('click', function (event) {
event.preventDefault();
// Remove existing dropdown to avoid duplicates
const existingContainer = document.getElementById('customDropdownContainer');
if (existingContainer) {
existingContainer.remove();
}
// Create new dropdown container
const container = document.createElement('div');
container.id = 'customDropdownContainer';
container.classList.add('customDropdownContainer');
const optionContainer = document.createElement('div');
optionContainer.id = 'customDropdownOptionContainer';
optionContainer.classList.add('customDropdownOptionContainer');
container.appendChild(optionContainer);
// Populate menu with select options
const optionEmptyStart = document.createElement('div');
optionEmptyStart.classList.add('customDropdownEmptyOption');
optionContainer.appendChild(optionEmptyStart);
const options = select.options;
for (let i = 0; i < options.length; i++) {
const option = document.createElement('div');
option.classList.add('customDropdownOption');
if (i !== 0) {
option.innerHTML = options[i].text;
// Select the option and close the dropdown
option.addEventListener('click', function () {
select.selectedIndex = i;
buttonText.innerHTML = options[i].text;
// Trigger change event to retain functionality
const event = new Event('change');
select.dispatchEvent(event);
container.remove();
});
optionContainer.appendChild(option);
}
}
const optionEmptyEnd = document.createElement('div');
optionEmptyEnd.classList.add('customDropdownEmptyOption');
optionContainer.appendChild(optionEmptyEnd);
// Append dropdown to body and position it
document.body.appendChild(container);
const zoomFactor = parseFloat(document.body.style.zoom) || 1;
const rectSelect = newSelectButton.getBoundingClientRect();
container.style.position = 'absolute';
container.style.top = `${(rectSelect.top + window.scrollY + 2) / zoomFactor}px`; 
container.style.left = `${(rectSelect.left + window.scrollX - 2) / zoomFactor}px`; 
container.style.width = `${newSelectButton.offsetWidth / zoomFactor}px`; 
// Close dropdown when clicking outside
document.addEventListener('click', function closeDropdown(event) {
if (!container.contains(event.target) && event.target !== newSelectButton) {
container.remove();
document.removeEventListener('click', closeDropdown);
}
});
});
}
//initiate dropdown menu replacement
if (getURL.includes(subString)) {
const selects = document.querySelectorAll('select');
selects.forEach(select => {
substituteSelect(select);
});
}
});
</script>

CSS:

//hide stock//
.variant-select-wrapper {
 // display: none !important;
  padding: 0 !important;
}
.variant-select-wrapper::before {
  display: none !important;
}
.newSelectButton{
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding-left: 10px;
  letter-spacing: 1.2px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.newSelectButtonText {
  pointer-events: none;
}
.customDropdownContainer {
  background-image: linear-gradient(to bottom, rgba(255,191,0,0) 0%, rgba(255,191,0,1) 10%, rgba(255,191,0,1) 90%, rgba(255,191,0,0) 100%);
  z-index: 1000;
  position: absolute;
  z-index: 9999;
  border-left: solid 2px;
  border-right: solid 2px;
  border-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 87%, rgba(0,0,0,0) 100%);
  border-image-slice: 1;
}
.customDropdownOption {
  font-size: 1.4em;
  padding-top: 3px;
  padding-bottom: 3px;
  letter-spacing: 1.2px;
  padding-left: 10px;
  padding-right: 5px;
  cursor: pointer;
}
.customDropdownOption:hover {
  color: var(--color1);
  background: #000000;
}
.customDropdownEmptyOption {
  height: 27px;
}
.option-select-gear {
  background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/3b177fcd-72b2-462f-a563-e73fd964de8f/Gearicon1.png');
  border: 0px !important;
  width: 25px !important;
  height: 25px !important;
  left: -35px;
  position: absolute;
  pointer-events: none;
}
.spinner {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: rotator 33s linear infinite;
}