Skip to main content
체크아웃 버튼 아래에 체크박스를 추가하고 쇼핑객이 체크할 때까지 진행을 막으세요. 약관 동의, 연령 확인, 주문 제작 확인 등에 유용해요.
checkout 이벤트는 체크아웃을 취소할 수 없어요. 브라우저가 이동하기 직전에 알림으로 발생하므로 false를 반환하거나 preventDefault를 호출해도 아무 효과가 없어요. 체크아웃을 게이트하는 유일한 방법은 버튼이 눌리기 전에 클릭에 반응하지 않게 만드는 것이며, 이 페이지가 보여주는 방법이 바로 그거예요.이것은 법적 보장이 아니라 UI 차원의 억제 수단으로 여기세요. 마음먹은 쇼핑객은 여전히 체크아웃에 직접 도달할 수 있어요.

작동 방식

세 가지 요소로 구성돼요:
  1. 체크아웃 버튼 아래의 커스텀 코드 블록이 체크박스를 렌더링해요.
  2. 체크박스가 비어 있는 동안, 블록이 shadow root를 통해 카트의 체크아웃 및 간편 결제 버튼에 클래스를 추가해요.
  3. 커스텀 CSS가 그 클래스로 클릭을 비활성화해요.

1단계: 체크박스 블록 추가하기

Checkout 버튼 블록 아래에 커스텀 코드 블록을 추가하고, React component 모드로 전환한 뒤 붙여넣으세요:
Compile을 클릭한 다음 **“Use custom template”**을 켜세요. 그렇게 하기 전까지 블록은 아무것도 렌더링하지 않아요. props.cart 의존성이 중요해요: 카트가 재렌더링된 후 클래스를 다시 적용해 주는데, 그렇지 않으면 클래스가 지워져요.

2단계: CSS 추가하기

Cart settings → Custom CSS에서:
pointer-events: none이 실제로 클릭을 차단하는 부분이에요; opacity는 쇼핑객에게 이유를 보여줄 뿐이에요.

3단계: 테스트하기

미리보기에서 다음을 확인하세요:
  • 로드 시 체크아웃 버튼이 흐리게 표시되고 클릭에 반응하지 않아요.
  • 체크박스를 체크하면 활성화되고, 해제하면 버튼이 다시 비활성화돼요.
  • 간편 결제 버튼도 게이트돼요.
  • 체크박스가 비어 있는 동안 상품을 추가하거나 제거해도 버튼이 다시 활성화되지 않아요.
마지막 항목이 흔한 실패 지점이에요. 카트 변경 후 버튼이 스스로 다시 활성화된다면, effect가 다시 실행되지 않는 거예요. props.cart가 의존성 배열에 있는지 확인하세요.

누가 동의했는지 추적하기

체크박스는 브라우저 전용 상태라 주문에 절대 도달하지 않아요. 동의를 기록하려면 장바구니 담기 시점에 모든 라인에 속성으로 찍으세요:
이것을 테마의 상품 폼에 추가하세요. Shopify는 properties[...]를 폼에서 바로 읽으므로, 누가 추가를 수행하든(Aftersell, 테마, 또는 다른 앱) 값이 주문에 도달해요. _ 접두사가 붙은 속성은 구매자에게 표시되는 라인에서는 빠지지만 Shopify에는 도달하므로 주문에 나타나요. 이것은 쇼핑객이 체크박스를 체크했다는 사실이 아니라, 어떤 약관 버전이 적용 중이었는지를 기록해요.

제대로 처리해야 할 것들

  • cart-external-* 클래스만 대상으로 하세요. cart-internal-* 쌍둥이는 카트 자체의 내부 구조이지, 여러분의 코드를 위한 핸들이 아니에요. 커스텀 CSS를 참고하세요.
  • 사용 전에 shadowRoot가 존재하는지 확인하세요. 카트가 부팅될 때까지 undefined예요.
  • 카트가 로드될 때까지 블록은 아무것도 렌더링하지 않으므로, 게이트가 적용되기 전에 체크아웃 버튼이 잠깐이라도 활성화되는 일은 없어요.
  • throw하는 React 블록은 아무것도 렌더링하지 않고 카트의 나머지 부분은 계속 작동하는데, 여기서는 게이트되지 않은 체크아웃 버튼을 의미해요. 게시 전에 미리보기에서 테스트하세요.

다음 단계