Как динамически отображать метаполя вариантов в теме Shopify Expanse?

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Проверка и настройка кода Liquid для метаполя
Шаг 2: Обработка изменений варианта на JavaScript
Шаг 3: Тестирование и отладка
Заключение

Вопрос или проблема

Я пытаюсь отобразить метаполе варианта, которое имеет “предполагаемую дату прибытия” на страницах моих товаров. Я уже создал метаполе варианта и добавил значения.

Я также могу отобразить текущее метаполе варианта на страницах моих товаров. Однако значение НЕ меняется, когда я выбираю другой вариант.

Я использую тему Expanse и продублировал код для отображения артикулов варианта на страницах товаров. Я отредактировал этот код, чтобы вывести метаполе варианта.

Может кто-то проверить мой код и помочь мне исправить проблему? Я был бы очень признателен.

Вот работающий код для артикулов варианта:

{%- 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)

Вот мой НЕ работающий код для отображения метаполя варианта:

{%- liquid
  assign product = section.settings.product | default: product
-%}

<variant-meta data-product-id="{{ product.id }}" data-section-id="{{ section.id }}">
  &nbsp;( отправка примерно: {{ 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)

Ответ или решение

Чтобы динамически отображать метаполя варианта, такие как "предполагаемая дата прибытия", на страницах продуктов в теме Expanse Shopify, нам необходимо убедиться, что три ключевых компонента — шаблоны Liquid, JavaScript и сам экземпляр метаполя — правильно интегрированы друг с другом. Рассмотрим, как сделать это наглядно и эффективно.

Шаг 1: Проверка и настройка кода Liquid для метаполя

Первый этап — это корректное отображение значений метаполей в Liquid. Убедитесь, что ваш код имеет актуальную ссылку на метаполе варианта. Пример правильного кода выглядит следующим образом:

{%- 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["predicted-arrival"] }} )
</variant-meta>

<script type="module">
  import 'components/variant-metafield'
</script>

В данном случае мы выделяем значение predicted-arrival в фигурных скобках для получения специфичного метаполя. Убедитесь, что в вашей админ панели это метаполе добавлено и имеет корректное имя.

Шаг 2: Обработка изменений варианта на JavaScript

Следующий шаг — это реагирование на изменение выбранного варианта в JavaScript. Для этого нужно убедиться, что обработчик событий variantChange используется правильно в вашем компоненте VariantMeta.

Класс JavaScript должен выглядеть следующим образом:

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 = ` ( ships approx: ${variant.metafields.variant["predicted-arrival"]} ) `;
    }
  }
}

customElements.define('variant-meta', VariantMeta);

Этот код гарантирует, что при выборе другого варианта метаполе будет обновляться, и при смене варианта будет извлечено актуальное значение predicted-arrival.

Шаг 3: Тестирование и отладка

Проверьте наличие метаполей: Убедитесь, что метаполя для всех вариантов действительно созданы и имеют корректные значения.
Проверка отрисовки: При изменении исходного варианта должно обновляться значения в пользовательском интерфейсе.
Откройте консоль разработчика: Используйте инструменты разработчика в вашем браузере, чтобы отследить, происходят ли события variantChange, и нет ли ошибок в консоли.

Заключение

Следуя данным инструкциям, вы сможете динамически отображать ваши метаполя для вариантов на страницах продуктов в Shopify с использованием темы Expanse. Убедитесь, что все компоненты корректно соотносятся друг с другом и тестируйте изменения среди различных вариантов, чтобы добиться корректного отображения. Часто такие мелкие настройки могут оказать значительное влияние на вашу функциональность и пользовательский опыт.

Если у вас остались дополнительные вопросы или трудности, не стесняйтесь обращаться за помощью в Shopify-сообщество или к опытным разработчикам.