Создайте свой собственный блог о подписке с Shopify

В этой статье я покажу, как создать платный блог с Shopify, используя HTML, CSS и Liquid (язык шаблонов Shopify). Несмотря на то, что функции ведения блога Shopify несколько просты, и есть другие онлайн-сервисы, которые специально помогают блоггерам создавать блоги, на которые читатели могут подписываться за определенную плату (например, Ghost), я объясню, почему вы могли бы лучше использовать Shopify.

Хм? Shopify для контента? Почему?

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

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

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

Давайте сравним Shopify с Ghost, например, поскольку Ghost — самая быстрорастущая CMS для ведения блогов на сегодняшний день.

Shopify Basic и Ghost Pro Basic стоят 29 долларов в месяц. Однако Shopify может продавать что угодно, тогда как Ghost может продавать доступ только к контенту по подписке. Ghost не может продавать доступ к контенту за единовременную плату или что-либо еще на стороне. Shopify бесспорно выигрывает, когда дело доходит до гибкости бизнес-модели.

Честно говоря, единственное предостережение заключается в том, что функции ведения блога считаются слабым звеном Shopify, но если вам нравится создавать темы с нуля (что, честно говоря, имеет много преимуществ), вы будете удивлены тем, насколько мощный и гибкий язык шаблонов Shopify Liquid является. Я бы не стал рассматривать Shopify как платформу для электронной коммерции, а скорее как CMS с корнями в электронной коммерции.

Итак, если вы хотите оставить новое предприятие открытым для дополнительных / альтернативных бизнес-моделей или у вас уже есть магазин Shopify с блогом, который вы хотите монетизировать, давайте начнем.

Предпосылки

Вам нужно иметь достаточно навыков в веб-разработке, по крайней мере, разбираться в HTML и CSS. Некоторое знание языка шаблонов Liquid, который использует Shopify, безусловно, было бы полезно, но не обязательно, поскольку Liquid довольно легко выучить на этом пути. (Я бы рекомендовал проверить документацию по Liquid в любом случае.)

Вам также необходимо создать учетную запись Shopify, которая бесплатна в течение 14 дней (карта не требуется). Однако обратите внимание, что, если вы не выберете тарифный план, вы не сможете снять защиту паролем в своем магазине.

Шаг 1. Определите структуру темы

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

.
├── assets
├── config
│   ├── settings_data.json
│   └── settings_schema.json
├── layout
│   └── theme.liquid
├── sections
├── snippets
└── templates
    ├── 404.liquid
    ├── article.liquid
    ├── blog.liquid
    ├── cart.liquid
    ├── collection.liquid
    ├── customers
    │   ├── account.liquid
    │   ├── activate_account.liquid
    │   ├── addresses.liquid
    │   ├── login.liquid
    │   ├── order.liquid
    │   ├── register.liquid
    │   └── reset_password.liquid
    ├── gift_card.liquid
    ├── index.liquid
    ├── list-collections.liquid
    ├── page.liquid
    ├── password.liquid
    ├── product.liquid
    └── search.liquid

Если вы используете macOS или Linux, вы можете использовать следующие команды для создания структуры:

mkdir -p assets snippets sections config layout templates/customers
touch config/settings_data.json config/settings_schema.json
touch layout/theme.liquid
cd templates/customers
touch account.liquid activate_account.liquid addresses.liquid login.liquid order.liquid register.liquid reset_password.liquid
cd ..
touch 404.liquid article.liquid blog.liquid cart.liquid collection.liquid gift_card.liquid index.liquid list-collections.liquid page.liquid password.liquid product.liquid  search.liquid

# back into the project root
cd ..

Шаг 2. Получите идентификатор темы

Затем нам нужно получить идентификатор темы по умолчанию («Дебют»), которая уже должна быть установлена. В админке Shopify перейдите в Интернет-магазин > Темы > Действия > Изменить код, а затем запишите числовой идентификатор темы в URL-адресе. Если у вас уже есть тема настроить, использовать эту тему ID вместо этого.

Примечание: хотя тема по умолчанию — «Дебют» — это полнофункциональная закодированная тема, мы перезапишем ее своим кодом.

Шаг 3. Настройте набор тем

Theme Kit — это инструмент командной строки для создания тем Shopify и управления ими. В этом руководстве мы будем использовать Theme Kit, чтобы отслеживать изменения кода в нашем каталоге тем и развертывать эти изменения в нашей теме.

Theme Kit работает в Windows, macOS и Linux и работает с такими инструментами рабочего процесса, как Git и Node.js. Чтобы не усложнять задачу, мы опустим инструменты рабочего процесса и будем использовать только Theme Kit.

Установить набор тем

Сначала установите Theme Kit с помощью командной строки.

Windows and Chocolately

choco install themekit

macOS and Homebrew

brew tap shopify/shopify
brew install themekit

Linux

curl -s https://shopify.dev/themekit.py | sudo python

Создайте «приложение»  Shopify

Затем создайте «приложение» Shopify для получения необходимых учетных данных, которые требуются Theme Kit для аутентификации изменений темы.

В админке Shopify перейдите в Приложения > Управление частными приложениями, затем установите три флажка, чтобы принять условия. Затем выберите Включить разработку частного приложения > Создать частное приложение и заполните форму.

На этом этапе вам нужно будет дать своему частному приложению имя и ввести адрес электронной почты разработчика для чрезвычайных ситуаций. Вам также необходимо включить доступ «Чтение и запись» для «Тем», прежде чем нажимать кнопку » Сохранить». Этот последний пункт скрыт за раскрывающимся списком Показать неактивные разрешения Admin API.

Наконец, нажмите » Создать приложение» и запишите «Пароль» на следующем экране.

Следите за изменениями кода

Установив Theme Kit и подготовив идентификатор темы и пароль, нам нужно запустить watchкоманду из командной строки.

Сначала перейдите в каталог вашей темы.

Затем выполните следующие команды, чтобы открыть тему в браузере и следить за изменениями кода. Не забудьте заменить xxxс myshopifyURL (минус https://), с паролем, и

с Shopify тему ID:

theme open -s xxx.myshopify.com -p <password> -t <theme-id> --hidepb
theme watch -s xxx.myshopify.com -p <password> -t <theme-id> --allow-live

Обратите внимание на дополнительные флаги:

• —hidepb: скрывает раздражающую панель предварительного просмотра
• —allow-live: какое-то понятное трение, чтобы вы знали, что редактируете живую тему (на случай, если вы не в курсе!)

Для удобства я бы предложил запустить приведенную выше последовательность команд как рабочий процесс Альфреда (или аналогичный). Хотя вы можете хранить учетные данные темы в файле config.yml, я бы не рискнул случайно раскрыть их — например, через GitHub (что было бы недостатком безопасности).

И когда это будет сделано, давайте погрузимся в код.

Шаг 4. Создайте оболочку темы ( theme.liquid)

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

<!doctype html>
<html>
  <head>
    <!-- head markup -->
    {{ content_for_header }}
  </head>
  <body>
    <!-- header markup -->
    {{ content_for_layout }}
    <!-- footer markup -->
  </body>
</html>

Вы, вероятно, заметили из приведенного выше кода, что для вывода чего-либо с помощью Liquid вам необходимо использовать двойные фигурные скобки ( {{ }}). На эту ноту уже были выведены две вещи. Они необходимы, и Theme Kit выдаст ошибку, если какой-либо из них отсутствует в вашем theme.liquid:

• {{ content_for_header }}: внедрение кода всего, что требуется для работы таких функций, как Shopify Analytics
• {{ content_for_layout }}: вводит соответствующий шаблон (например blog.liquid), все из которых хранятся в/templates

Помните, Theme Kit наблюдает. Всякий раз, когда вы сохраняете файл, Theme Kit будет знать и развертывать изменения в вашей удаленной теме (хотя вам придется обновить браузер, чтобы увидеть их).

Шаг 5: переберите статьи ( blog.liquid)

На этом следующем шаге мы углубимся blog.liquidи пройдемся по всем нашим статьям. Если вы еще не создали ни одного, перейдите в Интернет-магазин > Сообщения блога и создайте блог вместе с некоторыми статьями, не забудьте установить их видимость visible(по умолчанию hidden).

Вы найдете указанный блог по адресу https://.myshopify.com/blogs/blog-handle/. Блог Shopify по умолчанию находится по адресу /blogs/news/.

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

{% for article in blog.articles %}
  <a href="{{ article.url }}">{{ article.title }}</a>
{% endfor %}

Шаг 6: выведите статью (article.liquid)

На этом этапе мы напишем код для article.liquid. В результате будет выведена статья, но если пользователь не вошел в систему и не платит деньги, она будет размыта, и кнопка » Получить доступ» приведет пользователя к /cart/(а после этого — к оформлению заказа).

Создать «продукт»

Во-первых, нам нужно создать «Продукт», который предлагает доступ к блогу за разовую плату (Shopify может делать это изначально) или по подписке ( требуется приложение подписки Shopify ).

Перейдите в раздел » Продукты» > » Добавить продукт» и назовите его как-нибудь вроде «Премиум-доступ к блогу». Естественно, убедитесь, что вы сняли флажки » Отслеживать количество» и » Это физический продукт».

Нажмите » Сохранить» и запишите идентификатор продукта из URL-адреса.

Предварительно напишите логику

Используйте следующий код, чтобы проверить, находится ли «товар» уже в корзине, заменив «ID» своим идентификатором продукта. Мы проверим наличие accessInCartпеременной позже, чтобы пользователи не могли случайно добавить товар в корзину дважды:

{% for item in cart.items %}
  {% if item.product.id == "ID" %}
    {% assign accessInCart == "y" %}
  {% endif %}
{% endfor %}

Точно так же используйте следующий код, чтобы проверить, есть ли у клиента (при условии, что он вошел в систему) уже доступ. Мы проверим наличие этой hasAccessпеременной позже, чтобы убедиться, что вошедшим в систему клиентам не отображается кнопка » Получить доступ» или им запрещен просмотр содержимого.

Опять же, не забудьте заменить «ID» своим идентификатором продукта:

{% if customer %}
  {% for order in customer.orders %}
    {% for line_item in order.line_items %}  
      {% if line_item.id == "6816002113696" %}
        {% assign hasAccess == "y" %}
      {% endif %}
    {% endfor %}
  {% endfor %}
{% endif %}

Чтобы сделать код более СУХИМ ( не повторяйтесь ), включите оба этих фрагмента кода, theme.liquidесли вы хотите включить кнопку » Получить доступ» в любом месте, кроме article.liquid. Выставление фрагменты кода в theme.liquidГарантирует, что accessInCartи hasAccessможет существовать переменные внутри всех /templates.

Примечание: вы также захотите добавить следующее: «Клиент вошел в систему или нет?» логика, theme.liquidчтобы клиенты могли входить в систему или выходить из нее с любой страницы или шаблона:

{% if customer %}
  <a href="/account/logout/">Logout</a>
{% else %}
  <a href="/account/login/">Login</a>
{% endif %}

Вывести статью

Затем следующий код выведет статью, но добавит.blurredкласс, если у клиента нет доступа к блогу (или он не вошел в систему и, следовательно, доступ не может быть подтвержден):

<article{% unless hasAccess %} class="blurred"{% endunless %}>
  {{ article.content }}
</article>

Включите следующий код в свой CSS, чтобы включить размытие:

.blurred {
  opacity: 0.5;
  filter: blur(0.5rem);
  user-select: none; // Prevents text selection
  pointer-events: none; // Prevents click events
}

В качестве бонуса вы можете захотеть использовать файлы cookie JavaScript или localStorageразрешить чтение [x] статей, а затем применить вышеуказанный.blurredкласс только после того, как эти статьи будут прочитаны. Это улучшает SEO, позволяя индексировать статьи, и улучшает конверсию, предлагая ограниченный доступ.

Создайте кнопку «Получить доступ»

Наконец, вот логика и разметка кнопки Get access :

{% unless hasAccess %}
  <a href="/cart/{% unless accessInCart %}add/?id=ID&return_to=/cart/{% endunless %}">Get access</a>
{% endunless %}

Еще раз не забудьте заменить «ID» своим идентификатором продукта.

Шаг 7. Создайте остальную часть вашей темы

Увы, последний шаг — это тот, который вам придется сделать в одиночку: создать остальную часть вашей темы. На шаге 1 мы создали несколько.liquidфайлов в формате /templates. Некоторые из них (например, login.liquidи cart.liquid) необходимы для поддержки функции «Премиум-доступ к блогу».

Проконсультируйтесь с официальной документацией тем Shopify, в которой вы не только познакомитесь с основами создания темы Shopify, но и с каждым отдельным.liquidшаблоном (например, вот пример кода для login.liquid ).