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

> يستعرض هذا المقال الخصائص (props) الرئيسية المتاحة لتخصيص قوالب Upcart، مما يساعدك على تخصيص تجربة سلتك مع الحفاظ على الوظائف الأساسية.

<div id="important-notice">
  ## ⚠️ **إشعار مهم**
</div>

تتطلب القوالب المخصصة معرفة تقنية متقدمة بـ HTML وCSS وJavaScript وReact. يرجى التأكد من امتلاكك خبرة تطوير كافية أو إمكانية الوصول إلى مطوّر Shopify مؤهل قبل المتابعة. **لن يقدم فريق الدعم لدينا مساعدة في تطوير القوالب المخصصة أو تصحيحها أو استكشاف مشكلاتها.** يجب توجيه الأسئلة التقنية إلى خبير Shopify أو مطوّر مؤهل.

***

<div id="code-editor-features">
  ## ميزات محرر الأكواد
</div>

يتضمن محرر أكواد القالب المخصص أدوات مدمجة لمساعدتك على كتابة قوالب صالحة بسهولة أكبر.

<div id="typescript-intellisense">
  ### TypeScript IntelliSense
</div>

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

<div id="editable-template-body">
  ### جسم القالب القابل للتحرير
</div>

يعرض المحرر فقط جسم JSX القابل للتحرير من قالبك — لا توجد أسطر مقفلة. يُضاف غلاف الدالة المحيط تلقائيًا وقت البناء ولا يظهر أبدًا في المحرر.

استخدم **Reset to default** في أي وقت لاستعادة القالب الأصلي إذا أفسدت تعديلاتك بنية القالب.

***

<div id="general-section">
  ## القسم العام
</div>

<div id="header">
  ## الرأس (Header)
</div>

تتيح لك وحدة Header تخصيص رأس السلة بتصميمك الخاص مع الحفاظ على وظائف السلة الأساسية مثل عرض عدد العناصر وتوفير زر إغلاق.

<div id="available-props-full-template">
  ### **الخصائص المتاحة - القالب الكامل**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-drawer-header-title.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=7c679bee70bf5ff8a61657d83158e986" alt="رأس درج السلة يعرض عنوان Cart وعدد العناصر وزر الإغلاق" width="400" data-path="images/upcart/custom-template-cart-drawer-header-title.png" />

`cartQuantity`

* **النوع**: `string`

* **الوصف**: العدد الحالي للعناصر في السلة، منسّق كسلسلة نصية

* **الاستخدام**: عرض عدد عناصر السلة في تصميم الرأس المخصص لديك

```
<h2>Shopping Cart ({props.cartQuantity})</h2>
```

`closeHandler`

* **النوع**: `() => void`

* **الوصف**: دالة رد نداء تُغلق السلة عند تفعيلها

* **الاستخدام**: اربطها بالأزرار أو الأيقونات أو عناصر تفاعلية أخرى لإغلاق السلة

```
<button  
  onClick={props.closeHandler}  
  aria-label="Close cart"  
>×</button>
```

`titleComponent`

* **النوع**: `React.ReactElement | null`

* **الوصف**: مكوّن عنوان مُعدّ مسبقًا لرأس السلة يتضمن التنسيق والترجمات الصحيحة

* **الاستخدام**: عرض عنوان السلة بناءً على إعدادات ضبط سلتك

```
<div>{props.titleComponent}</div>
```

***

<div id="body-section">
  ## قسم الجسم (Body)
</div>

<div id="announcements">
  ## الإعلانات
</div>

تتيح لك وحدة Announcements تخصيص عرض الإعلانات بتصميمك الخاص مع الحفاظ على وظائف الإعلانات الأساسية مثل عناصر التحكم بالمؤقت والظهور المشروط.

<div id="available-props-full-template-2">
  ### الخصائص المتاحة - **القالب الكامل**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-announcement-bar-countdown.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=2c7d03e71ebf5bec3b5d3bddff3447b3" alt="شريط إعلان السلة مع مؤقت عد تنازلي يحجز منتجات العميل" width="400" data-path="images/upcart/custom-template-cart-announcement-bar-countdown.png" />

`announcementTemplate`

* **النوع**: `string`

* **الوصف**: محتوى HTML لرسالة الإعلان

* **الاستخدام**: عرض رسالة الإعلان في تنفيذاتك المخصصة

```
<div dangerouslySetInnerHTML={{ __html: props.announcementTemplate }} />
```

`timer`

* **النوع**: `string`

* **الوصف**: قيمة المؤقت الحالية منسّقة كسلسلة نصية

* **الاستخدام**: عرض مؤقت العد التنازلي في تنفيذات الإعلانات المخصصة

```
<div>Time remaining: {props.timer}</div>
```

`shouldUseTimer`

* **النوع**: `boolean`

* **الوصف**: يشير إلى ما إذا كانت وظيفة المؤقت ممكّنة لهذا الإعلان

* **الاستخدام**: عرض المحتوى وعناصر التحكم المتعلقة بالمؤقت بشكل مشروط

```
<div>  
  {props.shouldUseTimer && (  
    <span>{props.timer}</span>   
  )}  
</div>
```

`isTimerExpiredAndShouldHide`

* **النوع**: `boolean`

* **الوصف**: يشير إلى ما إذا كان المؤقت قد انتهى ويجب إخفاء الإعلان

* **الاستخدام**: التحكم في ظهور الإعلان بأكمله بناءً على حالة المؤقت

```
<div>  
  {!props.isTimerExpiredAndShouldHide && (  
    <div>{props.timer}</div>  
  )}  
</div>
```

<div id="tiered-rewards">
  ## المكافآت المتدرجة
</div>

تتيح لك وحدة Rewards تخصيص عرض تقدم المكافآت بتصميمك الخاص مع الحفاظ على وظائف المكافآت الأساسية مثل تتبع المراحل وتصور التقدم ورسائل المكافآت.

<div id="available-props-full-template-3">
  ### الخصائص المتاحة - **القالب الكامل**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-tiered-rewards-progress-bar.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=78f30082b982815d333f8de09225d884" alt="شريط تقدم المكافآت المتدرجة مع أيقونات مراحل الشحن المجاني والمنتج" width="400" data-path="images/upcart/custom-template-tiered-rewards-progress-bar.png" />

`rewardsMessageHtml`

* **النوع**: `string`

* **الوصف**: محتوى HTML لرسالة المكافآت

* **الاستخدام**: عرض رسالة المكافآت بتنسيق غني في التنفيذات المخصصة

```
<div dangerouslySetInnerHTML={{ __html: props.rewardsMessageHtml }} />
```

`milestonesCompleted`

* **النوع**: `number`

* **الوصف**: عدد المراحل التي اكتملت

* **الاستخدام**: عرض عدد الإكمال أو حساب نسبة الإكمال

```
<div>  
  {Math.round((props.milestonesCompleted / props.milestonesData.milestonesToRender.length) * 100)}% Complete  
</div>
```

`milestonesData`

* النوع:

  ```
  {  
    milestonesToRender: {  
      id: string;  
      label: string;  
      icon: React.ReactElement;  
      isCompleted: boolean;  
      positionPercent: number;  
    }[];  
    progressPercent: number;  
    showMilestones: boolean;  
    settings: {  
      iconContainerSize: string;  
      iconAlignment: string;  
      labelAlignment: string;  
      hideLabel: boolean;  
    };  
  }
  ```

* **الوصف**: بيانات الضبط الكاملة للمراحل والتقدم لنظام المكافآت

* **الاستخدام**: الوصول إلى معلومات المراحل ونسبة التقدم وإعدادات العرض

* **الخصائص**:

  * `milestonesToRender`: مصفوفة من كائنات المراحل مع حالة الإكمال والتموضع
  * `progressPercent`: التقدم الحالي كنسبة مئوية (0-100)
  * `showMilestones`: ما إذا كان يجب عرض علامات المراحل
  * `settings`: الضبط المرئي لعرض المراحل

<div id="discounts">
  ## الخصومات
</div>

تدعم وحدة Discounts القوالب المخصصة حتى تتمكن من تصميم عرضك الخاص مع الحفاظ على الوظائف الأساسية مثل إدارة القواعد وظهور القسم وعرض المكافآت. معرّف نوع الوحدة الداخلي للقوالب المخصصة هو `TRIGGERED_REWARDS` للتوافق مع أكواد القوالب المخصصة الموجودة.

<div id="available-props-full-template-4">
  ### **الخصائص المتاحة - القالب الكامل**
</div>

`rules`

* **النوع**:

  ```
  {  
    id: string;  
    title: string;  
    description: string;  
    conditionsMet: boolean;  
  }[]
  ```

* **الوصف**: مصفوفة من قواعد الخصم الممكّنة حاليًا

* **الاستخدام**: عرض المكافآت المتاحة وعناوينها وأوصافها وما إذا كانت شروط كل قاعدة مستوفاة

* **الخصائص**:

  * `id`: معرّف فريد لقاعدة المكافأة
  * `title`: عنوان قاعدة الخصم
  * `description`: وصف قاعدة المكافأة
  * `conditionsMet`: ما إذا كانت شروط القاعدة مستوفاة حاليًا بواسطة السلة. استخدمها لبناء أنماط تجربة مستخدم مثل "لقد فتحت X" مقابل "أنفق \$Y إضافية لفتح X"

```
<div>
  {props.rules.map((rule) => (
    <div key={rule.id}>
      <h3>{rule.title}</h3>
      <p>{rule.conditionsMet ? "Reward unlocked!" : rule.description}</p>
    </div>
  ))}
</div>
```

`showSection`

* **النوع**: `boolean`

* **الوصف**: يشير إلى ما إذا كان يجب عرض قسم Discounts

* **الاستخدام**: التحكم في ظهور وحدة Discounts بأكملها

```
<div>  
  {props.showSection && (  
    <div>  
      <h2>Available Rewards...</h2>  
    </div>  
  )}  
</div>
```

`onToggleSection`

* **النوع**: `() => void`

* **الوصف**: دالة رد نداء تبدّل حالة ظهور قسم Discounts

* **الاستخدام**: اربطها بأزرار أو عناصر تفاعلية للسماح للمستخدمين بإظهار/إخفاء قسم المكافآت

```
<button type="button" onClick={props.onToggleSection}>  
  {props.showSection ? "Hide Rewards" : "Show Available Rewards"}  
</button>
```

<div id="recommendations">
  ## التوصيات
</div>

تتيح لك وحدة Recommendation تخصيص عرض منتجات البيع الإضافي بتصميمك الخاص مع الحفاظ على وظائف التجارة الإلكترونية الأساسية مثل اختيار الخيارات وإجراءات الإضافة إلى السلة وعرض معلومات المنتج.

<div id="available-props-recommendation-tile-template">
  ### **الخصائص المتاحة - قالب بطاقة التوصية**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-recommendation-tile-snowboard-product.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=7db82e0496937fa8ee8eea180edb3530" alt="بطاقة توصية تعرض منتج لوح تزلج مع السعر وزر Add" width="400" data-path="images/upcart/custom-template-recommendation-tile-snowboard-product.png" />

*يشترك قالب بطاقة التوصية في [نفس واجهة الخصائص الخاصة بقالب بطاقة البيع الإضافي](#available-props-upsell-tile-template) في وحدة Upsells. جميع الخصائص المتاحة والأنواع وأمثلة الاستخدام موثقة في قسم وحدة Upsells أدناه.*

<div id="cart-items">
  ## عناصر السلة
</div>

تتيح لك وحدة Cart Items تخصيص عرض عناصر السلة بتصميمك الخاص مع الحفاظ على وظائف التجارة الإلكترونية الأساسية. توفر هذه الوحدة أنواع قوالب متعددة، لكل منها خصائصه المحددة لجوانب مختلفة من عرض عناصر السلة.

<Note>
  **عرض مؤشر تحميل أثناء الإضافة إلى السلة أو تحديثات السلة:** لا توفر وحدة Cart Items القياسية مؤشر تحميل "جارٍ الإضافة إلى السلة" مدمجًا. إذا أردت عرض حالة تحميل أثناء إضافة عنصر أو أثناء تنفيذ عملية على السلة، فاستخدم قالب Product tile واقرأ الخاصيتين `isLoading` و`loadingOperation` (الموثقتين أدناه) لعرض مؤشر دوّار أو طبقة تراكب بشكل مشروط. تتطلب القوالب المخصصة خبرة تطوير — انظر الإشعار أعلى هذه الصفحة.
</Note>

<div id="available-props-product-tile-template">
  ### **الخصائص المتاحة - قالب بطاقة المنتج**
</div>

**ملاحظة:** تمكين قالب *Product Tile* سيتجاوز جميع القوالب الأخرى في هذه الوحدة، بما في ذلك **قالب Variant** و**قالب Properties** و**قالب Bundle** و**قالب Price**.\
إذا أردت استخدام كود مخصص في أي من تلك القوالب، ***يجب*** *عليك إيقاف قالب Product Tile.*

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-product-tile-variant.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=3d2efc06b542f7c59cc86ad3fe611a0e" alt="بطاقة منتج في السلة مع صورة وخيار وسعر تخفيض ومحدد كمية وزر اشتراك" width="400" data-path="images/upcart/custom-template-cart-product-tile-variant.png" />

`title`

* **النوع**: `string`

* **الوصف**: عنوان/اسم المنتج

* **الاستخدام**: عرض اسم المنتج الرئيسي في عناصر السلة

`variant`

* **النوع**: `React.ReactNode`

* **الوصف**: مكوّن معلومات الخيار مُعدّ مسبقًا

* **الاستخدام**: عرض تفاصيل الخيار كمكوّن React

`properties`

* **النوع**: `React.ReactNode`

* **الوصف**: مكوّن خصائص المنتج مُعدّ مسبقًا

* **الاستخدام**: عرض خصائص المنتج ومعلومات الاشتراك كمكوّن React

`bundle`

* **النوع**: `React.ReactNode`

* **الوصف**: مكوّن تفاصيل الحزمة مُعدّ مسبقًا

* **الاستخدام**: عرض معلومات الحزمة كمكوّن React

`compareAtPrice`

* **النوع**: `string | undefined`

* **الوصف**: سعر المقارنة المنسّق (السعر الأصلي)

* **الاستخدام**: عرض السعر الأصلي للعناصر المخفّضة

`price`

* **النوع**: `string`

* **الوصف**: السعر الحالي المنسّق

* **الاستخدام**: عرض سعر العنصر الحالي

`savings`

* **النوع**: `string | undefined`

* **الوصف**: مبلغ الوفورات المنسّق

* **الاستخدام**: عرض مقدار ما يوفره العميل

`imageUrl`

* **النوع**: `string | undefined`

* **الوصف**: رابط صورة المنتج

* **الاستخدام**: عرض صورة المنتج

`productUrl`

* **النوع**: `string | undefined`

* **الوصف**: رابط صفحة المنتج

* **الاستخدام**: الربط بصفحة تفاصيل المنتج

`quantity`

* **النوع**: `number`

* **الوصف**: كمية العنصر الحالية في السلة

* **الاستخدام**: عرض كمية العنصر وإدارتها

`showQuantitySelector`

* **النوع**: `boolean`

* **الوصف**: ما إذا كان يجب عرض عناصر التحكم بالكمية

* **الاستخدام**: عرض محدد الكمية بشكل مشروط

`discountCodes`

* **النوع**: `string[] | undefined`

* **الوصف**: مصفوفة أكواد الخصم المطبّقة على هذا العنصر

* **الاستخدام**: عرض الخصومات الخاصة بالعنصر

`subscription`

* **النوع**:

  ```
  {  
    subscriptionUpgradeData: {  
      buttonText: string;  
      defaultSellingPlanId: number;  
    } | null;  
    sellingPlansData: {  
      sellingPlanGroups: {  
        name: string;  
        selling_plans: {  
          id: number;  
          name: string;  
        }[];  
      }[] | null;  
      activeSellingPlanId: string;  
      oneTimePurchaseText: string | null;  
    } | null;  
    upgradeSellingPlan: (item: CartItem, sellingPlanId: number) => void;  
    changeSellingPlan: (item: CartItem, value: string) => void;  
    getSellingPlanGroupText: (groupName: string, planName: string) => string;  
  }
  ```

* **الوصف**: كائن إدارة اشتراك كامل مع بيانات الترقية وخطط البيع ودوال المعالجة

* **الاستخدام**: إدارة وظائف الاشتراك

* يحتوي كائن الاشتراك على:

  * **subscriptionUpgradeData**: معلومات الترقية (null إذا لم تتوفر ترقية)

    * `buttonText`: نص زر الترقية
    * `defaultSellingPlanId`: معرّف خطة البيع الافتراضية للترقيات
  * **sellingPlansData**: خيارات خطط البيع المتاحة (null إذا لم توجد خطط)

    * `sellingPlanGroups`: مصفوفة مجموعات الخطط مع خطط البيع الخاصة بها
    * `activeSellingPlanId`: معرّف خطة البيع المحددة حاليًا
    * `oneTimePurchaseText`: نص خيار الشراء لمرة واحدة (null إذا لم يكن متاحًا)
  * **upgradeSellingPlan**: دالة للترقية إلى خطة بيع محددة
  * **changeSellingPlan**: دالة لتغيير خطة البيع الحالية
  * **getSellingPlanGroupText**: دالة مساعدة لتنسيق نص عرض خطة البيع

`onIncrease`

* **النوع**: `() => void`

* **الوصف**: دالة لزيادة كمية العنصر

* **الاستخدام**: معالجة إجراءات زيادة الكمية

`onDecrease`

* **النوع**: `() => void`

* **الوصف**: دالة لتقليل كمية العنصر

* **الاستخدام**: معالجة إجراءات تقليل الكمية

`onDeleteProduct`

* **النوع**: `() => void`

* **الوصف**: دالة لإزالة العنصر من السلة

* **الاستخدام**: معالجة إزالة العنصر

`onQuantityChange`

* **النوع**: `(quantity: string) => void`

* **الوصف**: دالة لمعالجة الإدخال المباشر للكمية

* **الاستخدام**: معالجة تغييرات الكمية اليدوية

`handleInputChange`

* **النوع**: `(e: React.ChangeEvent<HTMLInputElement>) => void`

* **الوصف**: معالج تغيير الإدخال لحقل الكمية

* **الاستخدام**: معالجة تغييرات حقل إدخال الكمية

`replaceItemWithVariant`

* **النوع**: `(variantId: string) => Promise<{ success: boolean }>`

* **الوصف**: دالة لاستبدال العنصر بخيار مختلف

* **الاستخدام**: معالجة تبديل الخيارات

`isLoading`

* **النوع**: `boolean`

* **الوصف**: حالة التحميل لعمليات السلة

* **الاستخدام**: عرض مؤشرات التحميل

`loadingOperation`

* **النوع**: `'increase' | 'decrease' | 'inputChange' | 'remove' | 'subscription' | undefined`

* **الوصف**: العملية المحددة قيد التحميل حاليًا

* **الاستخدام**: عرض حالات تحميل خاصة بكل عملية

`setLoadingOperation`

* **النوع**: `(op: "increase" | "decrease" | "inputChange" | "remove" | "subscription" | undefined) => void`

* **الوصف**: دالة لضبط حالة عملية التحميل

* **الاستخدام**: إدارة حالات التحميل للعمليات المختلفة

`rawItem`

* **النوع**: `CartItem` (راجع نوع `CartItem` [أدناه](#cartitem-object-properties))

* **الوصف**: بيانات عنصر السلة الخام التي تحتوي على جميع المعلومات

<div id="available-props-variant-template">
  ### **الخصائص المتاحة - قالب Variant**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-item-variant-line.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=c1220e3bf77d9b091c82d0f0b7709034" alt="سطر خيار عنصر السلة يعرض المقاس المحدد Medium" width="150" data-path="images/upcart/custom-template-cart-item-variant-line.png" />

`item`

* **النوع**: `CartItem` (راجع نوع `CartItem` [أدناه](#cartitem-object-properties))

* **الوصف**: بيانات عنصر السلة الخام التي تحتوي على معلومات الخيار

* **الاستخدام**: الوصول إلى تفاصيل الخيار من عنصر السلة

<div id="available-props-properties-template">
  ### **الخصائص المتاحة - قالب Properties**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-item-property-line.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=2ce7abe36cf542d62e9fc7e2092e7009" alt="سطر خاصية عنصر السلة يعرض ملاحظة رسالة هدية" width="220" data-path="images/upcart/custom-template-cart-item-property-line.png" />

`productProperties`

* **النوع**: `{ key: string; value: string; isUrl?: boolean; }[]`

* **الوصف**: مصفوفة خصائص المنتج (الحقول المخصصة وخصائص عناصر السلة)

`subscriptionLabel`

* **النوع**: `string | undefined`

* **الوصف**: تسمية معلومات الاشتراك

<div id="available-props-bundle-template">
  ### **الخصائص المتاحة - قالب Bundle**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-expanded-bundle-components.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=9a04c17667ea4af9cef303b96c079f37" alt="حزمة موسّعة تعرض ثلاثة منتجات مكوّنة مضمّنة مع خياراتها" width="200" data-path="images/upcart/custom-template-expanded-bundle-components.png" />

`getSizedImageUrl`

* **النوع**: `getSizedImageUrl: ({ src, width, height }: SizedImageParams) => string`

* **الوصف**: دالة مساعدة للحصول على روابط صور بأحجام صحيحة

`item`

* **النوع**:

  ```
  {  
    itemComponents: {  
      quantity: number;  
      image: {  
        url: string;  
        height: number | null;  
        width: number | null;  
        alt: string;  
      };  
      product: {  
        title: string;  
        has_only_default_variant: boolean;  
      };  
      variantTitle: string;  
    }[];  
    variantTitle: string | undefined;  
    hasComponents: boolean;  
  }
  ```

* **الوصف**: معلومات عنصر الحزمة بما في ذلك المكوّنات. `itemComponents` مصفوفة من كائنات المكوّنات — مرّ عليها (map) لعرض كل مكوّن مضمّن في الحزمة.

`showDetailsText`

* **النوع**: `string | undefined`

* **الوصف**: نص إجراء "عرض التفاصيل"

* **الاستخدام**: عرض نص زر التوسيع

`hideDetailsText`

* **النوع**: `string | undefined`

* **الوصف**: نص إجراء "إخفاء التفاصيل"

`isExpanded`

* **النوع**: `boolean`

* **الوصف**: ما إذا كانت تفاصيل الحزمة موسّعة

`toggleCollapsible`

* **النوع**: `() => void`

* **الوصف**: دالة لتبديل ظهور تفاصيل الحزمة

* **الاستخدام**: معالجة إجراءات التوسيع/الطي

`chevronDownIconComponent`

* **النوع**: `React.ReactElement`

* **الوصف**: أيقونة سهم مُعدّة مسبقًا للتوسيع/الطي

* **الاستخدام**: عرض مؤشر توسيع/طي متسق

<div id="available-props-price-template">
  ### **الخصائص المتاحة - قالب Price**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-price-strikethrough.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=34deca3e39b1aabbafae6ed19d209450" alt="سعر السلة يعرض السعر الأصلي مشطوبًا مع سعر التخفيض والوفورات" width="250" data-path="images/upcart/custom-template-cart-price-strikethrough.png" />

`compareAtPrice`

* **النوع**: `string | undefined`

* **الوصف**: سعر المقارنة المنسّق (السعر الأصلي)

* **الاستخدام**: عرض السعر الأصلي للعناصر المخفّضة

`price`

* **النوع**: `string`

* **الوصف**: السعر الحالي المنسّق

* **الاستخدام**: عرض سعر العنصر الحالي

`savings`

* **النوع**: `string | undefined`

* **الوصف**: مبلغ الوفورات المنسّق

* **الاستخدام**: عرض مقدار ما يوفره العميل

<div id="cartitem-object-properties">
  ### **خصائص كائن CartItem**
</div>

يحتوي كائن `CartItem` على جميع المعلومات التفصيلية حول عنصر السلة. يتوفر هذا الكائن كـ props.rawItem في قالب Product Tile وكـ props.item في قالب Variant.

<div id="core-identification">
  #### **التعريف الأساسي**
</div>

* `key (string)` - معرّف فريد لعنصر السلة هذا.

* `id (number)` - معرّف الخيار (حقل قديم، استخدم variant\_id بدلاً منه)

* `variant_id (number)` - معرّف خيار Shopify لهذا العنصر

* `product_id (number)` - معرّف منتج Shopify

* `lineIdxFrom1 (number)` - فهرس هذا العنصر بدءًا من 1 في السلة الأصلية قبل التعديلات

<div id="product-information">
  #### **معلومات المنتج**
</div>

* `title (string)` - عنوان عنصر السلة (عادةً عنوان الخيار)

* `product_title (string)` - عنوان المنتج الرئيسي

* `handle (string)` - معرّف رابط المنتج (مثل "camp-stool")

* `vendor (string)` - اسم بائع/علامة المنتج

* `product_type (string)` - فئة/نوع المنتج لأغراض الضرائب

* `sku (string)` - معرّف وحدة إدارة المخزون

* `product_description (string)` - الوصف الكامل للمنتج

* `product_has_only_default_variant (boolean)` - ما إذا كان للمنتج خيار واحد فقط

<div id="pricing-all-prices-in-cents">
  #### **التسعير (جميع الأسعار بالسنتات)**
</div>

* `quantity (number)` - عدد هذا العنصر في السلة

* `price (number)` - سعر الوحدة قبل الخصومات

* `original_price (number)` - نفس price

* `discounted_price (number)` - سعر الوحدة بعد الخصومات على مستوى المنتج

* `compare_at_price (number | null)` - سعر المقارنة (MSRP). ملاحظة: هذا الحقل مضاف بواسطة Upcart، وليس مقدمًا من واجهة برمجة تطبيقات سلة Shopify

* `final_line_price (number)` - السعر الإجمالي بعد الخصومات على مستوى المنتج (quantity × discounted\_price)

* `original_line_price (number)` - السعر الإجمالي قبل الخصومات (quantity × price)

* `line_price (number)` - السعر الإجمالي بعد جميع الخصومات

* `final_price (number)` - **مهمل** - سعر الوحدة بعد خصومات المنتج (لا يأخذ الكمية في الحسبان)

* `total_discount (number)` - نفس line\_level\_total\_discount

* `line_level_total_discount (number)` - إجمالي مبلغ الخصم المطبّق على عنصر السلة هذا

<div id="media-urls">
  #### **الوسائط والروابط**
</div>

* `image (string)` - رابط صورة المنتج الرئيسية

* `url (string)` - مسار الرابط النسبي لصفحة المنتج (مثل "/products/camp-stool?variant=42789611372803")

* `featured_image (object | null)` - تفاصيل الصورة المميزة:

  * `alt (string)` - النص البديل للصورة
  * `aspect_ratio (number)` - نسبة أبعاد الصورة
  * `height (number)` - ارتفاع الصورة بالبكسل
  * `url (string)` - رابط الصورة
  * `width (number)` - عرض الصورة بالبكسل

<div id="variants-options">
  #### **الخيارات (Variants & Options)**
</div>

* `variant_title (string | null)` - عنوان الخيار (مثل "Large / Red")

* `variant_options (string[])` - مصفوفة قيم خيارات المنتج

* `options_with_values (Array)` - معلومات الخيارات التفصيلية:

  * `name (string)` - اسم الخيار (مثل "Size")
  * `value (string)` - قيمة الخيار (مثل "Large")

* `untranslated_product_title (string | undefined)` - عنوان المنتج الأصلي قبل الترجمة (في استجابات تعديل السلة فقط)

* `untranslated_variant_title (string | undefined)` - عنوان الخيار الأصلي قبل الترجمة (في استجابات تعديل السلة فقط)

<div id="custom-properties-metadata">
  #### **الخصائص المخصصة والبيانات الوصفية**
</div>

* `properties (Record<string, any> | null)` - خصائص عنصر السلة المخصصة، أو `null` عندما لا يملك العنصر أيًا منها — تحقق قبل قراءة أي مفتاح. الخصائص التي تبدأ مفاتيحها بـ `__` مخفية دائمًا عن العملاء؛ والمفاتيح التي تبدأ بشرطة سفلية واحدة `_` مخفية أيضًا عند تشغيل إعداد السلة **Hide properties starting with single underscore "\_"**.

* `gift_card (boolean)` - ما إذا كان هذا العنصر بطاقة هدية

* `taxable (boolean)` - ما إذا كان هذا العنصر خاضعًا للضريبة

* `requires_shipping (boolean)` - ما إذا كان هذا العنصر يتطلب شحنًا

* `grams (number)` - وزن العنصر بالجرامات

<div id="discounts-promotions">
  #### **الخصومات والعروض الترويجية**
</div>

* `discounts (Array)` - معلومات خصم مبسّطة:

  * `amount (number)` - مبلغ الخصم بالسنتات
  * `title (string)` - عنوان/اسم الخصم

* `line_level_discount_allocations (Array)` - معلومات تخصيص الخصم التفصيلية:

  * `amount (number)` - مبلغ الخصم بالسنتات
  * `discount_application (object)` - تفاصيل تطبيق الخصم الكاملة:

    * `allocation_method (string)` - كيفية تخصيص الخصم
    * `created_at (string)` - وقت إنشاء الخصم
    * `description (string | null)` - وصف الخصم
    * `key (string)` - معرّف مفتاح الخصم
    * `target_selection (string)` - ما يستهدفه الخصم
    * `target_type (string)` - نوع الهدف
    * `title (string)` - عنوان الخصم
    * `total_allocated_amount (number)` - إجمالي المبلغ المخصص
    * `type ('discount_code' | '')` - نوع الخصم (سلسلة فارغة للخصومات التلقائية)
    * `value (string)` - قيمة الخصم
    * `value_type (string)` - كيفية تطبيق القيمة

<div id="bundle-products">
  #### **منتجات الحزم**
</div>

* `has_components (boolean | undefined)` - ما إذا كان هذا العنصر حزمة تحتوي على منتجات أخرى (في استجابات GET للسلة فقط)

* `item_components (Array | null | undefined)` - تفاصيل مكوّنات الحزمة:

  * `quantity (number)` - كمية هذا المكوّن
  * `image (object)` - صورة المكوّن:

    * `url (string)` - رابط الصورة
    * `height (number | null)` - ارتفاع الصورة
    * `width (number | null)` - عرض الصورة
    * `alt (string)` - النص البديل

* `product (object)` - معلومات منتج المكوّن:

  * `title (string)` - عنوان المنتج
  * `has_only_default_variant (boolean)` - ما إذا كان للمنتج الخيار الافتراضي فقط

* `variantTitle (string)` - عنوان خيار المكوّن

<div id="business-rules">
  #### **قواعد العمل**
</div>

* `quantity_rule (object | undefined)` - قيود الكمية (في استجابات GET للسلة فقط):

  * `min (number)` - الحد الأدنى للكمية المسموح بها
  * `max (number | null)` - الحد الأقصى للكمية المسموح بها (null = بلا حد)
  * `increment (number)` - خطوة زيادة الكمية

<div id="subscription-information">
  #### **معلومات الاشتراك**
</div>

* `selling_plan_allocation (object | undefined)` - تفاصيل الاشتراك/خطة البيع:

  * `price (number)` - سعر الاشتراك بالسنتات
  * `compare_at_price (number | null)` - سعر المقارنة للاشتراك
  * `per_delivery_price (number)` - السعر لكل تسليم
  * `selling_plan (object)` - تفاصيل خطة البيع:

    * `id (number)` - معرّف خطة البيع
    * `name (string)` - اسم الخطة
    * `description (string)` - وصف الخطة
    * `options (Array)` - خيارات الخطة:

      * `name (string)` - اسم الخيار
      * `position (number)` - موضع الخيار
      * `value (string)` - قيمة الخيار
    * `recurring_deliveries (boolean)` - ما إذا كانت الخطة تتضمن تسليمات متكررة

<div id="integration-metadata">
  #### **بيانات التكامل الوصفية**
</div>

* `__appIntegrated (object | undefined)` - بيانات تكامل التطبيقات الخارجية:

  * `app ('stay.ai')` - معرّف التطبيق المتكامل
  * `bundleRole ('parent' | 'child')` - الدور في بنية الحزمة

<div id="upsells">
  ## عروض البيع الإضافي (Upsells)
</div>

تتيح لك وحدة Upsells تخصيص عرض منتجات البيع الإضافي بتصميمك الخاص مع الحفاظ على وظائف التجارة الإلكترونية الأساسية مثل اختيار الخيارات وإجراءات الإضافة إلى السلة وعرض معلومات المنتج.

<div id="available-props-upsell-tile-template">
  ### **الخصائص المتاحة - قالب بطاقة البيع الإضافي**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-upsell-tile-product-sale.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=276d261e795de83ca0882f4cd713ec61" alt="بطاقة بيع إضافي تعرض منتجًا بسعر تخفيض وقائمة منسدلة للخيارات وزر Add" width="400" data-path="images/upcart/custom-template-upsell-tile-product-sale.png" />

`itemUrl`

* **النوع**: `string`

* **الوصف**: رابط صفحة المنتج

* **الاستخدام**: إنشاء روابط لصفحة تفاصيل المنتج لتحسين تنقل المستخدم

```
<a href={props.itemUrl} className="product-link">  
  <img src={props.imageUrl} alt={props.altText} />  
</a>
```

`imageUrl`

* **النوع**: `string | undefined`

* **الوصف**: رابط صورة المنتج

* **الاستخدام**: عرض صور المنتجات في تنفيذات البيع الإضافي المخصصة

* **البديل الاحتياطي**: تعامل مع القيم undefined بسلاسة باستخدام صور بديلة

`description`

* **النوع**: `string`

* **الوصف**: وصف المنتج

* **الاستخدام**: عرض وصف المنتج في تنفيذات البيع الإضافي المخصصة

`altText`

* **النوع**: `string`

* **الوصف**: النص البديل لصورة المنتج لأغراض إمكانية الوصول

* **الاستخدام**: توفير دعم قارئات الشاشة وتحسين الامتثال لإمكانية الوصول

```
<img   
  src={props.imageUrl}   
  alt={props.altText}  
  className="product-image"  
/>
```

`productId`

* **النوع**: `string`

* **الوصف**: المعرّف الفريد للمنتج

* **الاستخدام**: تتبع المنتجات أو تنفيذ التحليلات أو الاستخدام في وظيفة الإضافة إلى السلة

`productTitle`

* **النوع**: `string`

* **الوصف**: عنوان/اسم المنتج

* **الاستخدام**: عرض اسم المنتج في تنفيذات البيع الإضافي المخصصة

```
<div>  
  <h3>{props.productTitle}</h3>  
</div>
```

`oldPrice` و`newPrice`

* **النوع**: `string | null` (oldPrice)، `string` (newPrice)

* **الوصف**: سعر المقارنة والسعر الحالي منسّقين

* **الاستخدام**: عرض معلومات التسعير مع مؤشرات التخفيض

`isSingleVariant`

* **النوع**: `boolean`

* **الوصف**: يشير إلى ما إذا كان للمنتج خيار واحد فقط

* **الاستخدام**: عرض عناصر واجهة اختيار الخيارات بشكل مشروط

`productOptions`

* **النوع**: `{ name: string; position: 1 | 2 | 3; values: string[]; }[]`

* **الوصف**: ضبط خيارات المنتج الكامل بما في ذلك جميع الاختيارات المتاحة

* **الاستخدام**: الوصول إلى معلومات خيارات المنتج التفصيلية لواجهة اختيار خيارات متقدمة

`variantOptions`

* **النوع**: `{ label: string; value: string }[]`

* **الوصف**: خيارات المنتج المتاحة

* **الاستخدام**: إنشاء قوائم منسدلة أو أزرار لاختيار الخيارات

* **البنية**: يحتوي كل خيار على تسمية عرض ومعرّف قيمة فريد

`selectedVariantId` و`selectedVariantLabel`

* **النوع**: string (selectedVariantId)، string | undefined (selectedVariantLabel)

* **الوصف**: معرّف الخيار المحدد حاليًا وتسمية عرضه

* **الاستخدام**: تتبع معلومات الخيار المحدد وعرضها

`onVariantChange`

* **النوع**: `(variantId: string) => void`

* **الوصف**: دالة لمعالجة تغييرات اختيار الخيار

* **الاستخدام**: تحديث الخيار المحدد عندما يقوم المستخدم بالاختيار

`onAddClick`

* **النوع**: `(productId: string, variantId?: string) => void`

* **الوصف**: دالة لمعالجة إضافة المنتج إلى السلة

* **الاستخدام**: تنفيذ وظيفة الإضافة إلى السلة مع تحديد المنتج والخيار بشكل صحيح

```
<button   
  onClick={() => props.onAddClick(props.productId, props.selectedVariantId)}  
  disabled={props.addLoading}  
>  
  {props.addLoading ? 'Adding...' : props.addButtonText}  
</button>
```

`rating` و`reviewCount`

* **النوع**: `number | undefined` (rating)، `string | undefined` (reviewCount)

* **الوصف**: تقييم المنتج ونص عدد التقييمات المنسّق

* **الاستخدام**: عرض الدليل الاجتماعي ومؤشرات جودة المنتج

`addLoading` و`addButtonText`

* **النوع**: `boolean` (addLoading)، `string` (addButtonText)

* **الوصف**: حالة التحميل لإجراء الإضافة إلى السلة ونص الزر

* **الاستخدام**: تقديم ملاحظات للمستخدم أثناء عمليات السلة وتخصيص نص الزر

`cartItemsCount`

* **النوع**: `number`

* **الوصف**: العدد الحالي للعناصر في السلة

* **الاستخدام**: عرض حالة السلة أو تنفيذ منطق قائم على السلة

<div id="additional-notes">
  ## الملاحظات الإضافية
</div>

تتيح لك وحدة Notes تخصيص وظيفة ملاحظات السلة بتصميمك الخاص مع الحفاظ على قدرات تدوين الملاحظات الأساسية مثل الأقسام القابلة للتوسيع ومعالجة إدخال النص وحالات التحميل.

<div id="available-props-full-template-5">
  ### **الخصائص المتاحة - القالب الكامل**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-notes-section-expandable.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=ce3f2a79f875029e6358c2227cd024d9" alt="قسم ملاحظات السلة مع حقل نصي قابل للتوسيع للتعليمات الخاصة" width="400" data-path="images/upcart/custom-template-cart-notes-section-expandable.png" />

`cartNote`

* **النوع**: `string`

* **الوصف**: محتوى ملاحظة السلة الحالي الذي أدخله العميل

* **الاستخدام**: عرض نص ملاحظة السلة وإدارته في التنفيذات المخصصة

```
<textarea  
  value={props.cartNote}  
  ...  
/>
```

`notesPlaceholder`

* **النوع**: `string`

* **الوصف**: النص البديل لحقل إدخال الملاحظات

* **الاستخدام**: تقديم إرشادات للعملاء حول ما يجب تضمينه في ملاحظاتهم

```
<textarea  
  placeholder={props.notesPlaceholder}  
  ...  
/>
```

`notesTitle`

* **النوع**: `string`

* **الوصف**: نص عنوان/رأس قسم الملاحظات

* **الاستخدام**: عرض عنوان القسم في تنفيذات الملاحظات المخصصة

```
<h3 className="notes-title" dangerouslySetInnerHTML={{ __html: props.notesTitle }} />
```

`chevronDownIconComponent`

* **النوع**: `React.ReactElement`

* **الوصف**: مكوّن أيقونة سهم مُعدّ مسبقًا لوظيفة التوسيع/الطي

* **الاستخدام**: عرض مؤشرات توسيع/طي متسقة في التنفيذات المخصصة

`loadingIndicatorComponent`

* **النوع**: `React.ReactElement | null`

* **الوصف**: مكوّن مؤشر تحميل مُعدّ مسبقًا للعمليات غير المتزامنة

* **الاستخدام**: عرض حالات التحميل أثناء عمليات حفظ الملاحظات

`handleCartNoteChange`

* **النوع**: `(newCartNote: string) => void`

* **الوصف**: دالة لمعالجة تغييرات محتوى ملاحظة السلة

* **الاستخدام**: تحديث ملاحظة السلة عندما يعدّل المستخدم النص

`isExpanded`

* **النوع**: `boolean`

* **الوصف**: يشير إلى ما إذا كان قسم الملاحظات موسّعًا حاليًا

* **الاستخدام**: التحكم في ظهور منطقة إدخال الملاحظات

`toggleCollapsible`

* **النوع**: `() => void`

* **الوصف**: دالة لتبديل حالة التوسيع/الطي لقسم الملاحظات

* **الاستخدام**: اربطها بأزرار أو عناصر تفاعلية للتحكم في ظهور القسم

***

<div id="footer-section">
  ## قسم التذييل (Footer)
</div>

<div id="add-ons">
  ## الإضافات (Add-ons)
</div>

تتيح لك وحدة Addons تخصيص عرض منتجات الإضافات بتصميمك الخاص مع الحفاظ على وظائف التجارة الإلكترونية الأساسية مثل عرض معلومات المنتج والتسعير وعناصر التحكم بالتبديل وتنسيق العملة.

<div id="available-props-full-template-6">
  ### **الخصائص المتاحة - القالب الكامل**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-add-on-product-row-gift-card.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=8a705eec52fbe1e24420467f92978829" alt="صف منتج إضافي يعرض بطاقة هدية مع السعر ومفتاح التمكين" width="400" data-path="images/upcart/custom-template-add-on-product-row-gift-card.png" />

`addonProduct`

* **النوع**:

  ```
  {  
    product: {  
      id: number;  
      title: string;  
      description: string;  
    };  
    variant: {  
      id: number;  
      price: number;  
      compare_at_price: number | null;  
    };  
    image: {  
      src: string;  
      alt: string;  
    };  
  }
  ```

* **الوصف**: معلومات منتج الإضافة الكاملة بما في ذلك تفاصيل المنتج وتسعير الخيار وبيانات الصورة

* **الاستخدام**: الوصول إلى جميع معلومات المنتج اللازمة لعرض منتجات الإضافات

* **البنية**: يحتوي على كائنات متداخلة للمنتج والخيار والصورة مع بيانات منتج شاملة

  * **خصائص كائن المنتج** `addonProduct.product`

    * **id**: معرّف رقمي فريد للمنتج
    * **title**: اسم عرض منتج الإضافة
    * **description**: محتوى وصف HTML للمنتج
  * **خصائص كائن الخيار**

    * **id**: معرّف رقمي فريد للخيار
    * **price**: السعر الحالي بالسنتات
    * **compare\_at\_price**: السعر الأصلي بالسنتات (null إذا لم يوجد سعر مقارنة)
  * **خصائص كائن الصورة**

    * **src**: رابط صورة المنتج
    * **alt**: النص البديل للصورة (لإمكانية الوصول)

`toggle`

* **النوع**:

  ```
  {  
    state: 'enabled' | 'disabled' | 'loading';  
    handleEnable: () => void;  
    handleDisable: () => void;  
  } | null
  ```

* **الوصف**: حالة عنصر التحكم بالتبديل ومعالجاته لتمكين/تعطيل الإضافة

* **الاستخدام**: تنفيذ وظيفة تبديل تفاعلية لاختيار الإضافات

* **الحالات**: ثلاث حالات ممكنة - enabled وdisabled وloading

* **المعالجات**: دوال منفصلة لإجراءات التمكين والتعطيل

`moneyFormat`

* **النوع**: `string`

* **الوصف**: سلسلة تنسيق العملة المستخدمة لتنسيق الأسعار

* **الاستخدام**: مرّرها إلى دالة formatMoney لعرض عملة متسق

`formatMoney`

* **النوع**:

  ```
  (options: {  
    cents: string | number;  
    format?: string;  
    shouldRemoveHTML?: boolean;  
  }) => string
  ```

* **الوصف**: دالة مساعدة لتنسيق قيم العملة

* **الاستخدام**: تنسيق الأسعار بشكل متسق مع إعدادات عملة المتجر

* **المعاملات**: تأخذ قيمة السنتات، وسلسلة تنسيق اختيارية، وخيار إزالة HTML

<div id="discount-codes">
  ## أكواد الخصم
</div>

تتيح لك وحدة Discount Code تخصيص وظيفة إدخال كود الخصم بتصميمك الخاص مع الحفاظ على قدرات التجارة الإلكترونية الأساسية مثل التحقق من الكود وإرسال النموذج وملاحظات المستخدم.

<div id="available-props-full-template-7">
  ### **الخصائص المتاحة - القالب الكامل**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-discount-code-input-field.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=9e8eb5e08805c18b26a3338707a9909a" alt="حقل إدخال كود الخصم مع زر Apply" width="400" data-path="images/upcart/custom-template-discount-code-input-field.png" />

`indicator`

* **النوع**: `'validating' | 'invalid' | 'none'`

* **الوصف**: حالة التحقق الحالية لإدخال كود الخصم

* **الاستخدام**: عرض ملاحظات واجهة مناسبة بناءً على حالة التحقق

* **الحالات**:

  * `validating`: الكود قيد المعالجة/التحقق
  * `invalid`: فشل التحقق من الكود
  * `none`: لا توجد حالة تحقق (افتراضي/خامل)

`discountCodeInput`

* **النوع**: `string`

* **الوصف**: القيمة الحالية لحقل إدخال كود الخصم

* **الاستخدام**: عرض نص كود الخصم الذي أدخله المستخدم وإدارته

```
<input  
  type="text"  
  value={props.discountCodeInput}  
  onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
  ...  
/>
```

`discountCodePlaceholder`

* **النوع**: `string`

* **الوصف**: النص البديل لحقل إدخال كود الخصم

* **الاستخدام**: تقديم إرشادات للمستخدمين حول ما يجب إدخاله في الحقل

`discountCodeButtonText`

* **النوع**: `string`

* **الوصف**: النص المعروض على زر التطبيق/الإرسال

* **الاستخدام**: تخصيص نص زر إرسال كود الخصم

`setDiscountCodeInput`

* **النوع**: `(value: string | ((prev: string) => string)) => void`

* **الوصف**: دالة لتحديث قيمة إدخال كود الخصم

* **الاستخدام**: معالجة تغييرات إدخال المستخدم في حقل كود الخصم

`handleSubmit`

* **النوع**: `(e: React.FormEvent<HTMLFormElement>) => void`

* **الوصف**: دالة لمعالجة إرسال النموذج لتطبيق كود الخصم

* **الاستخدام**: معالجة التحقق من كود الخصم وتطبيقه

* **الحدث**: يعالج أحداث إرسال النموذج

```
<form onSubmit={props.handleSubmit} >  
  <div className="input-group">  
    <input  
      type="text"  
      value={props.discountCodeInput}  
      onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
      placeholder={props.discountCodePlaceholder}  
    />   
    <button   
      type="submit"  
      disabled={props.indicator === 'validating' || !props.discountCodeInput.trim()}  
    >  
      {props.discountCodeButtonText}  
    </button>  
  </div>  
</form>
```

<div id="cart-summary">
  ## ملخص السلة
</div>

تتيح لك وحدة Cart Summary تخصيص عرض ملخص السلة والخصومات بتصميمك الخاص مع الحفاظ على وظائف التجارة الإلكترونية الأساسية مثل إدارة الخصومات وحساب الوفورات وشفافية التسعير.

<div id="available-props-full-template-8">
  ### **الخصائص المتاحة - القالب الكامل**
</div>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/custom-template-cart-summary-discount-row.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=492e00824117bf0b93bf0c3a1402050f" alt="صف خصم في ملخص السلة يعرض كود خصم مطبّقًا والمبلغ" width="400" data-path="images/upcart/custom-template-cart-summary-discount-row.png" />

`totalSavingsText`

* **النوع**: `string`

* **الوصف**: تسمية نصية لقسم إجمالي الوفورات

* **الاستخدام**: عرض تسمية الوفورات في تنفيذات ملخص السلة المخصصة

`discountApplications`

* **النوع**:

  ```
  {  
    key: string;  
    title: string;  
    type: 'discount_code' | '';  
  }[]
  ```

* **الوصف**: مصفوفة أكواد الخصم المطبّقة والخصومات التلقائية

* **الاستخدام**: عرض جميع الخصومات النشطة مع عناوينها وأنواعها

* **البنية**: يحتوي كل خصم على مفتاح فريد وعنوان عرض ومعرّف نوع

`cartTotalDiscount`

* **النوع**: `number`

* **الوصف**: إجمالي مبلغ الخصم بالسنتات

* **الاستخدام**: الوصول إلى قيمة الخصم الخام للحسابات أو التنسيق المخصص

`showCartTotalDiscount`

* **النوع**: `boolean`

* **الوصف**: يشير إلى ما إذا كان يجب عرض إجمالي الخصم. مُعلَّم كمهمل لصالح `showTotalSavings`، لكن راجع الملاحظة أدناه — داخل القالب المخصص هذه لا تزال الخاصية المتوفرة لديك.

* **الاستخدام**: عرض معلومات الخصم بشكل مشروط بناءً على الإعدادات

`formattedCartTotalDiscount`

* **النوع**: `string`

* **الوصف**: سلسلة HTML منسّقة مسبقًا لإجمالي مبلغ الخصم. مُعلَّمة كمهملة لصالح `formattedTotalSavings`، لكن راجع الملاحظة أدناه.

* **الاستخدام**: عرض مبلغ الخصم منسّقًا بشكل صحيح مع رموز العملة

<Warning>
  **`showTotalSavings` و`formattedTotalSavings` غير متاحين داخل القالب المخصص.** فهما موجودان في السياق الداخلي للوحدة، لكن قالب ملخص السلة يُسلَّم فقط `showCartTotalDiscount` و`formattedCartTotalDiscount` — وقراءة الزوج الأحدث تعيد `undefined`. استخدم الاثنين المذكورين أعلاه، ولاحظ أنهما يعرضان إجمالي الخصم فقط؛ فهما لا يتّبعان إعداد **Show compare-at price savings in footer total**.
</Warning>

`isRemovingDiscount`

* **النوع**: `boolean`

* **الوصف**: يشير إلى ما إذا كانت عملية إزالة خصم قيد التنفيذ

* **الاستخدام**: عرض حالات التحميل أثناء إزالة الخصم

`handleRemoveDiscount`

* **النوع**: `() => Promise<void>`

* **الوصف**: دالة لمعالجة إزالة كود الخصم

* **الاستخدام**: إزالة أكواد الخصم المطبّقة من السلة

`totalCompareAtPrice`

* **النوع**: `number`

* **الوصف**: مجموع أسعار المقارنة الإجمالي (جميع العناصر في السلة)

* **الاستخدام**: حساب وعرض الوفورات أو معلومات التسعير الأصلية

`totalAfterAllDiscounts`

* **النوع**: `number`

* **الوصف**: إجمالي السلة النهائي بالسنتات بعد تطبيق جميع الخصومات

* **الاستخدام**: عرض السعر النهائي الذي سيدفعه العملاء

`originalTotalPrice`

* **النوع**: `number`

* **الوصف**: إجمالي السلة الأصلي بالسنتات قبل أي خصومات

* **الاستخدام**: عرض التسعير الأصلي للشفافية وحساب الوفورات

`cartItemCount`

* **النوع**: `number`

* **الوصف**: إجمالي عدد العناصر في السلة

* **الاستخدام**: عرض معلومات عدد العناصر في ملخصات السلة

<div id="trust-badges">
  ## شارات الثقة
</div>

تتيح لك وحدة Trust Badges تخصيص عرض شارات الثقة بتصميمك الخاص مع الحفاظ على وظائف بناء الثقة الأساسية مثل الظهور المشروط للشارات والمعالجة الصحيحة للصور.

<div id="available-props-full-template-9">
  ### **الخصائص المتاحة - القالب الكامل**
</div>

`showBadge`

* **النوع**: `boolean`

* **الوصف**: يشير إلى ما إذا كان يجب عرض شارة الثقة

* **الاستخدام**: التحكم في ظهور شارات الثقة بناءً على إعدادات الوحدة

`badgeUrl`

* **النوع**: `string`

* **الوصف**: رابط صورة شارة الثقة المراد عرضها

* **الاستخدام**: رابط مصدر صورة شارة الثقة في التنفيذات المخصصة