next shopify starter загрузка next shopify starter

next shopify starter

AI Исходный код

1.0.0

Скачать

Next.js + Tailwind CSS + Shopify Starter

Живая демонстрация • Смотрите больше стартеров • Следуйте за мной в Twitter

Это полностью функциональный магазин электронной коммерции, который использует CSS Next.js + Tailwind в передней части и использует API магазина Shopify для взаимодействия с вашим бэкэнд Shopify. Вы можете увидеть живую демонстрацию здесь.

Мы используем GraphQL, чтобы запросить наши данные Shopify и хранить информацию о корзине в LocalStorage для постоянного пользовательского сеанса. Наконец, мы используем Chopify Checkout, чтобы позволить пользователю приобрести предметы. Вы можете увидеть это воспроизведение в магазине примеров. Да - магазин функциональный, и вы можете купить наклейки. ?

Высокая производительность

Настольный компьютер	Мобильный

Мобильный отзывчивый

Списки	Тележка

Тех

Next.js + Tailwind CSS
Graphql
LocalStorage для постоянного пользовательского сеанса
Shopify
Вертел
Шрифт потрясающие значки
Josefin без шрифта Google

Как использовать

По умолчанию магазин настроен на запрос и показать все продукты в одной коллекции. Вы можете расширить это, чтобы запросить несколько коллекций или всего вашего магазина.

Примечание о странице в запросах GraphQL

Запросы GraphQL все твердые кодированы, чтобы вытащить максимальное количество продуктов/вариантов/изображений, которые устанавливаются на 250 по Shopify. Я сделал это, чтобы все было просто. Парень усложнила бы страстные запросы, а 250 предметов достаточно для большинства вариантов использования.

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

Настройка переменных среды

Создайте файл .env.local в корневом каталоге. Вам нужно добавить эти 4 переменные:

 NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN=
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_COLLECTION=
NEXT_PUBLIC_LOCAL_STORAGE_NAME=

Для доступа к API Shopforn API (убедитесь, что вы настроили его в магазине. Смотрите документы для получения дополнительной информации (это будет следующее_Публк_SHOPIFY_STORE_FRONT_ACCESS_TOKEN и NEXT_PUBLIC_SHOPIFY_STORE_DOREN_ACCESS_TOKE.

Next_public_shopify_collection - это имя коллекции, которую вы хотите получить, и next_public_local_storage_name - это имя ключа, под которым ваши пользователи будут хранить информацию о своей корзине. Точное имя не так важно, хотя я предлагаю вам сделать его уникальным, поэтому оно с меньшей вероятностью столкнется с другими хранимыми объектами. Что -то вроде YourStorenAmeShopifyStore, где будет достаточно вашего названия магазина Shopify.

Установка

Переодеться в каталог проектов и запустите следующую команду:

 yarn && yarn dev

Обновить метаданные сайта

Вы можете обновить метаданные сайта в файле следующего.config.js.

 env: {
  siteTitle: 'Your Company',
  siteDescription: 'Your company description.',
  siteKeywords: 'your company keywords',
  siteUrl: 'https://doggystickers.xyz',
  siteImagePreviewUrl: '/images/main.jpg',
  twitterHandle: '@your_handle'
}

Обновить цвета

Вы можете обновить цветовую палитру в файле tailwind.config.js.

 colors: {
  palette: {
    lighter: '',
    light: '',
    primary: '',
    dark: '',
  },
},

Обновление данных прогрессивного веб -приложения (PWA)

Обновите файл manifest.json и значки в папке Public/Images/Icons.

Вы можете использовать бесплатные инструменты онлайн, такие как https://realfavicongenerator.net/, чтобы быстро генерировать все различные размеры значков и файл favicon.ico.

Развертывание

Вы можете развернуть это, используя любое количество услуг. Vercel и NetLify - это те, которые я предпочитаю, и очень просты для настройки и синхронизации с вашим репозитором GitHub.

Кредит

Магазин был вдохновлен потрясающим магазином Gatsby Swag, а также бесчисленными другими разработками, гораздо более способными, чем я, которые бесплатно выпустили свою потрясающую работу.

Лицензия

Я открыл этот код по лицензии MIT в надежде, что если это поможет людям перемещаться по магазинам электронной коммерции Jamstack, как магазин Gatsby Swag сделал для меня, когда я впервые начал.