BigCommerce - showing product SKU inside the option label - themes

Question

I'm editing a custom theme in BigCommerce, and I'm working on the product options section of the code on a product page. This is for a product page for a product with multiple options. A default parent SKU is shown above the options. Upon choosing an option, the new, final SKU gets populated above. The handlebar code to show that SKU is {{product.sku}}.
I've found that customers get confused and don't realize there are other SKUs available if they just choose the right option, so I want to show the SKU within the label of the option.
Here is the part of the code I'm targeting (from set-rectangle.html):
<div class="form-field" data-product-attribute="set-rectangle">
<label class="form-label form-label--alternate form-label--inlineSmall">
{{this.display_name}}:
<span data-option-value></span>
{{#if required}}
<small>{{lang 'common.required'}}</small>
{{/if}}
</label>
{{#each this.values}}
<input
class="form-radio"
type="radio"
id="attribute_rectangle__{{../id}}_{{id}}"
name="attribute[{{../id}}]"
value="{{id}}"
{{#if selected}}
checked
data-default
{{/if}}
{{#if ../required}}required{{/if}}>
<label class="form-option" for="attribute_rectangle__{{../id}}_{{id}}" data-product-attribute-value="{{id}}">
<span class="form-option-variant">{{this.label}}<br>{{product.sku}}</span>
</label>
{{/each}}
</div>
I've tried inserting {{product.sku}} inside the label - as you can see above, but that doesn't work - nothing populates. I think it needs to reference the option with a "this" in there somewhere, but that's the extent of my coding savviness.

Answer 1

A single product attribute does not necessarily determine the variant, as there may be more attibutes, a combination of which would determine a specific variant (e.g. "Size" and "Color" Vs. just "Size").
That said, when (and only when) you have variants defined by a single product attribute (e.g. "Size"), you could actually bind a specific SKU to each of the attribute values (e.g. "30ml" => sku "AAA", "50ml" => sku "BBB").
I'm afraid the variant SKUs are not included in the data available as part of the "values", for the reasons above.
In fact, if you add the "debug" line (useful sometimes) using the "json" helper:
{{#each this.values}}
<input
class="form-radio"
type="radio"
id="attribute_rectangle__{{../id}}_{{id}}"
name="attribute[{{../id}}]"
value="{{id}}"
{{#if selected}}
checked
data-default
{{/if}}
{{#if ../required}}required{{/if}}>
<label class="form-option" for="attribute_rectangle__{{../id}}_{{id}}" data-product-attribute-value="{{id}}">
<span class="form-option-variant">{{this.label}}</span>
</label>
<!-- {{{json this}}} -->
{{/each}}
(note "json this"), you will see that the HTML produced only includes, for each variant, the "label", "id" (variant ID), "data", and "selected" properties, no variant SKU in there...
<!-- {"label":"30ml","id":104,"data":"30ml","selected":false} -->
If you can identify the product variant ID (the above is the option value ID, not a variant ID), you can retrieve the missing data using the BigCommerce Store Front API (specifically GraphQL) and JavaScript, and then use that data to inject SKUs in your HTML, see the following example from BigCommerce:
https://developer.bigcommerce.com/api-docs/storefront/graphql/graphql-storefront-api-samples#get-variant-details-as-a-product-object
That JavaScript would look something like this:
<script>
(function(w) {
const sfApiToken = '{{json settings.storefront_api.token}}';
if (sfApiToken) {
w.document.querySelectorAll('[data-vidsku]').forEach((e) => {
const vid = e.getAttribute('data-vidsku') || null;
if (vid) {
const queryS = `query VariantById {
site {
product(variantEntityId: ${vid}}) {
sku
}
}
}`;
fetch('/graphql', {
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${sfApiToken}`
},
body: JSON.stringify({query: queryS})
})
.then((res) => res.json())
.then((json) => {
e.textContent = json.product.sku || '';
});
}
});
}
})(window);
</script>