product-variant-options.liquid
line 93
{%- assign variant = product.variants | where: "title", value | first -%}
{% if option.name == 'Farbe' and variant and variant.metafields.custom.color_variant != blank %}
<label class="farbe-custom" for="{{ input_id }}">
<span class="farbe-custom-hidden">{{ value }}</span>
{% if variant and variant.metafields.custom.color_variant != blank %}
{%- assign color_code_1 = variant.metafields.custom.color_variant.value.color -%}
{%- assign color_code_2 = variant.metafields.custom.color_variant.value.image -%}
{% if color_code_2 != blank %}
<span class="color-dot color-custom-n color-option"> <img src="{{ color_code_2 | image_url: width: 30 }}" alt="{{ color_code_1 }}"></span>
{% else %}
{%- assign bg_style = 'background-color: ' | append: color_code_1 -%}
<span class="color-dot color-custom-n color-option" style="{{ bg_style }}"></span>
{% endif %}
{% endif %}
{{ label_unavailable }}
</label>
{% else %}
<label for="{{ input_id }}">
{{ value }}
{{ label_unavailable }}
</label>
{% endif %}
card-product.liquid
<div class="card-swatch">
<div class="Product_vairant">
<variant-radios-card
id="variant-radios-{{ section.id }}"
class="no-js-hidden"
data-section="{{ product_form_id}}"
data-url="{{ card_product.url }}"
{% if update_url == false %}
data-update-url="false"
{% endif %}
{{ block.shopify_attributes }}
>
{%- for option in card_product.options_with_values -%}
{% if option.name == 'Farbe' or option.name == 'farbe' or option.name == 'color' or option.name == 'Color' %}
<fieldset class="js product-form__input product-form__input--swatch {{ option.name | handleize }}">
<legend class="form__label">{{ option.name }}<span>:<select-option>{% comment %}{{ option.selected_value }}{% endcomment %}</select-option></span></legend>
{% render 'product-variant-options-card', product: card_product, option: option,product_form_id:product_form_id, picker_type: "button" %}
</fieldset>
{% endif %}
{%- endfor -%}
</variant-radios-card>
</div>
</div>
product-variant-options-card.liquid
{% comment %}
Renders product variant options
Accepts:
- product: {Object} product object.
- option: {Object} current product_option object.
- block: {Object} block object.
Usage:
{% render 'product-variant-options',
product: product,
option: option,
block: block
%}
{% endcomment %}
{%- liquid
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'
assign varaint_data = product.variants | json
-%}
{%- for value in option.values -%}
{%- liquid
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]
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]
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]
assign option_disabled = false
endif
endcase
endfor
-%}
{% assign option_obj = blank %}
{% for value_main in product.metafields.shopify.color-pattern.value %}
<script>{{ value | json }}</script>
{% if value_main.label == value and value_main.color or value_main.image != blank %}
{% assign option_obj = value_main %}
{% break %}
{% endif %}
{% endfor %}
{% if picker_type == 'dropdown' %}
<option
value="{{ value | escape }}"
{% if option.selected_value == value %}
selected="selected"
{% endif %}
>
{% if option_disabled -%}
{{- 'products.product.value_unavailable' | t: option_value: value -}}
{%- else -%}
{{- value -}}
{%- endif %}
</option>
{% elsif picker_type == 'button' %}
{% for variant in product.variants %}
{% if variant.option1 == current_value or variant.option2 == current_value %}
{% assign matched_variant_id = variant.id %}
{% assign matched_variant_image_url = variant.featured_image | img_url: 'original' %}
{% if variant.featured_image == null %}
{% assign flash = 1 %} <!-- If no featured_image exists, set flash to 1 -->
{% endif %}
{% break %}
{% endif %}
{% endfor %}
{%- assign variant = product.variants | where: "title", value | first -%}
<label class="farbe-custom" for="{{ input_id }}">
<span class="farbe-custom-hidden">{{ value }}</span>
{% if variant and variant.metafields.custom.color_variant != blank %}
{%- assign color_code_1 = variant.metafields.custom.color_variant.value.color -%}
{%- assign color_code_2 = variant.metafields.custom.color_variant.value.image -%}
{%- if variant.featured_image != blank -%}
{%- assign variant_image_url = variant.featured_image | img_url: '200x' -%}
{%- else -%}
{%- assign variant_image_url = '' -%}
{%- endif -%}
{% if color_code_2 != blank %}
<span data-variant-id="{{ matched_variant_id }}" src="{{ variant_image_url }}" class="color-dot color-custom-n color-option"> <img src="{{ color_code_2 | image_url: width: 30 }}" alt="{{ color_code_1 }}"></span>
{% else %}
{%- assign bg_style = 'background-color: ' | append: color_code_1 -%}
<span data-variant-id="{{ matched_variant_id }}" src="{{ variant_image_url }}" class="color-dot color-option color-custom-n" style="{{ bg_style }}"></span>
{% endif %}
{% endif %}
{{ label_unavailable }}
</label>
{% comment %} {% assign is_white = false %}
{% assign color_mapping = settings.color_mapping %}
{% assign current_value = value %}
{% assign matched_variant_id = "" %}
{% assign matched_object = color_mapping | where: "name", current_value | first %}
{% assign currentColor = matched_object.color_code | strip %}
{% assign color_code_2 = matched_object.color_code_2 | strip %}
{% if currentColor == '#ffffff' or currentColor == '#fff' or color_code_2 == '#ffffff' %}
{% assign is_white = true %}
{% endif %}
{% if currentColor %}
{% assign bg_style = '' %}
{% if color_code_2 != blank %}
{% assign bg_style = 'background-image: linear-gradient(to right, ' | append: currentColor | append: ' 50%, ' | append: color_code_2 | append: ' 50%);' %}
{% else %}
{% assign bg_style = 'background-color:' | append: currentColor | append: ';color:' | append: currentColor | append: ';' %}
{% endif %}
{% if flash == 0 %}
<span src="{{ matched_variant_image_url }}"
data-product-url="{{ product.url }}"
data-variant-id="{{ matched_variant_id }}"
data-title="{{ current_value }}"
class="color-custom color-option {% if is_white %}border-white-css{% endif %}"
style="{{ bg_style }}"> </span>
{% else %}
<span data-product-url="{{ product.url }}"
data-variant-id="{{ matched_variant_id }}"
data-title="{{ current_value }}"
class="color-custom color-option {% if is_white %}border-white-css{% endif %}"
style="{{ bg_style }}"> </span>
{% endif %}
{% else %}
<span data-title="Default Color"
class="color-custom-no-matched color-custom {% if is_white %}border-white-css{% endif %}"
style="background-color:#fff"> </span>
{% endif %} {% endcomment %}
{% else %}
{%- capture input_id -%}
{{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
{%- endcapture -%}
{%- capture input_name -%}
{{ option.name }}-{{ option.position }}
{%- endcapture -%}
{%- capture input_dataset -%}
data-product-url="{{ value.product_url }}"
data-option-value-id="{{ value.id }}"
{%- endcapture -%}
{%- capture label_unavailable -%}
<span class="visually-hidden label-unavailable">
{{- 'products.product.variant_sold_out_or_unavailable' | t -}}
</span>
{%- endcapture -%}
{%- capture help_text -%}
<span class="visually-hidden">{{ value | escape }}</span>
{{ label_unavailable }}
{%- endcapture -%}
{%
render 'swatch-input',
id: input_id,
name: input_name,
value: value | escape,
swatch: value.swatch,
product_form_id: product_form_id,
checked: value.selected,
visually_disabled: option_disabled,
shape: "circle",
help_text: help_text,
additional_props: input_dataset
%}
{% endif %}
{%- endfor -%}
main.js
$(document).on('click', '.color-option', function () {
// $(".color-option").on("click", function() {
let src = $(this).attr("src");
console.log(src);
if (src) {
$('.custom-img-click').attr('srcset', '');
$(this).closest('.card-wrapper').find('.custom-img-click2').attr('srcset', src);
$(this).closest('.card-wrapper').find('.custom-img-click').attr('srcset', src);
$(this).closest('.card-wrapper').find('.custom-img-click2').attr('src', src);
$(this).closest('.card-wrapper').find('.custom-img-click').attr('src', src);
}
});
