제품 세부사항 패널을 사용자 정의하기 위한 샘플 유스 케이스

온라인 편집

이 주제에서는 제품 세부사항 패널의 사용자 정의에 대한 몇 가지 유스 케이스를 제공합니다.

아코디언 항목 다시 정렬

제품 상세내역 패널에서 아코디언 아이템을 재정렬할 수 있습니다. 예를 들어, 다음 단계를 사용하여 제품 변형 을 고객 서비스 보기에 표시되는 마지막 아코디언 아이템 제품 세부사항 패널로 표시할 수 있습니다.

아직 없는 경우 store-extensions-src아래에 다음 폴더 구조를 작성하십시오.
store-extensions-src/app/app-common/product-details-modal
/store-frontend/src/app/app-common/product-details-modal 에서 store-frontend/store-extensions-src/app/app-common/product-details-modal/ 로 customer-view-details.config.ts 파일을 복사합니다.
사용자의 요구사항에 따라 accordionItems 배열을 업데이트하십시오. 이 예제에서 첫 번째 항목 productVariants 을 이동하고 이 배열의 마지막 항목으로 추가하십시오.

아코디언 항목 제거

제품 상세내역 패널에서 아코디언 아이템을 제거할 수 있습니다. 예를 들어, 다음 단계를 사용하여 오더 이행 보기의 제품 상세내역 패널에서 제품 변형 아코디언 아이템을 제거할 수 있습니다.

WORKSPACE/store-frontend/src/app/app-common/product-details-modal 에서 WORKSPACE/store-frontend/store-extensions-src/app/app-common/product-details-modal 로 fulfillment-view-details.config.ts 파일을 복사합니다.

accordionItems 배열에서 productVariants 항목을 제거하십시오.

{
        id: 'productVariants',
        tid: 'ProductVariantsComponent',
        component: ProductVariantsComponent,
        displayBundleKey: 'addProductToCart.LABEL_ProductVariants'
}

새 아코디언 아이템 추가

제품 상세내역 패널에 새 아코디언 아이템을 추가할 수 있습니다. 예를 들어, 다음 단계를 사용하여 오더 이행 보기의 제품 상세내역 패널에 제품 추가 상세내역 을 새 아코디언 아이템으로 추가할 수 있습니다.

WORKSPACE/store-frontend/src/app/app-common/product-details-modal 에서 WORKSPACE/store-frontend/store-extensions-src/app/app-common/product-details-modal 로 fulfillment-view-details.config.ts 파일을 복사합니다.

새 ProductAdditionalDetailComponent 컴포넌트에 대한 다음 오브젝트를 accordionItems 배열에 추가하십시오.

{       
id: 'ProductAdditionalDetail',
tid: 'ProductAdditionalDetailComponent',
component: ProductAdditionalDetailComponent,
displayBundleKey: 'addProductToCart.LABEL_ProductAdditionalDetail'
}

app-common-extension.module.ts 파일의 선언 및 entryComponents 에 새 컴포넌트를 추가하십시오.

기본 제품 정보 업데이트

제품 세부사항 패널에 표시되는 기본 제품 정보를 사용자 정의할 수 있습니다. 예를 들어, 다음 단계를 사용하여 상품에 대한 SKU 정보가 표시되지 않도록 주문 이행 보기에서 상품 정보 패널을 사용자 정의할 수 있습니다.

아직 없는 경우 store-extensions-src아래에 다음 폴더 구조를 작성하십시오.
store-extensions-src/app/app-common/product-details-modal
fulfillment-view-primary-detail 컴포넌트를 /store-frontend/src/app/app-common/product-details-modal 에서 /store-frontend/store-extensions-src/app/app-common/product-details-modal로 복사하십시오.
새로 복사된 구성요소를 업데이트하여 HTML에서 SKU 요소를 제거하십시오.