Svelte Commerce — это новый шаблон Svelte от Vercel, который позволяет вам запустить полнофункциональный магазин электронной коммерции с помощью Shopify с невероятной скоростью. Хотя его можно рассматривать как стартовый комплект, он полностью функционален и имеет все функции, необходимые высокопроизводительному интернет-магазину. Кроме того, он построен с использованием быстрой и эффективной веб-инфраструктуры Svelte.
В этом посте я шаг за шагом покажу вам, как создать магазин электронной коммерции с помощью Svelte Commerce и развернуть его в Vercel и Netlify.
Настройка электронной коммерции для тонкого бизнеса
Первый шаг в настройке магазина с помощью Svelte Commerce — убедиться, что на вашем компьютере установлен Node.js. Если у вас не установлен Node.js, ознакомьтесь с официальной документацией, чтобы загрузить и установить его.
Тонкое крепление для бизнеса
Svelte Commerce — это шаблон с открытым исходным кодом, созданный и размещенный Vercel в репозитории GitHub.
Его установка означает просто клонирование из репозитория GitHub. Вы можете клонировать его, запустив. Затем перейдите к клонированному проекту и установите зависимости, используя . git clone https://github.com/vercel/sveltekit-commerce ``cd sveltekit-commerce && npm install
Помните, что менеджер пакетов по умолчанию, используемый в Svelte Commerce, — pnpm. Если он установлен, продолжайте вводить текст. В противном случае можно использовать или — в данном случае, в чем причина того, что ноутбук не читает диск? Чтобы решить проблему по этим трем причинам, вам необходимо удалить файл из корневого каталога проекта. pnpm installПряжа pnpm npm installpnpm-lock.yml
Ваша файловая структура должна выглядеть так:
Чтобы убедиться, что у вас все работает, запустите терминал и посетите URL-адрес, который будет отображаться на экране. Вы должны увидеть что-то похожее на эту страницу: npm run dev
Это подтверждает, что мы успешно клонировали версию Svelte Commerce по умолчанию и готовы сделать ее своей собственной.
Интегрируйте Shopify
Итак, Svelte Commerce помогает вам управлять уровнем представления вашего магазина электронной коммерции. Однако это зависит от хранилища данных, которое вы предоставите. Каковы преимущества взлома iPhone с помощью Svelte Commerce по умолчанию ? Зачем iPhone нужно делать джейлбрейк? Получайте данные из вашего магазина Shopify через API Shopify Storefront.
Когда вы клонируете проект, вы увидите, что он имеет некоторые учетные данные из файлов Shopify по умолчанию. Эти учетные данные представляют собой образец учетных данных, добавленных командой Vercel для обеспечения работы образца шаблона: shopify.js.
├── источник │ ├── store.js │ └── утилиты │ └── shopify.js
Давайте отредактируем его, чтобы добавить наши собственные учетные данные магазина Shopify. Файл будет содержать следующий код: shopify.js.
// источник/utils/shopify.js
экспортировать асинхронную функцию shopifyFetch({запрос, переменные }) {
константная конечная точка =
import.meta.env.VITE_SHOPIFY_API_ENDPOINT ||
'https://next-js-store.myshopify.com/api/2021-10/graphql.json';
константный ключ =
'ef7d41c7bf7e1c214074d0d3047bcd7b';
пытаться {
const result = ожидание выборки (конечная точка, {
метод: 'POST',
заголовки: {
«Тип контента»: «приложение/json»,
«X-Shopify-Storefront-Access-Token»: ключ
},
тело: { запрос, переменные } && JSON.stringify({ запрос, переменные }),
дуплекс: «половина»
});
возвращаться {
статус: результат.статус,
тело: ожидайте result.json()
};
} поймать (ошибка) {
console.error('Ошибка:', ошибка);
возвращаться {
статус: 500,
ошибка: «Ошибка получения данных»
};
}
}
Обратите внимание, что учетные данные отображаются в виде обычного текста. Нам нужно добавить это в файл и удалить учетные данные по умолчанию. Итак, наш обновленный код будет выглядеть так: .env
// источник/utils/shopify.js ... константная конечная точка = import.meta.env.VITE_SHOPIFY_API_ENDPOINT; константный ключ = import.meta.env.VITE_SHOPIFY_API_ACCESS_TOKEN; ...
Теперь создайте файл в корне вашего проекта и добавьте следующие переменные: .env.
//.env VITE_SHOPIFY_API_ENDPOINT= VITE_SHOPIFY_API_ACCESS_TOKEN=
Чтобы получить эти учетные данные, нам нужна учетная запись Shopify и витрина. Забавные примечания. Если у вас нет учетной записи, создайте ее, а затем создайте магазин.
Ваш SHOPIFY_API_ENDPOINT будет находиться в этом режиме, когда вы настроите все настройки своего магазина. Поэтому замените имя магазина на название вашего магазина. Затем вы можете немедленно обновить переменную: https://{shopname}.myshopify.com/admin/api/2022-10/graphql.json``.env.
//.env
VITE_SHOPIFY_API_ENDPOINT=https://{shopname}.myshopify.com/admin/api/2022-10/graphql.json
VITE_SHOPIFY_API_ACCESS_TOKEN=
Далее давайте получим токен доступа Shopify с панели управления.
Доступ к Shopify с вашей панели управления
В вашем бэкэнде Shopify происходит все: от генерации токенов доступа и создания продуктов, которые будут отображаться в вашем магазине электронной коммерции, до просмотра вашего инвентаря и аналитики и многого другого.
Давайте выполним базовую настройку на серверной части, которая позволит нам генерировать токены доступа к витрине для Svelte Commerce. На панели администратора Shopify нажмите ссылку «Приложения» на боковой панели. Это вернет всплывающее окно. Затем во всплывающем окне нажмите «Настройки приложения и канала продаж»:
Вы попадете на экран, где увидите кнопку «Разработать приложение для магазина», как показано ниже. нажмите на него:
Затем вы перейдете на другой экран , который позволит вам искать приложения или создавать новые. Нажмите кнопку «Создать приложение», как показано ниже:
После создания приложения вам необходимо настроить область API витрины, как показано на следующей странице:
Отсюда выберите все области доступа к API Storefront, затем нажмите «Сохранить»:
Наконец, перейдите в раздел «Учетные данные» и нажмите кнопку «Установить приложение»:
После завершения процесса установки ваш токен доступа к API витрины будет отображаться следующим образом:
Скопируйте токен, перейдите в файл и добавьте туда токен доступа: .env
//.env
VITE_SHOPIFY_API_ENDPOINT=https://{shopname}.myshopify.com/admin/api/2022-10/graphql.json
VITE_SHOPIFY_API_ACCESS_TOKEN=kjbabfjkhfkjhjbkvhjvfiofguhfy
Поздравляем! Ваш магазин электронной коммерции на базе Svelte Commerce готов. При необходимости вы можете настроить дизайн или любые другие функции. Все продукты, которые вы создаете в своем магазине Shopify, будут отображаться в вашем индивидуальном магазине. Самое приятное то, что вам не нужно платить ежемесячную плату за Shopify, поскольку API можно использовать бесплатно.
Теперь, когда наш магазин электронной коммерции готов, давайте представим его на всеобщее обозрение.
Разверните свой магазин электронной коммерции в Vercel
Одна из причин, по которой разработчики любят использовать Vercel, заключается в том, насколько легко любому человеку за считанные минуты развернуть поддерживаемое приложение на своем сервере. Вам не придется беспокоиться о каких-либо сложных настройках. Все, что вам действительно нужно сделать, это отправить свой код на GitHub и один раз подключиться к Vercel, и каждый раз, когда вы отправляете новое обновление на GitHub, оно будет автоматически развертываться.
Итак, начнем с создания учетной записи на сайте Vercel и входа в систему.
Затем отправьте код своего магазина на GitHub, GitLab или BitBucket, поскольку Vercel будет запускать автоматическое развертывание через этот носитель каждый раз, когда обновление отправляется в репозиторий. Обязательно дважды проверьте, добавили ли вы файл в файл, чтобы случайно не отправить секреты на GitHub: .env``.gitignore
Для этого шага, пожалуйста, оставайтесь в своей учетной записи Vercel при посещении этого нового проекта — Vercel . Затем вы должны увидеть страницу с просьбой подключиться к вашему провайдеру Git. Подключите и импортируйте свой проект:
Наконец, настройте его на использование переменных среды и нажмите кнопку «Развернуть» следующим образом:
Вот и все. Просто дождитесь завершения развертывания, и вы будете готовы продемонстрировать свой магазин электронной коммерции всему миру. Это легко, правда?
Давайте также развернёмся на Netlify.
Как развернуть Svelte Commerce в Netlify
Пользователи Netlify пользуются теми же преимуществами, что и пользователи Vercel: развертывание простое, удобное для разработчиков, а также отлично подходит для интерфейсных приложений и лямбда-функций.
Как и в случае с Vercel, с точки зрения развертывания нет большой разницы с Netlify. Сначала зарегистрируйтесь и войдите в свой бэкэнд Netlify.
Оттуда нажмите кнопку «Добавить новый сайт» и выберите импортировать его из своего профиля GitHub. Затем вам будет предложено подключиться к репозиторию GitHub:
При выборе репозитория и его импорте нажмите «Дополнительные параметры» и добавьте переменную среды:
Далее нажмите кнопку «Развернуть сайт»:
смотреть! Ваш интернет-магазин готов.
Вы всегда можете улучшить свой магазин электронной коммерции, воспользовавшись всеми возможностями Svelte и бесплатными функциями, предоставляемыми Shopify API.
в заключение
Создание полноценного магазина электронной коммерции требует времени и сопряжено с некоторыми финансовыми и умственными трудностями. Если вы пытаетесь создать собственный магазин электронной коммерции для своего бизнеса или клиента и хотите сделать это быстро, не ставя под угрозу безопасность и качество, то Svelte Commerce, вероятно, будет вашим лучшим выбором.