⚠️ Важное уведомление
Эта кастомизация работает только с версией 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/
Пример:
Вы будете использовать эти 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)
Примечание об устаревшем API: обратные вызовы window.upcartOnCartLoaded всё ещё работают, но считаются устаревшими и выводят предупреждения в консоль. Используйте upcartSubscribeCartLoaded для всех новых скриптов.
Шаг 3. Необязательный резервный CSS
Если вы хотите гарантировать, что элемент будет скрыт до полной загрузки корзины, добавьте это в разделе Custom CSS:
Примечание: это может временно скрыть элемент для всех пользователей до выполнения JavaScript, что может вызвать мерцание. В большинстве случаев лучше полагаться на метод с JavaScript.
После настройки:
- Целевой элемент корзины (например, панель вознаграждений) будет скрыт, если в корзине есть один из указанных товаров
- В остальных случаях элемент остаётся видимым
- Вы можете повторно использовать эту логику, чтобы скрывать или показывать разные элементы на основе правил для конкретных товаров
Для более сложных кастомизаций мы рекомендуем обратиться к эксперту Shopify. Он поможет с HTML, CSS и JavaScript внутри вашей выдвижной корзины.
Найти экспертов Shopify