yournextstore
1.0.0
demo.yournextstore.com?
Мы официально поддерживаем текущую версию LTS - 20 на момент написания. YNS должен работать над версиями 18, 20 и 22. Если вы используете одну из этих версий и столкнетесь с проблемой, сообщите об этом!
Следуйте инструкциям для вашей операционной системы, найденной здесь: nodejs.org/en/download
Мы официально поддерживаем PNPM версию 9, но мы сделаем все возможное, чтобы она совместима с NPM и пряжей.
Самый простой способ установить PNPM - через Node.js CorePack. Внутри папки с YNS запустите эти команды:
corepack enable
corepack installВ качестве альтернативы следуйте инструкциям для вашей операционной системы, найденной здесь: pnpm.io/installation
YNS тесно интегрирован с полосой, поэтому вам нужна учетная запись полосы, чтобы использовать ваш следующий магазин. Следуйте инструкциям из полосы, чтобы создать учетную запись.
Важно помнить, что полоса работает в двух разных режимах: тестовый режим и производственный режим . Для локальной разработки и тестирования вы должны использовать тестовый режим . Таким образом, Stripe никогда не взимает с реальных денег, и вы можете использовать специальные учетные данные, такие как номера кредитных карт и номера BLIK для завершения платежей. Для получения более подробной информации, пожалуйста, обратитесь к документации полосы на Docs.stripe.com/testing.
Как только вы будете готовы продавать свои продукты реальным клиентам, вы должны переключить режим тестирования в режим производства в полосе и генерировать новые учетные данные.
Кончик
Этот шаг потребует дополнительной проверки от полосы, поэтому мы предлагаем вам немедленно начать процесс.
Чтобы YNS работал, вам нужно определить несколько переменных окружающей среды. Для локальной разработки и тестирования вы можете создать пустой файл .env и скопировать содержимое .env.example .
Чтобы установить переменные ENV в производстве, вам нужно проконсультироваться с документацией выбранного вами хостингового поставщика.
ENABLE_EXPERIMENTAL_COREPACK - только Vercel: Установите в 1 для включения CorePackNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - опубликовать ключ из Stripe.STRIPE_SECRET_KEY - секретный ключ от Stripe.STRIPE_CURRENCY - это используется для определения валюты вашего магазина. В настоящее время разрешено только одна валюта, и это должен быть трехбуктный код ISO (например, usd ).NEXT_PUBLIC_URL - Необязательно на вершине адреса вашего магазина без запекания, то есть https://demo.yournextstore.com . При первом строительстве вы должны установить его на любой действительный URL, то есть http://localhost:3000 .NEXT_PUBLIC_UMAMI_WEBSITE_ID - идентификатор веб -сайта Umami для аналитикиNEXT_PUBLIC_NEWSLETTER_ENDPOINT - Предварительный просмотр : конечная точка для формы рассылки в будущем. Он должен принять запросы на почту с помощью json { email: string } и возвращать JSON { status: number } .STRIPE_WEBHOOK_SECRET - Предварительный просмотр : Секрет stripe webhook для обработки событий от Stripe. Подробнее читайте ниже.ENABLE_STRIPE_TAX - Предварительный просмотр : установить на любое значение (т.е. 1 ), чтобы включить налог на полосы в YNS. Подробнее читайте ниже.NEXT_PUBLIC_LANGUAGE - локаль магазина (т.е. en-US ) После выполнения вышеуказанных шагов запустите pnpm install для установки требуемых зависимостей, а затем запустите pnpm dev , чтобы запустить сервер разработки на вашем компьютере. Ваш следующий магазин будет доступен в Localhost: 3000
Ваш следующий магазин получает все продукты, цены, описания и категории от Stripe. Итак, если вы уже знаете Stripe, вы почувствуете себя как дома!
Вам нужно добавить продукты на приборную панель полосы, чтобы показать в YNS. После входа в систему нажмите больше на левой боковой панели и выберите каталог продуктов . Вы также можете использовать прямую ссылку:
Затем нажмите «Добавить продукт» и заполните всю необходимую информацию:
Кроме того, в вашем следующем магазине используются метаданные продукта для предоставления дополнительной контекстной информации о продуктах. Вы можете указать следующие поля метаданных:
| Поле | Необходимый | Описание |
|---|---|---|
slug | Да | Продукт слизняка используется для URL -адресов. Должно быть уникальным, за исключением вариантов. |
category | Нет | Категория продукта, используемая для группировки продуктов. |
order | Нет | Заказ продукта, используемый для сортировки продуктов. Сначала отображаются более низкие числа. |
variant | Нет | Вариант продукта слизняк. Читайте ниже для деталей. |
Теперь вы должны увидеть все добавленные продукты в вашем следующем магазине.
Ваш следующий магазин поддерживает простые варианты продукта. Чтобы создать продукт с вариантами, вы должны добавить несколько продуктов в полосу с одним и тем же полем метаданных slug . YNS использует поле метаданных variant , чтобы различать различные варианты одного и того же продукта. Например, если у вас есть футболка в нескольких размерах, вы можете создать три продукта с slug t-shirt и variant значений small , medium и large .
Варианты отображаются на странице продукта. Варианты могут иметь разные цены, описания и изображения. Важно отметить, что category должна быть одинаковой для всех вариантов одного и того же продукта для лучшего опыта просмотра.
Примечание
В будущем мы планируем добавить возможность редактирования продуктов и вариантов на встроенной административной панели. Если у вас есть идеи или предложения, сообщите нам об этом!
В вашем следующем магазине используется stripe Webhooks для обработки событий от Stripe. В настоящее время конечная точка используется для автоматической переоценки страницы корзины и для создания налоговой транзакции (если включена). Чтобы настроить WebHooks, следуйте документам с полосами. Точные шаги зависят от того, активировали ли вы Stripe Workbench в своей учетной записи Stripe: docs.stripe.com/webhooks#add-awe-webhook-endpoint.
Конечной точкой для веб-хука является https://{YOUR_DOMAIN}/api/stripe-webhook . Единственным необходимым событием является payment_intent.succeeded . Когда WebHook настроен в полосе, установите переменную среды STRIPE_WEBHOOK_SECRET на секретный ключ, созданный Stripe.
Примечание
В будущем мы планируем добавить больше событий в WebHook, чтобы улучшить пользовательский опыт.
Ваш следующий магазин поставляется с предварительным просмотром налоговой поддержки полосы. Чтобы включить его, установите переменную среды ENABLE_STRIPE_TAX на любое значение (т.е. 1 ).
Чтобы эта функция работала, вы должны установить свои налоговые настройки на приборной панели Stripe: Dashboard.stripe.com/register/tax. При включении и настройке налоги будут автоматически рассчитаны и добавляются к общей цене продукта на основе:
Предупреждение
Эта функция все еще находится на ранней стадии, и могут быть краевые случаи, которые не поддерживаются. Мы активно работаем над этим, поэтому, если вы сталкиваетесь с любыми проблемами или у вас есть какие -либо предложения, сообщите нам об этом!
Чтобы развернуть на Vercel, нажмите на следующую кнопку, настройте переменные репозитория GitHub и среды и нажмите «Развернуть» . Обязательно установите переменную ENABLE_EXPERIMENTAL_COREPACK на 1 .
Описание скоро появится.
Чтобы развернуть на Docker, выполните эти шаги:
pnpm run docker:build .pnpm run docker:run . YNS развивается каждый день, и мы активно ищем отзывы о том, что улучшить. Если у вас есть какие -либо вопросы или проблемы, не стесняйтесь связаться с нами на нашем сервере Discord.
structuredClone для передачи данных с сервера к клиентским компонентам. Почему? Только определенные типы данных могут быть переданы с сервера к клиенту напрямую. Данные из полосы SDK часто содержат экземпляры класса. Чтобы обойти это, мы используем structuredClone , чтобы устранить их и передавать просто старые объекты клиенту.
