next shopify starter

next.js + tailwind CSS + Shopify入门者

现场演示•查看更多开始•在Twitter上关注我

这是一家功能齐全的电子商务商店，在前端使用Next.js + Tailwind CSS，并利用Shopify店面API与您的Shopify Backend进行互动。您可以在这里看到现场演示。

我们使用GraphQL查询Shopify数据，并将购物车信息存储在LocalStorage中以持续使用用户会话。最后 - 我们使用Shopify Checkout让用户购买商品。您可以在示例商店中看到此游戏。是的 - 商店实用，您可以购买贴纸。 ？

高性能

桌面	移动的

移动响应能力

列表	大车

技术

• next.js +尾风CSS
• GraphQl
• localstorage至Persist用户会话
• 购物
• 动词
• 字体很棒的图标
• Josefin Sans Google字体

如何使用

默认情况下，该商店设置为查询并在一个集合中显示所有产品。您可以将其扩展到查询多个集合或您的整个商店。

关于GraphQl查询中分页的注释

GraphQl查询都进行了硬编码，以提取Shopify设置为250的产品/变体/图像的最大数量。我这样做是为了使事情变得简单。分页会使查询变得复杂，而对于大多数用例，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=

next_public_shopify_store_front_access_token和next_public_shopify_store_store_domain（它将像domain_name.myshopify.com一样）访问Shopify StoreFront API（请确保您已在Shopify商店设置它。请参阅您的Shopify商店。请参阅您的文档。了解更多信息。

next_public_shopify_collection是您要插入的集合的名称，next_public_local_storage_name是用户将在下面存储购物车信息的密钥的名称。确切的名称并不那么重要，尽管我建议您使其独特，因此它不太可能与其他存储的对象发生冲突。像YourStorifyStore的YourStoreName一样，您的Shopify商店名称就足够了。

安装

更改为项目目录并运行以下命令：

 yarn && yarn dev

更新网站元数据

您可以在Next.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）数据

更新清单文件和公共/图像/图标文件夹下的图标。

您可以在线使用免费工具，例如https://realfavicongonerator.net/快速生成所有不同的图标尺寸和favicon.ico文件。

部署

您可以使用任意数量的服务部署此功能。 Vercel和Netlify是我喜欢的，并且非常易于设置，并与您的GitHub仓库同步。

信用

该商店的灵感来自很棒的Gatsby赃物商店，还有无数的其他开发人员比我免费提供了很棒的作品。

执照

我已经根据麻省理工学院许可证了此代码，希望如果这可以帮助人们在Jamstack电子商务商店中导航，就像Gatsby Swag Store在我刚开始时为我所做的那样。

给我买咖啡！ ☕

如果您确实觉得这很有用并想表示感谢，您可以给我买咖啡吗？

您也可以从商店购买一些狗狗贴纸！ ？