Как интегрировать Gatsby с Shopify с помощью пользовательских приложений Shopify

В этом руководстве описаны шаги по интеграции Gatsby.js с магазином Shopify. Оно предполагает наличие базовых знаний о Gatsby.js.

К концу этого урока у вас будет сайт Gatsby, к которому вы сможете делать запросы и видеть данные вашего магазина Shopify в проводнике GraphiQL.

Шаги включают:

• Создайте учетную запись Shopify, предпочтительно партнерскую учетную запись Shopify. (Если у вас его еще нет).
• Создайте магазин Shopify и добавьте несколько товаров.
• Настройте проект Gatsby.js.
• Создайте и установите пользовательское приложение Shopify в вашем магазине Shopify.
• Установите плагин Gatsby.js и его одноранговые зависимости для запроса товаров из Shopify.
• Установите плагин Gatsby.js Shopify source с деталями из созданного ранее пользовательского приложения Shopify.

Создание учетной записи Shopify

Перед созданием магазина на Shopify вам необходимо создать учетную запись Shopify.

Все тарифные планы Shopify не являются бесплатными, но Shopify предоставляет бесплатный магазин, предназначенный только для разработки. Единственное ограничение — вы не можете принимать реальные платежи без предварительного обновления. Для создания магазина только для разработчиков вам необходимо создать учетную запись Shopify Partners. Вы можете пропустить этот шаг, если у вас уже есть активный магазин Shopify.

Настройка магазина Shopify.

Теперь, когда у вас есть учетная запись Shopify, следующим шагом будет создание магазина Shopify Store.

Войдите в свою учетную запись Shopify и нажмите на «Магазины». Вы должны увидеть страницу, как показано на рисунке ниже:

1. Нажмите на «Добавить магазин».
2. Выберите тип магазина «Магазин разработки».
3. Введите данные вашего магазина.
4. Подождите, пока Shopify создаст ваш магазин.
5. Добавьте несколько товаров.

Настройка пользовательского приложения Shopify

Чтобы создать пользовательское приложение, перейдите в раздел «Приложения» в админке вашего магазина Shopify.

Затем нажмите кнопку «Разработать приложения для вашего магазина».

1. Разрешите разработку пользовательских приложений, когда появится запрос.
2. Нажмите на кнопку «Создать приложение».
3. Введите название приложения, вы можете назвать его как угодно, например, «Gatsby Storefront».

Настройка диапазонов API администратора

Следующим шагом будет настройка диапазонов доступа для пользовательского приложения.

Перейдите на страницу обзора пользовательского приложения (если вы еще не перенаправлены туда).

1. Нажмите на кнопку «Configure Admin API Scopes».
2. Разрешите доступ на чтение для Files и Products.

3. Вы также можете разрешить доступ на чтение для:

   • 

4. Нажмите на кнопку Сохранить.

Настройка диапазонов API Storefront

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

Вернитесь на страницу обзора пользовательского приложения, затем перейдите на вкладку «Конфигурация».

1. Нажмите на кнопку «Настроить» в карточке интеграции API Storefront.
2. Разрешить считывание и изменение чекаутов
3. Нажмите на кнопку «Сохранить».

Установите приложение

Перейдите обратно на страницу «Обзор пользовательского приложения», затем нажмите на кнопку «Установить приложение».

Настройка сайта Gatsby.js

Если у вас еще нет кодовой базы Gatsby, вы можете инициализировать новый проект Gatsby с помощью npm, затем следуйте подсказкам, чтобы выбрать нужный вам вариант.

npm init gatsby

Вы также можете использовать стартер, например [gatsby-starter-ts](https://github.com/jpedroschmitz/gatsby-starter-ts).

Хранение учетных данных API из Shopify

1. Создайте файл .env в корне вашего проекта Gatsby.
2. Вернитесь на страницу обзора пользовательского приложения Shopify, затем перейдите на вкладку «API Credentials».
3. Сохраните токен доступа к API администратора в файле .env как SHOPIFY_ADMIN_API_ACCESS_TOKEN=your-admin-api-access-token. Будьте осторожны, так как вы можете открыть его только один раз.
4. Храните токен доступа к API Storefront в файле .env как GATSBY_STOREFRONT_ACCESS_TOKEN=ваш-storefront-access-token.
5. Также сохраните URL вашего магазина Shopify в файле .env как GATSBY_SHOPIFY_STORE_URL=your-url.myshopify.com.

Теперь ваш файл .env должен выглядеть так, как показано в блоке кода ниже:

SHOPIFY_ADMIN_API_ACCESS_TOKEN=shpat_XXX
GATSBY_STOREFRONT_ACCESS_TOKEN=XXX
GATSBY_SHOPIFY_STORE_URL=your-url.myshopify.com

Установка и настройка плагина

Установите gatsby-source-shopify, который является плагином Gatsby, используемым для получения данных из Shopify. и его необходимую зависимость peer, gatsby-plugin-image. gatsby-plugin-image также имеет одноранговые зависимости gatsby-plugin-sharp и gatsby-transformer-sharp.

npm install gatsby-source-shopify gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

Настройте плагины в файле gatsby-config.js вашего проекта Gatsby.

require("dotenv").config()

plugins: [
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-shopify",
      options: {
        storeUrl: process.env.GATSBY_SHOPIFY_STORE_URL,
        password: process.env.SHOPIFY_ADMIN_API_ACCESS_TOKEN,
        shopifyConnections: ["collections"], // source product collections too
      },
    },
  ],

Примечание:
В документе gatsby-source-shopify doc есть руководство по настройке с частными приложениями Shopify, которые теперь устарели с января 2022 года.

Запустите его

Запустите ваш сайт с помощью npm run develop. Когда сайт будет создан, вы должны увидеть данные вашего магазина Shopify в проводнике GraphiQL по адресу http://localhost:8000/___graphql.

Спасибо и поздравляем вас, если вы дошли до этого. 🥳

Ресурсы

Gatsby Source Shopify Plugin
Shopify Private apps deprecated