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

# Как исправить сломанный макет редактора корзины из-за некорректного HTML

> Исправление интерфейса приложения, если он выглядит сломанным после добавления пользовательского кода.

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

Если в поле Custom HTML редактора корзины добавлен некорректный или сломанный HTML, он может нарушить макет и сделать интерфейс редактора непригодным для работы. Это руководство расскажет, как временно исправить макет, чтобы безопасно удалить сломанный код и восстановить полную функциональность.

<div id="what-causes-the-issue">
  ## Что вызывает проблему
</div>

Эта проблема обычно возникает, когда мерчант:

* Вставляет теги `<style>` или `<script>` без правильной структуры
* Оставляет HTML-теги незакрытыми или несогласованными
* Добавляет в поле Custom HTML контент, ломающий макет

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

<div id="temporary-fix-using-developer-tools">
  ## Временное исправление с помощью инструментов разработчика
</div>

Выполните эти шаги, чтобы временно исправить макет с помощью инструментов разработчика браузера и получить доступ к полю Custom HTML.

<div id="step-1-open-devtools">
  ## Шаг 1. Откройте DevTools
</div>

1. Откройте Cart Editor в приложении Upcart
2. Щёлкните правой кнопкой мыши в любом месте страницы и выберите **Inspect**, или нажмите:

   * `Cmd + Option + I` (Mac)
   * `Ctrl + Shift + I` (Windows)

<div id="step-2-find-the-broken-layout-container">
  ## Шаг 2. Найдите контейнер сломанного макета
</div>

1. На вкладке **Elements** в DevTools нажмите на инструмент выбора элемента (левый верхний угол DevTools)
2. Наведите курсор на макет редактора корзины и найдите подсвеченную зелёным секцию слева от панели настроек. Она должна называться:

   ```
   .Polaris-Page__Content--fullWidth
   ```
3. Поднимитесь на шесть уровней вверх по иерархии, пока не дойдёте до:

   ```
   .Polaris-Frame__Content
   ```

<div id="step-3-disable-the-fixed-position">
  ## Шаг 3. Отключите фиксированное позиционирование
</div>

1. Выбрав `.Polaris-Frame__Content`, посмотрите на вкладку **Styles**
2. Найдите свойство `position: fixed` и снимите с него флажок

Это должно разблокировать страницу и снова позволить прокручивать макет.

<div id="remove-the-invalid-html">
  ## Удалите некорректный HTML
</div>

Теперь, когда макет снова доступен:

1. Прокрутите до поля **Custom HTML**
2. Найдите сломанный HTML или встроенный CSS, который мог вызвать проблему

Пример того, что обычно ломает макет:

```
<style>  
  body {  
    background: red;  
  }  
</style>
```

1. Скопируйте содержимое в другое место в качестве резервной копии, затем удалите его
2. Сохраните изменения

<div id="confirm-its-fixed">
  ## Убедитесь, что проблема устранена
</div>

После сохранения редактор корзины должен снова загружаться нормально. Если проблема сохраняется, ещё раз проверьте наличие оставшихся некорректных тегов или свяжитесь с мерчантом, чтобы уточнить, что было добавлено.

<div id="best-practices-to-prevent-this-issue">
  ## Рекомендации по предотвращению этой проблемы
</div>

* Вставляйте только полный и корректный HTML
* Избегайте добавления встроенных блоков `<style>` непосредственно в области HTML
* Используйте раздел **Custom CSS** вместо добавления CSS в поля HTML
* Если сомневаетесь, всегда просматривайте изменения в режиме Sandbox