Dynamics 365 Commerce의 소매 관심 그룹이 Yammer에서 Viva Engage로 이동했습니다. 새 Viva Engage 커뮤니티에 액세스할 수 없는 경우 이 양식(https://aka.ms/JoinD365commerceVivaEngageCommunity)을 작성하여 추가하고 최신 토론에 계속 참여하세요.
이 문서에서는 구입 상자 모듈에 대해 다루고 Microsoft Dynamics 365 Commerce의 사이트 페이지에 모듈을 추가하는 방법을 설명합니다.
구입 상자라는 용어는 일반적으로 "스크롤 없이 볼 수 있는" 제품 세부 정보 페이지(PDP)의 영역을 나타내며, 제품 구매에 필요한 가장 중요한 모든 정보를 호스팅합니다. ("스크롤 없이 볼 수 있는" 영역은 페이지가 처음 로드될 때 표시되므로 사용자가 보기 위해 아래로 스크롤할 필요가 없습니다.)
구입 상자 모듈은 제품 세부 정보 페이지의 구입 상자 영역에 표시되는 모든 모듈을 호스팅하는 데 사용되는 특수 컨테이너입니다.
제품 세부 정보 페이지의 URL에는 제품 ID가 포함되어 있습니다. 구입 상자 모듈을 렌더링하는 데 필요한 모든 정보는 이 상품 ID에서 파생됩니다. 제품 ID를 제공하지 않으면 구입 상자 모듈이 페이지에서 올바르게 렌더링되지 않습니다. 따라서 구입 상자 모듈은 제품 컨텍스트가 있는 페이지에서만 사용할 수 있습니다. 제품 컨텍스트가 없는 페이지(예: 홈 페이지 또는 마케팅 페이지)에서 사용하려면 추가 사용자 지정을 수행해야 합니다.
다음 이미지는 제품 세부 정보 페이지에 표시되는 구입 상자 모듈의 예시를 보여줍니다.
구입 상자 모듈 속성 및 슬롯
상품 상세 정보 페이지에서 구입 상자는 왼쪽의 미디어 영역과 오른쪽의 콘텐츠 영역의 두 영역으로 나뉩니다. 기본적으로 미디어 영역 열의 너비와 콘텐츠 영역 열의 너비의 비율은 2:1입니다. 모바일 장치에서는 한 영역이 다른 영역 아래에 표시되도록 두 영역이 누적됩니다. 테마를 사용하여 열 너비 및 누적 순위를 사용자 지정할 수 있습니다.
구입 상자 모듈은 제품의 제목, 설명, 가격 및 등급을 렌더링합니다. 또한 고객은 크기, 스타일 및 색상과 같은 다양한 제품 특성을 가진 제품 변형을 선택할 수 있습니다. 제품 이형 상품을 선택하면 구입 상자의 다른 속성(예: 상품 설명 및 이미지)이 업데이트되어 이형 상품 정보가 반영됩니다.
고객이 구매할 품목의 수량을 지정할 수 있도록 수량 선택기가 제공됩니다. 구매할 수 있는 최대 수량은 사이트 설정에서 정의할 수 있습니다.
구입 상자에서 고객은 장바구니에 제품 추가, 위시리스트에 제품 추가, 픽업 위치 선택과 같은 작업을 수행할 수도 있습니다. 이러한 작업은 제품 또는 제품 변형에 대해 수행할 수 있습니다. 위시리스트에 제품을 추가하려면 고객이 로그인해야 합니다.
테마는 구입 상자 상품 속성 및 작업 컨트롤의 순서를 제거하거나 변경하는 데 사용할 수 있습니다.
모듈 속성
제목 태그 – 이 속성은 제품 제목의 헤딩 태그를 정의합니다. 구입 상자가 페이지 상단에 위치할 경우, 접근성 기준을 충족시키기 위해 이 속성은 h1로 설정되어야 합니다.
"유사한 디자인 쇼핑" 추천 사용 - 이 속성을 사용하면 구입 상자에서 현재 조회된 항목과 유사하게 보이는 제품에 대한 링크를 표시할 수 있습니다. 이 기능은 Commerce 릴리스 10.0.13 이후부터 사용할 수 있습니다.
구입 상자 모듈에서 사용할 수 있는 모듈
- 미디어 갤러리 – 이 모듈은 제품 세부 정보 페이지에서 제품 이미지를 표시하는 데 사용됩니다. 이 모듈에 대한 자세한 내용은 미디어 갤러리 모듈을 참조하십시오.
- 매장 선택기 – 이 모듈은 항목을 수령할 수 있는 가까운 매장을 보여줍니다. 이를 통해 사용자는 위치를 입력하여 근처에 있는 상점을 찾을 수 있습니다. 이 모듈에 대한 자세한 내용은 매장 선택기 모듈을 참조하십시오.
- 소셜 공유 - 이 모듈은 사용자가 소셜 미디어에서 제품 정보를 공유할 수 있도록 구입 상자에 추가할 수 있습니다. 자세한 내용은 소셜 공유 모듈을 참조하세요.
구입 상자 모듈 설정
다음 구입 상자 모듈 설정은 사이트 설정 > 확장 프로그램에서 구성할 수 있습니다.
- 장바구니 라인 수량 제한 – 이 속성은 장바구니에 추가할 수 있는 각 품목의 최대 개수를 지정하는 데 사용됩니다. 예를 들어 소매업체는 단일 거래에서 각 제품을 10개만 판매할 수 있도록 결정할 수 있습니다.
- 재고 – 재고 설정을 적용하는 방법에 대한 자세한 내용은 재고 설정 적용을 참조하십시오.
- 장바구니에 제품 추가 – 장바구니에 제품 추가 설정을 적용하는 방법에 대한 자세한 내용은 장바구니에 제품 추가 설정을 참조하십시오.
Adventure Works 테마의 구입 상자 모듈 정의 확장
Adventure Works 테마에서 제공하는 구입 상자 모듈에는 PDP 구입 상자의 아코디언 모듈 내에서 제품 사양 모듈의 구현을 지원하는 모듈 정의 확장이 있습니다. PDP 구입 상자에서 제품 사양 속성을 표시하려면 구입 상자 슬롯의 아코디언 모듈 슬롯에 제품 사양 모듈을 추가합니다.
중요
Adventure Works 테마는 Dynamics 365 Commerce 버전 10.0.20 릴리스부터 사용할 수 있습니다.
Commerce Scale Unit 상호 작용
구입 상자 모듈은 Commerce Scale Unit API(Application Programming Interface)를 사용하여 제품 정보를 검색합니다. 제품 세부 정보 페이지의 제품 ID는 모든 정보를 검색하는 데 사용됩니다.
페이지에 구입 상자 모듈 추가
구매 상자 모듈을 새 페이지에 추가하고 필요한 속성을 설정하려면 다음 단계를 수행합니다.
- 조각으로 이동하고 새로 만들기를 선택하여 새 조각을 만듭니다.
- 새 조각 대화 상자에서 구입 상자 모듈을 선택합니다.
- 조각 이름에서 구입 상자 조각이라는 이름을 입력한 다음 확인을 선택합니다.
- 구입 상자 모듈의 미디어 갤러리 슬롯에서 줄임표(…)를 선택한 다음, 모듈 추가를 선택합니다.
- 모듈 선택 대화 상자에서 미디어 갤러리 모듈을 선택한 다음 확인을 선택합니다.
- 구입 상자 모듈의 슬롯 선택기 슬롯에서 줄임표(…)를 선택한 다음, 모듈 추가를 선택합니다.
- 모듈 선택 대화 상자에서 매장 선택기 모듈을 선택한 다음 확인을 선택합니다.
- 저장을 선택하고, 편집 완료를 선택하여 조객을 확인한 다음, 게시를 선택하여 게시합니다.
- 템플릿으로 이동하고 새로 만들기를 선택하여 새 템플릿을 만듭니다.
- 새 템플릿 대화 상자의 템플릿 이름에서 PDP 템플릿을 입력한 다음 확인을 선택합니다.
- 본문 슬롯에서 줄임표(...)를 선택한 다음 모듈 추가를 선택합니다.
- 모듈 선택 대화 상자에서 기본 페이지 모듈을 선택한 다음 확인을 선택합니다.
- 기본 페이지의 기본 슬롯에서 줄임표(...)를 선택한 다음 조각 추가를 선택합니다.
- 조각 선택 대화 상자에서 생성한 구입 상자 조각 조각을 선택한 다음 확인을 선택합니다.
- 저장을 선택하고, 편집 완료를 선택하여 템플릿을 확인한 다음, 게시를 선택하여 게시하세요.
- 페이지로 이동하고 새로 만들기를 선택하여 새 페이지를 만듭니다.
- 새 페이지 만들기 대화 상자에서 페이지 이름에 PDP 페이지를 입력한 후 다음을 선택합니다.
- 템플릿 선택에서, PDP 템플릿을 선택한 후, 다음을 선택합니다.
- 레이아웃 선택에서 페이지 레이아웃(예: 유연한 레이아웃)을 선택한 다음, 다음을 선택합니다.
- 검토 및 완료에서 페이지 구성을 검토합니다. 페이지 정보를 편집해야 하는 경우 뒤로를 선택합니다. 페이지 정보가 올바르면 페이지 만들기를 선택합니다.
- 새 페이지의 기본 슬롯에서 줄임표(...)를 선택한 다음, 조각 추가를 선택합니다.
- 조각 선택 대화 상자에서 생성한 구입 상자 조각 조각을 선택한 다음 확인을 선택합니다.
- 페이지를 저장하고 프리뷰합니다. 프리뷰 페이지의 URL에 ?productid=<product id> 쿼리 문자열 매개 변수를 추가합니다. 이러한 방식으로 제품 컨텍스트는 프리뷰 페이지를 로드하고 렌더링하는 데 사용됩니다.
- 저장을 선택하고, 편집 완료를 선택하여 페이지를 확인한 다음, 게시를 선택하여 게시하세요. 제품 세부 정보 페이지에 구입 상자가 표시되어야 합니다.