Блоки пользовательского кода

Блок Custom code добавляет в корзину ваш собственный HTML или React. Разместите его в любой секции выдвижной корзины или вложите внутрь Cart items как вложенный блок, чтобы он повторялся для каждой строки. В отличие от других блоков, у него нет настроек Content и раздела Design: блок и есть код, поэтому вы работаете полностью на его вкладке Code.

1. Добавьте блок Custom code в любую секцию или как вложенный блок под Cart items.
2. Выберите его и откройте вкладку Code.
3. Выберите HTML или React component. Новые блоки по умолчанию используют HTML.
4. Напишите свой код.
5. Если вы выбрали React, нажмите Compile.
6. Включите «Use custom template». Для этого блока этот переключатель означает «показывать мой пользовательский код», и по умолчанию он выключен, поэтому ничего не отображается, пока вы его не включите.
7. Держите переключатель-глаз в боковой панели включённым, чтобы блок оставался видимым для покупателей.

• Блок ничего не отображает, пока корзина не загрузится.
• Он также ничего не отображает, когда выключен глаз в боковой панели, выключен «Use custom template», код пуст или React не смог скомпилироваться или отобразиться. Поскольку сбой происходит без сообщений, проверьте блок в предпросмотре перед публикацией.

• Встроенные теги <script> не выполняются, и режим HTML не имеет доступа к SDK или window.
• Для логики используйте режим React или пользовательские скрипты с Cart SDK.

<div class="cart-external-custom-code_html">
  You saved {{savings_amount}} ({{savings_percentage}})
</div>

• Редактор фиксирует обёртку function CustomCode(props: CustomCodeProps) { … }, и вы редактируете только тело между этими строками.
• Прежде чем блок появится, необходимо нажать Compile, а затем включить «Use custom template».
• Ваш компонент может использовать useState, useEffect, useMemo, useRef и useCallback.
• В отличие от режима HTML, React выполняется в контексте страницы, поэтому может обращаться к window и Cart SDK, когда они доступны.
• Если ваш компонент выбрасывает ошибки во время выполнения, блок ничего не отображает, а остальная часть корзины продолжает работать.

• line задан только у вложенного блока Cart items, где ваш компонент отображается один раз на строку. При размещении в секции line равен null, и вместо этого вы читаете cart.items.
• Дочерние элементы бандла отсутствуют в cart.items. Когда строки сгруппированы в бандл, появляется только якорная строка; её дочерние элементы находятся в line.bundle.children.
• Строк, скрытых трансформацией строк, там тоже нет, хотя они по-прежнему учитываются в cart.totalPrice.

function CustomCode(props) {
  return (
    <div className="cart-external-custom-code_jsx">
      {props.cart.itemCount} items
    </div>
  );
}

function CustomCode(props) {
  if (!props.line) return null;
  return (
    <div className="cart-external-custom-code_jsx">
      {props.line.productTitle}
      {props.line.variantTitle ? ` · ${props.line.variantTitle}` : ''}
    </div>
  );
}

function CustomCode(props) {
  return (
    <ul>
      {(props.cart.items ?? []).map((item) => {
        const note = item.metadata?.shipping?.shippingNote;
        return (
          <li key={item.key}>
            {item.title}
            {note ? ` · ${note.value}` : ''}
          </li>
        );
      })}
    </ul>
  );
}

function CustomCode(props) {
  const codes = props.cart.discountCodes;
  return (
    <div>
      {codes.length > 0 && (
        <p>Active discounts: {codes.join(', ')}</p>
      )}
      <ul>
        {(props.cart.items ?? []).map((item) => {
          return (
            <li key={item.key}>
              {item.title}
              {item.discountAllocations.map(
                (discount) => ` · ${discount.title} (-${(discount.amount / 100).toFixed(2)})`
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

• Область: любая (верх, тело или низ). Также доступен как вложенный блок Cart items.
• Максимум: без ограничений.
• Состояние: заполненная и пустая корзина (как блок секции). Как вложенный блок Cart items отображается только когда в корзине есть строки, по одному экземпляру на строку.
• Не заблокирован, поэтому вы можете удалить или скрыть его.
• Поблочного раздела Design нет. Оформляйте через собственную разметку, пользовательский CSS и глобальные настройки дизайна.