Storefront 및 Catalog 관리자 엔드 투 엔드 활용 사례

Adobe Commerce Optimizer UI - 카탈로그 보기 및 정책을 설정하여 Carvelo 사용 사례에 대한 복잡한 카탈로그 작동 설정을 관리합니다.

Commerce Storefront - Adobe Commerce Optimizer 인스턴스와 Commerce Storefront 구성 파일 fstab.yaml 및 config.json에 로드된 샘플 카탈로그 데이터를 사용하여 Storefront를 렌더링합니다.

Celport에서 브레이크 및 일시 중단 부품만 판매하도록 Celport 부품 범주 ​라는 새 정책을 만듭니다.

Celport 상점에 대한 새 카탈로그 보기를 만듭니다.

이 카탈로그 보기는 새로 만든 정책 Celport 부품 범주 및 기존 East Coast Inc 브랜드 ​를 사용하여 Celport가 East Coast Inc와의 계약의 일부로 Bolt 및 Cruz 브랜드만 판매할 수 있도록 합니다. Celport 카탈로그 보기는 east_coast_inc 가격표를 사용하여 브랜드 라이선스 계약에 맞는 제품 가격 책정 일정을 지원합니다.

만든 Celport 카탈로그 보기의 데이터를 사용하도록 commerce storefront 구성을 업데이트합니다.

왼쪽 레일에서 스토어 설정 섹션을 확장하고 Policies ​을(를) 클릭합니다.

Create Policy ​을(를) 클릭합니다.

정책 세부 사항을 추가하는 새 페이지가 표시됩니다.

필요한 세부 정보를 추가합니다.

이름 = Celport 부분 범주

Add Filter ​을(를) 클릭합니다.

필터 세부 정보를 추가하는 대화 상자가 표시됩니다.

필터 세부 사항을 추가합니다.

• 특성 = part_category
• 연산자 = IN
• 값 Source = 정적
• 값 = 브레이크
• 값 = 일시 중단

STATIC과 TRIGGER 값 원본의 차이에 대한 자세한 내용은 값 원본 형식을 참조하세요.

Filter details 대화 상자에서 Save ​을(를) 클릭합니다.

방금 만든 필터를 활성화하려면 동작 점(…)을 클릭하고 활성화 ​를 선택합니다.

Save ​을(를) 클릭합니다.

뒤로 화살표를 클릭하여 정책 목록으로 돌아갑니다.

새 보고서 파트 범주 정책이 목록에 나타납니다.

왼쪽 레일에서 스토어 설정 섹션을 확장하고 Catalog views ​을(를) 클릭합니다.

기존 카탈로그 보기 개수: Arkbridge, Kingsbluff 및 Global.

Add catalog view ​을(를) 클릭합니다.

카탈로그 보기 세부 정보 입력:

• 이름 = Celport
• 카탈로그 원본 = en-US
• 정책(드롭다운 사용) = East Coast Inc 브랜드; Celport 일부 범주; 브랜드; 모델

카탈로그 보기를 만들려면 Add ​을(를) 클릭합니다.

카탈로그 보기 페이지가 업데이트되어 새 카탈로그 보기가 표시됩니다.

Celport 카탈로그 보기 ID를 가져옵니다.

카탈로그 보기 페이지에서 Celport 카탈로그 보기에 대한 정보 아이콘을 클릭합니다.

카탈로그 보기 ID를 복사하여 저장합니다. 새 Celport 카탈로그에 데이터를 전달하기 위해 Storefront 구성을 업데이트할 때 이 ID가 필요합니다.

이 단계가 올바르게 완료되었는지 확인하려면:

• 카탈로그 보기 이름이 "Celport"입니다.
• 카탈로그 보기에 4개의 연결된 정책이 표시됨
• 카탈로그 보기 ID가 표시되고 복사할 수 있습니다.
• 카탈로그 소스에 "en-US" 표시

로컬 개발 환경에서 Storefront 보일러플레이트 구성 파일로 GitHub 리포지토리를 복제한 폴더를 엽니다.

폴더의 루트 디렉터리에서 config.json 파일을 엽니다.

{
 "public": {
   "default": {
   "commerce-core-endpoint": "https://www.aemshop.net/graphql",
   "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/Fwus6kdpvYCmeEdcCX7PZg/graphql",
   "headers": {
      "cs": {
         "ac-view-id": "9ced53d7-35a6-40c5-830e-8288c00985ad",
         "ac-price-book-id": "west_coast_inc",
         "ac-source-locale": "en-US"
        }
      },
      "analytics": {
         "base-currency-code": "USD",
         "environment": "Production",
         "store-id": 1,
         "store-name": "ACO Demo",
         "store-url": "https://www.aemshop.net",
         "store-view-id": 1,
         "store-view-name": "Default Store View",
         "website-id": 1,
         "website-name": "Main Website"
       }
    }
   }
}

commerce-endpoint 값에서 URL의 테넌트 ID를 Adobe Commerce Optimizer 인스턴스의 URL로 바꿉니다.

Commerce Optimizer UI의 URL에서 테넌트 ID를 찾을 수 있습니다. 예를 들어 다음 URL에서 테넌트 ID는 XDevkG9W6UbwgQmPn995r3입니다.

https://experience.adobe.com/#/@commerceprojectbeacon/in:XDevkG9W6UbwgQmPn995r3/commerce-optimizer-studio/catalog

ac-view-id 값을 이전에 복사한 Celport 카탈로그 보기 ID로 바꾸십시오.

ac-price-book-id 값을 "east_coast_inc"(으)로 바꿉니다.

이러한 변경 작업을 수행하면 config.json 파일이 다음과 비슷해지며 ACO-tenant-id 및 celport-catalog-view-id 자리 표시자가 값으로 대체됩니다.

{
  "public": {
     "default": {
     "commerce-core-endpoint": "https://www.aemshop.net/graphql",
     "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/{{ACO-tenant-id}}/graphql",
     "headers": {
         "cs": {
             "ac-view-id": "{{celport-catalog-view-id}}",
             "ac-price-book-id": "east_coast_inc",
             "ac-source-locale": "en-US"
           }
         },
         "analytics": {
             "base-currency-code": "USD",
             "environment": "Production",
             "store-id": 1,
             "store-name": "ACO Demo",
             "store-url": "https://www.aemshop.net",
             "store-view-id": 1,
             "store-view-name": "Default Store View",
             "website-id": 1,
             "website-name": "Main Website"
          }
      }
  }
}

파일을 저장합니다.

변경 사항을 저장할 때 브레이크 및 서스펜션 부품만 판매하도록 구성된 Carvelo 카탈로그 뷰를 사용하도록 카탈로그 구성을 업데이트합니다.

Storefront를 실행하여 Storefront 구성으로 생성된 Celport 전용 카탈로그 경험을 확인하십시오.

1. IDE의 터미널 창에서 로컬 상점 미리 보기를 시작합니다.

   code language-shell
   npm start

   브라우저가 http://localhost:3000에 로컬 개발 미리 보기로 열립니다.

   명령이 실패하거나 브라우저가 열리지 않으면 Storefront 설정 항목에서 로컬 개발에 대한 지침을 검토하십시오.

브라우저에서 brakes을(를) 검색하고 Enter ​를 누릅니다.

상점이 업데이트되어 브레이크 부품을 표시하는 제품 목록 페이지가 표시됩니다.

가격 정보로 제품 세부 사항을 보고 제품 가격 정보를 확인하려면 브레이크 부품 이미지를 클릭하십시오.

tires 인스턴스의 사용 사례 데이터에서 사용할 수 있는 또 다른 파트 카테고리인 Adobe Commerce Optimizer을(를) 검색합니다.

결과가 반환되지 않습니다. 셀포트 카탈로그 뷰가 브레이크와 서스펜션 부품만 판매하도록 구성됐기 때문이다.

Storefront 구성 파일(config.json)을 업데이트해 보십시오.

1. ac-view-id 및 ac-price-book 값을 변경합니다.

예를 들어, 카탈로그 보기 ID를 Kingsbluff 카탈로그 보기로 변경하고 가격 장부 ID를 east_coast_inc(으)로 변경할 수 있습니다. Kingsbluff 부품 범주 정책을 검토하여 Kingsbluff에 사용할 수 있는 부품 범주를 확인할 수 있습니다.

1. 파일을 저장합니다.

   파일을 저장하면 로컬 상점 미리 보기가 자동으로 업데이트됩니다.

2. 검색 기능을 사용하여 타이어 부품을 찾아 브라우저의 변경 사항을 미리 봅니다.

   사용 가능한 다양한 부품 유형을 확인하고 Kingsbluff 카탈로그 보기에 지정된 가격을 확인합니다.

이러한 실험은 Adobe Commerce Optimizer의 유연성을 보여 줍니다. 카탈로그 데이터를 복제하지 않고도 다양한 카탈로그 보기와 가격 책자 간을 빠르게 전환하여 다양한 대상자를 위한 맞춤형 쇼핑 경험을 만들 수 있습니다.