> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 장바구니 담기 가로채기

> Aftersell이 왜 장바구니 담기를 대신 처리하는지, 폼이 가로채이는지 확인하는 방법, 그리고 폼을 제외하는 모든 방법을 설명해요.

쇼핑객이 **Add to cart**를 클릭하면, 보통 테마가 아니라 Aftersell이 추가를 직접 처리해요. 이 페이지는 그 이유, 여러분이 추가한 스크립트에 어떤 의미가 있는지, 그리고 하나의 폼이나 모든 폼에 대해 이를 끄는 방법을 설명해요.

대부분의 스토어는 이 중 어떤 것도 변경할 필요가 없어요. 스크립트가 장바구니 담기에서 더 이상 실행되지 않거나, 장바구니 담기 버튼이 이상하게 동작한다면 계속 읽어 보세요.

## 가로채기가 하는 일

Aftersell은 테마보다 먼저 장바구니 담기 submit을 감지해요. 이를 인식하면 다음을 수행해요:

1. 이벤트를 멈춰서 페이지의 다른 어떤 것도 그 클릭을 처리하지 못하게 해요.
2. 추가를 Shopify로 직접 전송해요.
3. Aftersell Cart 드로어를 열어요.

1단계가 중요한 부분이고, 이 페이지가 존재하는 이유예요.

## 왜 존재하나요

가로채기가 없으면 두 장바구니가 모두 같은 클릭에 반응해요. 테마가 아이템을 추가하고 자체 드로어를 열고, Aftersell이 아이템을 추가하고 우리 드로어를 열어서, 쇼핑객은 두 개의 장바구니를 보게 되고 종종 아이템이 두 번 추가되어 있어요.

이벤트를 멈추는 것이 하나의 추가와 하나의 장바구니를 보장하는 가장 간단한 방법이에요.

## 대가는 무엇인가요

이벤트를 멈추면 테마뿐 아니라 **모든 사람**에게 멈춰요. 같은 장바구니 담기를 듣고 있던 다른 코드는 실행이 멈춰요: 여러분의 애널리틱스, 추적 픽셀, 구독 또는 번들 앱, 여러분이 직접 추가한 스크립트 등이요.

이는 조용히 실패해요. 브라우저 콘솔에는 아무것도 나타나지 않고 추가 자체는 여전히 작동하므로, 흔한 증상은 눈에 띄게 망가진 것이 아니라 숫자가 잘못되는 것이에요:

* GA4, Meta, TikTok에서 `add_to_cart` 이벤트가 누락돼요
* 상품 페이지에서는 작동하지만 장바구니를 통해서는 작동하지 않는 구독 또는 번들 앱
* 폼에 등록한 여러분의 `addEventListener`가 절대 발생하지 않아요

이 중 어느 것이든 익숙하게 들린다면, 이 페이지가 원인이고 해결책은 아래에 있어요.

## Aftersell이 가로채지 않을 때

가로채기가 항상 켜져 있는 것은 아니에요. Aftersell은 다음과 같은 경우 장바구니 담기를 그대로 두어요:

* **테마의 장바구니를 인식하는 경우.** Aftersell이 함께 작동하는 방법을 아는 테마에서는 이벤트를 차단하는 대신 테마 자체의 장바구니를 비활성 상태로 만든 뒤, 테마가 정상적으로 추가를 수행하도록 놔둬요. 여러분의 스크립트는 항상 그랬듯이 실행돼요. 아래의 [어떤 테마들](#which-themes-aftersell-recognizes)을 참고하세요.
* **폼이 라인 아이템을 추가하지 않는 경우.** 변형 `id`가 없고 `items[]`도 없는 폼은 그대로 두어요.
* **아래 방법 중 하나로 여러분이 옵트아웃한 경우.**

Aftersell이 추가를 수행하지 않을 때도, 여전히 장바구니 요청을 감시하다가 감지하면 드로어를 열어요. [선택하기 전에: 무엇이 바뀌나요](#before-you-choose-what-changes)를 참고하세요.

## Aftersell이 인식하는 테마

| 테마                         |                                                                                             |
| -------------------------- | ------------------------------------------------------------------------------------------- |
| **Dawn**과 Shopify 무료 테마 계열 | Craft, Colorblock, Crave, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste |
| **Horizon**                | Shopify의 현재 기본 테마                                                                           |
| **Impulse**                |                                                                                             |

Aftersell은 이름이 아니라 **테마가 어떻게 구축되었는지**를 기준으로 매칭하므로, 이 중 어느 것에서든 포크한 커스텀 테마는 보통 인식돼요. Aftersell이 한 번도 본 적 없는 비공개 빌드도 포함돼요.

<Note>
  반대의 경우도 발생해요: 크게 커스터마이즈된 빌드는 여전히 "Dawn"이라고 불리더라도 부모 테마에서 충분히 벗어나 Aftersell이 더 이상 인식하지 못할 수 있어요. 이 목록에 있다는 것은 인식이 확실하다는 것이 아니라 인식될 가능성이 높다는 뜻이에요.
</Note>

## 옵션

문제를 해결하는 가장 좁은 옵션을 선택하세요. 각 행은 위의 행보다 더 많은 것을 포기해요.

| 옵션                                                                   | 범위          | Aftersell이 여전히 드로어를 열어요 |
| -------------------------------------------------------------------- | ----------- | ----------------------- |
| [`registerSkipAddToCartRule`](#per-form-a-rule-in-code)              | 규칙이 선택한 폼   | 예, 장바구니 요청에서            |
| [`aftersell-cart-skip-atc`](#per-form-a-class-in-your-theme)         | 하나의 폼 또는 버튼 | 예, 장바구니 요청에서            |
| [`skip_add_to_cart_interceptor`](#whole-store-turn-interception-off) | 스토어의 모든 폼   | 예, 장바구니 요청에서            |

### 선택하기 전에: 무엇이 바뀌나요

옵트아웃하면 추가가 테마로 다시 넘어가는데, 이는 행을 선택하기 전에 답할 만한 두 가지 질문을 제기해요: 여러분의 장바구니가 여전히 열리는지, 그리고 테마의 장바구니가 그 옆에 나타나는지 여부예요.

#### 여러분의 장바구니가 여전히 열리나요?

보통은 여러분 쪽에서 아무것도 하지 않아도 열려요. 누가 추가를 수행하든, Aftersell은 Shopify로 가는 요청을 감시하다가 감지하면 평소의 **Open cart when an item is added** 설정에 따라 드로어를 열어요. 직접 아무것도 호출할 필요가 없어요.

이를 깨뜨리는 세 가지 상황이 있는데, 세 가지 모두 해결책이 있어요:

**추가가 Shopify의 장바구니 엔드포인트가 아닌 다른 곳으로 가는 경우.** Aftersell은 여러분 도메인의 `/cart/add`, `/cart/change`, `/cart/update`, `/cart/clear`를 감시해요. 자체 엔드포인트로 추가한 다음 나중에 장바구니를 동기화하는 앱은 이것에 보이지 않아요. 해당 앱의 추가가 끝난 후 직접 장바구니를 여세요:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});
```

**클릭과 요청 사이에 약 3초 이상이 경과하는 경우.** Aftersell은 실제 클릭이나 키 입력을 바로 뒤따르는 추가를 쇼핑객이 발생시킨 것으로 처리해요. 그 시간을 벗어나면 백그라운드 추가로 간주되는데, 이는 옵트인하지 않는 한 드로어를 열지 않아요:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ open_on_background_add: true });
```

**장바구니 설정이 열지 않도록 되어 있는 경우.** **Open cart when an item is added**가 꺼져 있거나 `open_on_add_to_cart: 'never'`로 설정한 경우 아무것도 드로어를 열지 않아요. 이는 설정한 대로 작동하는 것이에요.

#### 테마의 장바구니도 열리나요?

이것이 옵트아웃이 안고 있는 위험이고, 답은 여러분의 테마에 달려 있어요.

테마의 장바구니를 비활성 상태로 만드는 것은 **가로채기와는 별개**이고 어떤 경우든 페이지 로드 시에 발생하므로, 여기 있는 옵트아웃 중 어느 것도 이를 다시 켜지 않아요. [인식되는 목록](#which-themes-aftersell-recognizes)의 테마에서는 테마 자체의 장바구니가 조용히 유지되고 쇼핑객은 하나의 장바구니, 즉 여러분의 장바구니만 봐요.

Aftersell이 인식하지 못하는 테마에서는 테마의 장바구니를 막는 것이 없어요. 옵트아웃하면 테마가 항상 그래왔던 그대로 추가를 처리하며, 여기에는 자체 드로어를 열거나 `/cart`로 리디렉션하는 것이 포함돼요. 그동안 Aftersell은 자신이 본 요청에서 드로어를 열어요. 그것이 두 개의 장바구니이고, 가로채기가 처음부터 존재하는 이유예요.

그런 상황이 발생하면 세 가지 선택지가 있어요: 그 폼에 대해 가로채기를 켜 둔 채로 두거나, 원인이 되는 폼을 포함하지 않는 더 좁은 옵트아웃을 사용하거나, 테마 코드에서 직접 테마의 자체 장바구니를 멈추는 것이에요.

<Tip>
  옵트아웃은 먼저 테스트나 게시되지 않은 테마에서 켜 보세요. 이전에는 나타나지 않던 테마의 자체 장바구니가 나타난다면, 여러분의 테마는 Aftersell이 인식하는 테마가 아니고, 그 폼들에 대해서는 가로채기를 켜 두는 게 좋아요.
</Tip>

<Note>
  이는 장바구니 담기에만 적용돼요. `aftersell-cart-wont-open-cart` 클래스로 **장바구니 아이콘**이 Aftersell을 우회하도록 만드는 것은 다른 문제예요: 장바구니 아이콘 클릭은 요청을 보내지 않으므로 Aftersell이 감시할 것이 없고, 드로어가 열리지 않아요. 아래를 참고하세요.
</Note>

### 폼별: 코드로 된 규칙

권장되는 옵션이에요. 그대로 두고 싶은 폼에 대해 `true`를 반환하는 규칙을 등록하세요:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
  form.hasAttribute('data-skip-aftersell')
);
```

**Cart settings → Custom script → Initialization**에 넣으세요. 규칙은 누적 방식이에요: 여러분의 규칙은 다른 규칙들과 함께 실행되고, `true`를 반환하는 규칙이 하나라도 있으면 그 폼을 건너뛰어요. 자세한 내용은 [훅](/ko/aftersell/cart/sdk-hooks#registerskipaddtocartrule)을 참고하세요.

### 폼별: 테마에 클래스 추가

규칙을 작성하고 싶지 않다면, 테마에 `aftersell-cart-skip-atc` 클래스를 추가하세요:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<form action="/cart/add" method="post" class="aftersell-cart-skip-atc">
```

<Note>
  폼 submit의 경우, 클래스는 **폼 요소 자체**에 있어야 해요. 부모 `div`에서는 작동하지 않아요. 폼 submit 없이 장바구니에 추가하는 버튼의 경우, 클래스는 버튼이나 그 주위의 어떤 요소에든 있을 수 있어요.
</Note>

### 스토어 전체: 가로채기 끄기

무딘 옵션이에요. 모든 폼에서 장바구니 담기가 테마가 원래 하던 그대로 동작해요:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ skip_add_to_cart_interceptor: true });
```

<Warning>
  이 옵션은 **장바구니가 로드될 때 한 번만** 읽혀요. 장바구니의 **Initialization** 스크립트에서만 작동해요. 나중에 `ready()` 안이나 이벤트 핸들러에서 설정하면 아무 효과가 없고 조용히 실패해요.
</Warning>

폼별 옵션이 맞지 않을 때만 이 옵션을 사용하세요. 예를 들어 제외해야 할 폼이 다른 앱에 의해 생성되어 안정적으로 식별할 수 없는 경우예요.

## 장바구니 아이콘은 별개예요

헤더의 장바구니 아이콘은 자체 옵트아웃이 있는 자체 인터셉터가 처리해요. 장바구니 담기 가로채기를 끄더라도 장바구니 아이콘이 하는 일은 바뀌지 않고, 그 반대도 마찬가지예요.

장바구니 아이콘을 클릭하면 `/cart`로 가는 대신 Aftersell 드로어가 열려요. 아이콘이나 버튼 하나를 그대로 두려면, 아이콘이나 그 주위의 어떤 요소에든 `aftersell-cart-wont-open-cart` 클래스를 추가하세요:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<a href="/cart" class="aftersell-cart-wont-open-cart">Cart</a>
```

그러면 그 컨트롤은 테마가 원래 하던 대로 동작해요. 보통은 장바구니 페이지로 이동해요. Aftersell은 완전히 개입하지 않게 되므로 **드로어가 열리지 않아요**. 장바구니 담기와 달리 감시할 요청이 없어서, 그 컨트롤에서 장바구니가 열리기를 원한다면 직접 지정해야 해요:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});
```

여기에도 같은 무음화 문제가 적용돼요: Aftersell이 클릭을 멈추기 때문에 여러분의 애널리틱스와 픽셀도 장바구니 아이콘 클릭을 보지 못해요. 그것만 해결하면 되는 경우, 드로어는 유지하면서 무음화를 멈추세요:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ skip_open_cart_interceptor: true });
```

리스너가 실행되고, 드로어는 여전히 열리고, 클릭이 `/cart`로 이동하지도 않아요. 자세한 내용은 [Configure](/ko/aftersell/cart/sdk-configure#skip_open_cart_interceptor)를 참고하세요.

<Note>
  요소를 끄는 대신 *어떤* 요소가 장바구니를 여는지 변경하려면, 테마를 편집하는 대신 **Cart settings → Advanced → Cart icon selector**를 사용하세요.
</Note>

## 다음 단계

* **[Configure](/ko/aftersell/cart/sdk-configure)**: 여기 언급된 옵션을 포함한 모든 SDK 옵션이에요.
* **[훅](/ko/aftersell/cart/sdk-hooks)**: 폼별, 라인별 제어예요.
* **[페이지 빌더에서 드로어 열기](/ko/aftersell/cart/sdk-use-case-page-builder)**: Replo, PageFly, GemPages, 그리고 자체적인 방식으로 장바구니에 추가하는 커스텀 버튼용이에요.