How to dynamically display variant metafields in Shopify Expanse theme?

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 }}">
  &nbsp;( 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)

You need to sign in to view this answers