커스텀 코드 블록

Custom code 블록은 직접 만든 HTML 또는 React를 장바구니에 추가해요. 드로어의 어느 섹션에나 배치하거나, Cart items 안에 하위 블록으로 중첩해 각 라인마다 반복되도록 할 수 있어요. 다른 블록과 달리 Content 설정과 Design 섹션이 없어요: 블록 자체가 코드이므로 Code 탭에서만 작업해요.

1. Custom code 블록을 아무 섹션에나 추가하거나, Cart items 아래 하위 블록으로 추가하세요.
2. 블록을 선택하고 Code 탭을 여세요.
3. HTML 또는 React component를 선택하세요. 새 블록의 기본값은 HTML이에요.
4. 코드를 작성하세요.
5. React를 선택했다면 Compile을 클릭하세요.
6. **“Use custom template”**을 켜세요. 이 블록에서 이 스위치는 “내 커스텀 코드를 표시”를 의미하며, 기본적으로 꺼져 있으므로 활성화하기 전까지 아무것도 렌더링되지 않아요.
7. 블록이 구매자에게 계속 표시되도록 사이드바 눈 모양 토글을 켜 두세요.

• 블록은 장바구니가 로드될 때까지 아무것도 렌더링하지 않아요.
• 사이드바 눈이 꺼져 있거나, **“Use custom template”**이 꺼져 있거나, 코드가 비어 있거나, React 컴파일 또는 렌더링이 실패해도 아무것도 렌더링하지 않아요. 실패가 조용히 처리되므로 게시하기 전에 미리보기에서 블록을 확인하세요.

• 인라인 <script> 태그는 실행되지 않으며, HTML 모드는 SDK나 window에 접근할 수 없어요.
• 로직이 필요하면 React 모드나 Cart SDK를 활용한 커스텀 스크립트를 사용하세요.

<div class="cart-external-custom-code_html">
  You saved {{savings_amount}} ({{savings_percentage}})
</div>

• 에디터는 래퍼를 function CustomCode(props: CustomCodeProps) { … }로 고정하며, 그 사이의 본문만 편집할 수 있어요.
• 블록이 표시되려면 Compile을 클릭한 다음 **“Use custom template”**을 켜야 해요.
• 컴포넌트에서 useState, useEffect, useMemo, useRef, useCallback을 사용할 수 있어요.
• HTML 모드와 달리 React는 페이지 컨텍스트에서 실행되므로, 사용 가능한 경우 window와 Cart SDK를 호출할 수 있어요.
• 컴포넌트가 런타임에 오류를 발생시키면 블록은 아무것도 렌더링하지 않고 장바구니의 나머지 부분은 계속 작동해요.

• line은 Cart items 하위 블록에서만 설정되며, 이때 컴포넌트가 라인마다 한 번 렌더링돼요. 섹션에 배치되면 line은 null이고 대신 cart.items를 읽으세요.
• 번들 자식은 cart.items에 없어요. 라인이 번들로 그룹화되면 앵커 라인만 나타나고, 자식은 line.bundle.children에 있어요.
• 라인 변환으로 숨겨진 라인도 거기에 없지만, 여전히 cart.totalPrice에는 포함돼요.

function CustomCode(props) {
  return (
    <div className="cart-external-custom-code_jsx">
      {props.cart.itemCount} items
    </div>
  );
}

function CustomCode(props) {
  if (!props.line) return null;
  return (
    <div className="cart-external-custom-code_jsx">
      {props.line.productTitle}
      {props.line.variantTitle ? ` · ${props.line.variantTitle}` : ''}
    </div>
  );
}

function CustomCode(props) {
  return (
    <ul>
      {(props.cart.items ?? []).map((item) => {
        const note = item.metadata?.shipping?.shippingNote;
        return (
          <li key={item.key}>
            {item.title}
            {note ? ` · ${note.value}` : ''}
          </li>
        );
      })}
    </ul>
  );
}

function CustomCode(props) {
  const codes = props.cart.discountCodes;
  return (
    <div>
      {codes.length > 0 && (
        <p>Active discounts: {codes.join(', ')}</p>
      )}
      <ul>
        {(props.cart.items ?? []).map((item) => {
          return (
            <li key={item.key}>
              {item.title}
              {item.discountAllocations.map(
                (discount) => ` · ${discount.title} (-${(discount.amount / 100).toFixed(2)})`
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

• 영역: 모든 위치(상단, 본문, 하단). Cart items 하위 블록으로도 사용할 수 있어요.
• 최대 개수: 무제한.
• 상태: 채워진 장바구니와 빈 장바구니(섹션 블록일 때). Cart items 하위 블록일 때는 장바구니에 라인이 있을 때만 렌더링되며, 라인마다 하나의 인스턴스가 렌더링돼요.
• 잠겨 있지 않으므로 제거하거나 숨길 수 있어요.
• 블록별 Design 섹션이 없어요. 직접 만든 마크업, 커스텀 CSS, 전역 디자인 설정으로 스타일을 지정하세요.