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

# Скрытие определённых элементов корзины с помощью ID товаров

> Используйте ID товаров, чтобы условно скрывать панель вознаграждений или другие элементы корзины в зависимости от её содержимого.

⚠️ **Важное уведомление**

Эта кастомизация работает только с версией 1 модулей корзины Upcart. Если вы недавно обновили корзину до версии 2, эти кастомизации могут не работать. Вам потребуется использовать новые селекторы для версии 2, приведённые в [руководстве по миграции.](/ru/upcart/upcart_v20_migration_guide)

Если ваши кастомизации работают не так, как ожидается, вы можете самостоятельно вернуть корзину к версии 1: в Cart Editor используйте выпадающий список **Cart version** в верхней части меню слева и выберите **V1.0 (Legacy)**. Выпадающий список появляется, когда все модули корзины переведены на V2.

В настоящее время мы работаем над новыми шаблонами кастомизации для версии 2 модулей, и они будут доступны в ближайшее время.

<div id="overview">
  # Обзор
</div>

Эта кастомизация позволяет скрывать определённые части корзины, например панель вознаграждений, если в корзине присутствуют определённые товары. Это полезно, когда вы хотите упростить работу с корзиной для определённых SKU или предотвратить показ определённых акций рядом с определёнными товарами.

Эта настройка использует ID товаров для определения того, какие товары находятся в корзине, и скрывает выбранный элемент при обнаружении совпадения. Логика применяется с помощью пользовательских HTML и CSS в редакторе Upcart.

***

<div id="when-to-use-this">
  ## Когда это использовать
</div>

* Скрывать панель вознаграждений, когда в корзине есть акционные товары
* Скрывать пользовательские блоки контента, значки доверия или секции апселлов в зависимости от типа товара
* Обеспечивать более чистый или более персонализированный процесс оформления заказа для определённых товаров

Этот подход требует базовых знаний HTML и JavaScript.

***

<div id="step-1-find-the-product-ids">
  ## Шаг 1. Найдите ID товаров
</div>

1. Перейдите в **Shopify Admin > Products**
2. Нажмите на нужный товар
3. Скопируйте числовой ID товара из URL после `/products/`

**Пример:**

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

Вы будете использовать эти ID в массиве 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` на ваши ID товаров
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>
  **Примечание об устаревшем API:** обратные вызовы `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**. Он поможет с HTML, CSS и JavaScript внутри вашей выдвижной корзины.

[Найти экспертов Shopify](https://www.shopify.com/partners/directory)