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, которое представляет множество новых функций и улучшений. Использование метаобъектов и метаполей позволяет создавать динамические элементы интерфейса и улучшать пользовательский опыт в магазине. Надеемся, эта статья помогла вам лучше понять, как использовать эти возможности для своего магазина.
