Adding Variant Option (Color) to Product Titles

[XCVI_Online_Sho]

I am trying to add a variant option (variant.option2) to my product titles collection listing pages in product.block.liquid.

How can I do it, and is it even possible?

I have added the following, but variant information does not show up:

<a class="title ftc" href="{{ url }}">{{ product.title }} - {% if product.variants %} {{ variant.option2 }} {% endif %}</a>

[tim]

Generally, a product may have several variants. Do you want color for all of these variants printed out? Or any particlar variant? Or your products have only one choice of color?

That said, this should show a value of the second option of the first available variant:

<a class="title ftc" href="{{ url }}">{{ product.title }} - {% if product.variants %} {{ product.first_available_variant.option2 }} {% endif %}</a>

[troy10]

Is there a way to remove the " - " if there is no product variant for that particular product?

[tim]

Just move that dash to be after {% if product.variants %}

[troy10]

Tim for the win

[troy10]

Hm I thought that would work too but I guess it's still pulling in the - for some reason

[troy10]

Also, how can I make this change dynamically as they switch to other colors?

[tim]

If you want to show the current variant's color along with the product title, you should use this approach (if Color is your second option): 

{{ product.title }} {% if product.selected_variant %}- <scope id="current_color">{{ product.selected_variant.option2 }}</scope> {% endif %}

To update it dynamically, you have to add this line to your selectCallback (selectCallback1 in troy's case) function after if( variant ) {

$('#current_color').text( variant.option2 );

[troy10]

Thanks TIm!

For some reason, it's not always populating. I saw it work once but its not pulling in right away when I hit the product pages. The code looks right though.

Thanks again

[tim]

You're right, because initially if you go to the product page (no varian in URL) there will be no selected_variant, liquid will not output the scope and javascript will be unable to update it.

To fix it, we will change liquid to always output the scope, only make it empty if there is no variant_selected:

{{ product.title }}<scope id="current_color">{% if product.selected_variant %} - {{ product.selected_variant.option2 }} {% endif %}</scope>

And javascript:  

$('#current_color').text( ' - ' + variant.option2 );