Product variants not working properly.

New Member
5 0 0

Hi all,

I hope someone here can help me out. Quick rundown on my problem I'm trying to display the variant sku above the price and add a few other sections that change when a variant is selected (instruction download link/different meta fields.) I haven't had any luck.

Page link I'm trying to make changes to: https://auto-color-staging.myshopify.com/products/restoration-shop-custom-paint-a

I am using Theme Kit as my base theme. Code examples:

 

product.liquid

<!-- Variant select. -->
    <label for="product-select">Choose your {{ product.title }}</label>
    <select id="product-select" name="id">
      {% for variant in product.variants %}
      <option value="{{ variant.id }}"{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}>{{ variant.title }} - {{ variant.price | money }} - </option>
      {% endfor %}
    </select>

theme.liquid

{% if template contains 'product' %}
    {{ 'option_selection.js' | shopify_asset_url | script_tag }}
    <script type="text/javascript">
      (function($) {
         var onVariantSelected = function(variant, selector) {
          // Update price display.
          var formattedPrice = Shopify.formatMoney(variant.price, "");
          $('#product-price').text(formattedPrice);
          // Enable or disable the Add to Cart button.
          $('#add-to-cart').attr('disabled', variant.available ? null : 'disabled');
          // Update the featured image.
          if(variant.featured_image) {
            var sizedImageUrl = Shopify.Image.getSizedImageUrl(variant.featured_image.src, 'master');
            $('#featured-image').attr('src', sizedImageUrl);
           
          }
        };
        var optionSelectors = new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: onVariantSelected, enableHistoryState: true });
        // Create an event listener to set a specific variant when clicking on image thumbnails.
        $(document).on('click', '[data-change-variant]', function(e) {
          e.preventDefault();
          optionSelectors.selectVariant($(this).data('changeVariant'));
        });
      }(jQuery));
    </script>

I'm out of ideas on how the variants are working or how to add any new ones, so any help, hints or documentation on adding additional variant data would be so helpful.

 

Thank You

0 Likes
Shopify Partner
189 13 24

@chadm320 

I have checked the attached link and variant change activity works properly on my device so can you explain the issue with the screenshot.

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | E-commerce Consultant
Email: akshayvaghasiya84@gmail.com
Skype: akshayvaghasiya84
 - Want to modify or custom changes on store hire me .
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
0 Likes
Highlighted

working all right in my end please advise where i am wrong 

Thanks & Regards
Perennial Solution

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
New Member
5 0 0

Thank You for the response. I have re-added the sku line of code before the price.

I am hoping to get the variant sku number to update as well. I'm not sure what to add to the JS script in my theme.liquid to trigger the sku change.

I've tried variations on the tutorial here: https://help.shopify.com/en/themes/customization/products/features/show-sku-numbers#non-sectioned-th... with no luck.

 

product.liquid

 <div class="cell large-6 medium-12 small-12 branding">
        <h2 class="product-feature-block-header"></h2>
        <form action="/cart/add" method="post">
{%- assign current_variant = product.selected_or_first_available_variant -%} <span>{{ current_variant.sku }}</span>
<!-- Price --> <h3 id="product-price">{{ product.price_min | money }} to {{ product.price_max | money }}</h3> <!-- Variant select. --> <label for="product-select">Choose Your Paint Type and Size</label> <select id="product-select" name="id"> {% for variant in product.variants %} <option value="{{ variant.id }}"{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}> {{ variant.title }} - {{ variant.price | money }}
</option> {% endfor %} </select>

theme.liquid

{% if template contains 'product' %}
    {{ 'option_selection.js' | shopify_asset_url | script_tag }}
    <script type="text/javascript">
      (function($) {
         var onVariantSelected = function(variant, selector) {
          // Update price display.
          var formattedPrice = Shopify.formatMoney(variant.price, "");
          $('#product-price').text(formattedPrice);
          // Enable or disable the Add to Cart button.
          $('#add-to-cart').attr('disabled', variant.available ? null : 'disabled');
          // Update the featured image.
          if(variant.featured_image) {
            var sizedImageUrl = Shopify.Image.getSizedImageUrl(variant.featured_image.src, 'master');
            $('#featured-image').attr('src', sizedImageUrl);
            
          }
        };
        var optionSelectors = new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: onVariantSelected, enableHistoryState: true });
        // Create an event listener to set a specific variant when clicking on image thumbnails.
        $(document).on('click', '[data-change-variant]', function(e) {
          e.preventDefault();
          optionSelectors.selectVariant($(this).data('changeVariant'));
        });

      }(jQuery));

    </script>
    {% endif %}

 

Link to product page: https://auto-color-staging.myshopify.com/products/restoration-shop-custom-paint-a

 

Screenshot

variant.jpg

 

I hope this is feasible and you guys can help me out.

 

Thank You

0 Likes
Shopify Partner
189 13 24

@chadm320 

I got your point you want to change SKU based on variant change. It is not important where you put code because variant change activity runs through Variant Callback and you have not any SKU related code in it. So please add script code into js file which you have attached here in your above message. If you need any help then let me know.

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | E-commerce Consultant
Email: akshayvaghasiya84@gmail.com
Skype: akshayvaghasiya84
 - Want to modify or custom changes on store hire me .
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
0 Likes
New Member
5 0 0

Hi Akshay,

Thank You for your help, I tried adding that JS code to what I have above and it didn't work. Do I need to create a separate theme.js.liquid file like in the tutorial?

 

Thank You   

0 Likes
Shopify Partner
189 13 24

@chadm320 

No need to create a new js file for it. Please send a private message to me.

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | E-commerce Consultant
Email: akshayvaghasiya84@gmail.com
Skype: akshayvaghasiya84
 - Want to modify or custom changes on store hire me .
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
0 Likes