문서 / 기능 붙이기
Shop
정적 사이트에 장바구니와 결제를 붙입니다. 상품 담기 버튼과 카트 배지는 HTML 속성으로 선언하고, 카트·체크아웃 흐름은 @saeroon/shop-sdk 가 처리합니다.
배포 시 자동 연결
쇼핑 data-saeroon-* 속성이 있는 HTML을 배포하면 shop SDK 스크립트가 자동 주입됩니다. 공개 쇼핑 API는 사이트 slug 로 범위가 정해지므로, saeroon.config.json 에 siteSlug 가 있어야 합니다(신규 배포 시 자동 기록). 이 값은 스크립트 태그의 data-site-slug 로 주입되어 SDK가 사이트를 해석합니다. SDK 로더는 https://cdn.saeroon.com/sdk/shop/v1/loader.js 에서 제공됩니다.
npx @saeroon/cli deploy ./my-shop같은 사이트에 회원·게시판도 함께 쓴다면 배포 시 공개 키(--pk pk_live_…)를 넘겨야 합니다. 쇼핑만 쓰는 사이트는 공개 키가 필요 없습니다.
장바구니에 담기
담기 버튼에 data-saeroon-add-to-cart 를 붙이고, 상품을 GUID(data-product-id) 또는 slug(data-product-slug) 로 지정합니다.
<button data-saeroon-add-to-cart data-product-slug="rose-bouquet"
data-toast="장바구니에 담았습니다">담기</button>
<!-- 수량 입력과 연결 -->
<input id="qty" type="number" value="1" min="1" />
<button data-saeroon-add-to-cart data-product-id="00000000-0000-0000-0000-000000000000"
data-quantity-from="#qty">담기</button>- 수량은
data-quantity="<수>"로 고정하거나data-quantity-from="<선택자>"로 입력 요소와 연결합니다(기본 1). data-toast성공 문구,data-redirect로 담은 뒤 이동할 경로를 지정할 수 있습니다.
카트 배지와 오류 표시
<span data-saeroon-cart-count>0</span>
<div data-saeroon-shop-error></div>data-saeroon-cart-count 는 카트 수량이 바뀔 때마다 갱신됩니다. 담기에 실패하면 data-saeroon-shop-error 요소에 사유가 표시됩니다.
상품과 주문 관리
상품 등록·재고·가격과 주문 내역은 hosting 대시보드의 사이트 커머스 화면에서 관리합니다. 정적 사이트는 그 상품을 slug·GUID 로 참조해 담기·결제만 붙입니다.
속성 요약
| 속성 | 위치 | 뜻 |
|---|---|---|
data-saeroon-add-to-cart | 버튼 | 담기 동작(필수 마커) |
data-product-id / data-product-slug | 담기 버튼 | 대상 상품(둘 중 하나) |
data-quantity / data-quantity-from | 담기 버튼 | 수량 지정(선택) |
data-saeroon-cart-count | 임의 요소 | 카트 수량 배지 |
data-saeroon-shop-error | 임의 요소 | 오류 표시 위치 |
전체 속성 표는 Attributes를 참고하세요.
요약
정적 사이트에 장바구니와 결제를 붙입니다. 상품 담기 버튼과 카트 배지는 HTML 속성으로 선언하고, 카트·체크아웃 흐름은 @saeroon/shop-sdk 가 처리합니다.