Show SKU - Doesn't change when choosing different variant

Tourist
43 0 0

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)

SKU

 

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
21 0 1

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

1 Like
Astronaut
1890 1 389

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

1 Like
Tourist
43 0 0

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.

 

0 Likes
Tourist
43 0 0

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>

 

0 Likes
Shopify Expert
2611 49 614

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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like
Tourist
43 0 0

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

0 Likes
Shopify Expert
2611 49 614

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 );

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like
Tourist
43 0 0

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>

 

0 Likes
Highlighted
Shopify Expert
2611 49 614

Sorry, my bad,

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

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like