Shopify — добавление новой пользовательской вкладки на страницу с описанием товара

Это одна из самых неприятных вещей при разработке тем в Shopify — добавление пользовательского контента к продуктам и страницам не так просто. Несмотря на поддержку метаполей для всех типов контента (блоги, статьи, страницы и продукты), нет возможности создавать или редактировать эти поля и их содержимое в представлениях редактирования Shopify. Документацию, дополнительную информацию и учебники о метаполях можно найти здесь: https://www.shopify.com/partners/blog/110057030-using-metafields-in-your-shopify-theme

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

1. Используйте приложение-редактор метаполя

Сохраните и отобразите содержимое 4-й вкладки в пользовательском метаполе, которое, к сожалению, не отображается в представлении редактирования продукта.

Мне повезло с Shopify FD (http://shopifyfd.com/) или их немного литровой версии Shopify Custom Fields, хотя оба требуют установки расширения Chrome, чтобы использовать его в дополнение к приложению. Если вы создаете сайт для клиента, это может быть не самый удобный способ управления контентом, но он выполнит свою работу. Следуйте инструкциям по установке по ссылкам выше, чтобы начать.

Как только вы сможете создавать и редактировать метаполя, вам нужно будет обновить шаблон product.liquid, чтобы отобразить метаполе с использованием соответствующего ключа, т.е.

{{ product.metafields.care_instructions }}

2. Поместите содержимое в описание и используйте жидкость для его извлечения.

Это решение не идеально, но просто в исполнении. Основная идея заключается в том, что поле описания будет содержать описание продукта вместе с инструкциями по уходу, разделенными уникальной строкой. Используйте уникальную строку, чтобы разбить описание на массив. Первым элементом в массиве будет описание, а вторым — инструкции по уходу.

    {% comment %}
First create and capture the description into variables if the delimiter string is found.
{% endcomment %}

{% if product.description contains "<!-- #care_instructions -->" %}

{% assign content =  product.description | split: "<!-- #care_instructions -->" %}
{% assign description = content[0] %}
{% assign care_instructions = content[1] %}

{% else %}
{% assign description = product.description %}
{% assign care_instructions = false %}
{% endif %}

{% comment %}
description will always exist as the product description content regardless if the delimiter is found
{% endcomment %}

{{ description }}

{% comment %}
if care_instructions is not false display it
{% endcomment %}
{% unless care_instructions == false %}
{{ care_instructions }}
{% endunless %}

Вам нужно будет обернуть вышеупомянутое в разметку вкладки Bootstrap для правильного отображения и, возможно, добавить условие для ограничения отображения элемента навигации по вкладкам, когда care_instructions имеет значение false, чтобы пользователи не нажимали на пустую вкладку.