Как создать интернет магазин с нуля самостоятельно: Как создать интернет-магазин бесплатно и самостоятельно?

Создайте интернет-магазин с помощью Notion и Foxy

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

Что делает Notion интересным, так это то, что вы можете опубликовать страницу Notion в Интернете одним щелчком мыши, и любой, у кого есть общая ссылка, может просмотреть вашу страницу. Другими словами, каждая страница, которую вы создаете в Notion, является вашим личным веб-сайтом. Это может быть сайт-портфолио, блог, дорожная карта продукта, доска объявлений и т. д.

А как насчет создания интернет-магазина? С Foxy это вполне возможно, поскольку Foxy — это безголовая платформа для электронной коммерции, а это значит, что ее можно интегрировать с любым веб-сайтом. Давайте посмотрим, как это делается в Notion!

Создайте магазин в Notion

Взгляните на наш демонстрационный магазин (который вы можете скопировать в свое рабочее пространство Notion, нажав кнопку «Дублировать» в правом верхнем углу). Или продолжайте читать, если вы заинтересованы в создании магазина с нуля.

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

Например, это ссылка на продукт Watch в нашей демонстрации: https://foxy-notion.foxycart.com/cart?name=Watch&price=99.99&code=watch&cart=checkout
Вы захотите заменить foxy-notion с собственным субдоменом магазина Foxy и значениями параметров name , price и code . С параметром cart=checkout клиенты будут немедленно перенаправлены на страницу оформления заказа (пропустив страницу корзины). При необходимости вы можете добавить другие параметры. Полный список параметров продукта Foxy можно найти здесь. Кроме того, у нас есть конструктор ссылок на продукты Foxy, который помогает создавать ссылки.

Как и в нашей демонстрации, ссылка на покупку Foxy может быть встроена в тело страницы продукта, поэтому покупателям не нужно прокручивать вверх, чтобы найти ссылку на покупку после просмотра сведений о продукте.

Проверка продукта HMAC

Вы можете задаться вопросом: «Что, если мои клиенты знают, как изменить значения параметров в ссылках на покупку? Означает ли это, что они могут покупать нашу продукцию бесплатно?» Хороший вопрос. Вот где в игру вступает проверка продуктов Foxy HMAC.

Подробную информацию о том, что такое проверка продукта HMAC и как она работает, можно найти в нашей документации. По сути, это предотвращает подделку ссылок на продукты Foxy, подписывая их секретом вашего магазина Foxy. Значение секрета хранилища доступно в дополнительных настройках в админке Foxy.

Чтобы применить это к ссылкам на продукты Foxy, перейдите на страницу примера кода в админке Foxy, скопируйте приведенный ниже HTML-код и вставьте его в текстовое поле шага 2:

Замените заполнитель href значение атрибута FOXY_PRODUCT_LINK фактической ссылкой на продукт, затем нажмите кнопку «Кодировать HTML». Обратите внимание, что вы должны включить параметр code в ссылку на продукт.

Затем вы можете получить закодированные href значение атрибута из поля закодированного вывода и поместите его на страницу продукта Notion. Перед тестированием подписанных ссылок обязательно включите опцию проверки корзины в дополнительных настройках.

Когда вы закончите настройку магазина и будете готовы опубликовать сайт, нажмите кнопку «Поделиться» в правом верхнем углу страницы вашего магазина Notion и включите параметр «Поделиться в Интернете». Затем вы можете скопировать URL-адрес и поделиться им со своими клиентами!

Как бы то ни было, вы можете установить собственный URL-адрес для своего рабочего пространства, чтобы он лучше запоминался и помогал брендингу.

Используйте шаблон магазина на основе Notion

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

Не волнуйтесь. Мы вас прикрыли. Благодаря Notion API мы можем создавать веб-сайты на основе баз данных Notion. И мы создали шаблон магазина для Notion. Проверьте это: https://foxy-notion.vercel.app/ (данные о продукте получены из этой базы данных Notion).

Следуйте приведенным ниже инструкциям, чтобы использовать шаблон (или вы можете воспользоваться кратким руководством в нашем репозитории GitHub).

Предварительные условия

Прежде всего, нам понадобится несколько вещей:

  • Если вы еще этого не сделали, создайте учетную запись Foxy и магазин Foxy.
  • Скопируйте этот шаблон каталога продуктов Notion в рабочее пространство Notion. Затем добавьте свои продукты.
    Обратите внимание, что существует URL-адрес изображения и свойство Изображение . Срок действия ссылок на файлы, размещенные в Notion, истекает, поэтому по возможности используйте свойство URL изображения . (Вы можете загрузить изображения в службу размещения файлов, например Dropbox, чтобы получить общедоступный статический URL-адрес для каждого файла.) Если URL-адрес изображения не указан, будет использоваться ссылка на загруженный файл.
  • Учетная запись GitHub, если у вас ее нет. Это для хранения кода шаблона.

Создайте интеграцию с вашей базой данных Notion

Следующие шаги предназначены для подключения вашей базы данных Notion к нашему шаблону.

  1. Перейдите на https://www.notion.com/my-integrations.
  2. Нажмите кнопку «+ Новая интеграция».
  3. Дайте вашей интеграции имя (может быть любым).
  4. Выберите рабочую область, в которой находится база данных продуктов.
  5. Нажмите кнопку «Отправить», чтобы создать интеграцию.
  6. На следующей странице вы увидите «Токен внутренней интеграции». Сохраните его в безопасном месте. Нам это понадобится через некоторое время.
  7. В базе данных продуктов Notion нажмите кнопку «Поделиться» в правом верхнем углу.
  8. Нажмите кнопку «Пригласить», после чего откроется всплывающее окно для выбора интеграции.
  9. Выберите интеграцию, созданную на предыдущих шагах.
  10. Нажмите кнопку «Пригласить», чтобы завершить подключение.

Развертывание веб-сайта

Мы будем использовать Vercel для размещения веб-сайта. Щелкните эту ссылку, чтобы настроить развертывание.

Следуйте инструкциям на веб-сайте Vercel. Вам нужно будет войти в Vercel с помощью своей учетной записи GitHub, чтобы клонировать наш шаблон. В разделе «Настройка проекта» вам необходимо указать значения для следующих переменных среды:

  • NOTION_TOKEN — это «Токен внутренней интеграции», который мы получили от интеграции Notion ранее.
  • NOTION_DATABASE_ID  – это часть URL-адреса вашей базы данных продуктов после имени рабочей области, косой черты и перед вопросительным знаком. Например, URL-адрес вашей базы данных продуктов  https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=... , тогда идентификатор базы данных будет  a8aec43384f447ed84390e8e42c2e089 .
  • NEXT_PUBLIC_FOXY_SUBDOMAIN  – это поддомен вашего магазина Foxy, который можно найти в панели администрирования Foxy. Например, домен вашего магазина — foxy-demo.foxycart.com , тогда субдомен будет foxy-demo .
  • FOXY_STORE_SECRET  требуется, только если вы хотите включить проверку корзины Foxy HMAC. Чтобы получить значение этой переменной, перейдите в «Дополнительные настройки» в админке Foxy. Найдите параметр «сохранить секрет», нажмите кнопку «Показать» и скопируйте значение в текстовое поле. Кроме того, «Хотели бы вы включить проверку корзины?» опция в том же разделе должна быть проверена.

Наконец, нажмите кнопку «Развернуть». Через мгновение вы должны увидеть экран успеха с URL-адресом вашего собственного магазина Foxy + Notion.

Давай дальше

Привет, разработчики! Заинтересованы в глубоком погружении в код? У нас есть пошаговое руководство по аналогичному стеку — Создайте веб-сайт электронной коммерции JAMstack с помощью Next.js, Contentful и Foxy. Единственная разница заключается в источнике продуктов (Contentful vs Notion). Не стесняйтесь клонировать репозиторий этого шаблона и настраивать его или добавлять дополнительные функции. Например:

  • Добавить больше страниц. Next.js имеет маршрутизатор на основе файловой системы, поэтому каждый файл, добавленный в папку страниц , автоматически становится маршрутом.