How do I disable Auto Select Variant - Dawn theme new version product-templete.liquid is no more

[Hasan112]

tell me please how to do it on dawn theme old trick is not working..

product-templete.liquid is no more now on dawn latest version

and also {% if value.selected %} checked {% endif %} I remove this lines on product-variant-options.liquid this is not working in front no select the variant but backend the function is working.. how to fix it in dawn theme new version.. my dawn theme currently new version is 14 right now.. i Want to fix it please help me out

[Shadab_dev]

@Hasan112 please clarify this. Do you want to remove the feature where when the page loads it selects the first available variant by default?

[Hasan112]

Shopify select the first variant automatically, I just want to disable the automatic function, Select variant by visitor itself, if visitor select no variant the add to card button is not working and they appear the message “please select any option first”

[Shadab_dev]

@Hasan112 hmmm. Got it, that will require some looking up since the code base of the latest version of dawn theme v15 has changed drastically.

[Hasan112]

Thanks brother for reply, yes exactly I agree.. If you are expert, can you please help on this ?

[Shadab_dev]

@Hasan112 I will give it a shot and update you if anything comes up

Thanks

[Hasan112]

Okay Thanks

[joshcorbett]

Currently looking into implementing this in our Dawn-based theme we’re upgrading to v15. Will post here any findings or breakthroughs we’ve made, and would appreciate the same in this thread if we haven’t done so yet.

[Hasan112]

Okay Thanks

[joshcorbett]

I’ve found a solution that I’ve implemented into a v15 dev branch at my work. I did the following:

The source of truth

At the top of the main-product liquid file, I’m using a variable ‘selected_variant’ as a main source of truth for the currently selected variant, and re-using it across various snippets that refer to variant info (price, inventory, etc.).

By default, ‘selected_variant’ will remain null, unless content_for_header contains the option_values parameter in the url.

{%- capture content_for_querystring -%}{{ content_for_header }}{%- endcapture -%}

{% liquid
    assign query_parts = content_for_querystring | split: '"pageurl":"' | last | split: '"' | first | split: '://' | last | split: '/'

    if query_parts.size > 1
      assign domain_removed_parts = query_parts | slice: 1, query_parts.size
      assign final_url = domain_removed_parts | join: '/' | prepend: '/'
    else
      assign final_url = '/'
    endif

    assign final_url = final_url | replace: '\/', '/' | replace: '%20', ' ' | replace: '\u0026', '&'

    assign is_variant_selected = false
    if final_url contains 'option_values=' or product.selected_variant.id or product.has_only_default_variant or section.settings.auto_set_variant == true
      assign is_variant_selected = true
    endif

    assign selected_variant = null
    if is_variant_selected
      assign selected_variant = product.selected_or_first_available_variant
    endif
%}

Option Selection Part 1

Inside the ‘product-variant-options’ snippet, we need to only show selected state on option values if ‘selected_variant’ isn’t blank. So all we need to do here is add another check to the lines rendering the checked state on the inputs and selects.

Example:

{% if value.selected and selected_variant %}
  selected="selected"
{% endif %}

Option Selection Part 2

On products where multiple groups of options are present, this will misbehave. Unless we automatically select remaining option values, it will select the first available variant regardless of your selection.

Example: A product has color and size options, clicking ‘LG’ on size will select the first color and the smallest size instead of LG.

To fix this, I’ve created a getter function on the ‘VariantSelects’ class to return currently selected and missing selected values for options, and passed that value to the change event.

connectedCallback() {
    this.addEventListener('change', (event) => {
      const target = this.getInputForEventTarget(event.target);
      this.updateSelectionMetadata(event);

      publish(PUB_SUB_EVENTS.optionValueSelectionChange, {
        data: {
          event,
          target,
          selectedOptionValues: this.completeOptionValuesSet,
                             // ^^^ use getter here
        },
      });
    });
  }
  // ...
  // new getter
  get completeOptionValuesSet() {
    const selectionOptionValues = this.selectedOptionValues;
    const optionGroups = Array.from(this.querySelectorAll('fieldset, select'));
    if (selectionOptionValues.length === optionGroups.length) return selectionOptionValues;

    let completeOptionValuesSet = [];
    optionGroups.forEach((group) => {
      const selectedOption = group.querySelector('input:checked', 'select option[selected]');
      if (selectedOption) {
        completeOptionValuesSet.push(selectedOption.dataset.optionValueId);
      } else {
        const firstAvailableOption = group.querySelector('input:not(:disabled), option:not(:disabled)');
        firstAvailableOption && completeOptionValuesSet.push(firstAvailableOption.dataset.optionValueId);
      }
    })
    return completeOptionValuesSet;
  }

I may or may not have missed some edge cases, but this is the backbone of our implementation. I also haven’t tested the dropdown variant picker mode.

[Hasan112]

Thank you so much, I will check this. where i put this java script ? in theme.liquid or header.liquid and 2nd option is that..

{%- capture content_for_querystring -%}{{ content_for_header }}{%- endcapture -%} {% liquid assign query_parts = content_for_querystring | split: ‘“pageurl”:"’ | last | split: ‘"’ | first | split: ‘://’ | last | split: ‘/’ if query_parts.size > 1 assign domain_removed_parts = query_parts | slice: 1, query_parts.size assign final_url = domain_removed_parts | join: ‘/’ | prepend: ‘/’ else assign final_url = ‘/’ endif assign final_url = final_url | replace: ‘/’, ‘/’ | replace: ‘%20’, ’ ’ | replace: ‘\u0026’, ‘&’ assign is_variant_selected = false if final_url contains ‘option_values=’ or product.selected_variant.id or product.has_only_default_variant or section.settings.auto_set_variant == true assign is_variant_selected = true endif assign selected_variant = null if is_variant_selected assign selected_variant = product.selected_or_first_available_variant endif %}

I can’t understand this, is this for example or put or replace this data to somewhere ?

[joshcorbett]

I strongly recommend being knowledgeable and comfortable with modifying your theme code before implementing this, I can’t simply tell you exactly where to put certain blocks and blam it works- since it may work differently for you as it does for us. This is a very top-level explanation of our approach. That said, I’d hand the project of implementing off to a Shopify Expert, using my findings as reference.

We used the content_for_header block because Shopify had an issue with the product.selecetd_variant object at the time of implementation, that resulted in it being null when the new selected options parameters are present in a request. It’s since been fixed, so that can once again be used as a more predictable source of truth.

[Hasan112]

Okay thank you so much

[banago]

Here is how it’s done on Dawn theme - file: snippets/product-variant-options.liquid

1. Just before the for loop add this line:

{%- if picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
    
{%- endif -%}

2. Remove this line from the code near the end of the file:

{% if option.selected_value == value %}
    selected="selected"
{% endif %}

You will get something like this:

Good luck!

[joshcorbett]

This solution is half-baked, and still allows customers to add to cart without having selected an option.

[Hasan112]

I already knew it on dropdown, I do not want it on dropdown but Thanks you much for ur efforts

[Hasan112]

Yes exactly, do you have any solution, but not in drop downdown
currently , I used it this method, add javascript on add to cart button and alert when user select any option then add to cart is working otherwise it showing alert
Example

document.addEventListener(‘DOMContentLoaded’, function() {
const optionNames = [“Size”, “Material”, “Model”, “Design”, “Option”];
const addToCartButton = document.getElementById(‘ProductSubmitButton-template–17184316686525__main’);

// Function to check if all available options are selected
function areOptionsSelected() {
for (let name of optionNames) {
const inputs = document.querySelectorAll(input[name="${name}"]);
if (inputs.length > 0 && !Array.from(inputs).some(input => input.checked)) {
return false;
}
}
return true;
}

addToCartButton.addEventListener(‘click’, function(event) {
if (!areOptionsSelected()) {
event.preventDefault(); // Prevent actual form submission
alert(‘Please select all available options first.’);
console.log(‘Not all options are selected: preventing form submission’);
} else {
console.log(‘Form is being submitted’);
}
});
});

[Shadab_dev]

I was able to implement something similar to this where i was able to select a variant of my choice from the variant I’d. It does have a catch though on page load Shopify’s selected variant shows up but I am refreshing the contents again so that my choice of variant gets selected. This refresh is not the entire page refresh but only the product section.

So Shopify shores the selected or first available variant on a script file in the products page, so Instead if we on page load can remove the content from that script so no variant will be selected. I haven’t tried this part yet. I feel there could be a gotcha which is if no variant is there the product images and product info part might go blank

[Bohdan5]

Thanks for the detailed explanation. I just want to clarify one thing: if I need to disable Auto Select Variant for one of the options, for example, the ‘Size’ option, and after the user selects a size variant, I need to activate or show the ‘Add to Cart’ button, can I use this approach to make it work?

[Shadab_dev]

Hey @Bohdan5 so I cannot tell you much about josh’s solution as I feel I am not that advanced with Shopify yet.

I tried this stuff it’s not a very clean solution and I don’t know how much it can help your cause but I can try may be.

Please reach out via personal links below for a convenient conversation and collaboration.

Best

Shadab Ali