Shopify Question posted in
The Shopify help center can be found here.

Shopify SKU not updating when variant is selected

I’m calling in a product SKU number that is supposed to change when the variant is selected based on this Shopify tutorial.

As instructed I place the following snippet where I want the SKU to display:

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

However, when the variant is changed the SKU never updates like it does in their tutorial’s gif.

Here’s an example of it on the website where it isn’t working.

enter image description here

Also, here’s a screenshot showing that the option is indeed a Shopify variant and not something else (just so all my bases are covered).

My only guess is that Shopify may have changed and this is done differently now or that I’ve somehow set something up incorrectly, though I’ve followed the tutorial’s instructions (placed inside the product-template.liquid, which is referenced from the product.liquid (the theme is sectioned).

enter image description here

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I never edited the Assets/theme.js file for this website and I'm fairly certain no one else touched any of the files except for myself.

    Despite that there was a very important function left out of the theme.js file that is needed for the variant to change the sku.

    These were the lines that seemed to have not been installed in my theme.js file:

    _updateSKU: function(variant) {
  if (variant.sku === this.currentVariant.sku) {
    return;
  }

  this.$container.trigger({
    type: 'variantSKUChange',
    variant: variant
  });
},

    Also, for the _initVarients function the following was missing (place with the other lines that have the same type of code):

    this.$container.on('variantSKUChange' + this.settings.namespace, this._updateSKU.bind(this));

    These were not missing in my theme.js file, though worth checking as they are necessary for the SKU to update:

    Located inside the _onSelectChange function (place with the other lines that have the same type of code):

    this._updateSKU(variant);

    Located after the _updatePrice function:

    _updateSKU: function(evt) {
      var variant = evt.variant;

      // Update the sku
      $('.variant-sku').html(variant.sku);
    },

  2. 0

    I just recently started using Shopify but I’ll try to help. I did notice that you’re using current_variant.sku but Shopify’s object reference material says to use variant.sku. This is where I found it:

    https://help.shopify.com/themes/liquid/objects/variant#variant-sku

    Hopefully that helps.

    Login or Signup to reply.
  3. 0 
      // Variant is sold out, disable the submit button
            // $addToCart.addClass('disabled').prop('disabled', true);
            $addToCart.hide();
            $variantQuantity.removeClass('is-visible');
            if (variant.incoming) {
              $variantQuantity.html({{ 'products.product.will_be_in_stock_after' | t: date: '[date]' | json }}.replace('[date]', variant.next_incoming_date)).addClass('is-visible');
            }
            else {
              $variantQuantity.removeClass('is-visible');
            }
            $quantityElements.hide();
            $outofstock.show();
          }
          //console.log(variant.sku);
          $('.variant-sku').html("");
          $('.variant-sku').text(variant.sku);
           // Update price display.
          var customPrice = Shopify.formatMoney(variant.price, theme.moneyFormat);
          if (variant.compare_at_price > variant.price) {
            var comparePrice = Shopify.formatMoney(variant.compare_at_price, theme.moneyFormat);
            var customPriceFormat = ' <del id="old-product-price">' + comparePrice + '</del>';
                customPriceFormat += ' <ins id="product-price">' + customPrice + '</ins>';
            $productPrice.html(customPriceFormat);
            var save = ((variant.compare_at_price - variant.price)*100)/variant.compare_at_price;
            $('#product-{{product.id}} .product-image-summary .onsale').html({{ 'products.product.save_js' | t: saved_amount: '[sale]' | json }}.replace('[sale]', Math.ceil(save))).show();
          }else{
             $productPrice.html(customPrice);
            $('#product-{{product.id}} .product-image-summary .onsale').hide();
          }
          jQuery('.currency .active').trigger('click');
          //Update sku
          if(variant.sku){
             $productsku.text(variant.sku);
            
          }else{
              $productsku.text(theme.strings.na);
            
           }

    I found that the produc_js.liquid snippet needed to be updated.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search