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