Hi,
I'm trying to disable the auto selecting the first variant option available.
howeveer, I have a custom swatch and need help with the code.
{% assign option_name = "Color,Style,Colour" %}
{% assign swatch_size = '3vw' %} {% comment %} Change the color swatch size below.{% endcomment %}
{% assign swatch_shape = 'round' %} {% comment %} Change the swatch shape. Use either 'round', 'square', 'rectangle' or 'round-edge'. {% endcomment %}
{%- assign variants_available_arr = product.variants | map: 'available' -%}
{%- assign variants_option1_arr = product.variants | map: 'option1' -%}
{%- assign variants_option2_arr = product.variants | map: 'option2' -%}
{%- assign variants_option3_arr = product.variants | map: 'option3' -%}
{%- unless product.has_only_default_variant -%}
{% assign picker_type = block.settings.picker_type %}
{%- if picker_type == 'button' -%}
<variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
<fieldset {% if option_name contains option.name %} class="swatchComponent" style=" padding: 0;" {% else %} class="js product-form__input" style="border:none" {% endif %}>
{% if option_name contains option.name %}
<legend class="form__label">{{ option.name }}<color-name></color-name></legend>
<div id="panelPrecios" class="swatchContainer">
{% assign productVariantImage = "" %}
{%- for value in option.values -%}
{%- for productOption in product.variants -%}
{%- if productOption.options[0] == value -%}
{% if productOption.metafields.custom.variant_color_image != blank%}
{% assign productVariantImage = productOption.metafields.custom.variant_color_image %}
{% else %}
{% assign productVariantImage = productOption.featured_image %}
{% endif %}
{%- endif -%}
{%- assign option_disabled = true -%}
{% for option1_name in variants_option1_arr %}
{% case option.position %}
{% when 1 %}
{% if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
{%- assign option_disabled = false -%}
{% endif %}
{% when 2 %}
{% if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
{%- assign option_disabled = false -%}
{% endif %}
{% when 3 %}
{% if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
{%- assign option_disabled = false -%}
{% endif %}
{% endcase %}
{% endfor %}
{%- endfor -%}
<div class="amin_product ">
<input class="inputColor rr"
name="{{ option.name }}"
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
type="radio"
id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
{% if option.selected_value == value %}checked{% endif %} {% if option_disabled %}class="disabled"{% endif %}>
<label data-toggle="tooltip" class="labelColor"
for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
data-color="{{value | downcase | replace: ' ', '-' }}"
style="
{% case swatch_shape %}
{% when 'round' %} border-radius: 50%; aspect-ratio: 1;
{% when 'square' %} aspect-ratio: 1;
{% when 'rectangle' %} height: calc({{swatch_size}} / 2);
{% when 'round-edge' %} border-radius: 15%; aspect-ratio: 1;
{% endcase %}">
<img loading="lazy" data-toggle="tooltip" media="{{ productVariantImage }}" src="{{- productVariantImage | img_url: 'small' | uniq -}}" title="{{ value | escape }}" alt="{{- productVariantImage.alt -}}">
</label>
<div class="tooltip_product">
<img loading="lazy" class="tooltip" media="{{ productVariantImage }}" src="{{- productVariantImage | img_url: 'small' | uniq -}}" alt="{{- productVariantImage.alt -}}">
</div>
</div>
{% endfor %}
</div>
{% else %}
<legend class="form__label">{{ option.name }}<color-name></color-name></legend>
{%- for value in option.values -%}
{% assign otpionsize= option.name | downcase %}
{% if otpionsize == 'size' %}
{%- assign option_disabled = true -%}
{% for option1_name in variants_option1_arr %}
{% case option.position %}
{% when 1 %}
{% if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
{%- assign option_disabled = false -%}
{% endif %}
{% when 2 %}
{% if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
{%- assign option_disabled = false -%}
{% endif %}
{% when 3 %}
{% if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
{%- assign option_disabled = false -%}
{% endif %}
{% endcase %}
{% endfor %}
{% endif %}
<input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
{% if option.selected_value == value %}checked{% endif %} {% if option_disabled %}class="disabled"{% endif %}>
<label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}" class="options">
{{ value }}
</label>
{%- endfor -%}
{% endif %}
</fieldset>
{% endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
{%- else -%}
<variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
{% if option_name contains option.name %}
<variant-color>
<fieldset class="swatchComponent" style=" padding: 0;">
<legend class="form__label">{{ option.name }}<color-name></color-name></legend>
<div class="swatchContainer">
{% assign productVariantImage = "" %}
{%- for value in option.values -%}
{%- for productOption in product.variants -%}
{%- if productOption.options[0] == value -%}
{% assign productVariantImage = productOption.featured_image %}
{%- endif -%}
{%- endfor -%}
<input class="inputColor"
name="{{ option.name }}"
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
type="radio"
id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
{% if option.selected_value == value %}checked{% endif %}>
<label class="labelColor"
for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
style="
{% case swatch_shape %}
{% when 'round' %} border-radius: 50%; aspect-ratio: 1;
{% when 'square' %} aspect-ratio: 1;
{% when 'rectangle' %} height: calc({{swatch_size}} / 2);
{% when 'round-edge' %} border-radius: 15%; aspect-ratio: 1;
{% endcase %}">
<img loading="lazy" class="tooltip" src="{{- productVariantImage | img_url: 'small' | uniq -}}" alt="{{- productVariantImage.alt -}}" >
</label>
{% endfor %}
</div>
</fieldset>
</variant-color>
{% endif %}
<div class="product-form__input product-form__input--dropdown" {% if option_name contains option.name %}style="display: none"{% endif %}>
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select {% if option_name contains option.name %} colorSelect{% endif %}"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}">
{%- for value in option.values -%}
<option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
{{ value }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endif -%}
{%- endunless -%}
<noscript class="product-form__noscript-wrapper-{{ section.id }}">
<div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
<label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
<div class="select">
<select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
{%- for variant in product.variants -%}
<option
{% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
{% if variant.available == false %}disabled{% endif %}
value="{{ variant.id }}">
{{ variant.title }}
{%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
- {{ variant.price | money | strip_html }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
</noscript>
<script>
class VariantColor extends HTMLElement {
constructor() {
super();
this.inputColors = this.querySelectorAll('.inputColor');
this.inputColors.forEach(color => color.addEventListener('click', this.colorSelected.bind(this)));
}
colorSelected(event) {
const select = document.querySelector(`.colorSelect`);
const item = event.currentTarget.value;
select.value = item ;
}
}
customElements.define('variant-color', VariantColor);
</script>
<style>
fieldset{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.swatchComponent {
display: flex;
margin-bottom: 20px;
box-sizing: border-box;
position: relative;
border: none;
}
.swatchContainer {
display: flex;
flex-wrap: wrap;
width: 70%;
}
.inputColor {
display: none;
}
.labelColor {
width: 2.5vw;
margin: 1%;
display: flex;
justify-content: center;
align-items: center;
border: var(--variant-pills-border-width) solid #e5e5e5 !important;
cursor: pointer;
overflow: hidden;
transition: all .3s ease;
}
.labelColor:hover{
transform: scale(1.1);
}
.labelColor img {
object-fit: cover;
width: 100%;
height: 100%;
}
.inputColor:checked + .labelColor + .infoColor {
display: flex;
}
.inputColor:checked + .labelColor {
outline: 2px solid;
border: 2px solid white;
}
.tooltip:after {
opacity: 0;
content: "";
}
.tooltip:hover:after {
opacity: 1;
transition: opacity 0s linear 1s;
content: attr(att-name);
position: relative;
top: -15px;
left: 5px;
padding: 5px;
border-radius: 5px;
background-color: gray;
color: white;
}
.amin_product {
position: relative;
margin: 1%;
width: 3.5vw;
display: flex;
transition: all .3s ease;
}
.tooltip_product {
position: absolute;
z-index: 1;
display: none;
right: -74%;
}
.amin_product:hover .tooltip_product {
display: block;
}
.tooltip_product {
position: absolute;
padding: 5px;
width: 141px;
height: 149px;
background: #fff url(https://www.lurdesbergada.es/world/themes/syngman-cucala2/css/../../../img/color-hover-image.png) no-repeat;
z-index: 2;
top: 83%;
right: 50%;
transform: translate(46%, 10px);
background-repeat: no-repeat;
background-size: cover;
}
img.tooltip {
width: 100%;
}
img.tooltip {
position: absolute;
top: 12px;
width: 91%;
left: 6px;
}
</style>
Can you please let me know which code I need to remove?
Thank you
my website is
www.shopchaletetceci.com
