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

# إخفاء زر السلة الثابت في الصفحة الرئيسية

> يشرح هذا المقال كيفية استخدام JavaScript وCSS لإخفاء زر السلة العائم في الصفحة الرئيسية لمتجرك.

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

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

يتحقق هذا الإعداد من الصفحة الحالية للعميل ويزيل زر السلة الثابت إذا كان في الصفحة الرئيسية.

***

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

* لتجنب الفوضى البصرية في صفحتك الرئيسية
* عند استخدام قسم رئيسي (hero) مخصص أو تخطيط يتداخل مع السلة الثابتة
* لإبقاء زر السلة مركّزًا على صفحات المنتجات أو المجموعات

***

<div id="step-1-add-the-script">
  ## الخطوة 1: إضافة السكربت
</div>

1. انتقل إلى **Upcart > Cart Editor > Settings > Custom HTML**
2. من القائمة المنسدلة **HTML Location**، اختر **Scripts (Before Load)**
3. الصق كود JavaScript التالي:

```
<script>  
  var stickyCartButton = document.querySelector("#upCartStickyButton");  
  
  if (  
    stickyCartButton &&  
    (document.location.pathname === "/" + Shopify.locale ||  
     document.location.pathname === "/")  
  ) {  
    stickyCartButton.classList.add("hide-sticky-cart-button");  
  }  
</script>
```

يتحقق هذا السكربت من مسار الصفحة الحالية ويطبّق فئة لإخفاء الزر الثابت إذا كان العميل في الصفحة الرئيسية.

***

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

1. انتقل إلى **Upcart > Sticky Cart > Custom CSS (لاحظ أن هذا هو Sticky Cart وليس Cart Editor)**
2. الصق كود CSS التالي:

```
.hide-sticky-cart-button {     
  display: none;   
}
```

***

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

* سيتم إخفاء زر السلة الثابت عندما يزور العميل الصفحة الرئيسية (`/` أو `/[locale]`)
* يبقى الزر مرئيًا في جميع الصفحات الأخرى