> ## 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="if-you-are-on-upcart-v10">
  ## إذا كنت على Upcart V1.0
</div>

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

1. انتقل إلى **Upcart > Cart Editor > Settings > Custom HTML**
2. من القائمة المنسدلة **Select HTML Location**، اختر **Above checkout button**
3. الصق الكود التالي وحدّث المتغيرات لتعكس تكلفة الشحن والحد الأدنى في متجرك:

```
<hr>  
  
<div class="cartSummarySection">  
  <div class="cartSummarySubtotal alignLeft">  
    Subtotal:  
    <span class="alignRight subtotalprice">{{UPCART_SUBTOTAL}}</span>  
  </div>  
  
  <div class="cartSummaryShipping alignLeft">  
    Shipping:  
    <span class="alignRight upcartShipping"></span>  
  </div>  
  
  <div class="cartSummaryEndTotal alignLeft">  
    Total:  
    <span class="alignRight upcartEndTotal"></span>  
  </div>  
  
  <div style="clear: both; display: flex;"></div>  
</div>  
  
<script>  
  var shippingThreshold = 15000; // In cents  
  var shippingCostWhenUnderThreshold = 290; // In cents  
  var textWhenUnderShippingThreshold = "$2.90";  
  var textWhenOverShippingThreshold = "FREE";  
  var currencySymbolToAddInfrontOfEndPrice = "$";  
  var shouldCurrencySymbolBeOnLeftSide = true;  
  
  window.upcartSubscribeCartLoaded((event) => {  
    var shippingText = window.upcartDocumentOrShadowRoot.querySelector(".upcartShipping");  
    var endTotal = window.upcartDocumentOrShadowRoot.querySelector(".upcartEndTotal");  
  
    if (event.cart.total < shippingThreshold) {  
      shippingText.innerText = textWhenUnderShippingThreshold;  
  
      if (shouldCurrencySymbolBeOnLeftSide) {  
        endTotal.innerText =  
          currencySymbolToAddInfrontOfEndPrice +  
          ((event.cart.total + shippingCostWhenUnderThreshold) / 100).toFixed(2);  
      } else {  
        endTotal.innerText =  
          ((event.cart.total + shippingCostWhenUnderThreshold) / 100).toFixed(2) +  
          currencySymbolToAddInfrontOfEndPrice;  
      }  
  
    } else {  
      shippingText.innerText = textWhenOverShippingThreshold;  
  
      if (shouldCurrencySymbolBeOnLeftSide) {  
        endTotal.innerText =  
          currencySymbolToAddInfrontOfEndPrice +  
          (event.cart.total / 100).toFixed(2);  
      } else {  
        endTotal.innerText =  
          (event.cart.total / 100).toFixed(2) +  
          currencySymbolToAddInfrontOfEndPrice;  
      }  
    }  
  });  
</script>
```

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

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

1. انتقل إلى **Upcart > Cart Editor > Settings > Custom CSS**
2. الصق CSS التالي وعدّل `background-color` أو الأنماط الأخرى لتتناسب مع تذييل سلتك:

```
.upcart-footer {  
  padding-top: 0px !important;  
}  
  
.cartSummarySection {  
  background-color: #f6f4ef !important;  
  padding: 10px 23px;  
}  
  
.cartSummarySubtotal,  
.cartSummaryShipping,  
.cartSummaryEndTotal {  
  color: black;  
  width: 100%;  
  text-align: left;  
  font-weight: normal;  
  font-size: 16px;  
  padding: 0;  
}  
  
#CartPopup hr {  
  margin: 0px !important;  
}  
  
.alignLeft {  
  float: left;  
}  
  
.alignRight {  
  float: right;  
}
```

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

بعد التطبيق:

* يظهر تفصيل التكلفة فوق زر الدفع
* يرى العملاء المجموع الفرعي والشحن (ثابت أو FREE) والإجمالي
* تتعدل تكلفة الشحن ديناميكيًا بناءً على الحد الذي حددته

يزيد هذا من شفافية التكلفة، ويعزز الثقة، ويمكن أن يقلل من التخلي عن الدفع.

***

<div id="if-you-are-on-upcart-v20">
  ## إذا كنت على Upcart V2.0
</div>

<div id="step-1-go-to-cart-summary-module">
  #### الخطوة 1: انتقل إلى وحدة ملخص السلة
</div>

1. فعّل القوالب المخصصة أولًا: في **Upcart > Cart Editor > Settings > Cart settings**، وسّع **Advanced Settings** وحدد **Access custom templates**. هذا الخيار معطل افتراضيًا، وحتى يتم تفعيله تعرض علامة تبويب Cart summary رسالة "Custom templates aren't enabled" فقط دون محرر.
2. انتقل إلى **Upcart > Cart Editor > Cart summary > Custom template**
3. الصق الكود التالي:

   1. الكود المخصص للقسم يمتد من السطر 52 إلى السطر 73

      ```
      <div>  
        <div className="upcart-internal-cart-summary upcart-public-cart-summary">  
          <div className="upcart-internal-cart-summary__discount-codes upcart-public-cart-summary__discount-codes">  
            <span className="upcart-internal-cart-summary__discount-label upcart-public-cart-summary__discount-label">  
              {props.totalSavingsText}  
            </span>  
        
            <div className="upcart-internal-cart-summary__slide-codes upcart-public-cart-summary__slide-codes">  
              {props.discountApplications.map((discountApplication) => (  
                <span  
                  key={discountApplication.key}  
                  className="upcart-internal-component-tag upcart-public-component-tag"  
                >  
                  <span className="upcart-internal-component-tag__icon upcart-public-component-tag__icon">  
                    <svg  
                      xmlns="http://www.w3.org/2000/svg"  
                      viewBox="0 0 20 20"  
                      focusable="false"  
                    >  
                      <title>Discount tag icon</title>  
                      <path  
                        fillRule="evenodd"  
                        d="M8.575 4.649a3.75 3.75 0 0 1 2.7-1.149h1.975a3.25 3.25 0 0 1 3.25 3.25v2.187a3.25 3.25 0 0 1-.996 2.34l-4.747 4.572a2.5 2.5 0 0 1-3.502-.033l-2.898-2.898a2.75 2.75 0 0 1-.036-3.852l4.254-4.417Zm4.425 3.351a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"  
                      />  
                    </svg>  
                  </span>  
        
                  <span className="upcart-internal-component-tag__text upcart-public-component-tag__text">  
                    {discountApplication.title}  
                  </span>  
        
                  {discountApplication.type === "discount_code" && (  
                    <button  
                      type="button"  
                      className="upcart-internal-component-tag__remove-button upcart-public-component-tag__remove-button"  
                      onClick={props.handleRemoveDiscount}  
                      aria-label="Remove tag"  
                    >  
                      {props.isRemovingDiscount ? (  
                        <div className="upcart-internal-component-loader upcart-public-component-loader" />  
                      ) : (  
                        <svg  
                          xmlns="http://www.w3.org/2000/svg"  
                          viewBox="0 0 20 20"  
                        >  
                          <path d="M12.72 13.78a.75.75 0 1 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06l-2.72 2.72-2.72-2.72a.75.75 0 0 0-1.06 1.06l2.72 2.72-2.72 2.72a.75.75 0 1 0 1.06 1.06l2.72-2.72 2.72 2.72Z" />  
                        </svg>  
                      )}  
                    </button>  
                  )}  
                </span>  
              ))}  
            </div>  
          </div>  
        
          <div>  
            {props.showCartTotalDiscount && (  
              <span  
                className="upcart-internal-cart-summary__total-discount upcart-public-cart-summary__total-discount"  
                dangerouslySetInnerHTML={{  
                  __html: props.formattedCartTotalDiscount,  
                }}  
              />  
            )}  
          </div>  
        </div>  
        
        {/* Custom code for summary section */}  
        <hr />  
        
        <div className="upcart-custom-cart-summary__container">  
          <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__subtotal">  
            Subtotal:  
            <span className="upcart-custom-cart-summary__subtotal-value">  
              ${(props.totalAfterAllDiscounts / 100).toFixed(2)}  
            </span>  
          </div>  
        
          <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__shipping">  
            Shipping:  
            <span className="upcart-custom-cart-summary__shipping-value">  
              $2.99  
            </span>  
          </div>  
        
          <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__cart-total">  
            Total:  
            <span className="upcart-custom-cart-summary__cart-total-value">  
              {/* totalAfterAllDiscounts excludes shipping — add the same 299 cents shown above. */}  
              ${((props.totalAfterAllDiscounts + 299) / 100).toFixed(2)}  
            </span>  
          </div>  
        </div>  
      </div>
      ```

      b. الجزء ذو الصلة هو هذا القسم من السطر 52 إلى 73، استخدم [هذا المستند](/ar/upcart/setting_up_a_custom_template_in_upcart#available-props-full-template) لتحديد القيمة التي تخطط لعرضها على الشاشة

      ```
        <hr />  
        
        <div className="upcart-custom-cart-summary__container">  
          <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__subtotal">  
            Subtotal:  
            <span className="upcart-custom-cart-summary__subtotal-value">  
              ${(props.totalAfterAllDiscounts / 100).toFixed(2)}  
            </span>  
          </div>  
        
          <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__shipping">  
            Shipping:  
            <span className="upcart-custom-cart-summary__shipping-value">  
              $2.99  
            </span>  
          </div>  
        
          <div className="upcart-custom-cart-summary__row upcart-custom-cart-summary__cart-total">  
            Total:  
            <span className="upcart-custom-cart-summary__cart-total-value">  
              {/* totalAfterAllDiscounts excludes shipping — add the same 299 cents shown above. */}  
              ${((props.totalAfterAllDiscounts + 299) / 100).toFixed(2)}  
            </span>  
          </div>  
        </div>
      ```

      c. انتقل إلى **Upcart > Cart Editor > Settings > Custom CSS،** وأضف هذا:

      ```
      .upcart-custom-cart-summary__row {  
        display: flex;  
        flex-direction: row;  
        justify-content: space-between;  
      }
      ```

***

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

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