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

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

هذه طريقة رائعة لضمان الامتثال القانوني، ووضع توقعات واضحة، وإضفاء طابع احترافي على تجربة السلة لديك.

***

<div id="what-this-customization-does">
  ## ما الذي يفعله هذا التخصيص
</div>

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

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

<Warning>
  **الجزء الخاص بالأزرار السريعة يعمل على الإصدار 1 فقط.** يبحث السكربت عن `#upcart-additional-checkout-buttons` ويصمم CSS العنصر `.upcart-express-pay-button` — وكلاهما ينتمي إلى وحدة الدفع السريع في الإصدار 1. أما الإصدار 2 فيعرض `#upcart-express-payments` وينسخ أزرار Shopify نفسها، والتي لا تحمل أيًا من المحدِّدين، لذا يبقى الدفع السريع قابلًا للنقر حتى عندما يكون المربع غير محدد. يتم حجب زر الدفع القياسي في كلا الإصدارين.
</Warning>

***

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

1. انتقل إلى **Upcart > Cart Editor > Settings > Custom HTML**
2. الصق ما يلي في **Above announcements/rewards**:

```
<script>  
  function TermsCheckboxUpdate() {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
    var termsWarning =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcartTermsWarning");  
    var checkoutButton =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var cartElement =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-cart");  
    var expressButtons =  
      window.upcartDocumentOrShadowRoot.querySelector(  
        "#upcart-additional-checkout-buttons"  
      );  
  
    if (checkbox.checked) {  
      termsWarning.style.display = "none";  
  
      if (checkoutButton) {  
        checkoutButton.classList.remove("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.remove("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.remove("upcartDisableExpressButton");  
      }  
    } else {  
      termsWarning.style.display = "block";  
  
      if (checkoutButton) {  
        checkoutButton.classList.add("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.add("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.add("upcartDisableExpressButton");  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded(() => {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
  
    if (checkbox) {  
      checkbox.setAttribute("onclick", "TermsCheckboxUpdate()");  
    }  
  
    TermsCheckboxUpdate();  
  });  
</script>
```

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

1. الصق ما يلي في **Below checkout button**. حدّث الرابط والنص ليطابقا شروط متجرك:

```
<div class="upcartTermsWrapper">  
  <div class="upcartTermsCheckboxWrapper">  
    <input id="agree" type="checkbox" />  
    I accept the  
    <a  
      class="upcartTermsAnchor"  
      href="https://yourstore.com/terms"  
      target="_blank"  
    >  
      Terms & Conditions  
    </a>.  
  </div>  
  
  <div class="upcartTermsWarning">  
    Please accept the Terms & Conditions above before continuing.  
  </div>  
</div>
```

***

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

1. انتقل إلى **Upcart > Cart Editor > Settings > Custom CSS**
2. الصق ما يلي للتحكم في التنسيق:

```
.upcartDisableCheckoutButton {  
  pointer-events: none !important;  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}  
  
.upcartDisableExpressButton {  
  pointer-events: none !important;  
}  
  
.upcartTermsWarning {  
  text-align: center;  
  width: 100%;  
  color: red;  
  font-size: 14px;  
  font-weight: bold;  
}  
  
.upcartTermsAnchor {  
  text-decoration: underline !important;  
  color: #0000EE;  
  font-weight: bold;  
  font-size: 14px !important;  
  padding: 0 !important;  
}  
  
.upcartTermsWrapper {  
  width: 100%;  
}  
  
.upcartTermsCheckboxWrapper {  
  font-size: 14px;  
  text-align: center;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  gap: 5px;  
}  
  
.upcart-cart.style_upcartDisableExpressButton  
  .upcart-express-pay-button {  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}
```

يمكنك تغيير الألوان لتتناسب مع علامتك التجارية عن طريق تحديث قيم `color` و`background-color` و`opacity`.

***

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

عندما يفتح العملاء السلة:

* يتم تعطيل زر الدفع والأزرار السريعة حتى يتم تحديد مربع الاختيار
* تظهر رسالة تحذير حمراء إذا حاولوا المتابعة دون الموافقة
* بمجرد تحديد المربع، تصبح جميع الأزرار نشطة

***

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

للتنفيذات المتقدمة أو المتطلبات الأكثر تعقيدًا، نوصي بالعمل مع **خبير Shopify (Shopify Expert)**. لا يساعد فريق دعم Upcart في كتابة الأكواد المخصصة أو استكشاف مشكلاتها.

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