Add variant SKU text on the product page - KS BootShop

alvinkonda

[Customer: Jonathan]

I was wondering if you could help provide some simple JS to update the SKU string on the product detail page for KS BootShop.

Seems like it should go in product.js

Need <span class="sku">{{ current_variant.sku }}</span> to update when different options are chosen. The same way the price updates. Having a tough time figuring it out.

Can you please help?

Thanks,

alvinkonda

Hi Jonathan.

Here is the JS code you need to use to dynamically change the text on that element you provided.

// Update SKU on variant change
window.addEventListener('kt.product.variant.change', (event) => {
  const selectedVariant = event.detail
  const sku = selectedVariant.sku

  const elem = document.querySelector('.sku')
  elem.textContent = sku
})

jongraydian

Thank you! This worked perfectly with the KS Bootshop theme.