할인 코드 블록

Discount code 블록은 구매자가 장바구니에서 프로모 코드를 입력하고 적용할 수 있는 입력란으로, 체크아웃을 진행하기 전에 할인이 반영된 것을 확인할 수 있어요.

동작 방식

적용 시 코드는 공백이 제거되고 대문자로 변환되어 Shopify에 제출돼요. Shopify는 코드의 유효 여부와 관계없이 요청을 수락하므로, 블록이 장바구니를 다시 확인해 코드가 실제로 적용되었는지 검증해요.
- 유효 → 필드가 지워지고 할인이 적용돼요.
- 유효하지 않음 → 블록에 “Invalid discount code.”가 표시돼요.
코드가 다른 할인(자동 할인, 다른 코드)과 중복 적용되는 방식은 전적으로 Shopify가 처리해요 — 블록은 코드만 적용해요.
적용된 코드는 여기가 아니라 Summary 블록에 표시돼요.

설정	제어 대상	기본값
Placeholder	입력란의 플레이스홀더 텍스트예요. 번역 가능해요.	`Discount code`
Button text	적용 버튼 라벨이에요. 번역 가능해요.	`Apply`

Code 탭에서 커스텀 템플릿을 지원하며, 이 블록의 기본 마크업을 여러분의 JSX로 대체해요. 다음은 템플릿이 받는 props예요.

Prop	타입	용도
`discountCodeInput`	`string`	입력란의 현재 값이에요.
`placeholder`	`string`	빈 입력란에 표시되는 플레이스홀더예요.
`buttonText`	`string`	적용 버튼의 라벨이에요.
`isValidating`	`boolean`	제출된 코드를 확인하는 동안 `true`예요. 이 값으로 제출 컨트롤을 비활성화하세요.
`isInvalid`	`boolean`	마지막으로 제출된 코드가 거부되었을 때 `true`예요.
`setDiscountCodeInput`	`(value: string) => void`	입력 값을 업데이트해요.
`handleSubmit`	`(event: Event) => void`	현재 코드를 제출해요.
`isLoading`	`boolean`	장바구니가 첫 데이터를 가져오는 동안 `true`예요.

setDiscountCodeInput과 handleSubmit을 모두 연결하세요. 첫 번째가 없으면 필드에 입력할 수 없고, 두 번째가 없으면 코드가 적용되지 않아요.

설정 패널의 Design 섹션에서 이 블록의 스타일을 지정하세요. 이는 전역 디자인 위에 적용되는 블록별 재정의이며, 비어 있으면 전역 디자인으로 대체돼요. 디자인 설정이 무엇인가요? 자세한 내용은 여기에서 알아보세요: 디자인 설정.