I’m struggling to find the solution to this for the Narrative theme.
I want to show the variant SKU on the product page, but my issue is that the SKU doesn’t change when you select another variant. It only shows the SKU of the first loaded variant.
I tried to follow this tutorial by Shopify, but I can’t find the line of code that needs editing for the Javascript portion.
Hello There,
Kindly add the following code to the product-template.liquid section, just below the product title.
{%- assign current_variant = product.selected_or_first_available_variant -%}
{{ current_variant.sku }}
Hi Pallavi,
I already tried that. I mentioned that I followed the tutorial that you linked in my original post.
Although it shows the SKU, it doesn’t change depending on the variant selected.
Thanks though.
Pallavi, Can you please answer the question. Thanks.
I figured it out!
Going to explained here in quite a detail cos PS! I myelf dont know anyting about coding- I still think CSS is the space station..
But I made it work.. some intuitive thinking il guess.. here we go:
First do exactly as this guy in the link does:
To be more explenation: - point 1 to 6 should give you the following code in the template called “product-template.liquid” (somewhere around line 50..).
{%- assign current_variant = product.selected_or_first_available_variant -%}
{{ current_variant.sku }}
{% endcomment %}
{% if section.settings.show_vendor %}
{{ product.vendor }}
{% endif %}
{{ current_variant.sku }}
OK- SECOND.. the guy from this link:
https://tutes.in/how-to-show-stock-quantity-for-all-variants-in-shopify/
also have a say..and want you to put in his code too.. his code will go in the same “product-template.liquid”. And also in the same section
Product Form & Description
But actually a bit lower or more lined below then the first code you put in. In fact - where you actuallly put these codes will also affect where exactly you will see this on the screen.
So this is the code :
Sold Out!{{ current_variant.inventory_quantity }}
{% elsif current_variant.inventory_quantity < 6 %}Hurry! Only {{ current_variant.inventory_quantity }} left in stock.
{% else %}{{ current_variant.inventory_quantity }} available in stock.
{% endif %}ANd the TOTAL script in the section called
Product Form & Description will then be:
{%- assign current_variant = product.selected_or_first_available_variant -%}
{{ current_variant.sku }}
{% endcomment %}
{% if section.settings.show_vendor %}
{{ product.vendor }}
{% endif %}
{{ current_variant.sku }}
{{ ‘products.product.sale_price’ | t }}
{{ ‘products.product.price’ | t }}
{{ current_variant.price | money }}
{{ ‘products.product.regular_price’ | t }}
{{ current_variant.compare_at_price | money }}
{% include ‘product-unit-price’, variant: current_variant %}
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
Sold Out!{{ current_variant.inventory_quantity }}
{% elsif current_variant.inventory_quantity < 6 %}Hurry! Only {{ current_variant.inventory_quantity }} left in stock.
{% else %}{{ current_variant.inventory_quantity }} available in stock.
{% endif %}{% include ‘product-form’ %}
{% if section.settings.show_share_buttons %}
{% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
{% comment %}
NOW once that folder is done.. we will have to do this:
Go to “Custom.js”
and let this be the following codes: (just erase all and insert this) at line1.
/-----------------------------------------------------------------------------/
/ Custom Theme JS
/-----------------------------------------------------------------------------/
// Insert any custom theme js here…
document.addEventListener(‘DOMContentLoaded’, () => {
const productJson = […document.querySelectorAll(‘[data-product-json]’)];
if (productJson.length > 0) {
productJson.forEach((product) => {
const sectionId = “shopify-section-” + product.closest(‘[data-section-id]’).dataset.sectionId;
const variantSKU = document.querySelector(‘#’ + sectionId + ’ .variant-sku’);
const inputSelects = […document.querySelectorAll(‘#’ + sectionId + ’ .single-option-selector’)];
const productInfo = JSON.parse(product.innerHTML);
const inputValues = ;
const optionValues = ;
let count = 0;
inputSelects.forEach((input) => {
inputValues.push(input.value);
optionValues.push(count);
input.addEventListener(‘change’, (evt) => {
const currentValue = evt.currentTarget.value.toString();
const changedIndex = inputSelects.indexOf(evt.target);
inputValues[changedIndex] = currentValue;
variantSKU.innerText = ’ ';
productInfo.variants.forEach((variant) => {
if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
variantSKU.innerText = variant.sku;
if(inv_qty[ variant.id ] <1 || inv_qty[ variant.id ]==undefined)$(“#stockstatus”).html(“
Sold Out!
”);Hurry! Only ”+ inv_qty[ variant.id ] + “ left in stock.
”);”+ inv_qty[ variant.id ] + “ available in stock.
”);}
});
});
count += 1;
});
});
}
});
now it this code is basically codes from both previous links but merged into one. What i merged in i placed in red text.
NOTE that is have NOT done anything with CSS .. like one of them mention in his link.. but this set up it still works.
If none of this made any sense, i perfectly do understand, and i will delete this post if many ppl say it dont work. (Im am NOT into coding at all.. just tweaked on it)
