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

# كتلة البيع الإضافي (Upsells)

> كتلة Upsells في سلة Aftersell — عروض منتجات تختارها استراتيجية وتُعرض في الدُرج.

> تعرض كتلة **Upsells** عروض منتجات في دُرج السلة، تختارها **استراتيجية (Strategy)** تحددها أنت. عندما يفتح متسوق السلة، تُظهر الكتلة المنتجات التي تعيدها استراتيجيتك بناءً على محتويات السلة الحالية وأي قواعد استهداف قمت بتهيئتها.<br /><br />زد متوسط قيمة الطلب بإظهار عروض منتجات ذات صلة في اللحظة التي يفتح فيها المتسوقون سلتهم، باستخدام استراتيجية تختار ما يُعرض بناءً على محتويات السلة وقواعد الاستهداف الخاصة بك.

<Info>
  على عكس كتلة [**Product add-on**](/ar/aftersell/cart/product-add-on-block)، التي تعرض دائمًا منتجًا واحدًا تختاره، تُدار Upsells باستراتيجية تقرر ما يُعرض.
</Info>

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-upsells-block-strategy-picked-product-recommendations.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=5ce00c7f12e1ddf32a0533eb700d22ee" alt="كتلة Upsells تعرض توصيات منتجات مختارة بواسطة استراتيجية في دُرج السلة" width="1228" height="510" data-path="images/aftersell/cart-upsells-block-strategy-picked-product-recommendations.png" />
</Frame>

<div id="behavior">
  ## السلوك
</div>

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

<div id="settings">
  ## الإعدادات
</div>

| الإعداد                   | ما الذي يتحكم فيه                                                                                                                                                                   | الافتراضي                         |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| **Title**                 | عنوان بنص منسق فوق العروض. يدعم الخط الغامق والمائل والمحاذاة واللون.                                                                                                               | `You may also like`               |
| **Add button text**       | التسمية على زر الإضافة لكل منتج.                                                                                                                                                    | `Add`                             |
| **Strategy**              | الاستراتيجية التي تختار المنتجات المعروضة.                                                                                                                                          | استراتيجية Shopify AI، تُعيَّن لك |
| **Layout**                | **Carousel** أو **List**.                                                                                                                                                           | Carousel                          |
| **Maximum products**      | الحد الأقصى لعدد المنتجات المعروضة. يقبل `1`–`12`.                                                                                                                                  | `4`                               |
| **Show compare-at price** | ما إذا كان يُعرض سعر مقارنة مشطوب.                                                                                                                                                  | مفعّل                             |
| **Show product reviews**  | ما إذا كانت تُعرض تقييمات النجوم وأعداد المراجعات على كل بطاقة بيع إضافي. تُستمد التقييمات من حقول المنتج الوصفية لتطبيق المراجعات لديك ولا تظهر إلا عند وجود بيانات مراجعات صالحة. | معطّل                             |

<div id="supported-review-apps">
  ### تطبيقات المراجعات المدعومة
</div>

تطبيقات المراجعات التالية القائمة على الحقول الوصفية مدعومة: Shopify Product Reviews و Junip و Okendo و Growave و Fera و Stamped و Loox و REVIEWS.io و Automizely Reviews و Judge.me و Ali Reviews و Trustoo و Rivo و Rivyo و Vitals. أما Yotpo فغير مدعوم لأنه يستخدم واجهة برمجة منفصلة بدلًا من حقول المنتج الوصفية.

<div id="design">
  ## التصميم
</div>

تمتلك كتلة Upsells تجاوزات تصميم لكل كتلة في لوحة **Design** الخاصة بها. هذه تتجاوز إعدادات التصميم العامة للسلة لهذه الكتلة فقط. ترك قيمة فارغة يرث الإعداد العام.

<div id="text-styling">
  ### تنسيق النصوص
</div>

تتضمن كتلة Upsells قسم **Text** في إعدادات التصميم الخاصة بها. استخدمه للتحكم في طباعة عناصر النص الفردية على كل بطاقة بيع إضافي. اختر عنصر نص من المنتقي لضبط إعداداته:

| الإعداد            | ما الذي يتحكم فيه                                                                                                |
| ------------------ | ---------------------------------------------------------------------------------------------------------------- |
| **Text color**     | لون عنصر النص المحدد.                                                                                            |
| **Font**           | **Theme font** (يرث خط قالبك) أو **Custom font** (أدخل اسم خط يُحمّله قالبك مسبقًا). متاح لعنصر **Heading** فقط. |
| **Size**           | حجم الخط بالبكسل.                                                                                                |
| **Weight**         | ثقل الخط: Light أو Regular أو Medium أو Semibold أو Bold.                                                        |
| **Line height**    | ارتفاع السطر كمضاعف لحجم الخط (مثال: `1.4`).                                                                     |
| **Letter spacing** | تباعد الحروف بالبكسل. القيم السالبة تضيّق النص.                                                                  |

عناصر النص التي يمكنك تنسيقها مقسّمة حسب الفئة:

**Heading**

* **Heading** — عنوان القسم فوق بطاقات البيع الإضافي (مثال: *You may also like*). يدعم أيضًا عائلة خط مخصصة. أما الخط الغامق واللون فيُضبطان في محرر النص المنسق أعلاه.

**Product**

* **Product title** — اسم المنتج على كل بطاقة بيع إضافي.
* **Review count** — عدد المراجعات المعروض عندما يكون **Show product reviews** مفعّلًا.

**Pricing**

* **Price** — السعر الحالي على كل بطاقة.
* **Compare-at price** — السعر الأصلي المشطوب.
* **Discount** — تسمية الخصم (مثال: *20% off*).

ترك أي حقل فارغًا يُبقي القيمة الافتراضية للعنصر.

<Tip>
  النقر على عنصر نص مباشرة في معاينة السلة يبرزه ويفتح عناصر التحكم به في اللوحة تلقائيًا.
</Tip>

<div id="tile-colors">
  ### ألوان البطاقات
</div>

| الإعداد                   | ما الذي يتحكم فيه                    | الافتراضي |
| ------------------------- | ------------------------------------ | --------- |
| **Tile background color** | تعبئة خلفية كل بطاقة منتج بيع إضافي. | شفاف      |
| **Tile border color**     | لون حدود كل بطاقة منتج بيع إضافي.    | `#F6F6F7` |

<div id="reviews">
  ### المراجعات
</div>

عند تفعيل **Show product reviews**، يمكنك تخصيص ألوان النجوم من قسم **Reviews** في لوحة التصميم.

| الإعداد              | ما الذي يتحكم فيه             | الافتراضي |
| -------------------- | ----------------------------- | --------- |
| **Star color**       | الجزء المملوء من كل نجمة.     | `#FDCC0D` |
| **Empty star color** | الجزء غير المملوء من كل نجمة. | `#D1D5DB` |

<div id="placement-and-limits">
  ## الموضع والحدود
</div>

* **المنطقة:** الجسم أو الأسفل.
* **الحد الأقصى:** 1 لكل حالة سلة — للسلة الممتلئة والسلة الفارغة واحدة لكل منهما.
* **الحالة:** السلة الممتلئة والفارغة معًا.
* لا تُضاف افتراضيًا. غير مقفلة — يمكنك إزالتها أو إخفاؤها.

<div id="selecting-a-strategy">
  ## اختيار استراتيجية
</div>

لا تصل كتلة Upsells فارغة: إذا لم تُعيَّن استراتيجية، تحل Aftersell استراتيجية Shopify AI لمتجرك — منشئةً إياها إذا لم تكن لديك واحدة بعد — وتملؤها، بحيث تعمل الكتلة على الفور. افتح محدد **Strategy** لتغييرها. يحتوي المحدد على مجموعتين:

**Quick start**

* **Create strategy from selected products** — اختر منتجات محددة مباشرة وستُنشأ استراتيجية لك تلقائيًا.
* **Create strategy from scratch** — يفتح محرر الاستراتيجيات لتتمكن من بناء القواعد دون مغادرة محرر السلة.

**Strategies**

* **Shopify AI recommendations** — تنشئ استراتيجية مدعومة بتوصيات Shopify نفسها، تُسمى **Shopify AI recommended products** أينما ظهرت بعد ذلك. يختفي هذا الإدخال بمجرد امتلاكك واحدة، إذ لا يحتاج المتجر أبدًا إلا إلى استراتيجية Shopify AI واحدة.
* استراتيجياتك الحالية، مسرودة بالاسم. اكتب في حقل البحث لتصفيتها.

بمجرد اختيار استراتيجية، يظهر اسمها في صف الاستراتيجية داخل الكتلة.

<div id="managing-a-selected-strategy">
  ## إدارة الاستراتيجية المختارة
</div>

بعد إرفاق استراتيجية، يظهر زر **•••** (علامة القطع) في صف الاستراتيجية. انقر عليه لفتح قائمة الإجراءات:

* **Edit strategy** — يفتح محرر الاستراتيجيات في تبويب جديد، بحيث تبقى جلسة محرر السلة وأي تغييرات غير محفوظة سليمة. هذا الخيار غير متاح لاستراتيجية توصيات Shopify AI، التي تُدار تلقائيًا وليس لها قواعد قابلة للتعديل.
* **Remove from upsell** — يفصل الاستراتيجية عن هذه الكتلة. الاستراتيجية نفسها لا تُحذف؛ تبقى متاحة في قائمة استراتيجياتك.

تعديل استراتيجية في تبويب جديد لا يؤثر على جلسة محرر السلة — يمكنك العودة إلى تبويب محرر السلة ومواصلة التهيئة دون فقدان عملك.

<div id="custom-template">
  ## القالب المخصص
</div>

تدعم [قالبًا مخصصًا](/ar/aftersell/cart/custom-templates) من تبويب Code الخاص بها، والذي يستبدل ترميز هذه الكتلة المدمج بـ JSX الخاص بك. هذه هي الخصائص التي تستقبلها.

<div id="block-content">
  ### محتوى الكتلة
</div>

| الخاصية         | النوع                  | ما هي لأجله                                                         |
| --------------- | ---------------------- | ------------------------------------------------------------------- |
| `title`         | `string`               | عنوان القسم.                                                        |
| `addButtonText` | `string`               | تسمية زر الإضافة إلى السلة.                                         |
| `layout`        | `'carousel' \| 'list'` | تمرير أفقي، أو التفاف. فرّع ترميزك بناءً عليها.                     |
| `upsells`       | `UpsellCard[]`         | المنتجات الجاهزة للعرض. راجع [شكل البطاقة](#the-upsell-card) أدناه. |
| `isLoading`     | `boolean`              | `true` بينما لا تزال منتجات البيع الإضافي تُجلب.                    |

<div id="adding-to-cart">
  ### الإضافة إلى السلة
</div>

| الخاصية           | النوع                                            | ما هي لأجله                                                              |
| ----------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| `selectVariant`   | `(productId: string, variantId: number) => void` | تحدد متغيرًا لمنتج.                                                      |
| `handleAdd`       | `(productId: string) => void`                    | تضيف المتغير المحدد لذلك المنتج إلى السلة.                               |
| `addingProductId` | `string \| null`                                 | المنتج الجاري إضافته حاليًا، لتتمكن من تعطيل زره فقط. `null` عند الخمول. |

<div id="carousel-controls">
  ### عناصر تحكم العرض الدوّار
</div>

ذات صلة فقط عندما تكون `layout` هي `'carousel'`.

| الخاصية        | النوع                                 | ما هي لأجله                                                                    |
| -------------- | ------------------------------------- | ------------------------------------------------------------------------------ |
| `trackRef`     | `{ current: HTMLDivElement \| null }` | أرفقها بعنصر التمرير لديك عبر `ref={props.trackRef}` حتى تستطيع الأسهم تمريره. |
| `atStart`      | `boolean`                             | `true` عندما يكون المسار عند حافة بدايته. عطّل السهم الأيسر.                   |
| `atEnd`        | `boolean`                             | `true` عندما يكون المسار عند حافة نهايته. عطّل السهم الأيمن.                   |
| `scrollByCard` | `(direction: 1 \| -1) => void`        | تمرر المسار بطاقة واحدة يسارًا (`-1`) أو يمينًا (`1`).                         |

<div id="the-upsell-card">
  ### بطاقة البيع الإضافي
</div>

كل إدخال في `upsells`:

| الحقل                     | النوع                     | ما هو لأجله                                                                                                                                                                                                                                                                                                |
| ------------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `productId`               | `string`                  | معرّف GID للمنتج. استخدمه كمفتاح React وكهدف للإضافة إلى السلة.                                                                                                                                                                                                                                            |
| `title`                   | `string`                  | عنوان المنتج.                                                                                                                                                                                                                                                                                              |
| `description`             | `string`                  | وصف كنص عادي. `''` عندما لا يوجد للمنتج وصف.                                                                                                                                                                                                                                                               |
| `url`                     | `string \| null`          | رابط صفحة المنتج. `null` عند عدم توفره.                                                                                                                                                                                                                                                                    |
| `imageUrl`                | `string \| null`          | الصورة المميزة. `null` عندما لا يوجد للمنتج صورة.                                                                                                                                                                                                                                                          |
| `selectedVariantImageUrl` | `string \| null`          | صورة المتغير المحدد نفسها. `null` عندما لا يملك المتغير واحدة — ارجع إلى `imageUrl`.                                                                                                                                                                                                                       |
| `variantTitle`            | `string \| null`          | قيم خيارات المتغير المحدد (مثال: `Medium / Blue`)، محلولة مسبقًا. `null` عندما لا يملك المتغير عنوانًا حقيقيًا — فارغ أو نائب Shopify `Default Title`. المنتج الذي يملك متغيرًا واحدًا مسمى لا يزال يُعيد ذلك الاسم، لذا احرس بـ `{upsell.variantTitle && …}` بدلًا من الاعتماد على `hasMultipleVariants`. |
| `priceLabel`              | `string`                  | السعر المعروض، منسّق مسبقًا. سعر التخفيض عند وجود خصم، وإلا سعر المتغير.                                                                                                                                                                                                                                   |
| `compareAtLabel`          | `string \| null`          | السعر الأصلي المشطوب، منسّق مسبقًا. `null` عندما لا يوجد ما يُشطب.                                                                                                                                                                                                                                         |
| `discountLabel`           | `string \| null`          | تسمية خصم مضمّنة مثل `(20% off)`. `null` عند عدم وجود خصم.                                                                                                                                                                                                                                                 |
| `review`                  | `object \| null`          | `{ rating, count, stars }`، حيث `stars` هي 5 روابط صور مُعدة مسبقًا مع تعبئة كسرية مدمجة. اعرض كل واحدة كعنصر صورة. `null` عندما تكون المراجعات معطلة أو لا يملك المنتج أيًا منها.                                                                                                                         |
| `options`                 | `Array<{ name, values }>` | مجموعات الخيارات، لبناء المحددات أو العينات.                                                                                                                                                                                                                                                               |
| `variants`                | `array`                   | تركيبات المتغيرات. انظر أدناه.                                                                                                                                                                                                                                                                             |
| `selectedVariantId`       | `number`                  | المتغير المحدد حاليًا. مرّره إلى `selectVariant`.                                                                                                                                                                                                                                                          |
| `hasMultipleVariants`     | `boolean`                 | ما إذا كان ينبغي عرض محدد متغيرات أصلًا.                                                                                                                                                                                                                                                                   |
| `vendor`                  | `string`                  | بائع المنتج.                                                                                                                                                                                                                                                                                               |
| `selectedVariantImageUrl` | `string \| null`          | صورة المتغير المحدد نفسها. `null` عندما لا يملك واحدة — ارجع إلى `imageUrl`.                                                                                                                                                                                                                               |

يحمل كل إدخال في `variants` الحقول `id` و `title` و `price` و `compareAtPrice` (خام وغير منسّقة، بالوحدة الرئيسية للعملة كسلاسل نصية) و `availableForSale` و `imageUrl` و `sku` و `selectedOptions` (`[{ name, value }]`).

<Warning>
  **التوفر لكل تركيبة، وليس لكل خيار.** يمنحك `options` المجموعات لعرضها، لكن ما إذا كان اختيار معين قابلًا للشراء يوجد في الإدخال المطابق في `variants`. حُل التركيبة التي اختارها المتسوق مقابل `variants` وقيّد بناءً على `availableForSale` لذلك الإدخال، بدلًا من افتراض أن كل قيمة في `options` قابلة للطلب.
</Warning>

<Note>
  `priceLabel` و `compareAtLabel` منسّقان مسبقًا للعرض، بينما `variants[].price` و `variants[].compareAtPrice` سلاسل نصية خام بالوحدة الرئيسية للعملة. لا تخلط بين الاثنين: اعرض التسميات، واستخدم القيم الخام للمقارنات فقط.
</Note>

<div id="design-2">
  ## التصميم
</div>

صمّم هذه الكتلة عبر قسم **Design** الخاص بها في لوحة الإعدادات. هذه تجاوزات لكل كتلة تُطبَّق فوق تصميمك العام وتعود إليه عندما تكون فارغة.

ما هي إعدادات التصميم؟ اعرف المزيد هنا: [إعدادات التصميم](/ar/aftersell/cart/design-settings).