d
Topic
Decha Member
Posts:
19
Last edited 7 months ago

Show SKU - Doesn't change when choosing different variant This post is outdated

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

 

i
Replies
Alexis Shopify Employee
Posts:
22
7 months ago
g
1
upvotes

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

Alex Member
Posts:
1927
7 months ago
g
1
upvotes

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

Decha Member
Posts:
19
7 months ago

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 Member
Posts:
19
7 months ago

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 Shopify Partner trezoro.co
Posts:
1947
7 months ago
g
1
upvotes

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? This is my Paypal too :)
Decha Member
Posts:
19
7 months ago

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 Shopify Partner trezoro.co
Posts:
1947
7 months ago
g
1
upvotes

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? This is my Paypal too :)
Decha Member
Posts:
19
7 months ago

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 Shopify Partner trezoro.co
Posts:
1947
7 months ago
g
1
upvotes

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? This is my Paypal too :)
Decha Member
Posts:
19
7 months ago

Greetings,

 

It works !

Thank You !

 

I'm still unsure why we have an "Old" version since we got it recently.

Once again Thank You :)

 

 

tim Shopify Partner trezoro.co
Posts:
1947
7 months ago
g
1
upvotes

Things are changing fast these days :)

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
Posts:
1
4 months ago

Hi,

I had the same problem and thanks to you guys I was able to make it work on one of the websites with "Debut" theme, however trying to do the same thing on a different website with "District" theme,  but the SKU will stay the same when changing variants. Any help will be very helpful.

Thanks.

<div class="product-title">
              <h1 itemprop="name">{{ product.title }}</h1>
             <!-- <div class="details"><span class="type">Product:<strong> {{ product.type | link_to_type }}</strong></span><br> -->    
             
              <div>  {% assign current_variant = product.selected_or_first_available_variant %}
          SKU: <strong><span class="variant-sku">{{current_variant.sku}}</span></strong>