Создание сайтов в Марьинке, ДНР. Создайте свой собственный блог подписки с 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-адресе. Если у вас уже настроена тема, используйте вместо этого идентификатор темы.

Получите идентификатор темы Shopify

Возьмите идентификатор темы Shopify из URL-адреса.

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

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

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

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

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

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

Окна и Шоколадки

choco install themekit

macOS и доморощенный

brew tap shopify/shopify

brew install themekit

линукс

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

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

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

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

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

Создайте частное приложение Shopify

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

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

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

Во- первых, перейдите в каталог вашей темы.

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

theme open -s xxx.myshopify.com -p -t <theme-id> —hidepb

theme watch -s xxx.myshopify.com -p -t <theme-id> —allow-live

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

—hidepb: скрывает раздражающую панель предварительного просмотра.

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

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

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

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

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

<! doctype 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: //<store-name>.myshopify.com/blogs/blog-handle/. Блог Shopify по умолчанию находится по адресу /blogs/news/.

{% endfor%}

Дальнейшее чтение:

Блог Object Liquid Справочник

Статья Объект Жидкость Ссылка

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

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

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

Во-первых, нам нужно создать «Продукт», который предлагает доступ к блогу за единовременную плату (Shopify может сделать это изначально) или на основе подписки (требуется приложение подписки 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%}

{% endif%}

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

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

{% if customer%}

Logout

{% else%}

{% endif%}

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

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

{%>

Включите следующий код в свой 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, позволяя индексировать статьи, и повышает конверсию, предлагая ограниченный доступ.

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

Наконец, вот логика и разметка кнопки «Получить доступ «:

{% unless hasAccess%}

Get access

{% endunless%}

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

Дальнейшее чтение:

Корзина Объект Жидкость Справочник

Справочник по жидкому объекту заказа

Статья Объект Жидкость Ссылка

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

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

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

Разработка сайта Донецк — DonbassWeb

Марьинка