Change Product Images (Switching Views) On A Collection Page By Clicking Provided Options

[hirot]

Hi

I've posted this question before and been working it then have a question.

----------This is a question I posted before---------------

I'm looking for the way to change images on collection pages by clicking options.

These are the examples.

Images change by clicking "product view" or "outfit view" on the top right.

https://www.alexanderwang.com/us-en/women-shirts

Images change by clicking "Product" or "Outfit" on "View" on the top right.

https://www.endclothing.com/gb/latest-products/new-this-week

Is there a specific JS for this function?

The link is here

https://community.shopify.com/c/shopify-design/change-product-images-switching-views-on-a-collection...

-------------------------------------------------------------------------

What I'm trying is setting a 3 models on a same product and also 3 tabs (petite, medium and tall) on a collection page. When a viewer clicks one of the tabs, the models (product image on the collection) change.

First, I set 9 images (3 images for each model) and try to show main image for petite, 4th image for medium and 7th image for tall.

This is a default code for showing main image

{%- if product_card_product.featured_media -%}
{%- if variant_img != blank -%}
{% if settings.quick_shop_type == '2' %}
<img {% render 'lazyload',preview_img: product_card_product.featured_media, class: true %} />
{% else %}
<img {% render 'lazyload',preview_img: variant_img, class: true %} />
{% endif %}
{%- else -%}
<img {% render 'lazyload',preview_img: product_card_product.featured_media, class: true %} />

{%- endif -%}
{%- if product_card_product.media[1] != nil and settings.show_image_swap -%}
{% if has_video != blank and settings.enable_hover_video_product_items %}
{{ has_video[0] | video_tag: muted: true, loop: true, image_size: '50x' }}
{% else %}
<img {% render 'lazyload',preview_img: product_card_product.media[1], class: true %} />
{% endif %}
{%- endif -%}
{% if settings.enable_lazyload %}<span class="data-lazy-loading"></span>{% endif %}
{%- if loading and settings.show_image_loading -%}
<div class="media-loading" data-title="{{ settings.image_loading_text }}">{{ settings.image_loading_text }}</div>
{%- endif -%}
{%- else -%}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}

I added assets for medium and tall

For medium

{%- if product_card_product.media[3] -%}
{%- if variant_img != blank -%}
{% if settings.quick_shop_type == '2' %}
<img {% render 'lazyload',preview_img: product_card_product.media[3], class: true %} />
{% else %}
<img {% render 'lazyload',preview_img: variant_img, class: true %} />
{% endif %}
{%- else -%}
<img {% render 'lazyload',preview_img: product_card_product.media[3], class: true %} />
{%- endif -%}
{%- if product_card_product.media[4] != nil and settings.show_image_swap -%}
{% if has_video != blank and settings.enable_hover_video_product_items %}
{{ has_video[0] | video_tag: muted: true, loop: true, image_size: '50x' }}
{% else %}
<img {% render 'lazyload',preview_img: product_card_product.media[4], class: true %} />
{% endif %}
{%- endif -%}
{% if settings.enable_lazyload %}<span class="data-lazy-loading"></span>{% endif %}
{%- if loading and settings.show_image_loading -%}
<div class="media-loading" data-title="{{ settings.image_loading_text }}">{{ settings.image_loading_text }}</div>
{%- endif -%}
{%- else -%}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}

For tall

{%- if product_card_product.media[6] -%}
{%- if variant_img != blank -%}
{% if settings.quick_shop_type == '2' %}
<img {% render 'lazyload',preview_img: product_card_product.media[6], class: true %} />
{% else %}
<img {% render 'lazyload',preview_img: variant_img, class: true %} />
{% endif %}
{%- else -%}
<img {% render 'lazyload',preview_img: product_card_product.media[6], class: true %} />
{%- endif -%}
{%- if product_card_product.media[7] != nil and settings.show_image_swap -%}
{% if has_video != blank and settings.enable_hover_video_product_items %}
{{ has_video[0] | video_tag: muted: true, loop: true, image_size: '50x' }}
{% else %}
<img {% render 'lazyload',preview_img: product_card_product.media[7], class: true %} />
{% endif %}
{%- endif -%}
{% if settings.enable_lazyload %}<span class="data-lazy-loading"></span>{% endif %}
{%- if loading and settings.show_image_loading -%}
<div class="media-loading" data-title="{{ settings.image_loading_text }}">{{ settings.image_loading_text }}</div>
{%- endif -%}
{%- else -%}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}

With the codes above, I can show product cards with different models. Now I need to show/hide each models when the tabs are clicked.

I'm trying with this method

https://www.quanzhanketang.com/howto/howto_js_tabs.html

I set 3 tabs

<div class="halo-item"><button class="tablink" onclick="openType('petite', this, '#ebddc3')" id="defaultOpen">Petite | 5'3" or below</button></div>
<div class="halo-item"><button class="tablink" onclick="openType('medium', this, '#ebddc3')">Medium | 5'4" to 5'7"</button></div>
<div class="halo-item"><button class="tablink" onclick="openType('tall', this, '#ebddc3')">Tall | 5'8" or above</button></div>
</div>

Also I added this JS

<script>// <![CDATA[
function openType(typeName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementsByclass(typeName).style.display = "block";
elmnt.style.backgroundColor = color;

}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
// ]]></script>

The issue is if there 2 products on a collection, each product shows like

<li class="product"><div class="petite tabcontent">content here</div></li>

<li class="product"><div class="petite tabcontent">content here</div></li>

but for some reason, the second one is with display:none; although the first product is with display:blocked as I expect.

I guess the issue I'm facing is related to "loop" but I'm not sure what to do at this moment so I need your help.

I will tip you if you help me.

Thank you.

[Savior]

Hello @hirot 

This needs some code tweaks. I can help you with your setup. Let me know if you are interested. You can mail me your query and store URL.

[Kani]

Hi @hirot 

It's painful to image how the store work with a piece of code.

you can DM me if you don't wanna show your url here

[hirot · Accepted solution]

I don't think the code I wrote looks clean but I made it.

Tab Buttons

<button id="petite" class="tablinks">Petite</button>
<button id="medium" class="tablinks">Medium</button>
<button id="tall" class="tablinks">Tall</button>

JS

<script>
$('button#petite').on('click', function() {
$('.medium').removeClass('active');
$('.tall').removeClass('active');
$('#medium').removeClass('active');
$('#tall').removeClass('active');
$(this).addClass('active');
$('.petite').addClass('active');
});
$('button#medium').on('click', function() {
$('.petite').removeClass('active');
$('.tall').removeClass('active');
$('#petite').removeClass('active');
$('#tall').removeClass('active');
$(this).addClass('active');
$('.medium').addClass('active');
});
$('button#tall').on('click', function() {
$('.petite').removeClass('active');
$('.medium').removeClass('active');
$('#petite').removeClass('active');
$('#medium').removeClass('active');
$(this).addClass('active');
$('.tall').addClass('active');
});
</script>

CSS

.petite{display:none;}
.medium{display:none;}
.tall{display:none;}
.active {display:block;}

Also with the contents I already wrote above, now I can show different models by clicking the tabs.

Thank you.

[Anderson10]

Hi there, I was wondering if you have managed to do this? I was hoping to do exactly the same on my site. Any advice hugely appreciated!