헤더 블록

헤더(Header) 블록은 장바구니 드로어의 고정된 상단 영역으로, 드로어에 명확한 제목과 닫는 방법을 분명하게 제공해요. Title, Logo, Close button을 왼쪽과 오른쪽 섹션에 할당하여 레이아웃을 제어할 수 있어요. 헤더는 상단에 고정되어 있어, 장바구니의 나머지 부분이 스크롤되는 동안에도 계속 보여요.

• 헤더는 드로어 상단에 고정되며 장바구니 본문과 함께 스크롤되지 않아요.
• 닫기 컨트롤은 항상 사용할 수 있으며 드로어를 닫아요.

제목은 번역이 가능해요. 제목이 비어 있게 되면(예: 설정되지 않은 번역), 장바구니는 헤더가 비어 보이지 않도록 Cart를 대신 표시해요. 요소는 선택한 순서대로 왼쪽에서 오른쪽으로 나타나며, 각 요소는 한 번에 하나의 섹션에만 할당할 수 있어요.

• 영역: 상단(top) 전용.
• 최대: 장바구니 상태당 1개.
• 상태: 채워진 장바구니와 빈 장바구니(각 상태마다 자체 헤더 인스턴스가 있어요).
• 두 상태 모두에서 새 장바구니에 기본으로 추가돼요. 잠겨 있지 않으므로 눈 모양 토글로 제거하거나 숨길 수 있어요.

코드(Code) 탭에서 커스텀 템플릿을 지원하며, 이 블록의 기본 마크업을 여러분의 JSX로 대체해요. 이 블록이 받는 props는 다음과 같아요. 설정 패널의 Design 섹션에서 이 블록의 스타일을 지정하세요. 이는 전역 디자인 위에 적용되는 블록별 재정의이며, 비워 두면 전역 디자인으로 대체돼요. Design의 Text 섹션에서 장바구니 제목의 타이포그래피를 제어할 수 있어요. 굵기와 텍스트 색상은 (Settings 탭의) 위쪽 리치 텍스트 에디터에서 설정하며, 이곳에서 설정하지 않아요. 디자인 설정이 무엇인가요? 자세한 내용은 여기에서 확인하세요: 디자인 설정.