I am trying to display a variant metafield that has a “predicted date of arrival” on my product pages. I have already created the variant metafield and added the values.
I am also able to display the current variant metafield in my product pages. However, the value does NOT change when I select a different variant.
I am using the Expanse theme and I have duplicated the code for displaying variant SKUs in the product pages. I have edited this code to render the variant metafield.
Can someone check my code and help me fix the issue? I’d really appreciate it.
Here is the working code for Variant SKUs:
{%- liquid
assign product = section.settings.product | default: product
-%}
<variant-sku data-product-id="{{ product.id }}" data-section-id="{{ section.id }}">
{%- if variant.sku != blank -%}
SKU: {{ variant.sku }}
{%- endif -%}
</variant-sku>
<script type="module"> import 'components/variant-sku'
</script>
import { EVENTS, subscribe } from '@archetype-themes/utils/pubsub'
class VariantSku extends HTMLElement {
connectedCallback() {
this.variantChangeUnsubscriber = subscribe(
`${EVENTS.variantChange}:${this.dataset.sectionId}:${this.dataset.productId}`,
this.handleVariantChange.bind(this)
)
}
disconnectedCallback() {
this.variantChangeUnsubscriber?.()
}
handleVariantChange({ detail }) {
const { html, sectionId, variant } = detail
if (!variant) {
this.textContent = ''
return
}
const skuSource = html.querySelector(`[data-section-id="${sectionId}"] variant-sku`)
if (skuSource) {
this.textContent = skuSource.textContent
}
}
}
customElements.define('variant-sku', VariantSku)
Here is my NON working code for displaying the Variant Metafield:
{%- liquid
assign product = section.settings.product | default: product
-%}
<variant-meta data-product-id="{{ product.id }}" data-section-id="{{ section.id }}">
( ships approx: {{ variant.metafields.variant.date | replace: 'predicted-arrival-','' }} )
</variant-meta>
<script type="module"> import 'components/variant-metafield'
</script>
import { EVENTS, subscribe } from '@archetype-themes/utils/pubsub'
class VariantMeta extends HTMLElement {
connectedCallback() {
this.variantChangeUnsubscriber = subscribe(
`${EVENTS.variantChange}:${this.dataset.sectionId}:${this.dataset.productId}`,
this.handleVariantChange.bind(this)
)
}
disconnectedCallback() {
this.variantChangeUnsubscriber?.()
}
handleVariantChange({ detail }) {
const { html, sectionId, variant } = detail
if (!variant) {
this.textContent = ''
return
}
const metaSource = html.querySelector(`[data-section-id="${sectionId}"] variant-meta`)
if (metaSource) {
this.textContent = metaSource.textContent
}
}
}
customElements.define('variant-meta', VariantMeta)
