> ## 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.

# 페이지 빌더에서 드로어 열기

> Replo, PageFly, GemPages 및 커스텀 장바구니 담기 버튼이 Aftersell Cart 드로어를 열도록 만드는 Cart SDK 사용 사례예요.

Aftersell은 표준 Shopify 상품 폼의 장바구니 담기를 가로채요. 랜딩 페이지 빌더는 종종 폼 제출 대신 JavaScript 호출을 사용해 자체 방식으로 카트에 추가하기 때문에, 상품은 카트에 담기지만 드로어는 닫힌 채로 있거나 쇼핑객이 `/cart`로 리디렉션돼요.

<div id="the-fix-in-one-line">
  ## 한 줄로 해결하기
</div>

빌더의 장바구니 담기가 완료된 후, 카트에 다시 가져와서 열라고 지시하세요:

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

빌더 자체의 "장바구니 담기" 이후 버튼의 **두 번째 액션**으로 추가하고, 빌더의 "카트로 이동" 또는 "추가 후 리디렉션" 옵션을 끄세요.

<Note>
  먼저 [`open_on_background_add`](#the-no-code-option-first)를 시도해 보세요. 버튼을 전혀 건드리지 않고도 문제가 해결되는 경우가 많아요.
</Note>

<div id="the-no-code-option-first">
  ## 노코드 옵션 먼저
</div>

Aftersell은 자신이 처리하지 않은 추가를 두 가지 방식으로 감지해요. 둘 다 항상 실행되며 — 부팅 시 함께 연결되고 어느 쪽도 다른 쪽을 억제하지 않으므로 하나의 추가가 양쪽 모두에서 알려질 수 있어요 — 각 알림은 열기 규칙을 독립적으로 적용해요:

* **네트워크 요청 감시.** Aftersell은 Shopify의 카트 엔드포인트로 향하는 요청을 감시해요. 추가가 실제 클릭이나 키 입력 후 약 3초 이내에 이루어졌다면 쇼핑객이 주도한 것으로 간주되어, 일반적인 **Open cart when an item is added** 설정에 따라 드로어가 열려요. Shopify의 Ajax 카트 API(`/cart/add.js`)를 통해 추가하는 모든 빌더가 여기에 해당하며, 이것이 일반적인 경우예요 — 그러니 먼저 버튼을 테스트해 보세요. 아무 변경 없이 이미 작동할 수도 있어요.
* **[Shopify의 표준 카트 이벤트](https://shopify.dev/docs/storefronts/themes/best-practices/standard-events).** 이 방식으로 알려진 추가는 쇼핑객의 클릭 여부와 관계없이 항상 *백그라운드* 추가로 처리돼요. 백그라운드 추가는 옵트인하지 않는 한 드로어를 열지 않아요:

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

이 코드를 **Cart settings → Custom script → Initialization**에 붙여넣으세요. 이제 빌더의 추가 버튼 이후 드로어가 열린다면 끝이에요. 버튼별 작업이 필요 없고 모든 페이지에 적용돼요.

<Note>
  `open_on_background_add`는 쇼핑객의 제스처가 전혀 없는 추가도 포함해요 — 다른 앱이나 스크립트가 카트에 쓰는 경우요. 그런 경우에도 드로어가 열리길 원할 때만 켜세요.
</Note>

두 경로 모두 드로어를 열지 못하면, 아래의 명시적 호출로 대체하세요.

<div id="per-builder-setup">
  ## 빌더별 설정
</div>

<div id="replo">
  ### Replo
</div>

1. Replo 에디터에서 페이지를 열고 **Add to Cart** 버튼을 선택하세요.

2. 오른쪽 사이드바에서 **Interactions** 탭을 여세요.

3. **On Click** 아래에서 `+`를 클릭하고 **Run JavaScript**를 선택하세요.

4. 다음을 붙여넣으세요:

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

5. **Add Product to Cart** 인터랙션을 다시 선택하고 \*\*Go to cart after?\*\*를 끄세요.

6. 미리보기에서 드로어가 열리는지 확인한 뒤 게시하세요.

장바구니 담기 버튼이 있는 각 페이지에서 반복하세요.

<div id="pagefly-and-gempages">
  ### PageFly와 GemPages
</div>

둘 다 버튼 클릭에 커스텀 JavaScript를 연결하거나 페이지에 커스텀 코드 요소를 추가할 수 있어요. 같은 스니펫을 빌더의 장바구니 담기 액션 이후에 실행되도록 연결하고, 버튼의 "카트로 리디렉션" 설정을 비활성화하세요.

<div id="your-own-button">
  ### 직접 만든 버튼
</div>

직접 카트에 추가하는 경우라면 왕복 과정을 건너뛰고, 카트를 업데이트하고 한 단계로 드로어를 열 수 있는 SDK 자체 액션을 사용하세요:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
document.querySelector('#my-add-button').addEventListener('click', () => {
  window.aftersell.cart.actions.addItem(VARIANT_ID, 1).then(() => {
    window.aftersell.cart.actions.open();
  });
});
```

`refresh()`는 *다른 무언가*가 카트를 변경했고 Aftersell이 따라잡아야 할 때만 사용하세요:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
fetch('/cart/add.js', { method: 'POST', /* … */ })
  .then(() => window.aftersell.cart.actions.refresh())
  .then(() => { window.aftersell.cart.actions.open(); });
```

<div id="when-the-builders-button-should-bypass-aftersell-entirely">
  ## 빌더 버튼이 Aftersell을 완전히 우회해야 할 때
</div>

때로는 그 반대가 필요해요: 폼에 자체 흐름이 필요한데 Aftersell의 가로채기가 방해가 되는 경우예요. 해당 폼만 제외하세요:

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

그런 다음 폼에 `data-skip-aftersell`을 추가하세요. 이 방법이 페이지의 모든 폼에 대해 가로채기를 끄는 [`skip_add_to_cart_interceptor`](/ko/aftersell/cart/sdk-configure#skip_add_to_cart_interceptor)보다 나아요.

폼의 마크업을 편집할 수 있다면 더 간단하게: `<form>`에 **`aftersell-cart-skip-atc`** 클래스를 추가하면 Aftersell이 건너뛰어요. 스크립트가 필요 없어요.

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

<div id="troubleshooting">
  ## 문제 해결
</div>

| 증상                            | 가능성이 높은 원인                                                                                                     |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------- |
| 상품은 추가되었지만 드로어가 닫힌 채로 있음      | 빌더가 Shopify의 표준 카트 이벤트를 발생시키지 않아요. 명시적인 `refresh()` + `open()` 호출을 사용하세요.                                      |
| 쇼핑객이 `/cart`로 리디렉션됨           | 빌더의 "추가 후 카트로 이동" 옵션이 아직 켜져 있어요. 끄세요.                                                                          |
| 드로어가 열리지만 오래된 내용이 표시됨         | `refresh()`가 resolve되기 전에 `open()`이 실행되었어요. 위와 같이 `.then()`으로 체이닝하세요.                                          |
| 아무 일도 일어나지 않음                 | 카트 로드 전에 호출된 액션은 콘솔에 경고를 남기고 아무것도 하지 않아요. 버튼이 그렇게 일찍 클릭될 수 있다면 `window.aftersell.cart.ready().then(…)`으로 감싸세요. |
| 어떤 페이지에서는 작동하지만 다른 페이지에서는 안 됨 | 대부분의 빌더는 인터랙션을 페이지별로 적용해요. 각 페이지에서 설정을 반복하세요.                                                                  |

호출이 아무 일도 하지 않는 것 같으면 [`window.aftersellCartDebugEvents`](/ko/aftersell/cart/sdk-overview#debugging)를 확인하세요. SDK 실패는 throw되지 않고 내부에서 처리되기 때문이에요.

<div id="where-to-go-next">
  ## 다음 단계
</div>

* **[Configure](/ko/aftersell/cart/sdk-configure#open_on_background_add)**: `open_on_background_add`와 기타 드로어 옵션.
* **[Actions](/ko/aftersell/cart/sdk-actions)**: `refresh`, `open`, `addItem`.
* **[Hooks](/ko/aftersell/cart/sdk-hooks#registerskipaddtocartrule)**: 단일 폼 제외하기.