상점 설정

Storefront 프로젝트 만들기 - Site Creator 도구를 사용하여 표준 코드, 샘플 콘텐츠 및 구성 파일로 새 Storefront 프로젝트를 만듭니다.

Storefront 구성을 사용자 지정-저장소의 config.json 파일을 업데이트하여 Adobe Commerce Optimizer 인스턴스에 연결합니다.

설정 확인(10분)

• 상점가 사이트 미리 보기
• 제품 세부 사항 페이지 및 검색 기능 테스트

사이트 작성자 도구 열기

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

새 사이트 만들기(코드 및 콘텐츠) ​를 선택합니다.

사이트 구성을 완료합니다.

• GitHub 조직/사용자 이름: GitHub 사용자 이름 또는 조직 이름을 입력하십시오.
• 사이트 이름: 상점 이름을 설명하는 이름을 선택하세요.
• Commerce GraphQL 끝점(선택 사항): Adobe Commerce Optimizer 인스턴스에 대한 GraphQL 끝점을 입력합니다.

사이트 만들기 ​를 클릭하여 Storefront 상용구 코드를 사용하여 GitHub 리포지토리를 만듭니다.

저장소가 생성되면 사이트 생성자가 업데이트하고 코드 동기화 앱을 설치하라는 메시지를 표시합니다.

새 탭에서 코드 동기화 설치 관리자를 열려면 Install AEM Code Sync App ​을(를) 클릭하십시오.

코드 동기화 앱을 구성합니다.

• GitHub 조직을 선택한 다음 Configure ​을(를) 클릭합니다.
• 코드 동기화 인터페이스에서 Only select repositories ​을(를) 클릭합니다.
• Select repositories 메뉴를 클릭한 다음 만든 상점 코드 저장소를 선택합니다.
• 저장소를 등록하려면 Save ​을(를) 클릭하십시오.

사이트 작성자가 열려 있는 브라우저 창으로 돌아가서 사이트 만들기 ​를 클릭합니다.

사이트 작성자는 Storefront Boilerplate 콘텐츠를 문서 작성 환경에 복사합니다. 이 프로세스는 1~2분 정도 소요됩니다.

사이트 세부 정보 섹션에서 상점 프로젝트 링크를 검토하십시오.

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

이러한 링크를 사용하여 상점 코드, 콘텐츠 및 구성을 관리하십시오.

나중에 참조할 수 있도록 다음 링크를 복사하고 저장하십시오. **Copy을(를) 클릭하십시오.

이전에 저장한 링크를 사용하여 구성 관리자를 엽니다.

https://da.live/sheet#/<username or org>/<repo name>/config.json

구성에서 cs(카탈로그 서비스) 섹션을 찾습니다.

자리 표시자 값을 인스턴스에 대한 값으로 바꿉니다. 필수 구성 요소를 참조하십시오.

"cs": {
   "AC-View-ID": "{catalogViewId}",
   "AC-Environment-ID": "{tenantId}",
   "AC-Source-Locale": "en_US"
}

구성 파일을 저장합니다.

라이브 미리보기 URL로 이동합니다.

https://main--{SITE}--{ORG}.aem.live

{ORG} 및 {SITE}을(를) GitHub 조직 및 사이트 이름으로 바꾸십시오.

성공 기준: 표준 컨텐츠가 포함된 상점 홈 페이지가 표시됩니다.

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

샘플 제품 페이지로 이동합니다.
https://main--{SITE}--{ORG}.aem.live/products/placeholder/{sku}

샘플 데이터의 SKU를 사용합니다. 예:
https://main--{SITE}--{ORG}.aem.live/products/placeholder/aur-flu-tir-std-2017

기본 상점의 경우 경로에서 placeholder 값을 사용하여 제품을 볼 수 있습니다. Storefront 맞춤화를 시작하면 Storefront 코드를 맞춤화하여 카탈로그에 정의된 제품 경로를 기반으로 제품 세부 사항 페이지에 대한 경로를 설정할 수 있습니다.

성공 기준: 페이지가 표시되어야 합니다.

• 제품 이름, 설명 및 가격
• 제품 이미지
• 장바구니에 추가 기능
• Adobe Commerce Optimizer 인스턴스에서 검색된 데이터

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

상점 첫 페이지의 머리글에서 돋보기 아이콘을 클릭합니다.

검색 문자열 tires을(를) 입력하고 Enter ​를 누릅니다.

성공 기준: 다음이 표시됩니다.

• 타이어 제품이 포함된 검색 결과 페이지
• 사이드바의 필터링 옵션
• 이미지 및 가격 정보가 포함된 제품 목록

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

타이어 제품을 클릭하면 상세 페이지가 표시됩니다.

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

Sidekick 설치 - 웹 사이트에서 직접 콘텐츠를 편집하고 미리 보고 게시하기 위한 브라우저 확장 기능

로컬 개발 환경 설정 - 로컬 환경을 만들어 상점 코드 및 콘텐츠를 사용자 지정합니다.