LogoLogo
  • 샵바이 스킨 알아보기
    • 샵바이 스킨 설명서
    • 오로라 리액트(통합형) 스킨 개발 가이드
    • 오로라 리액트(통합형) 릴리즈 노트
    • 오로라 바닐라(개별형) 릴리즈 노트
    • 1:1 문의하기
  • 오로라 개별형 스킨 개발 가이드
    • 개발 프로세스
      • 등록
      • 개발
        • 개발 환경 구성하기
        • 스킨 디렉토리 구조
      • 설치
    • 기본 API 이해하기
      • 샵바이 API 호출 가이드
        • OAuth 2.0 적용 가이드
      • 외부 스크립트 호출 가이드
    • 화면별 API 활용 가이드
      • 공통 영역
        • 공통 상단
        • 공통 하단
        • 디자인 팝업
        • 슬라이드 메뉴 (모바일 전용)
        • 최근 본 상품
      • 메인 화면
        • 배너 영역
        • 상품진열 영역
        • 인스타그램 연동
      • 회원가입
      • 로그인
      • 간편 로그인
      • 휴대폰 본인인증
      • 상품 리스트
      • 상품 상세
        • 상품 기본 정보
        • 상품 상세 배너 (모바일 전용)
        • 상품 상세정보 (탭)
        • 배송/반품/교환 안내 (탭)
        • 상품후기 (탭)
        • 상품문의 (탭)
        • 관련상품
      • 장바구니
      • 주문서
      • 마이페이지 > 쇼핑정보
        • 주문목록/배송조회
        • 취소/반품/교환 내역
        • 주문 상세
        • 좋아요
      • 마이페이지 > 혜택관리
        • 쿠폰
        • 적립금
      • 마이페이지 > 회원정보
        • 회원정보 수정
        • 회원탈퇴
        • 배송지 관리
      • 마이페이지 > 나의 게시글
        • 1:1 문의
        • 상품문의
        • 상품후기
      • 상품후기 게시판
      • 일반 게시판
      • 기획전
    • KCP 휴대폰 본인인증 연동 (iOS/AOS)
  • 앱 개발 가이드
    • [샵바이] 웹훅(webhook) 가이드
    • [고도몰] 웹훅(webhook) 가이드
  • 추천 콘텐츠
    • 추천 콘텐츠
      • [간편 로그인] SNS 연동 기능 개발 가이드
      • [공통] 마이페이 API 화면가이드
      • [엔터프라이즈] 선물하기 기능 (배송지 나중입력)
      • [엔터프라이즈] 카카오 싱크 신청 가이드
      • [엔터프라이즈] 카카오 싱크 회원가입 API 화면가이드
      • [엔터프라이즈] 이니렌탈(렌탈결제) API 화면가이드
      • [엔터프라이즈] 외부 회원 연동 가이드
      • [엔터프라이즈] 외부 적립금 전환 가이드
      • [엔터프라이즈] 외부 적립금 연동가이드
      • [엔터프라이즈] 사은품 API 화면가이드
      • [엔터프라이즈] PG신청 가이드 (2024/4/1 업데이트)
      • [엔터프라이즈] 카카오 픽셀 설치 가이드
      • [엔터프라이즈]정기결제(배송) API 화면가이드
      • [프로/엔터프라이즈] 쇼핑몰에 인스타그램 위젯을 적용해보세요!
      • [베이직/프로] 카카오싱크 신청 가이드
      • [웹훅 추가] 주문정보 웹훅(Webhook)이란?
      • [웹훅 추가] 회원정보 변경 및 회원탈퇴
      • [웹훅 추가] 앱 설치 및 삭제
      • shop by API, POSTMAN에 추가하기
      • [글로벌] 글로벌 기능 가이드
        • 사용 프로세스
          • 엑심베이 PG 계약
          • 개발 환경 세팅
          • shop by 어드민 세팅
          • 쇼핑몰 스킨 개발
            • 언어/통화 설정
            • 상품/전시 설정
            • 주문서 조회
            • 주문 예약하기
            • 회원 등록
        • 글로벌 주문/환불 프로세스
    • FAQ
      • 에러코드_ (1) 주문
      • 에러코드_ (2) 프로모션
      • 에러코드_ (3) 클레임
      • 쿠폰 코드 API 에러메시지 안내
      • 장바구니/주문결제 에러코드 안내
      • 배송타입 및 택배사코드 안내
      • 파트너어드민 매출내역 조회기준
      • shop api error response 안내
      • server API로 주문의 외부 유입경로 집계 방법
      • 은행코드 안내
      • 7/15 스킨 에디터 업데이트 주의사항
        • 모바일_업데이트 전 템플릿 코드
        • PC_업데이트 전 템플릿 코드
        • 업데이트 후/전 템플릿 코드 비교
      • [샵바이 엔터프라이즈] server API 호출방법
      • [샵바이 엔터프라이즈] 파트너 어드민에서 상품 노출은 미리 해두고, 판매 기간은 미래시점으로 설정할 수 있는 기능이 있을까요?
      • [샵바이 엔터프라이즈] 파트너사 담당MD 일괄변경 어떻게하나요?
Powered by GitBook
On this page
  • 상품진열 영역
  • '좋아요' 와 '장바구니' 기능
  • 좋아요(like-products) 버튼 구현
  • 장바구니(cart) 버튼 구현

Was this helpful?

  1. 오로라 개별형 스킨 개발 가이드
  2. 화면별 API 활용 가이드
  3. 메인 화면

상품진열 영역

쇼핑몰 메인페이지 화면 내 '상품진열' 영역에 대한 정책과 기능, 사용할 수 있는 API를 소개합니다.

Previous배너 영역Next인스타그램 연동

Last updated 11 months ago

Was this helpful?


상품진열 영역

상품진열 영역이란, 메인 페이지 내에서 특별한 목적에 따라 상품 리스트를 노출하기 위한 공간입니다. 최초 쇼핑몰 생성 시, 세팅되는 상품 진열명은 '신규상품, 인기상품, MD추천, HOT, EVENT'로 구성됩니다.

오로라 개별형 기본 스킨 메인 화면에는 플랫폼(PC, 모바일) 별로 각 5개의 상품진열이 설정되어 있습니다. 상품진열은 플랫폼별(PC, 모바일)로 설정이 가능하며, 스킨에 접속한 디바이스 구분에 따라 설정한 상품진열을 조회하여 노출합니다.

어드민(관리자)에서의 상품진열 영역관리

설정된 상품진열의 사용여부, 전시하고자 하는 상품 리스트 등 관련 설정은 아래 어드민 경로에서 관리할 수 있습니다.

shop by pro : 디자인 > 디자인 설정 > 상품 진열 관리
shop by premium: 전시관리 > 상품 진열 관리

쇼핑몰 노출 위치에 따른 5개의 진열 ID

기본 스킨에서는 설정된 상품진열을 진열ID(sectionId)로 조회하여 노출하고 있습니다.

기본으로 세팅되는 상품진열의 진열ID는 아래와 같습니다. 정해진 아래 진열ID를 소스 내 하드코딩하여 각 섹션의 위치를 구분할 수 있습니다.

  • PC : SCPC0001, SCPC0002, SCPC0003, SCPC0004, SCPC0005

  • Mobile: SCMO0001, SCMO0002, SCMO0003, SCMO0004, SCMO0005

► 진열번호 기준으로 상품진열 조회하기 상품 진열 번호(sectionNo)을 기준으로 상품 진열을 조회하는 API입니다.

진열번호(sectionNo): 상품진열 등록 시 부여되는 유일값으로 모든 상품진열에 존재하는 값입니다.

▶ 진열ID 기준으로 상품진열 조회하기 상품 진열ID(sectionId)을 기준으로 상품 진열을 조회하는 API입니다.

진열ID(sectionId): 진열번호 외에 다른 기준으로 호출이 필요할 경우 사용할 수 있는 값입니다. 어드민에서 쇼핑몰 별 중복체크를 지원하므로, 다른 쇼핑몰에서 사용하는 값으로 상품진열 ID를 사용하실 수 있습니다.

'추가'로 상품진열 등록하기

쇼핑몰 생성 시, 오로라 개별형 기본 스킨에는 기본으로 세팅되는 PC 5개, 모바일 5개의 상품진열코드만 반영이 되어 있습니다.

기본스킨에서 제공하는 상품진열 외에 추가로 노출하고자 할 경우, 어드민에서 상품 진열을 등록한 후 노출하고자 하는 상품진열의 번호 또는 ID로 조회하여 노출할 수 있습니다.

진열번호, 진열ID 모두 진열 별로 API를 호출하여 상품 리스트를 가져오기 때문에, 상품진열 개수 별로 각각 API호출을 진행하셔야 합니다. 즉, 기본 스킨에서는 상품진열 5개 SCPC0001 ~ SCPC0005를 모두 사용하기 때문에, 총 5번의 해당 API 호출이 발생합니다


'좋아요' 와 '장바구니' 기능

상품진열 내 전시된 상품에 대해 제공되는 '좋아요' 및 '장바구니' 기능을 소개합니다.

어드민내에서 상품을 전시하는 방식(=디스플레이 유형)에 따라 '좋아요' 및 '장바구니' 기능 제공 여부가 다릅니다.

디스플레이 유형 (PC/Mobile)

상품진열의 '디스플레이 유형'은 어드민에서 설정 가능합니다.

- shop by pro: 디자인> 디자인 설정> 상품 진열관리 
- shop by premium: 전시관리> 상품 진열관리

각 디스플레이 유형에 따라 가로 또는 세로 상품노출 개수는 고정되어 있으며, 고정되지 않은 방향의 상품 노출 개수만 어드민에서 설정 가능합니다.


좋아요(like-products) 버튼 구현

좋아요 기능은 일종의 위시리스트 개념으로, 해당 상품에 대한 단순 좋아요(like-products)를 표시할 수 있습니다. 따라서 주문서 페이지와 바로 연결하여 결제가 이루어지는 장바구니(cart)와 사용 목적이 구분됩니다.

좋아요 기능은 쇼핑몰 회원(member)의 경우에만 사용 가능하므로, 버튼 클릭 시 로그인 여부를 확인해야 합니다.

  • 비회원(guest)

    • 비회원의 경우 좋아요 기능을 지원하지 않습니다.

    • 좋아요 버튼 클릭 시 로그인 여부를 확인하여, 미로그인(비회원)시 서비스이용불가 안내창 노출 후 로그인 페이지로 현재창 이동해야 합니다.

  • 회원(member)

    • 로그인한 상태에서 좋아요 버튼 클릭 시, 아래 POST /profile/like-products를 호출합니다.

▶ 회원이 상품을 좋아한다고 추가/삭제하기 회원이 좋아요한 상품을 목록에 추가하거나 삭제합니다


장바구니(cart) 버튼 구현

선택한 상품을 옵션 단위로 장바구니에 추가하는 기능입니다. 상품진열 디스플레이 유형 중 'PC-리스트형', 'PC-장바구니형'인 경우에만 '장바구니' 버튼이 제공됩니다.

Ⓐ 장바구니 버튼

Ⓑ 상품 옵션 선택 레이어 팝업을 노출하기 위한 버튼입니다. 단, 성인 인증 상품일 경우 회원/비회원 여부를 확인하여 필요 시 로그인 화면으로 이동시켜야 합니다. 로그인 이후에는 성인 인증 여부를 확인하는 컨펌창이 필요합니다.

Ⓑ 상품 옵션 선택 레이어 팝업

참고로, Ⓑ상품 옵션을 선택할 수 있는 레이어 팝업이 출력되는 점을 제외하고 아래 안내 드릴 메인 페이지 내 Ⓒ '장바구니 담기 버튼' 호출 로직은 상품 상세화면 내 '장바구니 버튼' 호출 로직과 동일합니다

Ⓒ 장바구니 담기 버튼

장바구니 버튼 기능은 쇼핑몰 회원 여부와 상관없이 제공합니다. 단, 회원인 경우에만 API를 호출하며 비회원인 경우 API 호출이 아닌 localStorage에 자체적으로 저장합니다.

  • 회원(member)

    • 로그인한 상태에서 장바구니 담기 버튼 클릭 시, 아래 POST /cart를 호출하여 선택한 상품의 옵션이 장바구니에 추가됩니다.

▶ 장바구니 등록하기 로그인 회원의 상품 구매 수량과 옵션을 장바구니에 등록합니다.

  • 비회원(guest)

    • 비회원인 경우에도 장바구니 담기 버튼을 제공합니다.

    • 단, API 호출이 아닌 localStorage 내 비회원 장바구니 데이터를 자체적으로 관리해야 합니다.

    • localStorage에 비회원 장바구니 데이터 저장 시, POST /cart의 request body와 동일한 데이터 형식으로 저장해야 합니다. 이후 상품 상세화면 혹은 장바구니 화면에서 주문서 호출 시 request 형식을 통일하기 위한 목적입니다.

Ⓓ 바로구매 버튼

► 주문서 작성하기 선태한 상품의 옵션에 대한 주문서를 생성합니다.

해당 API로 좋아요가 적용된 상품은 내 '좋아요' 리스트에 추가됩니다.

오로라 개별형 기본 스킨에서는 장바구니 버튼 버튼 클릭 시, 상품 옵션을 선택할 수 있는 레이어 팝업이 출력됩니다. 상품 옵션 구현 방법은 의 '옵션' 항목과 동일하니, 해당 문서를 참고하시길 바랍니다.

바로구매 버튼 클릭 시 우선 로그인 여부를 확인하여, 만약 미로그인(비회원)일 경우 비회원 주문을 진행합니다. 로그인한 회원일 경우 아래 POST /order-sheets API로 주문서를 생성한 뒤 으로 이동합니다.

주문서를 생성하는 API로 주문서 화면으로 이동하기 전 단계에서 호출해야 합니다. 해당 API에서 응답 값으로 획득한 주문서 번호 orderSheetNo 를 으로 전달합니다. 비회원 주문인 경우 accessToken을 null로 보냅니다.

GET / display/sections/{sectionNo}
GET /display/sections/ids/{sectionId}
마이페이지_쇼핑정보
POST /profile/like-products
상품 상세화면
POST /cart
주문서 화면
POST /order-sheets
주문서 화면
'상품진열' 개념
좋아요 버튼 구현
장바구니 버튼 구현 (옵션 선택 팝업)
PC-리스트형
PC-장바구니형