Reputation: 1
we are running on shopify and we are running on theme Vision. There is feature which is showing the product picture based on variant selection - https://documentation.fuelthemes.net/kb/how-do-i-create-a-variant-image-set/
but now we found the problem. because we are using shopify in other languages so the option name and also variant name is in different language so it cannot match the images set. so i trying to find the solution and create the image set on variant with paramteter data-option-value-id="123456789" which is the same in every language.
now it works with alt-text : #color_black and this is causing problem with another languages so my idea is using alt-text of image with data-option-value-id like #1234567889.
i was trying to do it but never achieved it (i am jut a little familiar with coding) so i want to ask if anybody can help me to change the logic.
here is the code where is logic of image sets determined:
for product media:
{%- liquid
assign image_set = false
assign image_set_group = ''
if media.alt contains '#'
assign image_set_full = media.alt | split: '#' | last
if image_set_full contains '_'
assign image_set = true
assign image_set_group = image_set_full | split: '_' | first
endif
endif
assign is_active = false
if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1
assign is_active = true
elsif product.selected_or_first_available_variant.featured_media.id == media.id
assign is_active = true
elsif variant_images contains media.src and product.selected_or_first_available_variant.featured_media.id != media.id
assign is_active = false
endif
unless variant_images contains media.src
assign is_active = true
endunless
unless hide_variants
assign is_active = true
endunless
-%}
<div
id="Slide-{{ section.id }}-{{ media.id }}"
class="product-images__slide{% if is_active %} is-active{% endif %}{% if variant_images contains media.src %} product-images__slide-item--variant{% endif %}"
data-media-id="{{ section.id }}-{{ media.id }}"
{% if image_set %}
data-set-name="{{ image_set_group }}"
data-group="{{ image_set_full }}"
{% endif %}
>
{%- case media.media_type -%}
{% when 'image' %}
{%- liquid
assign ratio = 1
if media_aspect_ratio == 'adapt'
assign ratio = media.preview_image.aspect_ratio
elsif media_aspect_ratio == 'portrait'
assign ratio = 1 | divided_by: 1.25
elsif media_aspect_ratio == 'landscape'
assign ratio = 1 | divided_by: 0.75
endif
assign alt = media.preview_image.alt | split: '#' | first
-%}
<div class="product-single__media product-single__media-image aspect-ratio aspect-ratio--{{ media_aspect_ratio }}" id="Media-Thumbnails-{{ section.id }}-{{ media.id }}" style="--padding-bottom: {{ 1 | divided_by: ratio | times: 100 }}%;">
{%- if section.settings.lightbox != blank -%}
<a
href="{{ media.src | image_url }}"
class="product-single__media-zoom"
data-msrc="{{- media.src | image_url: width: 20 -}}"
data-h="{{ media.height }}"
data-w="{{ media.width }}"
target="_blank"
tabindex="-1"
title="Zoom"
{% if alt != blank and display_captions %}
title="{{ alt | escape }}"
{% endif %}
data-index="{{ image_index }}"
>{% render 'svg-icons' with 'zoom' %}</a>
{%- endif -%}
{%- render 'responsive-image', image: media.preview_image, sizes: sizes, priority: priority -%}
{%- if alt != blank and display_captions -%}
<span class="figcaption">{{ alt }}</span>
{%- endif -%}
</div>
{% when 'external_video' %}
<div class="product-single__media product-single__media-external-video" data-provider="{{ media.host }}" data-media-id="{{ media.id }}" id="Media-Thumbnails-{{ section.id }}-{{ media.id }}" style="--aspect-ratio: {{ media.aspect_ratio }}">
<div class="product-single__media-external-video--play">
{%- render 'responsive-image', image: media.preview_image, sizes: sizes -%}
<button>{% render 'svg-icons' with 'thb-icon-play' %}</button>
</div>
{{ media | external_video_tag: loading: "lazy", loop: section.settings.enable_video_looping, muted: 1 }}
</div>
{% when 'video' %}
<div class="product-single__media product-single__media-native-video" data-media-id="{{ media.id }}" style="--aspect-ratio: {{ media.aspect_ratio }}" id="Media-Thumbnails-{{ section.id }}-{{ media.id }}">
{{ media | video_tag: controls: true, autoplay: true, loading: "lazy", loop: section.settings.enable_video_looping, image_size: '610x' }}
</div>
{% when 'model' %}
<product-model class="product-single__media product-single__media-model" style="padding-top: 100%" data-media-id="{{ media.id }}" id="Media-Thumbnails-{{ section.id }}-{{ media.id }}">
<button id="Deferred-Poster-Modal-{{ media.id }}" class="product-single__media-model-button" type="button">
{%- render 'svg-icons' with 'thb-icon-3d-model' -%}
</button>
{%- render 'responsive-image', image: media.preview_image, sizes: sizes -%}
<template>
{{ media | media_tag: image_size: "2048x", toggleable: true }}
</template>
</product-model>
<button
class="product__xr-close product-single__media-xr-close">
{%- render 'svg-icons' with 'close' -%}
</button>
<button
class="button product__xr-button"
type="button"
data-shopify-xr
aria-label="{{ 'products.product.xr_button_label' | t }}"
data-shopify-model3d-id="{{ media.id }}"
data-shopify-xr-hidden
data-shopify-title="{{ product.title | escape }}"
>
<span>
{% render 'svg-icons' with 'thb-icon-3d-model' %}
{{ 'products.product.xr_button' | t }}
</span>
</button>
{% endcase %}
</div>
for product thumbnails :
{%- liquid
assign image_set = false
assign image_set_group = ''
if media.alt contains '#'
assign image_set_full = media.alt | split: '#' | last
if image_set_full contains '_'
assign image_set = true
assign image_set_group = image_set_full | split: '_' | first
endif
endif
assign is_active = false
assign is_selected = false
if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1
assign is_active = true
assign is_selected = true
elsif product.selected_or_first_available_variant.featured_media.id == media.id
assign is_active = true
assign is_selected = true
elsif variant_images contains media.src and product.selected_or_first_available_variant.featured_media.id != media.id
assign is_active = false
endif
unless variant_images contains media.src
assign is_active = true
endunless
unless hide_variants
assign is_active = true
endunless
assign sizes = '160x160'
if media_aspect_ratio == 'adapt'
assign sizes = '160x0'
elsif media_aspect_ratio == 'portrait'
assign sizes = '160x200'
elsif media_aspect_ratio == 'landscape'
assign sizes = '160x95'
endif
-%}
<div
id="Thumb-{{ section.id }}-{{ media.id }}"
class="product-thumbnail{% if is_active %} is-active{% endif %}{% if variant_images contains media.src %} product-images__slide-item--variant{% endif %}{% if is_selected %} is-initial-selected{% endif %}"
{% if image_set %}
data-set-name="{{ image_set_group }}"
data-group="{{ image_set_full }}"
{% endif %}
>
{%- if media.media_type == 'model' -%}
<div class="product-thumbnail-icon">
{% render 'svg-icons' with 'thb-icon-3d-model' %}
</div>
{%- endif -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
<div class="product-thumbnail-icon">
{% render 'svg-icons' with 'thb-icon-play' %}
</div>
{%- endif -%}
{%- render 'responsive-image', image: media.preview_image, sizes: sizes -%}
</div>
i was trying to change the existing logic how is the product variant image sets dispalying and remove the logic based on language and change it to something universal in every language
Upvotes: 0
Views: 59