상점 설정
이 안내서에서는 Adobe Edge Delivery Services를 사용하여 Adobe Commerce Optimizer 인스턴스에 대한 상점 전면을 설정하는 과정을 안내합니다. 상점에는 상용 코드, 샘플 콘텐츠 및 제품 세부 사항 페이지와 제품 검색(검색 및 필터링)에 대한 지원이 포함되어 있습니다.
완료 예상 시간: 30~45분
사전 요구 사항
- 저장소를 만들 수 있고 로컬 개발용으로 구성된 GitHub 계정(github.com)
- 샘플 데이터와 구성된 카탈로그 보기 및 정책이 있는 Adobe Commerce Optimizer인스턴스
- 설치 지침은 샘플 데이터 추가를 참조하십시오.
필수 인스턴스 데이터
시작하기 전에 Adobe Commerce Optimizer 인스턴스에서 다음 정보를 수집합니다.
- 테넌트 ID(인스턴스 ID라고도 함)
- 인스턴스 세부 정보 페이지에서 사용 가능
- 인스턴스의 GraphQL 끝점
- 인스턴스 세부 정보 페이지에서 사용 가능
- 글로벌 카탈로그 보기의 카탈로그 보기 ID
- 카탈로그 세부 정보 페이지에서 사용 가능
- 카탈로그 보기용 Source 로케일
- 샘플 데이터의 기본값은
en_US
입니다.
- 샘플 데이터의 기본값은
단계 설정
-
Storefront 프로젝트 만들기 - Site Creator 도구를 사용하여 표준 코드, 샘플 콘텐츠 및 구성 파일로 새 Storefront 프로젝트를 만듭니다.
-
Storefront 구성을 사용자 지정-저장소의
config.json
파일을 업데이트하여 Adobe Commerce Optimizer 인스턴스에 연결합니다. -
설정 확인(10분)
- 상점가 사이트 미리 보기
- 제품 세부 사항 페이지 및 검색 기능 테스트
Storefront 프로젝트 만들기
사이트 작성자 도구는 다음 구성 요소로 전체 Storefront 프로젝트를 만듭니다.
- 사이트: 표준 서식 컨텐츠가 포함된 Storefront 랜딩 페이지
- 코드: 표준 서식 소스 파일이 있는 리포지토리
- 콘텐츠: 사이트 콘텐츠 파일이 있는 문서 작성 환경
- Commerce 구성: 인스턴스별 구성에 대한
config.json
파일
1단계: 프로젝트 생성
-
-
새 사이트 만들기(코드 및 콘텐츠) 를 선택합니다.
-
사이트 구성을 완료합니다.
- GitHub 조직/사용자 이름: GitHub 사용자 이름 또는 조직 이름을 입력하십시오.
- 사이트 이름: 상점 이름을 설명하는 이름을 선택하세요.
- Commerce GraphQL 끝점(선택 사항): Adobe Commerce Optimizer 인스턴스에 대한 GraphQL 끝점을 입력합니다.
-
사이트 만들기 를 클릭하여 Storefront 상용구 코드를 사용하여 GitHub 리포지토리를 만듭니다.
저장소가 생성되면 사이트 생성자가 업데이트하고 코드 동기화 앱을 설치하라는 메시지를 표시합니다.
2단계: 코드 동기화 앱 설치
-
새 탭에서 코드 동기화 설치 관리자를 열려면 Install AEM Code Sync App 을(를) 클릭하십시오.
-
코드 동기화 앱을 구성합니다.
- GitHub 조직을 선택한 다음 Configure 을(를) 클릭합니다.
- 코드 동기화 인터페이스에서 Only select repositories 을(를) 클릭합니다.
- Select repositories 메뉴를 클릭한 다음 만든 상점 코드 저장소를 선택합니다.
- 저장소를 등록하려면 Save 을(를) 클릭하십시오.
-
사이트 작성자가 열려 있는 브라우저 창으로 돌아가서 사이트 만들기 를 클릭합니다.
사이트 작성자는 Storefront Boilerplate 콘텐츠를 문서 작성 환경에 복사합니다. 이 프로세스는 1~2분 정도 소요됩니다.
3단계: 프로젝트 링크 저장
-
사이트 세부 정보 섹션에서 상점 프로젝트 링크를 검토하십시오.
이러한 링크를 사용하여 상점 코드, 콘텐츠 및 구성을 관리하십시오.
-
나중에 참조할 수 있도록 다음 링크를 복사하고 저장하십시오. **Copy을(를) 클릭하십시오.
상점 구성
Adobe Commerce Optimizer 인스턴스에 연결하려면 Storefront 구성을 업데이트하십시오.
-
이전에 저장한 링크를 사용하여 구성 관리자를 엽니다.
https://da.live/sheet#/<username or org>/<repo name>/config.json
-
구성에서
cs
(카탈로그 서비스) 섹션을 찾습니다. -
자리 표시자 값을 인스턴스에 대한 값으로 바꿉니다. 필수 구성 요소를 참조하십시오.
code language-json "cs": { "AC-View-ID": "{catalogViewId}", "AC-Environment-ID": "{tenantId}", "AC-Source-Locale": "en_US" }
-
구성 파일을 저장합니다.
설정 확인
Adobe Commerce Optimizer 인스턴스에 제대로 연결되어 있는지 확인하려면 Storefront를 테스트하십시오.
1단계: 상점 홈페이지 보기
-
라이브 미리보기 URL로 이동합니다.
https://main--{SITE}--{ORG}.aem.live
{ORG}
및{SITE}
을(를) GitHub 조직 및 사이트 이름으로 바꾸십시오. -
성공 기준: 표준 컨텐츠가 포함된 상점 홈 페이지가 표시됩니다.
2단계: 제품 세부 사항 페이지 테스트
기본 제품 세부 사항 페이지를 보고 제품 데이터가 올바르게 로드되는지 확인하십시오.
-
샘플 제품 페이지로 이동합니다.
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 코드를 맞춤화하여 카탈로그에 정의된 제품 경로를 기반으로 제품 세부 사항 페이지에 대한 경로를 설정할 수 있습니다.note tip TIP 인스턴스의 데이터 동기화Adobe Commerce Optimizer 페이지에서 사용 가능한 SKU를 봅니다. -
성공 기준: 페이지가 표시되어야 합니다.
- 제품 이름, 설명 및 가격
- 제품 이미지
- 장바구니에 추가 기능
- Adobe Commerce Optimizer 인스턴스에서 검색된 데이터
3단계: 기본 검색 기능 테스트
검색 및 필터링을 포함한 기본 제품 기능을 테스트합니다.
-
상점 첫 페이지의 머리글에서 돋보기 아이콘을 클릭합니다.
-
검색 문자열
tires
을(를) 입력하고 Enter 를 누릅니다. -
성공 기준: 다음이 표시됩니다.
- 타이어 제품이 포함된 검색 결과 페이지
- 사이드바의 필터링 옵션
- 이미지 및 가격 정보가 포함된 제품 목록
-
타이어 제품을 클릭하면 상세 페이지가 표시됩니다.
문제 해결
설치하는 동안 문제가 발생하면 웹 페이지 관리자 콘솔을 사용하여 오류를 확인합니다. 또한 브라우저 캐시를 지우거나 다른 브라우저를 사용해 보십시오.
다음 지침을 사용하여 일반적인 문제를 확인하십시오.
일반적인 문제
- GitHub 조직에 대한 관리자 액세스 권한이 있는지 확인하십시오.
- 조직 대신 개인 저장소를 사용해 보십시오.
- GitHub 권한을 확인하고 다시 시도하십시오.
- 사이트 URL 형식 확인:
https://main--{SITE}--{ORG}.aem.live
- 코드 동기화 앱이 제대로 설치되었는지 확인합니다.
- 저장소가 공용인지 또는 올바르게 구성되었는지 확인합니다.
config.json
에서 구성 값 확인- Adobe Commerce Optimizer 인스턴스에서 [데이터 동기화] 페이지에서 샘플 제품이 로드되었는지 확인합니다. 사용할 수 있는 제품이 없는 경우 샘플 데이터를 다시 로드하거나 데이터 수집 API를 사용하여 제품을 추가하십시오. 구성 변경 사항이 반영될 때까지 몇 분 정도 기다립니다.
- 파일에 구성된 것과 동일한 헤더를 사용하여 머천다이징 서비스 products 쿼리
config.json
를 사용하여 제품 세부 정보를 검색해 보십시오. 데이터를 검색할 수 있는 경우 카탈로그 보기 구성 또는 색인 오류의 문제일 수 있습니다.
- 파일에 구성된 것과 동일한 헤더를 사용하여 머천다이징 서비스 productSearch 쿼리
config.json
를 사용하여 제품 검색 결과를 검색할 수 있는지 확인하십시오. 데이터를 검색할 수 있는 경우 카탈로그 보기 구성 또는 색인 오류의 문제일 수 있습니다. config.json
파일의 카탈로그 보기 ID가 Adobe Commerce Optimizer의 카탈로그 보기 ID와 일치하는지 확인하십시오.- Adobe Commerce Optimizer에서 storefront 헤더 구성에서 사용한 정책, 로케일 및 가격 장부의 구성을 확인합니다.
- 특성 메타데이터 설정이 검색에 대해 올바르게 설정되어 있는지 확인하십시오.
유효성 검사 목록
다음 단계를 진행하기 전에 다음을 확인하여 상점이 올바르게 작동하는지 확인하십시오.
도움말 보기
문제가 지속되는 경우:
다음 단계
상점을 설정하고 확인한 후 다음을 수행할 수 있습니다.
-
Sidekick 설치 - 웹 사이트에서 직접 콘텐츠를 편집하고 미리 보고 게시하기 위한 브라우저 확장 기능
-
로컬 개발 환경 설정 - 로컬 환경을 만들어 상점 코드 및 콘텐츠를 사용자 지정합니다.
학습 및 탐색
-
엔드 투 엔드 사용 사례 완료 - Adobe Commerce Optimizer을(를) 사용한 상점 설정 및 카탈로그 관리에 대해 자세히 알아보기
-
Storefront 사용자 지정 살펴보기 - 고급 설정 및 구성 옵션 알아보기
-
Commerce 드롭인을 사용하여 Storefront 경험을 사용자 지정 미리 빌드된 구성 요소를 추가하여 Storefront 경험을 개선합니다.