작동 방식
- 체크아웃 버튼 아래의 커스텀 코드 블록이 체크박스를 렌더링해요.
- 체크박스가 비어 있는 동안, 블록이 shadow root를 통해 카트의 체크아웃 및 간편 결제 버튼에 클래스를 추가해요.
- 커스텀 CSS가 그 클래스로 클릭을 비활성화해요.
1단계: 체크박스 블록 추가하기
props.cart 의존성이 중요해요: 카트가 재렌더링된 후 클래스를 다시 적용해 주는데, 그렇지 않으면 클래스가 지워져요.
2단계: CSS 추가하기
pointer-events: none이 실제로 클릭을 차단하는 부분이에요; opacity는 쇼핑객에게 이유를 보여줄 뿐이에요.
3단계: 테스트하기
- 로드 시 체크아웃 버튼이 흐리게 표시되고 클릭에 반응하지 않아요.
- 체크박스를 체크하면 활성화되고, 해제하면 버튼이 다시 비활성화돼요.
- 간편 결제 버튼도 게이트돼요.
- 체크박스가 비어 있는 동안 상품을 추가하거나 제거해도 버튼이 다시 활성화되지 않아요.
props.cart가 의존성 배열에 있는지 확인하세요.
누가 동의했는지 추적하기
properties[...]를 폼에서 바로 읽으므로, 누가 추가를 수행하든(Aftersell, 테마, 또는 다른 앱) 값이 주문에 도달해요.
_ 접두사가 붙은 속성은 구매자에게 표시되는 라인에서는 빠지지만 Shopify에는 도달하므로 주문에 나타나요. 이것은 쇼핑객이 체크박스를 체크했다는 사실이 아니라, 어떤 약관 버전이 적용 중이었는지를 기록해요.
제대로 처리해야 할 것들
cart-external-*클래스만 대상으로 하세요.cart-internal-*쌍둥이는 카트 자체의 내부 구조이지, 여러분의 코드를 위한 핸들이 아니에요. 커스텀 CSS를 참고하세요.- 사용 전에
shadowRoot가 존재하는지 확인하세요. 카트가 부팅될 때까지undefined예요. - 카트가 로드될 때까지 블록은 아무것도 렌더링하지 않으므로, 게이트가 적용되기 전에 체크아웃 버튼이 잠깐이라도 활성화되는 일은 없어요.
- throw하는 React 블록은 아무것도 렌더링하지 않고 카트의 나머지 부분은 계속 작동하는데, 여기서는 게이트되지 않은 체크아웃 버튼을 의미해요. 게시 전에 미리보기에서 테스트하세요.