Changing Vendor Number Based on Variant Selected

Technical Q&A
1

I’m currently using Shopify Variant Metafields to try to make it so that I have the vendor number (not sku number as I want to have a sku number and vendor number for each product variant) of specific product variants listed on the product page. I got the vendor number to display with this code:

{%- if current_variant.metafields.my_fields.vendor_item_number != blank -%}

Vendor Number: {{ current_variant.metafields.my_fields.vendor_item_number }}
{%- endif -%}

The only issue I’m having is that when I click on a different variant the vendor number does not change unless I refresh the page after clicking said variant. I’d like the vendor number to change immediately when I select a different variant of the product. I’m guessing it may require some javascript to setup. Can anyone point me in the right direction or help me with this issue?

2

Hello @nedwardsCRD ,

Yes you need JavaScript to do it. And there is different ways to do it.

  1. Follow the theme existing JS code and make a call parallel to it. Same like price and other things are changing on change of variant.
  2. Initially in variant loop assign each variant its metafield with data attribute or related thing. After that on change of variant get data attribute and change target value.

Thanks

3

Hi Guleria,

I’ve been working at trying to get the javascript working. I followed this thread to try to get the vendor item number working when clicking on different variants without having to refresh the page but I’m not sure if there’s something wrong with how I’ve set up the code. Can you have a look and let me know if I’m doing something wrong here?

I added $(‘.vendor_item_number span’, $product).text(metaData[variant.sku]); to the theme.js

Under my product page code (product_view_default.liquid) I added:

{%- if settings.product_sku -%}
            {%- assign current_variant = product.selected_or_first_available_variant -%}
            {{ 'products.product.sku' | t }} {{ current_variant.sku }}

            
            
            
            {% capture 'meta_data' %}
            {% for variant in product.variants %}
              {{ variant.sku | json }}: {{ variant.metafields.my_fields.vendor_item_number | json }}
              {% unless forloop.last %},{% endunless %}
            {% endfor %}
            {% endcapture %}
            
            
            
            
            

			
			{{ current_variant.metafields.my_fields.vendor_item_number }}
			

            
            
            
            {%- endif -%}
4

Sorry, forgot to link the thread I followed.