demo store 다운로드 - demo store 소스 코드 다운로드

demo store

기타 카테고리

1.0.0

다운로드

커머스 레이어 데모 스토어

이 데모 스토어는 Commerce Layer에서 제공하는 완전히 정적 전자 상거래 솔루션(SSR 기능 포함)입니다. 스토어는 모든 기능을 갖추고 완벽하게 운영되며 제3자 서비스가 필요하지 않습니다. 다양한 수준의 사용자 정의를 통해 쉽게 맞춤화할 수 있습니다. 자세히 알아보려면 계속 읽어보세요.

Demo Store 프로젝트는 두 개의 저장소로 구성되며, 이는 GitHub 템플릿입니다.

커머스 레이어란 무엇입니까?

Commerce Layer는 모든 웹사이트, 모바일 앱, 챗봇, 웨어러블, 음성 또는 IoT 장치에 글로벌 쇼핑 기능을 쉽게 추가할 수 있는 다중 시장 상거래 API 및 주문 관리 시스템입니다. 이미 익히고 즐겨 사용하는 최고의 도구로 스택을 구성하십시오. 초고속의 엔터프라이즈급 보안 API를 통해 어디서나 모든 경험을 쇼핑할 수 있습니다.

특징

우리는 포괄적인 전자 상거래 웹사이트 경험(CMS, 검색, PIM 등)을 만드는 데 일반적으로 사용되는 모든 타사 서비스를 제거하는 데모 스토어를 구축하기로 결정했습니다.

콘텐츠와 관련된 모든 내용은 JSON 파일로 저장됩니다. 자신만의 데모 스토어를 구축하려면 수동으로 또는 스크립트를 통해 이러한 파일을 생성해야 합니다.

데모 스토어에는 다음이 포함되어 있습니다:

퓨즈.js로 구동되는 패싯 검색 기능이 내장된 검색 엔진
분류 및 분류를 포함한 전체 제품 카탈로그 관리
단일 제품 변형 관리
국제 판매를 더 쉽게 해주는 다국어 기능
Commerce Layer API에서 즉시 제공되는 광범위한 기능 세트(다중 통화 가격 목록, 여러 재고 위치 및 이행 전략을 지원하는 재고 모델, 시장별 결제 게이트웨이, 배송 옵션 및 운송업체 계정 등)

Commerce Layer와의 통합은 특히 다음과 같은 오픈 소스 개발자 도구 중 일부를 활용하여 달성됩니다.

JS 인증 라이브러리
자바스크립트 SDK
반응 구성 요소
호스팅 카트
호스팅된 결제

작동 원리

데모 스토어 프로젝트는 추가해야 하는 사용자 정의 양에 따라 자신만의 스토어를 구축하는 데 활용할 수 있는 두 개의 저장소로 구성됩니다.

demo-store
이는 아래에 언급된 demo-store-core git 하위 모듈로 사용하는 GitHub 템플릿 입니다. Commerce Layer Demo Store의 기능과 모양과 느낌에 만족한다면 이 경로를 따르는 것이 좋습니다. 전체 소스 코드에 신경 쓸 필요가 없으며 데이터와 콘텐츠에만 집중할 수 있습니다. 게다가 다음을 실행하면 거의 위험 없이 무료 업데이트를 받을 수 있습니다.
```
git submodule update --remote
npm install
```
demo-store-core
이 저장소에는 소스 코드가 포함되어 있습니다. 스토어(동작, UI, UX 등)를 완전히 사용자 정의해야 하는 경우 이 저장소를 포크하고 직접 생성하기만 하면 됩니다. 기여하는 방법이기도 합니다.
️ 이 경로를 따르고 원본 소스 코드에서 너무 많이 벗어나기 시작하면 향후 모든 업데이트가 손실되거나 복제할 수 없게 될 위험이 있습니다.

시작하기

Commerce Layer에 대한 경험이 없다면 계정을 만들고(무료입니다!) 온보딩 튜토리얼을 따라 시작할 수 있습니다.

중요한

데모 스토어를 설정하려면 최소한 몇 가지 제품과 하나의 시장을 갖춘 적절하게 구성된 조직이 필요합니다.

처음부터 시작하려는 경우 새 조직을 생성하고 다음 명령을 사용하여 Commerce Layer의 데모 스토어와 같은 프로젝트를 구성할 수 있습니다.

조직 설정

조직이 생성되면 판매 채널 과 통합이라는 두 개의 API 클라이언트를 생성해야 합니다.

아직 설치하지 않았다면 Commerce Layer CLI와 해당 플러그인 두 개(시더 플러그인과 가져오기 플러그인)를 설치하세요.

npm install -g @commercelayer/cli

commercelayer plugins:install seeder
commercelayer plugins:install imports

이제 CLI에서 통합 API 클라이언트에 로그인할 수 있습니다.

commercelayer applications:login 
  --clientId Oy5F2TbPYhOZsxy1tQd9ZVZ... 
  --clientSecret 1ZHNJUgn_1lh1mel06gGDqa... 
  --organization my-awesome-organization 
  --alias cli-admin

매장 구축

조직이 설정되면 매장을 구축하려면 몇 가지 간단한 단계를 따라야 합니다. 시작해 보세요!

1. 새 저장소 생성

어떤 경로를 선택하든 먼저 스토어에 대한 새 저장소를 생성해야 합니다.

demo-store 템플릿을 유지하기로 결정한 경우 GitHub의 저장소 홈페이지에서 "이 템플릿 사용" 을 클릭하고 다음을 실행하면 됩니다.

git clone < your-repository-url > my-new-project
cd my-new-project
git submodule update --init
npm install

cp ./demo-store-core/packages/website/.env.sample.submodule .env.local

cp -r ./demo-store-core/packages/website/data/json ./data/json

demo-store-core 저장소를 포크하기로 결정한 경우 대신 다음을 실행할 수 있습니다.

git clone < your-repository-url > my-new-project
cd my-new-project
npm install

cp ./packages/website/.env.sample ./packages/website/.env.local

2. 환경 변수 설정

.env.local 편집하고 누락된 정보를 모두 입력합니다.

 # this is the 'sales channel' client id
NEXT_PUBLIC_CL_CLIENT_ID =er34TWFcd24RFI8KJ52Ws6q...

3. 데이터 시드

이 단계는 선택 사항입니다. Commerce Layer 계정에 이미 적절하게 구성된 조직이 있는 경우 이를 건너뛸 수 있습니다.

다음 스크립트는 Commerce Layer(데모 스토어에 사용하는 것)를 사용하여 다중 시장 전자 상거래를 구축하는 데 필요한 모든 리소스로 조직을 채웁니다.

npm run seeder:seed -ws --if-present

위 명령이 오류 없이 실행되면 4단계로 건너뛰십시오. 그렇지 않은 경우에도 다음을 실행하여 CLI를 사용하여 조직에 샘플 데이터를 시드할 수 있습니다.

commercelayer seeder:seed -b custom -n demo_store_full -u ./demo-store-core/packages/setup/

4. 판매할 국가를 선택하세요.

json/countries.json 파일에는 전자상거래에 사용할 수 있는 국가 목록이 포함되어 있습니다. 원하는 편집기로 변경할 수 있습니다. "market": xxx 의 모든 결과를 조직의 관련 시장으로 바꾸십시오. Commerce Layer 관리 대시보드에서 또는 다음 명령을 실행하여 시장 목록을 가져올 수 있습니다.

npm run markets -ws --if-present

5. 실제 작동 모습 보기

npm run dev

# http://localhost:3000/

업데이트 관리

언제든지 main 브랜치에서 demo-store-core 의 최신 코드를 찾을 수 있습니다.

데모 스토어를 최신 변경 사항으로 업데이트하려면 다음을 실행하면 됩니다.

git submodule update --remote
npm install

때로는 새로운 주요 버전에 주요 변경 사항이 포함되는 경우가 있습니다. 이 경우 최신 버전으로 업데이트하면 데모 스토어의 작동이 중지될 수 있으며 릴리스 노트에 따라 모든 문제를 수동으로 해결해야 합니다.

원하는 경우 새 버전이 출시되자마자 GitHub 알림을 받을 수 있습니다.

맞춤화

데모 스토어 템플릿을 사용하면 콘텐츠 데이터, 로케일 및 구성 파일이라는 세 가지 주요 요소를 사용자 정의할 수 있습니다.

️ 우리는 새로운 기능을 추가하고 기존 기능을 최적화하기 위해 데모 스토어를 지속적으로 개선할 것입니다. 최신 릴리스로 업데이트하면 빌드가 실패할 수 있습니다. 사용자 정의 파일을 업데이트하여 문제를 해결하는 방법을 알아보려면 릴리스 노트를 살펴보세요.

JSON 데이터 파일

앞서 언급했듯이 데모 스토어는 JSON 파일로 저장된 데이터 세트를 중심으로 구축되어 타사 서비스와 분리됩니다. 스토어를 구축하려면 이러한 파일을 생성하고 관리해야 합니다.

JSON 파일은 data/json/ 에 있지만 NEXT_PUBLIC_JSON_DATA_FOLDER 환경 변수를 변경하여 다른 위치를 선택할 수 있습니다.

유형 정의 파일은 packages/types/src/json/ 에 있습니다. 우리는 스키마 유효성 검사를 위해 zod를 사용하고 있습니다. 어떤 구조를 따라야 하는지 이해하려면 이 파일을 살펴보세요.

모든 변경이 완료되면 다음을 실행하여 모든 것이 올바른지 확인할 수 있습니다.

 npm run test:data

로케일 데이터 파일

우리의 데모 스토어는 다국어 웹사이트입니다. 이전 단계에서 데이터를 작성할 때 일부 필드가 현지화되었음을 발견했을 것입니다. 새로운 언어를 추가하거나 기존 번역을 변경할 수 있습니다.

로케일 JSON 파일은 data/locales/ 에 있지만 환경 변수 NEXT_PUBLIC_LOCALES_DATA_FOLDER 변경하여 다른 위치를 선택할 수 있습니다.

로케일 사용자 정의를 시작하려면 다음을 수행하십시오.

cp -r ./demo-store-core/packages/website/data/locales ./data/locales

 # .env.local
NEXT_PUBLIC_LOCALES_DATA_FOLDER =../../../data/locales/

구성 파일

구성 파일은 config/ 에 있지만 NEXT_PUBLIC_CONFIG_FOLDER 환경 변수를 변경하여 다른 위치를 선택할 수 있습니다.

관리할 수 있는 구성 파일은 세 가지입니다.

general.config.js
이 파일에는 일반 구성이 포함되어 있습니다.
facets.config.js
이것은 패싯 구성 파일입니다. 필터 패널에 표시되는 순서, 모양, 값 정렬 규칙을 선택할 수 있습니다.
variants.config.js
이것은 변형 구성 파일입니다. 상품 상세 페이지에 표시되는 순서와 모양을 선택할 수 있습니다.

구성 사용자 정의를 시작하려면 다음을 수행하십시오.

cp -r ./demo-store-core/packages/website/config ./config

 # .env.local
NEXT_PUBLIC_CONFIG_FOLDER =../../../config/

추가 환경 변수

상점을 사용자 정의하는 데 사용할 수 있는 몇 가지 환경 변수가 있습니다. 전체 목록과 설명을 보려면 extra-env.d.ts 파일을 살펴보세요.

배포

원하는 곳에 데모 스토어를 배포할 수 있습니다. 다음을 수행하면 됩니다.

필요에 따라 빌드를 실행하는 데 사용할 시스템의 모든 환경 변수를 설정합니다.
정적 사이트 생성을 사용할지 아니면 서버 측 렌더링을 사용할지 결정하세요.

데모 스토어는 무엇보다도 SSG로 설계되었지만 즉시 SSR로 전환할 수 있습니다. 우리는 이를 배포하는 몇 가지 방법(예: GitHub Workflow, Netlify, Vercel 등 사용)을 테스트했으며 여기에서 자세한 내용을 확인할 수 있습니다. 다르게 수행했거나 다른 서비스를 사용했으며 해당 단계를 커뮤니티와 공유하고 싶다면 토론에 참여하세요. 미리 감사드립니다!

정적 사이트 생성

데모 스토어를 구축하고 배포하려면:

그에 따라 다음 환경 변수를 설정하십시오.
```
 NEXT_PUBLIC_DATA_FETCHING =ssg
```
npm run build 실행하여 애플리케이션의 정적으로 최적화된 프로덕션 빌드를 생성하세요.
demo-store-core/packages/website/out 폴더를 원하는 정적 호스팅에 복사하세요.

서버 측 렌더링

데모 스토어는 Node.js를 지원하는 모든 호스팅 제공업체에 배포될 수 있습니다. 그렇게 하려면:

그에 따라 다음 환경 변수를 설정하십시오.
```
 NEXT_PUBLIC_DATA_FETCHING =ssr
```
npm run build 실행하여 애플리케이션의 최적화된 프로덕션 빌드를 생성하세요.
npm start 실행하여 프로덕션 모드에서 Node.js 서버를 시작하세요.

도움이 필요하신가요?

Commerce Layer의 Discord 커뮤니티에 가입하세요.
새 Q&A 토론 열기
Bluesky, X(이전의 Twitter) 또는 LinkedIn에서 우리에게 메시지를 보내주세요.
버그가 있나요? 이 저장소에 이슈를 생성하세요.

문제 해결

Q. NEXT_PUBLIC_JSON_DATA_FOLDER , NEXT_PUBLIC_LOCALE_DATA_FOLDER 또는 NEXT_PUBLIC_CONFIG_FOLDER 변경했는데도 웹사이트에서 여전히 이전 파일을 참조하고 있습니다.
A. 이러한 환경 변수는 Webpack에서 alias 으로 사용됩니다. Webpack 5부터 더 빠른 빌드를 위한 캐싱이 도입되었습니다. 이러한 환경 변수를 변경해도 Webpack 캐시가 무효화되지는 않습니다. .next 폴더를 수동으로 제거하거나 다음을 실행하여 제거해야 합니다.
```
 # update the path if needed
rm -rf demo-store-core/packages/website/.next/
```