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

# فتح الدُرج من منشئ صفحات

> حالة استخدام لـ Cart SDK لجعل أزرار الإضافة إلى السلة في Replo وPageFly وGemPages والأزرار المخصصة تفتح دُرج سلة Aftersell.

تعترض 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. إذا تلت الإضافة نقرة أو ضغطة مفتاح حقيقية خلال نحو ثلاث ثوانٍ، فإنها تُعد بدافع من المتسوق، ويُفتح الدُرج وفقًا لإعدادك العادي **Open cart when an item is added**. أي منشئ يضيف عبر Ajax cart API الخاصة بـ Shopify (`/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`](/ar/aftersell/cart/sdk-configure#skip_add_to_cart_interceptor)، الذي يوقف الاعتراض لكل نموذج في الصفحة.

وأبسط من ذلك، إذا كان بإمكانك تعديل ترميز النموذج: أضف الفئة **`aftersell-cart-skip-atc`** إلى `<form>` وستتخطاه 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`      | خيار "الانتقال إلى السلة بعد الإضافة" في المنشئ لا يزال مفعّلًا. أوقفه.                                                                                             |
| يُفتح الدُرج لكنه يعرض محتويات قديمة | نُفّذ `open()` قبل أن يتحقق `refresh()`. اربطهما بـ `.then()`، كما في الأعلى.                                                                                       |
| لا يحدث شيء إطلاقًا                  | الإجراءات المستدعاة قبل تحميل السلة تحذّر في وحدة التحكم ولا تفعل شيئًا. غلّفها بـ `window.aftersell.cart.ready().then(…)` إذا كان يمكن النقر على الزر بهذه السرعة. |
| يعمل في صفحة دون أخرى                | معظم المنشئات تطبّق التفاعلات لكل صفحة. كرر الإعداد في كل صفحة.                                                                                                     |

تحقق من [`window.aftersellCartDebugEvents`](/ar/aftersell/cart/sdk-overview#debugging) إذا بدا أن استدعاءً لا يفعل شيئًا، لأن أعطال SDK تُبتلع بدلًا من أن تُلقى.

<div id="where-to-go-next">
  ## إلى أين تذهب بعد ذلك
</div>

* **[التهيئة](/ar/aftersell/cart/sdk-configure#open_on_background_add)**: `open_on_background_add` وخيارات الدُرج الأخرى.
* **[الإجراءات](/ar/aftersell/cart/sdk-actions)**: `refresh` و `open` و `addItem`.
* **[الخُطافات](/ar/aftersell/cart/sdk-hooks#registerskipaddtocartrule)**: استثناء نموذج واحد.