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

# منع عمليات الشراء المقتصرة على عروض البيع الإضافي في السلة

> اطلب من العملاء إضافة منتج عادي واحد على الأقل قبل إتمام الدفع.

<div id="overview">
  # **نظرة عامة**
</div>

يستخدم هذا التخصيص HTML وCSS وJavaScript لحظر الدفع (checkout) عندما تحتوي السلة على عناصر بيع إضافي (upsell) فقط. يساعد ذلك في ضمان التعامل مع عروض البيع الإضافي كعروض ثانوية، وليس كمشتريات مستقلة، مما يدعم استراتيجية بيع إضافي أكثر تحكمًا وقصدية.

يضمن ذلك أن تعمل منتجات البيع الإضافي ضمن حدود محددة، مع التأكيد على دورها كعناصر مكمّلة للمنتجات الأساسية.

عند التنفيذ، سيتم **تعطيل زر الدفع** حتى تتم إضافة منتج واحد على الأقل ليس من عروض البيع الإضافي إلى السلة.

<div id="how-it-works">
  ## كيف يعمل
</div>

* إذا كانت السلة تحتوي على عناصر بيع إضافي فقط، يصبح زر الدفع رماديًا
* تظهر رسالة تحذير أسفل الزر
* بمجرد إضافة منتج عادي، يصبح الزر نشطًا وتختفي رسالة التحذير - يوفر تحققًا واضحًا للسيناريوهات التي تضمن شراء منتجات البيع الإضافي فقط مع المنتجات المشغّلة المرتبطة بها، مثل عرض رسائل تحذير مستهدفة.

هذا الإعداد مثالي لأصحاب المتاجر أو المطورين ذوي المعرفة الأساسية بـ JavaScript وCSS.

<div id="step-1-add-custom-html">
  ## الخطوة 1: إضافة HTML مخصص
</div>

انتقل إلى:\
**Upcart > Cart Editor > Settings > Custom HTML**

<div id="in-the-above-announcementsrewards-section-paste">
  ## في قسم **Above announcements/rewards**، الصق:
</div>

```
<script>  
  function CartContainsOnlyUpsells(cart) {  
    var cartWithoutUpsells = cart.items.filter(item => item.properties?.__upcartUpsell == null);  
    return cartWithoutUpsells.length === 0;  
  }  
  
  function ToggleCheckoutButton(shouldBeEnabled) {  
    var checkoutButton = window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var warning = window.upcartDocumentOrShadowRoot.querySelector(".upcartUpsellOnlyWarning");  
  
    if (checkoutButton && warning) {  
      if (shouldBeEnabled) {  
        checkoutButton.classList.remove("upcart-disable-checkout-button");  
        warning.style.display = "none";  
      } else {  
        checkoutButton.classList.add("upcart-disable-checkout-button");  
        warning.style.display = "block";  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded((event) => {  
    ToggleCheckoutButton(!CartContainsOnlyUpsells(event.cart));  
  });  
</script>
```

<Note>
  **ملاحظة حول الإصدارات القديمة:** لا تزال دوال الاستدعاء `window.upcartOnCartLoaded` تعمل ولكنها مهملة وتسجل تحذيرات في وحدة التحكم. استخدم `upcartSubscribeCartLoaded` لجميع السكربتات الجديدة.
</Note>

<div id="in-the-below-checkout-button-section-paste">
  ## في قسم **Below checkout button**، الصق:
</div>

```
<div class="upcartUpsellOnlyWarning" style="display: none;">  
  Your cart only contains upsell products. <br>  
  Please add a regular product to continue to checkout.  
</div>
```

لا تتردد في تعديل صياغة رسالة التحذير لتناسب نبرة علامتك التجارية.

<div id="step-2-add-custom-css">
  ## الخطوة 2: إضافة CSS مخصص
</div>

انتقل إلى:\
**Upcart > Cart Editor > Settings > Custom CSS**

الصق الكود التالي:

```
.upcartUpsellOnlyWarning {  
  width: 100%;  
  text-align: center;  
  margin-top: 10px;  
  color: red;  
  font-weight: bold;  
  font-size: 15px;  
}  
  
.upcart-disable-checkout-button {  
  cursor: none !important;  
  pointer-events: none !important;  
  opacity: 0.4 !important;  
}
```

ينسّق هذا رسالة التحذير ويعطّل زر الدفع بصريًا ووظيفيًا.

<div id="final-result">
  ## النتيجة النهائية
</div>

بعد الإعداد:

* يُحظر الدفع ما لم يكن هناك منتج واحد على الأقل ليس من عروض البيع الإضافي في السلة
* تُعلم رسالة العملاء بسبب تعطيل الدفع
* تبدو التجربة سلسة ومتوافقة مع العلامة التجارية

هذا مفيد بشكل خاص لما يلي: كما أن اقتران استراتيجيات البيع الإضافي الفعالة بهذه التقنيات يحسّن تجربة التسوق العامة للعملاء من خلال إزالة التعارضات غير الضرورية في عملية الشراء.

* منع عمليات شراء البيع الإضافي الفردية العرضية
* الحفاظ على عروض البيع الإضافي كمنتجات إضافية فقط
* ضمان تحكم أفضل في متوسط قيمة الطلب (AOV) وتجميع المنتجات

<div id="still-need-help">
  ## هل ما زلت بحاجة إلى مساعدة؟
</div>

إذا كنت بحاجة إلى أي مساعدة في التخصيصات، نوصي باستشارة Shopify Expert حول إضافة HTML وCSS وحتى JavaScript إلى درج السلة الخاص بك.

[اطّلع على Shopify Experts](https://www.shopify.com/partners/directory)