How to display product's SKU dynamically based on the user clicks on the products

Highlighted
Tourist
5 0 3

Hello developer, i want to display dynamic product's SKU based on the user chooses the product? Here is the liquid code that i am trying to implement but it does not seem to work. It needs page to be reloaded in order to display product's SKU. I would appreciate more if there is any liquid code to display dynamic product's SKU based on the user chooses the product. Here is my Code:

 

{%- assign current_variant = product.selected_or_first_available_variant -%}
<span>{{ current_variant.sku }}</span>
<p class="stock out-of-stock mg__0 nt_outstock w__100 tc" id="nt_outstock" style="display:none">
{{ 'products.product.outofstock' | t }}
</p>
 
Below is the output but the displayed product's SKU is not dynamic. I have to reload the page to display the SKU. Please let me know what else i have to do to display the product's SKU dynamically. Your help would be much appreciated.
Screen Shot 2020-03-17 at 11.31.12 am.png

  

1 Like
Highlighted
Shopify Partner
7507 1037 2601

Hello, @Ryan_ 

Thanks for post
can you please check this article
https://shopify.dev/tutorials/customize-theme-show-sku-numbers 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
5 0 3

Thank you Ketan for your help but still i got no luck: 

 

1) I did this on mu theme.js file:

 

 var selectCallback = function(variant, selector) {
    if (variant) {
       $('.variant-sku').text(variant.sku);
    }else {
          $('.variant-sku').empty();
        }
        
        self.productPage({
          money_format: theme.moneyFormat,
          variant: variant,
          selector: selector,
          translations: {
            add_to_cart: theme.strings.addToCart,
            sold_out: theme.strings.soldOut,
            unavailable: theme.strings.unavailable
          }
        });
      };

2) I did this on product.liquid file:

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
{%- include settings.swatch_design,class_input:'pr' -%}

 

1 Like
Highlighted
New Member
1 0 0

The solution is in the same article: https://shopify.dev/tutorials/customize-theme-show-sku-numbers#show-sku-numbers-on-product-pages-sec...

Just follow the steps for Brooklyn and Venture themes it should work. 

0 Likes