Trying to show variant SKU on product page, won't update when selecting new variant

Solved
kpost-kintronic
Tourist
4 1 1

I'm using a modified Venture theme and trying to display the SKU for each variant in the product page. I changed the price of one so I could make sure it knows what "current_variant" is. It's able to change the price on a new variant just fine but not the SKU.

no-change.png

I realize this is a javascript issue (yuck) so I went digging around in my theme.js. It looks like it's got this bit of code:

/**
     * Trigger event when variant sku changes.
     *
     *   {object} variant - Currently selected variant
     *  {event} variantSKUChange
     */
    _updateSKU: function(variant) {
      if (variant.sku === this.currentVariant.sku) {
        return;
      }

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

 

and this a little further down:

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

      if (variant) {
        $(this.selectors.SKU).html(variant.sku);
     }
},

 

which look like they're supposed to handle it? I also found this Shopify guide on how to get SKU numbers to show, but I select Venture as my theme and it says

"Look for variant.sku.
If you're able to findvariant.sku, then you have completed the customization."

I don't think I'm done, but okay... I'm really unsure of what to do from here. If you want to take a look at my shop, it's https://kintronic.myshopify.com/ and the password is rowato. I would love it if someone could tell me what to do to fix this javascript.

Accepted Solution (1)

Accepted Solutions
kpost-kintronic
Tourist
4 1 1

This is an accepted solution.

If anyone is trying to figure this one out for themselves, I figured out what my problem was. The javascript was just fine, but I didn't have the CSS class "variant-sku" on the element, which is what the javascript is looking for in order to work. Good luck!

kpostkintronic_0-1636057692834.png

 

View solution in original post

Reply 1 (1)
kpost-kintronic
Tourist
4 1 1

This is an accepted solution.

If anyone is trying to figure this one out for themselves, I figured out what my problem was. The javascript was just fine, but I didn't have the CSS class "variant-sku" on the element, which is what the javascript is looking for in order to work. Good luck!

kpostkintronic_0-1636057692834.png

 

View solution in original post