Shopify Editions 2023: крупное обновление для магазинов на Shopify

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

Связывание кастомного метаобъекта с метаполем товара

Одно из самых важных нововведений Editions 2023 — использование метаобъектов. Метаобъекты — это пользовательские объекты, которые можно создавать для хранения информации о товарах, коллекциях, заказах и других объектах в магазине. Они позволяют сохранять и обрабатывать дополнительные данные на уровне магазина, что может быть полезно для создания динамических элементов интерфейса, например, для отображения информации о продукте.

Давайте рассмотрим, как использовать метаобъекты для связывания кастомного метаобъекта с метаполем товара. Для этого необходимо добавить кастомный метаобъект, который будет хранить информацию о дизайнере, и соединить его с метаполем товара.

{% assign designer = product.metafields.custom.designer %}
{% if designer %}
  <p>Designer: {{ designer }}</p>
{% endif %}

Теперь мы можем добавлять разных дизайнеров на разные товары. Для этого открываем любой продукт через админку и листаем в самый низ. В поле Designer добавляем желаемого дизайнера.

Создание динамической секции на странице товара

Далее давайте назначим нашего дизайнера на какой-то товар. Для этого необходимо открыть страницу товара через кастомайзер и создать новую секцию. Мы создадим секцию Image with text, так как она содержит всё, что нам нужно для текущего объекта.

{% assign designer = product.metafields.custom.designer %}
{% if designer %}
  <div class="designer">
    <div class="designer__img">
      <img src="{{ designer.picture }}" alt="Designer picture">
    </div>
    <div class="designer__body">
      <h2 class="h1">{{ designer.name }}</h2>
      <p class="desginer__body-text">
        {{ designer.description }}
      </p>
      <a class="button button--secondary" href="{{ designer.link }}" target="_blank"> Visit </a>
    </div>
  </div>
{% endif %}

Теперь на странице продукта появилась новая секция с нашим дизайнером.

Создание страницы всех дизайнеров

Также метаобъекты можно вывести через код. Например, мы можем создать список всех дизайнеров на странице их отдельной категории. Для этого создадим новую страницу с шаблоном page.designers. В этом шаблоне мы выведем список всех дизайнеров, которые были добавлены в магазин.

{% for product in collections.all.products %}
  {% assign designer = product.metafields.custom.designer %}
  {% if designer %}
    <div class="designer">
      <div class="designer__img">
        <img src="{{ designer.picture }}" alt="Designer picture">
      </div>
      <div class="designer__body">
        <h2 class="h1">{{ designer.name }}</h2>
        <p class="desginer__body-text">
          {{ designer.description }}
        </p>
        <a class="button button--secondary" href="{{ designer.link }}" target="_blank"> Visit </a>
      </div>
    </div>
  {% endif %}
{% endfor %}

Теперь мы можем перейти на страницу всех дизайнеров и увидеть список всех дизайнеров, которые были добавлены в магазин.

Использование метаполей для создания динамических данных

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

Например, мы можем использовать метаполе Price для создания динамических цен на продукты. Для этого добавляем метаполе Price в форму создания продукта и связываем его с ценой продукта.

{% assign price = product.metafields.custom.price %}
{% if price %}
  <p>Price: {{ price }}</p>
{% endif %}

Теперь мы можем изменять цену продукта через админку магазина и она будет автоматически обновляться на странице продукта.

Заключение

Shopify Editions 2023 — это крупное обновление для магазинов на платформе Shopify, которое представляет множество новых функций и улучшений. Использование метаобъектов и метаполей позволяет создавать динамические элементы интерфейса и улучшать пользовательский опыт в магазине. Надеемся, эта статья помогла вам лучше понять, как использовать эти возможности для своего магазина.