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

# إخفاء عناصر محددة في السلة باستخدام معرّفات المنتجات

> استخدم معرّفات المنتجات لإخفاء شريط المكافآت أو عناصر أخرى في السلة بشكل مشروط بناءً على محتويات السلة.

⚠️ **إشعار مهم**

تعمل هذه التخصيصات فقط مع الإصدار 1 من وحدات سلة Upcart. إذا قمت مؤخرًا بترقية سلتك إلى الإصدار 2، فقد لا تعمل هذه التخصيصات. ستحتاج إلى استخدام المحددات الجديدة المتوفرة للإصدار 2 في [دليل الترحيل.](/ar/upcart/upcart_v20_migration_guide)

إذا لم تعمل تخصيصاتك كما هو متوقع، يمكنك إرجاع السلة إلى الإصدار 1 بنفسك: في Cart Editor، استخدم القائمة المنسدلة **Cart version** أعلى القائمة اليسرى واختر **V1.0 (Legacy)**. تظهر القائمة المنسدلة بمجرد أن تكون كل وحدة في السلة على V2.

نعمل حاليًا على قوالب تخصيص جديدة للإصدار 2 من الوحدات، وستتوفر قريبًا.

<div id="overview">
  # نظرة عامة
</div>

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

يستخدم هذا الإعداد معرّفات المنتجات لاكتشاف المنتجات الموجودة في السلة ويخفي عنصرًا مختارًا إذا تم العثور على تطابق. ستطبّق هذا المنطق باستخدام HTML وCSS مخصصين في محرر Upcart.

***

<div id="when-to-use-this">
  ## متى تستخدم هذا
</div>

* إخفاء شريط المكافآت عندما تكون هناك عناصر ترويجية في السلة
* إخفاء كتل المحتوى المخصص أو شارات الثقة أو أقسام البيع الإضافي (upsell) بناءً على نوع المنتج
* الحفاظ على تدفق دفع (checkout) أكثر نظافة أو تخصيصًا لعناصر معينة

يتطلب هذا النهج معرفة أساسية بـ HTML وJavaScript.

***

<div id="step-1-find-the-product-ids">
  ## الخطوة 1: العثور على معرّفات المنتجات
</div>

1. انتقل إلى **Shopify Admin > Products**
2. انقر على المنتج الذي تريد استهدافه
3. انسخ معرّف المنتج الرقمي من عنوان URL بعد `/products/`

**مثال:**

```
/products/1234567890 → 1234567890
```

ستستخدم هذه المعرّفات في مصفوفة JavaScript التي تتحكم في الظهور.

***

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

1. انتقل إلى **Upcart > Cart Editor > Settings > Custom HTML**
2. الصق الكود التالي في **كلا** موقعي HTML: **Above announcements/rewards** و**On empty cart screen**
3. استبدل القيم في `productIDsToExclude` بمعرّفات منتجاتك
4. حدّث `.YOUR-CLASS-HERE` لاستهداف عنصر السلة الذي تريد إخفاءه (على سبيل المثال: `.upcart-rewards` أو `.custom-message` أو `.trust-badge`)

```
<script>  
  window.upcartSubscribeCartLoaded((event) => {  
    const items = event.cart.items;  
    const productIDsToExclude = [  
      6958755512411,  
      6958755610712,  
      7736708759774  
    ];  
  
    let cartContainsExcludedItem = false;  
  
    items.forEach((item) => {  
      productIDsToExclude.forEach((id) => {  
        if (item.productId === id) {  
          cartContainsExcludedItem = true;  
        }  
      });  
    });  
  
    const targetElement = window.upcartDocumentOrShadowRoot.querySelector(".YOUR-CLASS-HERE");  
    if (targetElement) {  
      targetElement.style.display = cartContainsExcludedItem ? "none" : "block";  
    }  
  });  
</script>
```

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

***

<div id="step-3-optional-fallback-css">
  ## الخطوة 3: CSS احتياطي اختياري
</div>

إذا كنت تريد التأكد من إخفاء العنصر قبل تحميل السلة بالكامل، أضف هذا في قسم **Custom CSS**:

```
.YOUR-CLASS-HERE {   display: none; }
```

**ملاحظة:** قد يؤدي هذا إلى إخفاء العنصر مؤقتًا لجميع المستخدمين حتى يعمل JavaScript، مما قد يسبب وميضًا. في معظم الحالات، من الأفضل الاعتماد على طريقة JavaScript.

***

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

بعد الإعداد:

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

***

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

للتخصيصات الأكثر تعقيدًا، نوصي بالعمل مع **Shopify Expert**. يمكنهم المساعدة في HTML وCSS وJavaScript داخل درج السلة (cart drawer) الخاص بك.

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