상점 설정

NVM(노드 버전 관리자)을 설치합니다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

Node.js 및 NPM을 설치합니다. 자세한 내용은 Node.js를 참조하십시오.

nvm install 22

npm install -g npm

설치를 확인합니다.

npm -v

GitHub 계정에 로그인합니다.

aem-boilerplate-commerce GitHub 저장소로 이동합니다.

이 템플릿 사용 ​을 선택한 다음 드롭다운 메뉴에서 새 저장소 만들기 ​를 선택합니다.

{width="700" modal="regular"}

저장소 구성 페이지가 표시됩니다.

{width="700" modal="regular"}

다음 세부 정보를 사용하여 구성 양식을 작성합니다.

• 저장소 템플릿—hlxsites/aem-boilerplate-commerce(기본값).
• 소유자—조직 또는 계정입니다(필수).
• 저장소 이름—새 저장소의 고유한 이름입니다(필수).
• 설명—저장소에 대한 간략한 설명입니다(선택 사항).
• 공개 또는 비공개—Adobe에서는 공개(기본값)를 권장합니다.

저장소 만들기 ​를 선택합니다.

몇 분 후에 새 저장소가 열립니다.

GitHub 사용자 인터페이스에 표시되는 가져오기 요청 알림을 무시합니다.

로컬 컴퓨터에 저장소를 복제합니다.

git clone https://github.com/{ORG}/{SITE}.git

저장소를 복제할 때 오류가 발생하면 GitHub 설명서의 복제 오류 문제 해결을 참조하십시오.

터미널 또는 IDE에서 저장소를 엽니다.

default-fstab.yaml 파일을 fstab.yaml에 복사하여 구성 파일을 만듭니다.

cp default-fstab.yaml fstab.yaml

storefront 구성 파일에서 마운트 지점을 업데이트하여 콘텐츠 URL을 가리킵니다.

1. fstab.yaml 구성 파일을 엽니다.

   code language-yaml
   mountpoints: /: url: https://content.da.live/{org}/{site}/ type: markup folders: /products/: /products/default

2. {ORG} 및 {SITE} 문자열을 상용구 코드용으로 만든 GitHub 저장소의 값으로 바꿉니다.

   예를 들어 업데이트된 코드는 다음과 같아야 합니다.

   code language-yaml
   mountpoints: /: url: https://content.da.live/owner-name/aco-storefront/ type: markup

3. 파일을 저장합니다.

새 디렉터리 tools/sidekick을(를) 만듭니다.

mkdir tools/sidekick

루트 디렉터리의 demo-sidekick.json 파일을 tools/sidekick 디렉터리로 복사하고 이름을 config.json(으)로 바꾸십시오.

cp demo-sidekick.json tools/sidekick/config.json

사이트에 대한 Sidekick 구성을 사용자 지정합니다.

tools/sidekick/ 디렉터리에서 config.json 파일을 편집합니다.

{
  "project": "My Project",
  "editUrlLabel": "Document Authoring",
  "editUrlPattern": "https://da.live/edit#/{{org}}/{{site}}{{pathname}}"
}

url 키 값을 GitHub 저장소의 값으로 업데이트합니다.

• {{ORG}} 문자열을 저장소의 조직 또는 사용자 이름으로 바꾸십시오.

• {{SITE}} 문자열을 저장소 이름으로 바꿉니다.

• pathname 변수가 시스템에 의해 채워집니다.

{
  "project": "My Project",
  "editUrlLabel": "Document Authoring",
  "editUrlPattern": "https://da.live/edit#/aco-storefront/early-adopter{{pathname}}"
}

파일을 저장합니다.

편집기 또는 IDE에서 업데이트한 파일을 커밋하고 저장합니다.

git add .

업데이트된 두 파일을 커밋하고 있는지 확인합니다.

git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
 (use "git restore --staged <file>..." to unstage)
     new file:   fstab1.yaml
     modified:   tools/sidekick/config.json

변경 사항을 커밋합니다.

git commit -m "Update storefront boilerplate for Adobe Commerce Optimizer"

변경 사항을 적용합니다.

git push

AEM 코드 동기화 앱 구성 페이지를 엽니다.

구성 ​을 선택한 다음 만든 리포지토리가 포함된 조직 또는 계정 ​을(를) 사용하여 인증합니다.

양식에서 저장소만 선택 ​을 선택한 다음 만든 저장소를 선택합니다.

설치 ​를 선택하여 저장소에 AEM 코드 동기화 앱을 추가합니다.

앱이 성공적으로 설치되었다는 메시지가 표시됩니다.

사이트 작성자 도구 열기

저장소 구성:

• Use Existing Repository ​을(를) 선택합니다.
• Storefront 표준 프로젝트에 대한 Organization/Username ​을(를) 입력하십시오.
• Repository Name 입력.

사이트 만들기 ​를 선택하여 콘텐츠를 가져오고 미리 보고 문서 작성 환경에 게시합니다.

{width="700" modal="regular"}

사이트가 만들어지면 Edit content 및 View Site 섹션의 링크를 사용하여 데모 스토어프런트를 탐색할 수 있습니다.

콘텐츠 및 사이트에 대한 기본 링크는 다음 형식을 따릅니다.

• 루트 콘텐츠 폴더— https://da.live/#/{ORG}/{SITE}
• 사이트 미리 보기— https://main--{SITE}--{ORG}.aem.page/
• 사이트 프로덕션:— https:/main--{SITE}--{ORG}.ae.live/

콘텐츠를 보려면 루트 콘텐츠 폴더 링크를 여십시오.

{width="700" modal="regular"}

https://main--{SITE}--{ORG}.aem.live(으)로 이동하여 사이트를 봅니다.

{ORG} 및 {SITE}을(를) 상용구 저장소의 조직 및 이름으로 바꾸십시오.

{width="700" modal="regular"}

페이지가 404를 반환하는 경우 다음을 확인하십시오.

• fstab.yaml 파일의 탑재 지점이 올바른 콘텐츠 URL을 가리킵니다: https://content.da.live/{ORG}/{SITE}/
• GitHub 저장소에 연결하도록 코드 동기화 앱을 구성했습니다.
• 데모 콘텐츠 복제 도구를 사용하여 문서 작성 환경에 콘텐츠를 게시했습니다.

Commerce Optimizer 기본 인스턴스에서 제공하는 샘플 카탈로그 데이터를 봅니다.

1. storefront 헤더에서 돋보기를 클릭하여 tires을(를) 검색합니다.

   {width="675" modal="regular"}

2. 검색 결과 페이지를 보려면 Enter ​를 누르십시오.

   {width="675" modal="regular"}

   검색 결과 페이지 구성 요소는 search 콘텐츠 문서에 의해 정의됩니다. 검색 결과 데이터는 config.json의 Storefront 구성을 기반으로 채워집니다.

3. 페이지에서 타이어 제품을 선택하여 제품 세부 사항 페이지를 봅니다.

   {width="675" modal="regular"}

   제품 세부 정보 페이지 구성 요소는 default 폴더의 product 콘텐츠 문서에 의해 정의됩니다.

IDE에서 주 분기를 체크아웃하고 원격 분기의 마지막 커밋으로 재설정합니다.

git checkout main
git reset --hard origin/main

필요한 종속성을 설치합니다.

npm install

로컬 개발 서버를 시작합니다.

npm start

http://localhost:3000의 브라우저에 보일러판 상점 첫 페이지가 표시됩니다.

{width="700" modal="regular"}

IDE에서 Adobe에서 제공한 Adobe Commerce Optimizer 인스턴스에 연결하도록 Storefront 구성을 업데이트합니다.

1. config.json 파일을 엽니다.

2. Adobe Commerce Optimizer 인스턴스에 대한 끝점을 사용하여 다음 값을 업데이트합니다.

   • commerce-endpoint-기존 값을 끝점 URL로 바꿉니다.

     code language-json
     "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/{tenantId}/graphql"

   • ac-environment-id - 기존 값을 끝점 URL의 테넌트 ID로 바꿉니다.

     code language-json
     "ac-environment-id": "{tenantId}"

3. 파일을 저장합니다.

   로컬 미리보기가 제대로 작동하는 경우 업데이트가 로컬 상점 앞에 적용됩니다.

사이트를 확인하여 구성 변경 결과를 확인합니다.

1. 브라우저에서 http://localhost:3000(으)로 이동하여 페이지를 새로 고칩니다.

2. storefront 헤더에서 돋보기를 클릭하여 tires을(를) 검색합니다.

   {width="675" modal="regular"}

3. 검색 결과 페이지를 표시하려면 Enter ​를 누르십시오.

   {width="675" modal="regular"}

   storefront 구성 파일의 헤더 값은 기본 인스턴스를 기반으로 하므로 검색은 결과를 반환하지 않습니다. 이제 구성이 제공된 Adobe Commerce Optimizer 인스턴스를 가리키므로 해당 값이 잘못되었습니다.