Aftersell의 장바구니는 구성 가능한 장바구니 드로어 경험이에요. 두 가지 상태로 디자인하고, 세 가지 섹션에 걸쳐 배치하며, 그 섹션들을 블록으로 채워요.
모든 장바구니에는 두 개의 독립적인 레이아웃이 있어요. 에디터에서 이 둘을 전환할 수 있어요:
- 채워진 장바구니: 장바구니에 상품이 있을 때 쇼핑객이 보는 화면이에요.
- 빈 장바구니: 장바구니에 상품이 없을 때 쇼핑객이 보는 화면이에요.
일부 블록은 한 가지 상태에만 속해요:
다른 블록(헤더, 배너, 리워드, 이미지, 커스텀 코드 등)은 어느 상태에나 배치할 수 있어요. 새 장바구니는 빈 상태에서 헤더 + 빈 장바구니로, 채워진 상태에서 헤더 → 배너 → 장바구니 상품 → 요약 → 결제 버튼으로 시작해요.
빈 장바구니 상태는 빈 레이아웃 전체를 의미해요. 빈 장바구니 블록은 그 레이아웃 안의 블록 하나로, 보통 메시지와 쇼핑 계속하기 버튼이에요. 이름은 비슷하지만, 상태에는 그 블록 하나 이상을 담을 수 있어요.
각 상태는 Header, Body, Footer 세 개의 섹션으로 나뉘어요. 섹션은 블록의 위치와 스크롤 방식을 제어해요:
- Header: 드로어 상단에 고정되며, 본문이 스크롤되는 동안에도 계속 보여요.
- Body: 스크롤 가능한 중간 영역이에요. 여기의 블록은 콘텐츠와 함께 이동해요. 잠긴 블록: 장바구니 상품.
- Footer: 드로어 하단에 고정돼요. 잠긴 블록: 결제 버튼.
블록을 추가하거나 이동할 때, 해당 섹션이 스크롤 동작을 결정해요. 모든 블록을 모든 섹션에서 사용할 수 있는 것은 아니에요. 블록은 어떻게 작동하나요?를 참고하세요.
블록은 드로어를 구성하는 설정 가능한 요소예요(상품 목록, 업셀 오퍼, 결제 버튼 등). 섹션 안에 쌓고, 순서를 바꾸고, 스타일을 지정할 수 있어요. 블록 추가, 제한, 하위 블록, 조건이 어떻게 작동하는지는 블록은 어떻게 작동하나요?를 참고하세요.