nextjs shopify 다운로드 - nextjs shopify 소스 코드 다운로드

nextjs shopify

AI 소스 코드

1.0.0

다운로드

다음 .js + shopify + builder.io 예제

데모 라이브 : 헤드리스 빌더

목표와 특징

매우 고성능
SEO 최적화
그들 중
개인화 가능 (국제화, A/B 테스트 등)
Builder.io Visual CMS 통합

비디오 연습

이 Builder + Next.js + Shopify 예제를 시작하는 방법을 알아보십시오.이 단계별 비디오 가이드를 사용하십시오.

시작하기
- 1 : builder.io에 대한 계정을 만듭니다
- 2 : Builder.io 개인 키
- 3 :이 저장소를 복제하고 Builder.io 공간을 초기화하십시오
- 4. Shopify Private 앱
- 5. Shopify를 연결하기 위해 Builder를 연결합니다
- 6. Shopify와 대화 할 프로젝트를 구성하십시오
- 7. UP and RUNG!
배포

시작하기

사전 반품

이 안내서는 다음과 같은 소프트웨어가 설치되어 있다고 가정합니다.

nodejs (> = 12.0.0)
NPM
git

시작하기 전에 이미 Shopify 계정과 상점이 생성되어야합니다.

소개

이 안내서를 따르면

다음.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

이것이 성공이라면 새로 Minted Builder.io Space에 대한 공개 API 키가 포함 된 메시지를 맞이해야합니다.

참고 :이 명령은 또한 ./builder 디렉토리에서 새로운 공간이 생성 될 때 일부 스타터 Builder.io CMS 컨텐츠를 게시합니다.

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

|████████████████████████████████████████| 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 키 ( "012345ABCDEF01234567899ABCDEF0123")를 복사하십시오).

이 스타터 프로젝트는 dotenv 파일을 사용하여 환경 변수를 구성합니다. 좋아하는 텍스트 편집기에서 .env.development 및 .env.production 파일을 열고 BUILDER_PUBLIC_KEY 의 값을 방금 복사 한 공개 키로 설정하십시오. 지금은 다른 변수를 무시할 수 있습니다. 나중에 설정하겠습니다.

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

4. Shopify Custom App

Shopify 상점에 맞는 맞춤형 앱을 만듭니다. Shopify 매장이 없다면 개발 스토어를 만들 수 있습니다.

개인 앱을 만들 때 빌더가 Shopify 인벤토리를 검색 할 수 있도록 여러 권한을 설정해야합니다. 구성 탭의 Storefront API 에서이 프레스의 경우 다음 모든 권한을 선택하십시오.

그런 다음 API Credentials 탭에서 install 클릭합니다.

생성 된 액세스 토큰을 복사하십시오.

5. Shopify를 연결하기 위해 Builder를 연결합니다

조직의 공간 목록에서 새로 생성 된 공간에 액세스하십시오.

모달로 다양한 매장 액세스 Toke (미리보기 단계)와 상점 도메인을 요구하는 모달로 인사해야합니다.이를 통해 Builder.io는 상점 API와 통신 할 수 있습니다.

필요한 키를 채우고 "Shopify Custom 앱 연결"을 누르십시오!

6. Shopify와 대화 할 프로젝트를 구성하십시오

.env.development 및 .env.production을 다시 열면 이번에는 다른 두 개의 Shopify 키를 설정하십시오.

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