Skip to main content
Summary 블록은 쇼핑객이 지불할 금액을 보여줘요: 선택적 절약 금액이 포함된 총액 행과 적용된 할인 태그들이에요. 체크아웃 버튼 바로 위에서 카트의 총액과 절약 금액을 요약하므로, 쇼핑객이 결정하기 전에 최종 금액을 볼 수 있어요.
체크아웃 전 소계, 절약 금액, 적용된 할인을 표시하는 Summary 블록

동작

  • 절약 토큰은 우아하게 접혀요. 셀이 {{savings}}{{pre_savings_price}}를 참조하는데 카트에 절약이 없으면, 해당 셀은 {{total_price}}만으로 폴백되므로 쇼핑객이 “$0.00 할인”이나 총액과 같은 취소선 가격을 보는 일이 없어요. 같은 셀에 {{cart_item_count}}{{savings}}를 함께 사용하면 절약이 없을 때의 폴백에서 상품 개수도 제거돼요 — 이를 피하려면 별도의 셀에 배치하세요.
  • 할인 태그는 Show discount codes가 켜져 있고 동시에 카트에 나열할 할인이 있을 때만 나타나요. 여기에는 코드 기반 할인과 자동 할인이 모두 포함돼요.

설정

텍스트 셀은 {{cart_item_count}}, {{total_price}}, {{pre_savings_price}}, {{savings}} 토큰을 지원해요.

배치 및 제한

  • 영역: 하단(bottom).
  • 최대: 카트 상태당 2개 — 채워진 카트와 빈 카트가 각각 별도의 허용량을 가져요.
  • 상태: 채워진 카트와 빈 카트 모두.
  • 새 카트에 기본으로 추가돼요. 잠겨 있지 않아 제거하거나 숨길 수 있어요.

커스텀 템플릿

Code 탭에서 커스텀 템플릿을 지원하며, 이 블록의 기본 마크업을 여러분의 JSX로 대체해요. 다음은 블록이 받는 props예요.
savings는 금액일 수도 백분율일 수도 있으므로, 한쪽을 가정한 문장을 직접 만들지 마세요. {props.savings} 단독은 안전하지만, You saved ${props.savings}는 안전하지 않아요.

디자인

설정 패널의 Design 섹션에서 이 블록의 스타일을 지정하세요. 이는 전역 디자인 위에 적용되는 블록별 오버라이드이며, 비워 두면 전역 디자인으로 폴백돼요. 디자인 설정이 무엇인가요? 여기서 자세히 알아보세요: 디자인 설정.