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

Обзор

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

Когда это использовать

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

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

Шаг 1. Найдите ID товаров

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

Пример:

/products/1234567890 → 1234567890

Вы будете использовать эти ID в массиве JavaScript, который управляет видимостью.

Шаг 2. Добавьте пользовательский HTML

Перейдите в Upcart > Cart Editor > Settings > Custom HTML
Вставьте следующий код в обе области HTML: Above announcements/rewards и On empty cart screen
Замените значения в productIDsToExclude на ваши ID товаров
Обновите .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>

Примечание об устаревшем API: обратные вызовы window.upcartOnCartLoaded всё ещё работают, но считаются устаревшими и выводят предупреждения в консоль. Используйте upcartSubscribeCartLoaded для всех новых скриптов.

Шаг 3. Необязательный резервный CSS

Если вы хотите гарантировать, что элемент будет скрыт до полной загрузки корзины, добавьте это в разделе Custom CSS:

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

Примечание: это может временно скрыть элемент для всех пользователей до выполнения JavaScript, что может вызвать мерцание. В большинстве случаев лучше полагаться на метод с JavaScript.

Итоговый результат

После настройки:

Целевой элемент корзины (например, панель вознаграждений) будет скрыт, если в корзине есть один из указанных товаров
В остальных случаях элемент остаётся видимым
Вы можете повторно использовать эту логику, чтобы скрывать или показывать разные элементы на основе правил для конкретных товаров

Всё ещё нужна помощь?

Для более сложных кастомизаций мы рекомендуем обратиться к эксперту Shopify. Он поможет с HTML, CSS и JavaScript внутри вашей выдвижной корзины. Найти экспертов Shopify

Справочник функций корзины

Справочник CSS

Рецепты оформления

Рецепты функциональности

Пользовательские шаблоны

Публичный API Upcart

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

Обзор

Когда это использовать

Шаг 1. Найдите ID товаров

Шаг 2. Добавьте пользовательский HTML

Шаг 3. Необязательный резервный CSS

Итоговый результат

Всё ещё нужна помощь?

​Обзор

​Когда это использовать

​Шаг 1. Найдите ID товаров

​Шаг 2. Добавьте пользовательский HTML

​Шаг 3. Необязательный резервный CSS

​Итоговый результат

​Всё ещё нужна помощь?

Обзор

Когда это использовать

Шаг 1. Найдите ID товаров

Шаг 2. Добавьте пользовательский HTML

Шаг 3. Необязательный резервный CSS

Итоговый результат

Всё ещё нужна помощь?