Узнайте, как использовать HTML, CSS и JavaScript для создания пользовательских функций и стилизации вашей корзины-шторки.
⚠️ Важное уведомлениеПример настройки в этом документе работает только с V1.0 модулей корзины Upcart. Если вы недавно обновили корзину до версии 2, этот код настроек не будет работать. Вам нужно будет использовать новые селекторы для версии 2, приведённые в руководстве по миграции.Решения для V2.0 см. в остальной документации по настройкам.
Upcart даёт вам полный контроль над изменением внешнего вида и поведения корзины с помощью пользовательского HTML, пользовательского CSS и JavaScript. Эти инструменты позволяют добавлять новые функции, стилизовать корзину под ваш бренд или внедрять логику для улучшения работы корзины.Это руководство охватывает основы каждого из них и показывает, как начать. Каждый раздел включает быстрый визуальный пример, помогающий понять, как изменения выглядят на практике.Прежде чем начать, обязательно ознакомьтесь с политикой настроек Upcart, чтобы знать, что поддерживается нашей командой, а что нет.
HTML используется для добавления статического контента, такого как текст, баннеры или кнопки, в вашу корзину. Вы можете выбрать одно из нескольких расположений HTML в редакторе Custom HTML (например, над кнопкой оформления заказа, внизу корзины, между товарами).Распространённые сценарии использования:
Добавление пользовательских сообщений
Вставка юридических оговорок или ссылок на политики
Выделение сроков доставки или информации о доставке
Пример:
<div style="text-align: center; font-weight: bold;"> Thanks for shopping with us! </div
JavaScript управляет поведением и логикой корзины. Вы можете использовать его, чтобы показывать или скрывать элементы, условно применять стилизацию или реагировать на изменения корзины в реальном времени.Оберните код в тег <script> и разместите его в Custom HTML > Scripts (Before Load) или Above Announcements, в зависимости от того, когда он должен выполняться.Пример: Ограничение корзины одним апсейлом за раз:
<script> // Show upsells again when upsells are removed window.upcartSubscribeItemRemoved((event) => { if (event.item?.properties?.__upcartUpsell) { const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module"); if (upsells) upsells.style.display = "block"; } }); // Hide upsells once one is added window.upcartSubscribeUpsellsAddedToCart(() => { const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module"); if (upsells) upsells.style.display = "none"; }); // Check for upsell in cart when it loads window.upcartSubscribeCartLoaded((event) => { const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module"); const items = event.cart.items || []; const hasUpsell = items.some(item => item?.properties?.__upcartUpsell); if (upsells && hasUpsell) { upsells.style.display = "none"; } }); </script>
Примечание об устаревших функциях: колбэки window.upcartOnItemRemoved, window.upcartOnAddUpsell и window.upcartOnCartLoaded по-прежнему работают, но являются устаревшими и выводят предупреждения в консоль. Используйте upcartSubscribeItemRemoved, upcartSubscribeUpsellsAddedToCart и upcartSubscribeCartLoaded во всех новых скриптах.
🔧 Примечание для разработчиков:
Upcart предоставляет полную документацию Public API, в которой перечислены все функции, переменные и рекомендуемые шаблоны, доступные для расширенных настроек. Мы рекомендуем ознакомиться с ней при создании более сложных скриптов или интеграций.
CSS управляет внешним видом элементов вашей корзины. Используйте его для настройки отступов, цветов, размеров шрифтов или скрытия нежелательных элементов. Custom CSS — одна из вкладок в разделе Settings (за More settings, если строка вкладок не помещается).Распространённые сценарии использования:
Изменение цвета названия товара или кнопок
Настройка размера шрифта или выравнивания
Добавление отступов между разделами
Пример: изменение цвета заголовка апсейлов в V1.0:
