commercejs nextjs demo store
1.0.0
Commerce.js SDK 및 Next.JS를 사용하여 NetLify에 라이브 배포를 사용하여 구축 된 고 충실도 완전한 전자 상거래 데모 스토어.
메모
이 README는 본격적인 전자 상거래 템플릿으로 일어나고 실행하는 데 도움이됩니다. 이 템플릿을 구성하여 NetLify에 직접 한 번의 클릭 배포를 구성했습니다. 또는 선택한 호스팅 플랫폼에 수동으로 배포 할 수 있습니다.
이 Jamstack Ecommerce 응용 프로그램 구축에 대한 자세한 자습서를 보려면 여기로 이동하십시오.
yarn global add @chec/cli 전 세계적으로 CHEC CLI를 설치 했으므로 chec [COMMANDS] 목록에 액세스 할 수 있으며 그 중 하나는 CHEC 계정에 등록됩니다. 계속하자, 그 설정을 얻으십시오!
# Open the Chec registration page in your browser
chec register나머지 연습을 따라 가맹점 세부 정보를 설정하십시오. 또는 CHEC 계정에 등록하기 위해 여기로 이동할 수 있습니다.
한 번의 클릭 배포를 사용하면 NetLify를 GitHub 계정에 연결하여 commercejs-nextjs-demo-store 저장소를 복제하고 자동으로 배포 할 수 있습니다. 배포 버튼을 클릭하기 전에 NetLify로 이동하여 계정에 가입하십시오.
위 버튼을 클릭하면 프로젝트의 저장소가 URL의 매개 변수로 전달 된 상태에서 NetLify의 직접 배포 페이지로 이동합니다. GitHub 버튼에 연결을 클릭하고 저장소의 이름을 지정하고 CHEC 공개 키 입력 에서이 공개 키를 입력하십시오. 데모 스토어의 라이브 배포 미리보기로 귀하를 업데게하고 실행할 목적으로 Demo Merchant 계정의 공개 키를 제공했습니다. 이제 사이트를 저장 및 배포하십시오.
제공된 데모 판매자 키 대신 공개 키를 입력하면 초기 빌드가 실패합니다. 한 번의 클릭 배포는 프레젠테이션 목적으로 빠른 배포를 스핀합니다. 판매자 계정을 사용하면 제품과 관련된 여러 자산 및 카테고리와 같은 적절한 데이터가 필요합니다. 판매자 계정을 사용하려면 아래 수동 설정 단계를 따르십시오.
수동 설정에는 REPO를 로컬 환경으로 복제하고 제공된 샘플 데이터를 CHEC 계정에 시드하고 NetLify에 배포하는 것이 포함됩니다.
1 단계. 리포를 복제하고 종속성을 설치하십시오
# Clone the repository locally, optionally rename the repo, change into the directory
git clone https://github.com/chec/commercejs-nextjs-demo-store.git chec-store
# Change into the directory and install dependencies
cd chec-store && yarn2 단계. 환경 변수를 설정하십시오
프로젝트의 루트에있는 샘플 .env.example dotenv 파일을 교체하여 chec public_key 와 secret_key 저장하십시오.
# Copy from source file to destination file .env
cp .env.example .env CHEC 대시 보드 설정에서 아래에서 API 키에 액세스 한 다음 개발 탭으로 이동하여 공개 키 및 비밀 키를 복사 할 수 있습니다. 제공된 NEXT_PUBLIC_CHEC_PUBLIC_KEY 자신의 것으로 바꾸고 .env 파일에서 CHEC_SECRET_KEY 채우십시오. 시드 스크립트가 샘플 데이터를 Chec 계정에 시드 /seeds 수있는 적절한 권한을 갖기 위해서는 비밀 키가 필요합니다. 데이터가 시드되면 비밀 키를 제거하십시오.
# .env
# Fill in your public key and secret key
NEXT_PUBLIC_CHEC_PUBLIC_KEY =
CHEC_API_URL = https://api.chec.io
# Secret key is used with chec/seeder to access your Chec account to seed it with sample data
CHEC_SECRET_KEY =
NODE_ENV =이 파일은 소스 컨트롤에 최선을 다하지 않으며 파일 브라우저에 숨겨져 있습니다.
3 단계. CHEC 스토어에 전원을 공급하고 개발 환경을 시작하는 데 필요한 데이터를 시드하십시오 (초기 설정에 필요한).
# Seed data in /seeds into your Chec account
yarn seed
# Run your development environment on http://localhost:3000
yarn dev이제 http : // localhost : 3000으로 가십시오. 개발을 시작한 후 사이트를 샘플 데이터로 채워야합니다!
샘플 제품 또는 카테고리를 교체하는 경우 'Public/Images/Collection에서 자신의 카테고리 이미지를 사용자 정의 할 수 있습니다. 아래 데이터 사용자 정의에 대한 자세한 정보를 참조하십시오.
5 단계. 필요한 변경 사항을 작성하고 코드를 GitHub의 저장소 또는 플랫폼 선택으로 푸시하십시오.
6 단계. 사이트를 배포하십시오
Netlify 계정에 가입하고 로그인하십시오. GIT 버튼에서 새 사이트를 클릭하고 액세스하여 Repo를 선택하십시오. 빌드 설정은 템플릿의 netlify.toml 에서 자동으로 채워집니다. 환경 변수를 입력하려면 Show advanced를 클릭 한 다음 새로운 변수를 클릭하고 NEXT_PUBLIC_CHEC_PUBLIC_KEY 와 같은 키 입력을 채우고 공개 키와 함께 값 입력을 채우십시오. 설정중인 Chec 대시 보드에서 API 키에 액세스 한 다음 개발자 탭으로 이동하여 공개 키를 복사 할 수 있습니다.
이제 "배포 사이트"를 클릭하여 라이브 사이트를보십시오!
이 명령은이 예제 프로젝트를 GitHub에서 다운로드하여 컴퓨터에서 초기화합니다. 다운로드 된 코드를 자유롭게 편집하고 나중에 Commerce.js와 함께 플레이 할 수 있습니다.
1 단계. CHEC CLI를 설치하십시오
npm install -g @chec/cli
# or
yarn add -g @chec/cli2 단계. 데모 스토어를 만듭니다
chec demo-store
목록에서 데모 스토어를 선택하라는 메시지가 표시되면 "Commercejs-Nextjs-Demo-Store"를 선택하십시오. 이 명령은 또한 일부 샘플 데이터를 CHEC 계정에 시드합니다. 자세한 내용은 CHEC CLI 문서를 참조하십시오.
이 프로젝트는 사용자 지정 디자인 및 사용자 흐름을 보여주는 완전한 매장이기 때문에 Chec 대시 보드에서 데이터를 사용자 정의 할 때 발생하는 특정 경고가 있습니다. GOTCHA 중 하나는 UI의 카테고리 데이터와 관련이 있습니다. 범주 기능 이미지는 Chec API에 메타 데이터로 추가됩니다. 새로 추가하거나 시드 샘플 카테고리 데이터를 편집하면 public/images/collection 에서 이미지 자산을 교체하여 범주 기능 이미지를 사용자 정의 할 수 있습니다. 파일 이름은 동일하게 유지되어야합니다. 파일 이름을 변경하거나 새 카테고리를 추가 할 계획이라면 새로운 메타 데이터를 추가해야합니다. 앱은 구성 요소를 빌드하고 렌더링하기 위해 아래 인벤토리 설정을 기대할 것이므로 백엔드에서 인벤토리를 사용자 정의하려면 다음을 확인하십시오.
public/images/collection 의 이미지를 자신의 이미지로 대체이 데모 스토어는 Commerce.js가 제공하고 Chec 대시 보드에서 구동되는 다양한 기능을 사용합니다.
쇼핑 카트는 Commerce.js 카트 API를 사용합니다. 카트는 최대 30 일 동안 지속되며 Commerce.js는 방문자를위한 카트를 자동으로 기억합니다.
Commerce.js는 체크 아웃 구현을 간소화하는 많은 도구를 제공합니다. 이 데모 스토어의 결제는 다음을 사용합니다.
Commerce.js는 서버 사이드 코드없이 고객 로그인을 지원하기위한 내장 기능을 제공합니다. 이 데모 스토어에는 기존 고객 로그인 페이지가 있으며 이전 주문에 대한 세부 사항을 제공합니다. 고객 정보는 또한 알려진 고객 세부 정보로 결제를 사전에 인포하는 데 사용됩니다.
이 데모 스토어는 상자 밖에서 Chec "Test Gateway"로 구성되어 있으며, 이는 상점을 테스트하는 동안 편리한 지불 옵션을 제공합니다. 또한 Stripe가 CHEC 대시 보드에 구성된 경우 Stripe Elements 지원이 포함됩니다.
Commerce.js <> 스트라이프 통합 문서
제공된 지침에 따라 CHEC 대시 보드에서 스트라이프를 활성화해야합니다. 스트라이프에 샌드 박스 키를 추가하고 샌드 박스 CHEC Public API 키를 사용하여 스트라이프로 테스트 할 수 있습니다. CHEC Public API 키와 Stripe "Publishable"키는 모두 .env 파일에 구성됩니다. "수동 설정 및 NetLify 배포"의 2 단계를 참조하십시오.
이 프로젝트를 포크하여 원하는대로 데모를 사용자 정의하고 확장하십시오. 다음은 할 수있는 일에 대한 몇 가지 아이디어와 전자 상거래를 취할 수있는 방향입니다.
