메인페이지_섹션 영역
이해하기
이 문서는 쇼핑몰 메인 페이지 화면 내 '섹션(Section)'영역에 대한 정책과 기능, 사용할 수 있는 API를 소개합니다.
기본 스킨에서의 메인 화면은 배너(Banner)와 섹션🅐~🅑으로 구성되어 있습니다.
나머지 섹션(인기상품, 메인분류4,메인분류5) 은 비노출 되어있는 스킨입니다.
- 🅐 신상품 섹션
- 🅑 베스트상품 섹션
섹션(Section)
섹션(Section)이란, 메인 페이지 내에서 특별한 목적에 따라 상품 리스트를 노출 하기 위한 공간입니다.
예를 들어 신상품 섹션, 인기상품 섹션, MD's PICK 섹션 등 목적 별로 분류하여 상품을 진열할 수 있습니다.
배너의 경우, 스킨 제작 시 PC/ Mobile 최대 11개까지 배너 영역 개수를 자유롭게 만들어 둘 수 있었으나
섹션의 경우 스킨 제작 시 PC/ Mobile 반드시 각각 5개의 섹션을 만들어 두어야 합니다.
실제 고객들이 보는 쇼핑몰 화면에 섹션 노출 여부는 shop by pro 어드민(관리자)에서 설정 가능합니다.
참고로 shop by pro에서는 반드시 5개 섹션을 하드코딩해야 하나, shop by premium에서는 5개 이상의 섹션 추가도 자유롭게 가능합니다.
정해진 아래 섹션코드 {sectionId}를 소스 내 하드코딩하여 각 섹션의 위치를 구분할 수 있습니다.
- PC : SCPC0001, SCPC0002, SCPC0003, SCPC0004, SCPC0005
- Mobile: SCMO0001, SCMO0002, SCMO0003, SCMO0004, SCMO0005
shop by pro 어드민에서 섹션(Section)은 '상품 메인분류'라고 표현됩니다.
어드민 [디자인> 디자인 설정 > 상품 메인분류 관리] 화면에서, 섹션 사용 여부 및 섹션에 전시하고자 하는 상품 리스트를
설정할 수 있습니다.
- 최초 상점 생성 시, 상품 메인 분류명은 디폴트로 ' 신상품/ 베스트상품/ 인기상품/ 메인분류4/ 메인분류 5'로 구성됩니다.
- 이후 상품 메인분류 관리명은 어드민에서 수정 가능합니다.
- 어드민에서 '노출 여부' 값을 변경하여, 상품 메인분류(섹션)의 노출/ 비노출을 설정할 수 있습니다.
- 상품 메인분류 추가는 불가합니다. (PC/Mobile 각각 최대 5개 노출 가능)
- get섹션 조회
- /display/sections/ids/{sectionId}
섹션(=상품 메인분류) 영역을 조회합니다
어드민 [디자인> 디자인 설정 > 상품 메인분류 관리] 에서 설정한 데이터를 조회하여, 쇼핑몰 고객들이 보는 화면에 노출하는 API입니다.
{sectionId}: 섹션 코드 파라미터로, 정해진 섹션코드 (SCPC0001 ~ SCPC0005) 를 입력하여 호출합니다.
단, 각 섹션별로 해당 API를 호출하여 상품 리스트를 가져오기 때문에, 섹션 개수 별로 각각 API를 호출을 진행하셔야 합니다.
즉 기본 스킨에서는 섹션 5개 SCPC0001 ~ SCPC0005를 모두 사용하기 때문에, 총 5번의 해당 API 호출이 발생합니다.
'찜하기'와 '장바구니' 기능
섹션 내 전시된 상품에 대해 제공되는 '찜하기' 및 '장바구니' 기능을 소개합니다.
우선 섹션은 상품을 전시하는 방식(=디스플레이 유형)에 따라 '찜하기' 및 '장바구니' 기능 제공 여부가 다릅니다.
섹션의 '디스플레이 유형'은 어드민 [디자인 > 디자인 설정 > 상품 메인분류 관리] 에서 설정 가능합니다.
각 디스플레이 유형에 따라 가로 또는 세로 상품노출 개수는 고정되어 있으며,
고정되지 않은 방향의 상품 노출 개수만 어드민에서 설정 가능합니다.
| 디스플레이 유형 (PC기준) | 상품 전시 방식 | 찜하기 | 장바구니 |
|---|---|---|---|
| 리스트형 | 상하로 2개씩 전시 | 제공 | 제공 |
| 장바구니형 | 우측으로 4개씩 전시 | ||
| 갤러리형 | 우측으로 4개씩 전시 | ||
| 심플 이미지형 | 우측으로 4개씩 전시 (마우스오버 시 상품명/가격정보 노출) | 미제공 | |
| 상품 이동형 | 우측으로 4개씩 전시 (좌/우 버튼으로 1칸씩 이동 가능) |
찜하기 기능은 일종의 위시리스트 개념으로, 해당 상품에 대한 단순 좋아요(like-products)를 표시할 수 있습니다.
따라서 주문서 페이지와 바로 연결하여 결제가 이루어지는 장바구니(cart)와 사용 목적이 구분됩니다.
모든 디스플레이 유형에서 섹션 내 상품 리스트에 '찜하기'버튼을 제공합니다.
비회원(guest)
비회원의 경우 찜하기 기능을 지원하지 않습니다.
찜하기 버튼 클릭 시 로그인 여부를 확인하여, 미로그인(비회원) 시 아래와 같은 컨펌창 노출 후 로그인 페이지로 현재창 이동해야 합니다.
회원(member)
로그인한 상태에서 찜하기 버튼 클릭 시, 아래 POST /profile/like-products를 호출합니다.
기본 스킨에서는 버튼 클릭 시 '찜하기'가 적용되며 한번 더 클릭할 경우 '찜하기'가 삭제됩니다.
해당 API로 찜하기가 적용된 상품은 마이페이지_쇼핑정보 내 '찜 리스트'에 추가됩니다.
- post찜하기 추가 및 삭제
- /profile/like-products
로그인 회원이 특정 상품에 '찜하기'를 추가/삭제합니다
선택한 상품을 옵션 단위로 장바구니에 추가하는 기능입니다.
장바구니(cart) 버튼 클릭 시, 주문서 페이지와 바로 연결하여 결제가 이루어 질 수 있는 장바구니 화면으로 상품 리스트를 추가할 수 있습니다.
섹션 디스플레이 유형 중 '리스트형' 혹은 '장바구니형' 2가지인 경우에만, '장바구니' 버튼이 추가로 제공됩니다.
㉡ 상품 옵션 선택 레이어 팝업을 노출하기 위한 버튼입니다.
단, 성인 인증 상품일 경우 회원/비회원 여부를 확인하여 필요 시 로그인 화면으로 이동시켜야 합니다.
로그인 이후에는 성인 인증 여부를 확인하는 컨펌창이 필요합니다.
기본 스킨에서는 장바구니 버튼 버튼 클릭 시, 상품 옵션을 선택할 수 있는 레이어 팝업이 출력됩니다.
상품 옵션 구현 방법은 상품 상세화면의 '옵션' 항목과 동일하니, 해당 문서를 참고하시길 바랍니다.
참고로, ㉡ 상품 옵션을 선택할 수 있는 레이어 팝업이 출력되는 점을 제외하고
아래 안내 드릴 메인 페이지 내 ㉢ '장바구니 담기 버튼' 호출 로직은 상품 상세화면 내 '장바구니 버튼' 호출 로직과 동일합니다
단, 회원인 경우에만 API를 호출하며 비회원인 경우 API 호출이 아닌 localStorage 에 자체적으로 저장합니다.
- 회원(member)
로그인한 상태에서 장바구니 버튼 클릭 시, 아래 POST /cart 를 호출하여 선택한 상품의 옵션이 장바구니에 추가합니다.
- post장바구니 등록
- /cart
로그인 회원의 상품 구매 수량과 옵션을 장바구니에 등록합니다.
- 비회원(guest)
비회원의 경우에도 장바구니 버튼을 제공합니다.
단, API 호출이 아닌 localStorage 내 비회원 장바구니 데이터를 자체적으로 관리해야 합니다.localStorage에 비회원 장바구니 데이터 저장 시, POST /cart의 request body와 동일한 데이터 형식으로 저장해야 합니다.
이후 상품 상세화면 혹은 장바구니 화면에서 주문서 호출 시 request 형식을 통일하기 위한 목적입니다.
버튼 클릭 시 우선 로그인 여부를 확인하여, 만약 미로그인(비회원) 일 경우 비회원 주문을 진행합니다.
로그인한 회원일 시 아래 POST /order-sheets API로 주문서를 생성한 뒤 주문서 화면으로 이동합니다.
- post주문서 생성 요청
- /order-sheets
선택한 상품의 옵션에 대한 주문서를 생성합니다.
주문서를 생성하는 API로, 주문서 화면으로 이동하기 전 단계에서 호출해야 합니다.
해당 API에서 응답 값으로 획득한 주문서 번호 orderSheetNo 를 주문서 화면으로 전달합니다.
비회원 주문인 경우 accessToken을 null로 보냅니다.
장바구니 화면으로 페이지 이동 여부에 대한 확인 팝업을 출력합니다.