Dawn v15 - Disable variant auto-selection and disable "Add to Cart" until a variant is selected

[NZ_Trinkets]

I’m currently using the standard 'variant picker' block on my product pages (Dawn v15 theme). I'm facing a couple of challenges and I'm hoping someone in the community might have a working solution they'd be willing to share.

Specifically, I'm looking to implement two key pieces of functionality:

1. Disable the default auto-selection of the first available variant. I want the variant picker to initially show no selection, requiring the customer to make an explicit choice.
2. Ensure the "Add to Cart" button is disabled until a valid variant is selected. The button should remain unclickable until a customer has made a selection that corresponds to an available product variant.

I've explored a few avenues but haven't found a working solution for Dawn version 15 and the variant picker block.

Does anyone have a working solution for this? Any guidance, code snippets, or pointers to relevant resources would be appreciated!

[Guleria]

Hello @NZ_Trinkets ,

I applied the same concept in the prestige theme.
If you want I can share my javascript code. But in order to make it work you need to make multiple changes in the product template.

Here you can check this example 

Regards
Guleria

[NZ_Trinkets]

Hi @Guleria

That would be really great, thank you so much!

[Guleria]

 document.addEventListener("DOMContentLoaded", function () {
    let radios = document.querySelectorAll('input[name="option2"]');
    let button = document.querySelector(".buy-buttons .button"); // Selecting button by class
    let sizeCustom = document.querySelector(".Size-custom");

            let span = document.createElement("span");
            span.className = "button w-full intial-button";
            span.textContent = "Select size";
            
            // Insert after the button
            button.insertAdjacentElement("afterend", span);
   
    let Ibutton = document.querySelector(".buy-buttons .button.w-full.intial-button"); 
    radios.forEach(radio => radio.checked = false);
    function updateButton() {
        let isChecked = Array.from(radios).some(radio => radio.checked);
        if (isChecked) { 
            button.disabled = false;
            sizeCustom.classList.remove("alert-highlight"); 

            button.style.display = "block";
            Ibutton.style.display = "none";
          
        } else { 
            button.disabled = true; 
            button.style.display = "none";
        }
    }

    // Add event listener to each radio button
    radios.forEach(radio => radio.addEventListener("change", updateButton));

    // Initial check when the page loads
    setTimeout(function(){ 
      updateButton();
    }, 100); 
    
    Ibutton.addEventListener("click", function () {
      sizeCustom.classList.add("alert-highlight");
    });
    
    let radioButtons = document.querySelectorAll('input[name="option1"]');
  //  radioButtons.forEach(radioinner => {
      //radioinner.addEventListener("change", function () { 
      document.addEventListener("change", function (e) {  
        if (e.target.matches('input[name="option2"]')) {
            let element = document.querySelector("html .intial-button");
            let ltbutton = document.querySelector("html .buy-buttons .button");  
            let ltsizeCustom = document.querySelector("html .Size-custom");
            element.style.display = "none";
            ltbutton.style.display = "block";
            // ltsizeCustom.classList.add("alert-highlight");
              const theValue = e.target.value;

            // Remove existing is-selected class from all labels
            document.querySelectorAll('.block-swatch').forEach(label => {
              label.classList.remove('is-selected');
            });
        
            // Find the matching label using the input's id
            const matchingLabel = document.querySelector(`label[for="${e.target.id}"]`);
            if (matchingLabel) {
              matchingLabel.classList.add('is-selected');
            }
           

          
        }
        if (e.target.matches('input[name="option12"]')) {
          
          let ltbutton = document.querySelector("html .buy-buttons .button");        
          let span = document.createElement("span");
          span.className = "button w-full intial-button";
          span.textContent = "Select size";
          //alert('hi')
          // Insert after the button
          ltbutton.insertAdjacentElement("afterend", span);
          ltbutton.classList.add("hide-intial");
          
          let checkedRadio = document.querySelector('html input[name="option2"]:checked');
          let ltradios = document.querySelectorAll('html input[name="option2"]');
          let button = document.querySelector("html .buy-buttons .button");
          let ltisChecked = Array.from(ltradios).some(ltradios => ltradios.checked);
          let ltIbutton = document.querySelector(".buy-buttons .button.w-full.intial-button"); 
          
          if (checkedRadio) {
              checkedRadio.checked = true;
          } else if (ltradios.length > 0) {
              ltradios[0].checked = true; // If none are checked, check the first one
              ltradios.forEach(ltradios => ltradios.checked = true);
          }
          
          setTimeout(function(){ 
            let element = document.querySelector("html .intial-button");
            
            if (element) { 
              let displayStyle = window.getComputedStyle(element).display;
              //alert(displayStyle);
              if (displayStyle === "none") {
                
              }else{
                ltradios.forEach(ltradios => ltradios.checked = false);
                button.style.display = "none";
                //button.disabled = true; 
              }
            }
            
          }, 400);
                                                          
     

  
      }                                                 
      });

[NZ_Trinkets]

Thanks @Guleria . This has been helpful. Unfortunately I haven't been able to adjust the code to work for my store. Do you happen to have an example where just one variant is used (such as color)?

[PaulNewton]

Hi @NZ_Trinkets combined no variant-auto-select and disabled-addToCart are an advanced theme customization.

If you need this customization then contact me for services.
Contact info in forum signature below ⬇ ⬇ ⬇.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.