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

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

Hasan112
Shopify Partner
12 0 1

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

<option value="{{ variant.id }}" {% if variant == selected_variant %}selected{% endif %}>
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  

Replies 11 (11)

Shadab_dev
Shopify Partner
160 5 18

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

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
Hasan112
Shopify Partner
12 0 1

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
Shopify Partner
160 5 18

@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. 

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
Hasan112
Shopify Partner
12 0 1

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

Shadab_dev
Shopify Partner
160 5 18

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

 

Thanks 

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
Hasan112
Shopify Partner
12 0 1

Okay Thanks 

joshcorbett
Shopify Partner
26 1 6

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.

you can't just say perchance
Hasan112
Shopify Partner
12 0 1

Okay Thanks 

joshcorbett
Shopify Partner
26 1 6

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.

you can't just say perchance
Hasan112
Shopify Partner
12 0 1

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
Shopify Partner
26 1 6

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.

you can't just say perchance