نظرة عامة

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

إذا كنت على Upcart V1.0

الخطوة 1: أضف HTML مخصصًا

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

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

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

الخطوة 2: أضف CSS مخصصًا

انتقل إلى Upcart > Cart Editor > Settings > Custom CSS
الصق 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;  
}

النتيجة النهائية

بعد التطبيق:

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

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

إذا كنت على Upcart V2.0

الخطوة 1: انتقل إلى وحدة ملخص السلة

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

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

الكود المخصص للقسم يمتد من السطر 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، استخدم هذا المستند لتحديد القيمة التي تخطط لعرضها على الشاشة

  <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;  
}

هل تحتاج إلى مساعدة؟

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

البدء

وحدات السلة

إعدادات السلة

زر السلة الثابت

Multicart

التخصيصات

التحليلات

التكاملات والتوافق

الفوترة والحساب

استكشاف الأخطاء وإصلاحها

أضف سطر الإجمالي النهائي فوق زر الدفع

نظرة عامة

إذا كنت على Upcart V1.0

الخطوة 1: أضف HTML مخصصًا

الخطوة 2: أضف CSS مخصصًا

النتيجة النهائية

إذا كنت على Upcart V2.0

الخطوة 1: انتقل إلى وحدة ملخص السلة

هل تحتاج إلى مساعدة؟

​نظرة عامة

​إذا كنت على Upcart V1.0

​الخطوة 1: أضف HTML مخصصًا

​الخطوة 2: أضف CSS مخصصًا

​النتيجة النهائية

​إذا كنت على Upcart V2.0

​الخطوة 1: انتقل إلى وحدة ملخص السلة

​هل تحتاج إلى مساعدة؟

نظرة عامة

إذا كنت على Upcart V1.0

الخطوة 1: أضف HTML مخصصًا

الخطوة 2: أضف CSS مخصصًا

النتيجة النهائية

إذا كنت على Upcart V2.0

الخطوة 1: انتقل إلى وحدة ملخص السلة

هل تحتاج إلى مساعدة؟