Shopify SKU not updating when variant is selected

Question

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.

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

Answer 1

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