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

# Upcart x منشئ صفحات الهبوط Replo

> يشرح هذا المقال كيفية إعداد Replo لفتح درج Upcart عند إضافة منتج إلى السلة.

Replo هو منشئ صفحات هبوط قوي، لكن سلوك "Add to Cart" الافتراضي فيه يعيد التوجيه إلى صفحة سلة Shopify. هذا يقطع تجربة Upcart المقصودة، التي تستخدم درجًا منزلقًا.

باستخدام مقتطف JavaScript بسيط، يمكنك أن تطلب من Replo إخطار Upcart عند إضافة منتج، مما يُبقي العميل على الصفحة نفسها ويفتح الدرج فورًا.

يوضح هذا كيف يمكن استخدام JavaScript ليس فقط لتكامل Upcart بل أيضًا لتخصيص أوسع للسلة في متجرك.

***

<div id="why-this-integration-matters">
  ## لماذا يهم هذا التكامل
</div>

بشكل افتراضي، يدعم Replo عدة سلوكيات بعد الإضافة إلى السلة:

* إعادة التوجيه إلى صفحة سلة Shopify
* إعادة التوجيه إلى الدفع (checkout)
* البقاء على الصفحة (بدون تفاعل مع الدرج)

لا يفتح Upcart تلقائيًا ما لم تقم بتشغيله صراحةً. يضمن هذا الإعداد فتح الدرج فور النقر على زر "Add to Cart" في Replo.

***

<div id="step-1-open-the-product-page-in-replo">
  ## الخطوة 1: افتح صفحة المنتج في Replo
</div>

1. افتح صفحة المنتج أو صفحة الهبوط في محرر Replo
2. حدد زر **Add to Cart** في تخطيط الصفحة
3. في الشريط الجانبي الأيمن، انقر على علامة التبويب **Interactions**

<img src="https://mintlify.s3.us-west-1.amazonaws.com/aftersell/images/upcart/replo-editor-interactions-on-click.gif" alt="علامة التبويب Interactions في محرر Replo مع إضافة تفاعل On Click إلى زر Add to Cart" />

<div id="step-2-add-a-second-interaction">
  ## الخطوة 2: أضف تفاعلاً ثانيًا
</div>

1. تأكد من أن الزر يستخدم بالفعل تفاعل **Add Product to Cart**
2. انقر على أيقونة `+` أسفل **On Click**
3. من قائمة الإجراءات، اختر **Run JavaScript**
4. في حقل إدخال الكود، الصق ما يلي:
   ```javascript theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   window.upcartRegisterAddToCart();
   ```
   هذا يخبر Upcart بفتح الدرج فور إضافة المنتج إلى السلة.

<div id="step-3-disable-replo-redirect-to-the-cart-page">
  ## الخطوة 3: عطّل إعادة توجيه Replo إلى صفحة السلة
</div>

1. حدد تفاعل **Add Product to Cart** مرة أخرى
2. عطّل مفتاح **Go to cart after?**

هذا يمنع Replo من إعادة التوجيه إلى صفحة سلة Shopify، والتي كانت ستتجاوز درج Upcart تمامًا.

<div id="step-4-preview-and-publish">
  ## الخطوة 4: المعاينة والنشر
</div>

1. انقر على **Preview** في Replo لاختبار التفاعل
2. أضف منتجًا إلى السلة وتأكد من فتح درج Upcart تلقائيًا
3. بعد التأكد، انقر على **Publish Page** لنشر التغييرات مباشرة

***

<div id="notes">
  ## ملاحظات
</div>

* يجب تطبيق هذا الإعداد على **كل صفحة** تستخدم فيها Replo + Upcart معًا
* تأتي الدالة `window.upcartRegisterAddToCart();` من واجهة API العامة لـ Upcart وتعمل دون تثبيت أكواد إضافية
* يعمل هذا لكل من إصدارات الجوال وسطح المكتب لصفحات Replo

<div id="notes-2">
  # **ملاحظات**
</div>

يجب أن يتوقف Replo الآن عن إعادة التوجيه إلى صفحة سلة Shopify وأن يقوم بدلاً من ذلك بإخطار Upcart عند إضافة منتج إلى السلة.

يرجى الملاحظة: ستحتاج إلى إكمال هذه العملية لكل صفحة منتج تصممها في Replo Landing Page Designer.