⚠️ Важное уведомление Пример настройки в этом документе работает только с V1.0 модулей корзины Upcart. Если вы недавно обновили корзину до версии 2, этот код настроек не будет работать. Вам нужно будет использовать новые селекторы для версии 2, приведённые в руководстве по миграции. Решения для V2.0 см. в остальной документации по настройкам.

Обзор

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

Прежде чем начать, обязательно ознакомьтесь с политикой настроек Upcart, чтобы знать, что поддерживается нашей командой, а что нет.

Добавление контента с помощью HTML

HTML используется для добавления статического контента, такого как текст, баннеры или кнопки, в вашу корзину. Вы можете выбрать одно из нескольких расположений HTML в редакторе Custom HTML (например, над кнопкой оформления заказа, внизу корзины, между товарами). Распространённые сценарии использования:

Добавление пользовательских сообщений
Вставка юридических оговорок или ссылок на политики
Выделение сроков доставки или информации о доставке

Пример:

<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div

Редактор Custom HTML в Upcart с добавлением благодарственного сообщения над кнопкой оформления заказа

Добавление логики с помощью JavaScript

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 во всех новых скриптах.

Редактор Custom HTML Scripts Before Load в Upcart с JavaScript, скрывающим модуль апсейлов

🔧 Примечание для разработчиков:
Upcart предоставляет полную документацию Public API, в которой перечислены все функции, переменные и рекомендуемые шаблоны, доступные для расширенных настроек. Мы рекомендуем ознакомиться с ней при создании более сложных скриптов или интеграций.

Стилизация корзины с помощью CSS

CSS управляет внешним видом элементов вашей корзины. Используйте его для настройки отступов, цветов, размеров шрифтов или скрытия нежелательных элементов. Custom CSS — одна из вкладок в разделе Settings (за More settings, если строка вкладок не помещается). Распространённые сценарии использования:

Изменение цвета названия товара или кнопок
Настройка размера шрифта или выравнивания
Добавление отступов между разделами

Пример: изменение цвета заголовка апсейлов в V1.0:

.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}

Редактор Custom CSS в Upcart со стилизацией цвета заголовка апсейлов и подтверждением сохранения изменений

Дополнительные ресурсы

Хотите улучшить свои навыки HTML, CSS или JavaScript? Ознакомьтесь с этими бесплатными инструментами:

Поддержка по настройкам

Команда поддержки Upcart не может помочь с внедрением пользовательского кода. Для более сложных изменений мы рекомендуем нанять эксперта Shopify.

Начало работы

Модули корзины

Настройки корзины

Закреплённая кнопка корзины

Multicart

Кастомизации

Аналитика

Интеграции и совместимость

Оплата и аккаунт

Устранение неполадок

Начало работы с настройками Upcart

Обзор

Добавление контента с помощью HTML

Добавление логики с помощью JavaScript

Стилизация корзины с помощью CSS

Дополнительные ресурсы

Поддержка по настройкам

​Обзор

​Добавление контента с помощью HTML

​Добавление логики с помощью JavaScript

​Стилизация корзины с помощью CSS

​Дополнительные ресурсы

​Поддержка по настройкам

Обзор

Добавление контента с помощью HTML

Добавление логики с помощью JavaScript

Стилизация корзины с помощью CSS

Дополнительные ресурсы

Поддержка по настройкам