nextjs shopify下载nextjs shopify源代码下载

nextjs shopify

Ai源码

1.0.0

下载

next.js + shopify + builder.io示例

演示现场：headless.builders

目标和功能

超高性能
SEO优化
具有主题
个性化（国际化，A/B测试等）
Builder.io Visual CMS集成

视频演练

了解如何开始使用此构建器 + Next.js + Shopifie示例此逐步视频指南：

入门

先决条件

本指南将假设您已安装了以下软件：

nodejs（> = 12.0.0）
NPM
git

在开始之前，您也应该已经有一个Shopify帐户并创建了商店。

介绍

遵循本指南后，您将有

next.js应用程序，准备部署到您选择的托管提供商
从Shopify获取实时收集和产品信息
由Builder.io Visual CMS提供支持

1：为Builder.io创建帐户

在开始之前，请转到Builder.io并创建一个帐户。

2：您的builder.io私钥

转到您的组织设置页面并创建一个私钥，复制下一步的密钥。

访问组织设置页面，或从列表中选择组织

组织下拉列表

从左侧侧边栏中单击“帐户”
单击“私钥”行的编辑图标
复制自动生成键的值，或创建一个具有对您有意义的名称的新键

如何获取私钥的示例

3：克隆此存储库并初始化一个builder.io空间

接下来，我们将创建一个入门项目的副本，并为其内容创建一个新的空间。

在下面的示例中，用您在上一步中复制的键替换<private-key> ，然后将<space-name>更改为对您有意义的东西 - 不用担心，您可以稍后更改它！

 git clone https://github.com/BuilderIO/nextjs-shopify.git
cd nextjs-shopify

unzip builder

npm install --global "@builder.io/cli"

builder create --key "<private-key>" --name "<space-name>" --debug

注意：如果您只想使用Shopify使用此启动器将此启动器用于降落页面，请使用此命令：

 unzip builder-landing-page-only
builder create --key "<private-key>" --name "<space-name>" --input builder-landing-page-only --debug

如果这是成功的，则应向您迎接一条消息，其中包括新铸造的Builder.io Space的公共API密钥。

注意：此命令还将在创建新的空间中将一些启动器builder.io cms内容从./builder目录发布到您的新空间。

  ____            _   _       _                     _                    _   _
| __ )   _   _  (_) | |   __ | |   ___   _ __      (_)   ___       ___  | | (_)
|  _   | | | | | | | |  / _ ` |  / _  | ' __|     | |  / _      / __| | | | |
| |_) | | |_| | | | | | | (_| | |  __/ | |     _  | | | (_) |   | (__  | | | |
|____/   __,_| |_| |_|  __,_|  ___| |_|    (_) |_|  ___/     ___| |_| |_|

|████████████████████████████████████████| shopify-product | 0/0
|████████████████████████████████████████| product-page: writing generic-template.json | 1/1
|████████████████████████████████████████| shopify-collection | 0/0
|████████████████████████████████████████| collection-page: writing generic-collection.json | 1/1
|████████████████████████████████████████| page: writing homepage.json | 2/2


Your new space "next.js shopify starter" public API Key: 012345abcdef0123456789abcdef0123

在下一步中复制公共API密钥（“ 012345ABCDEF0123456789BCDEF0123”）。

该启动器项目使用dotenv文件来配置环境变量。在您喜欢的文本编辑器中打开文件.ENV。开发和.env。生产，并将BUILDER_PUBLIC_KEY的值设置为您刚刚复制的公钥。您可以暂时忽略其他变量，我们以后将它们设置。

 + BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
- BUILDER_PUBLIC_KEY=
SHOPIFY_STOREFRONT_API_TOKEN=
SHOPIFY_STORE_DOMAIN=

4。Shopify自定义应用

为您的Shopify商店创建自定义应用程序。如果您还没有Shopify商店，则可以创建开发商店。

创建私有应用程序时，您必须设置许多权限，以便建造者可以检索您的Shopify库存。为此，在“配置”选项卡中的Storefront API上，选择以下所有权限：

然后在API Credentials选项卡中，单击install ：

并复制生成的访问令牌。

5。将建造者连接到Shopify

通过从组织中的空间列表中选择新创建的空间。

您应该通过模态向您打招呼，要求各种店面访问toke（来自预览步骤）和您的商店域，这将允许Builder.io与您的商店API通信：

填写所需的钥匙，然后按“连接您的Shopify自定义应用程序”！

6。配置项目以与Shopify交谈

再次打开.env.开发和.env.。

BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
+ SHOPIFY_STOREFRONT_API_TOKEN=c11b4053408085753bd76a45806f80dd
- SHOPIFY_STOREFRONT_API_TOKEN=
+ SHOPIFY_STORE_DOMAIN=dylanbuilder.myshopify.com
- SHOPIFY_STORE_DOMAIN=