매장 선택기 모듈
이 문서에서는 매장 선택기 모듈에 대해 다루고 이를 사이트 페이지에 추가하는 방법을 설명합니다 Microsoft Dynamics 365 Commerce.
고객은 온라인에서 구매한 후 매장 선택 모듈을 사용하여 선택한 매장에서 제품을 수령할 수 있습니다. Commerce 버전 10.0.13에서는 매장 선택기 모듈에 주변 매장을 보여주는 매장 찾기 페이지를 보여줄 수 있는 추가 기능도 포함되었습니다.
매장 선택 모듈을 사용하면 사용자가 위치(도시, 주, 주소 등)를 입력하여 검색 반경 내의 매장을 검색할 수 있습니다. 모듈을 처음 열면 고객의 브라우저 위치를 사용하여 매장을 찾습니다(동의가 제공된 경우).
매장 선택기 모듈 사용법
- 매장 선택 모듈은 제품 세부 정보 페이지(PDP)에서 픽업할 매장을 선택하는 데 사용할 수 있습니다.
- 매장 선택 모듈을 장바구니 페이지에서 사용하여 픽업할 매장을 선택할 수 있습니다.
- 매장 선택 모듈은 이용 가능한 모든 매장을 표시하는 독립형 페이지에서 사용할 수 있습니다.
Commerce 본사에 주문 이행 그룹 설정
매장 선택기에 이용 가능한 매장이 표시되도록 하려면 주문 이행 그룹을 Commerce 본사에 설정해야 합니다. 자세한 내용은 주문 이행 그룹 설정을 참조하세요.
또한 주문 이행 그룹의 각 매장에 대해서는 매장 위치의 위도와 경도가 본사에 정의되어 있어야 합니다.
Commerce 본사의 매장 위치에 대한 위도와 경도 값을 입력하려면 따라와 다음 단계를 따르세요.
재고 관리 > 설정 > 재고 세부정보로 이동합니다.
왼쪽 창에서 창고 위치를 선택하세요.
주소 빠른 탭에서 고급을 선택합니다.
작업 창에서 편집을 선택합니다.
일반 빠른 탭에서 위도 와 경도 값을 입력합니다.
작업 창에서 저장을 선택합니다.
매장 선택기 모듈에서 매장 숨기기
주문 이행 그룹의 일부 매장은 유효한 픽업 장소가 아닐 수 있습니다. 따라와 매장 선택 모듈에서 유효한 픽업 위치만 옵션으로 표시되도록 하려면 Commerce 본사에서 다음 단계를 따르세요.
- 소매 및 상거래 > 상거래 설정 > 주문 이행 그룹 > 모든 매장으로 이동하세요.
- 작업 창에서 편집을 선택합니다.
- 설정에서 유효한 픽업 위치가 아닌 모든 매장에 대해 픽업 위치임 체크박스의 선택을 취소합니다.
- 작업 창에서 저장을 선택합니다.
- 1070 채널 구성 배포 일정 작업을 실행합니다.
Bing Maps 통합
매장 선택기 모듈은 Bing의 지오코딩 및 자동 제안 기능을 사용하기 위해 Bing Maps REST 애플리케이션 프로그래밍 인터페이스(API) 와 통합되어 있습니다. Bing Maps API 키가 필요하며 Commerce 본사의 공유 매개변수 페이지에 추가해야 합니다. 지오코딩 API는 위치를 위도와 경도 값으로 변환하는 데 사용됩니다. Autosuggest API와의 통합은 사용자가 검색 필드에 위치를 입력할 때 검색 제안을 표시하는 데 사용됩니다.
자동 제안 REST API의 경우 사이트의 콘텐츠 보안 정책(CSP)에 따라 다음 URL이 허용되는지 확인해야 합니다. 이 설정은 사이트의 다양한 CSP 지침(예: img-src)에 허용된 URL을 추가하여 Commerce 사이트 작성기에서 완료가 됩니다. 자세한 내용은 콘텐츠 보안 정책를 참조하세요.
- connect-src 지침에 *.bing.com를 추가합니다.
- img-src 지침에 *.virtualearth.net를 추가합니다.
- script-src 지침에 *.bing.com, *.virtualearth.net를 추가합니다.
- 스크립트 style-src 지침에 *.bing.com를 추가합니다.
매장 모드에서 픽업
매장 선택 모듈은 제품을 픽업할 수 있는 매장 목록을 보여주는 매장에서 픽업 모드를 지원합니다. 또한 목록에 있는 각 매장의 매장 운영 시간과 제품 재고도 표시됩니다. 매장 선택 모듈은 제품의 배송 모드가 선택한 매장에서 픽업 으로 설정된 경우 제품의 가용성을 렌더링하고 사용자가 제품을 장바구니에 추가할 수 있도록 제품의 컨텍스트가 필요합니다. 자세한 내용은 인벤토리 설정을 참조하세요.
매장 선택기 모듈을 PDP의 구입 상자 모듈에 추가하여 제품을 픽업할 수 있는 매장을 표시할 수 있습니다. 카트 모듈에 추가할 수도 있습니다. 이 경우, 매장 선택 모듈은 카트의 각 품목에 대한 픽업 옵션을 보여줍니다. 매장 선택기 모듈은 확장 및 사용자 정의를 통해 다른 페이지나 모듈에 추가할 수도 있습니다.
이 시나리오가 작동하려면 픽업 배송 모드를 사용하도록 제품을 구성해야 합니다. 그렇지 않으면 해당 모듈은 제품 페이지에 표시되지 않습니다. 배송 모드를 구성하는 방법에 대한 자세한 내용은 배송 모드 설정을 참조하세요.
다음 이미지는 PDP에 사용된 매장 선택기 모듈의 예를 보여줍니다.
메모
버전 10.0.16 이상에서는 조직이 고객에 대한 여러 가지 픽업 배달 옵션을 정의할 수 있는 새로운 기능이 활성화되었습니다. 이 기능을 활성화하면 매장 선택기와 기타 전자상거래 모듈이 향상되어 쇼핑객이 구성된 경우 잠재적으로 여러 개의 픽업 배송 옵션 중에서 선택할 수 있습니다. 이 기능에 대해 자세히 알아보려면 이 문서를 참조하세요.
매장 찾기 모드
매장 선택 모듈은 매장 찾기 모드도 지원합니다. 이 모드를 사용하면 이용 가능한 매장과 해당 정보를 표시하는 매장 위치 페이지를 만들 수 있습니다. 이 모드에서는 매장 선택기 모듈이 제품 컨텍스트 없이 작동하며 모든 사이트 페이지에서 독립형 모듈로 사용할 수 있습니다. 또한, 모듈에 대한 관련 설정이 켜져 있으면, 사용자는 원하는 매장을 선호 매장으로 선택할 수 있습니다. 사용자가 선호 매장으로 매장을 선택하면 매장 ID가 브라우저 쿠키에 유지됩니다. 따라서 사용자는 쿠키 동의 메시지를 수락해야 합니다.
다음 그림은 매장 위치 페이지에서 지도 모듈과 함께 사용되는 매장 선택기 모듈의 예를 보여줍니다.
지도를 렌더링하다
매장 선택 모듈은 지도 모듈과 함께 사용하여 매장 위치를 지도에 표시할 수 있습니다. 맵 모듈에 대한 자세한 내용은 맵 모듈을 참조하세요.
매장 선택기 모듈 속성
| 속성 이름 | 값 | 설명 |
|---|---|---|
| 제목 | 텍스트 | 모듈의 제목입니다. |
| 모드 | 매장 찾기 또는 매장에서 픽업 | 매장 찾기 모드는 이용 가능한 매장을 보여줍니다. 매장에서 픽업 모드를 사용하면 사용자가 픽업할 매장을 선택할 수 있습니다. |
| 스타일 | 대화 또는 인라인 | 모듈은 인라인이나 대화 상자에서 렌더링할 수 있습니다. |
| 선호 매장으로 설정 | True 또는 False | 이 속성을 True로 설정하면 사용자가 선호하는 매장을 설정할 수 있습니다. 이 기능을 사용하려면 사용자가 쿠키 동의 메시지를 수락해야 합니다. |
| 모든 매장 표시 | True 또는 False | 이 속성을 True로 설정하면 사용자는 검색 반경 속성을 무시하고 모든 매장을 볼 수 있습니다. |
| 자동 제안 옵션: 최대 결과 | 숫자 | 이 속성은 Bing 자동 제안 API를 통해 표시될 수 있는 자동 제안 결과의 최대 수를 정의합니다. |
| 검색 반경 | 숫자 | 이 속성은 매장의 검색 반경을 마일 단위로 정의합니다. 값을 지정하지 않으면 기본 검색 반경인 50마일이 사용됩니다. |
| 서비스 약관 | URL | 이 속성은 Bing Maps 서비스를 사용하는 데 필요한 서비스 약관 URL을 지정합니다. |
사이트 설정
매장 선택 모듈은 장바구니에 상품 추가 설정을 준수합니다. 매장 선택 모듈에서 장바구니에 항목을 추가하면 사이트 사용자는 이에 맞게 구성된 워크플로를 볼 수 있습니다.
페이지에 매장 선택기 모듈 추가
매장 픽업 모드의 경우, 해당 모듈은 PDP와 카트 페이지에서만 사용할 수 있습니다. 모듈의 속성 창에서 모드를 매장에서 픽업 으로 설정해야 합니다.
- 구입 상자 모듈에 매장 선택기 모듈을 추가하는 방법에 대한 자세한 내용은 구입 상자 모듈을 참조하세요.
- 카트 모듈에 매장 선택기 모듈을 추가하는 방법에 대한 자세한 내용은 카트 모듈을 참조하세요.
이 문서의 앞부분에 나온 그림과 같이, 매장 위치 페이지에 사용 가능한 매장을 표시하도록 매장 선택기 모듈을 구성하려면 다음 단계를 따르세요. 따라와
- 템플릿으로 가서 새로 만들기 를 선택하여 새 템플릿을 만듭니다.
- 새 템플릿 대화 상자의 템플릿 이름에 마케팅 템플릿을 입력한 다음 확인를 선택합니다.
- 저장을 선택하고, 편집 완료를 선택하여 템플릿을 확인한 다음, 게시를 선택하여 게시하세요.
- 페이지로 가서 새로 만들기 를 선택해 새 페이지를 만드세요.
- 새 페이지 만들기 대화 상자에서 페이지 이름 아래에 매장 위치를 입력한 후 다음을 선택합니다.
- 템플릿 선택에서, 여러분이 만든 마케팅 템플릿 을 선택한 후, 다음을 선택하세요.
- 레이아웃 선택에서 페이지 레이아웃(예: 유연한 레이아웃)를 선택한 후 다음을 선택합니다.
- 검토 및 완료에서 페이지 구성을 검토하세요. 페이지 정보를 편집해야 하는 경우 뒤로를 선택하세요. 페이지 정보가 올바르면 페이지 만들기를 선택하세요.
- 새 페이지의 메인 슬롯에서 줄임표(...)를 선택한 다음 모듈 추가를 선택합니다.
- 모듈 선택 대화 상자에서 컨테이너 모듈을 선택한 다음 확인를 선택합니다.
- 컨테이너 슬롯에서 줄임표(...)를 선택한 다음 모듈 추가를 선택합니다.
- 모듈 선택 대화 상자에서 2개의 열이 있는 컨테이너 모듈을 선택한 다음 확인를 선택합니다.
- 모듈의 속성 창에서 Width 값을 Fill Container로 설정합니다.
- X-Small 뷰포트 컬럼 구성 값을 100%로 설정합니다.
- 작은 뷰포트 열 구성 값을 100%로 설정합니다.
- 중간 뷰 포트 열 구성 값을 33% 67%로 설정합니다.
- 대형 뷰포트 열 구성 값을 33% 67%로 설정합니다.
- 2개의 열이 있는 컨테이너 슬롯에서 줄임표(...)를 선택한 다음, 모듈 추가를 선택합니다.
- 모듈 선택 대화 상자에서 매장 선택기 모듈을 선택한 다음 확인를 선택합니다.
- 모듈의 속성 창에서 모드 값을 매장 찾기로 설정합니다.
- 검색 반경 값을 마일 단위로 설정합니다.
- 필요에 따라 선호 매장으로 설정, 모든 매장 표시, 자동 제안 사용 등의 다른 속성을 설정합니다.
- 2개의 열이 있는 컨테이너 슬롯에서 줄임표(...)를 선택한 다음, 모듈 추가를 선택합니다.
- 모듈 선택 대화 상자에서 맵 모듈을 선택한 다음, 확인를 선택합니다.
- 모듈의 속성 창에서 필요에 따라 추가 속성을 설정합니다.
- 저장을 선택하고, 편집 완료를 선택하여 페이지를 확인한 다음, 게시를 선택하여 게시하세요.