Show SKU - Doesn't change when choosing different variant

[Decha]

Greetings,

After following this guide: https://help.shopify.com/themes/customization/products/show-sku-numbers#sectioned-themes

I have tried to do the same as show in example.

Was able to produce SKU same as show in example but when choosing ( changing ) to a different varian SKU stays the same.

Every variant has a different SKU.

We are using Venture theme.

I have followed "sectioned" guide since we have files under "sections".

Image as reference:

( Right click on image and open in a different tab to view in full size)

[Alexis1]

Hey Decha,

Alexis here from Shopify Support!

I'm just moving your post over to our Shopify Design forum. This is the best place for coding and theme queries so you should hear from one of our experts soon.

If you need anything else, feel free to reach out to our Support, available 24/7 !

Warm regards,

Alexis | Shopify Guru

[Alex135]

You might be encountering (unrelated) Javascript errors.  Do you mind sharing your shop?

[Decha]

Hello,

Thank You for replying.

This was just me testing and did not put in place. 

For a week I'm still busy but after that I'll enable it again and I'll share my shop here.

[Decha]

Greetings,

Finally got some time so if anyone is still willing to help please reply below.

Here is my full snippet of code where I insert the sku code snippet:

*sidenote -  my HTML knowledge is bare minimum since I work with VB .NET - ergo why we use shopify :D

 <div class="grid__item {% if product.images.size > 1 %}medium-up--two-fifths{% else %}medium-up--one-half{% endif %}" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      <div class="product-single__info-wrapper">
        <meta itemprop="priceCurrency" content="{{ shop.currency }}">
        <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

        <div class="product-single__meta small--text-center">
          {% if settings.product_vendor_enable %}
            <p class="product-single__vendor">{{ product.vendor }}</p>         
          {% endif %}
          
          

          <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
          {% assign current_variant = product.selected_or_first_available_variant %}
           <span class="variant-sku">{{current_variant.sku}}</span>
          
       

          <ul class="product-single__meta-list list--no-bullets list--inline">
            <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
              <div class="product-tag">
                {{ 'products.product.on_sale' | t }}
              </div>
            </li>
            <li>
              {% unless product.compare_at_price_max > product.price %}
                <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
              {% endunless %}
              <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                {{ current_variant.price | money }}
              </span>
            </li>
            {% if product.compare_at_price_max > product.price %}
              <li>
                <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
                  {{ current_variant.compare_at_price | money }}
                </s>
              </li>
            {% endif %}
            {% if section.settings.stock_enable %}
              <li>
                <span id="ProductStock-{{ section.id }}" class="product-single__stock hide"></span>
              </li>
            {% endif %}
            
          </ul>

        </div>

[tim]

Hi  Decha, 

the SKU (as well as price, picture, etc) supposed to be updated by javascripts in the theme.js.liquid. The class for your SKU field is right, so something is wrong with the scripts (is your theme recent enough?).

It is difficult to tell without seeing the actual shop.

[Decha]

Greetings,

Thank You for replying.

I do not have theme.js.liquid under assets but only theme.js

Here is link to our site: https://matchfishing.hr/

Currently "Show SKU" is turned off since this is a working website.

As for website it is in use for around 4-5 months if I'm not mistaken. 

Regards,

Decha

[tim]

Well, since your theme is not a recent version, it does not have this functionality in its javascript. 

Basically you may put back that <span> you've added and in your theme.js, around line 2254 insert this code above "  // Select a valid variant if available":

$('.update_sku').text( variant.sku );

[Decha]

Greetings,

It's still the same :/

Code snippet:

if (variant) {
        $('.update_sku').text( variant.sku );
        // Select a valid variant if available
        if (variant.available) {
          // We have a valid product variant, so enable the submit button
          cache.$addToCart.removeClass('btn--sold-out').prop('disabled', false);
          cache.$addToCartText.html(theme.strings.addToCart);

and added snippet below as in previous post

{% assign current_variant = product.selected_or_first_available_variant %}
           <span class="variant-sku">{{current_variant.sku}}</span>

[tim]

Sorry, my bad,

instead of $('.update_sku').text( variant.sku ); it must be $('.variant-sku').text( variant.sku );