Блок товаров корзины

Блок Cart items — это список позиций в корзине, отображающий каждый добавленный покупателем товар с его изображением, названием, вариантом, ценой, степпером количества и кнопкой удаления. Это обязательный блок, и это контейнер, содержащий вложенные блоки корзины (строку Product, Subscription upgrade и Custom code), предоставляя структуру, к которой прикрепляются построчные вложенные блоки.

• Product title — название товара в каждой строке. Также поддерживает собственный шрифт.
• Variant — надпись варианта (например, Size: Medium).
• Subscription plan — надпись плана только для чтения, отображаемая в строках подписки.

• Price — текущая цена строки.
• Compare-at price — зачёркнутая исходная цена.
• Savings — надпись экономии (например, Save $5.00). Только размер и межстрочный интервал — жирность и цвет задаются в редакторе Rich Text выше.

• Bundle toggle — раскрывающийся заголовок, разворачивающий список компонентов бандла.
• Bundle item title — название каждого компонента внутри бандла.
• Bundle item variant — надпись варианта для каждого компонента бандла.

• Вложенные блоки, расположенные перед строкой Product, появляются над содержимым товара в каждой строке.
• Вложенные блоки, расположенные после строки Product, появляются под содержимым товара в каждой строке.

• Когда в корзине нет товаров, выдвижная корзина переключается в пустое состояние, и этот блок не показывается.
• Одновременно выполняется одно изменение корзины. Пока выполняется обновление количества или удаление, элементы управления строки отключены для сохранения консистентности корзины, а затем снова включаются после завершения изменения.
• Снижение количества строки ниже 1 удаляет её. Количество, отклонённое магазином (например, сверх доступных запасов), синхронизируется обратно с последним допустимым значением.
• Бандлы изменяются как единое целое. Изменение количества у якорной строки бандла масштабирует весь бандл за одну операцию — если дочерний товар включён по 3 на якорь, увеличение якоря с 1 до 2 доводит этот дочерний товар до 6. Удаление якоря удаляет все элементы бандла сразу.
• Количество у некоторых бандлов изменить нельзя. Если какой-либо дочерний товар бандла включён с дробным коэффициентом (скажем, 1,5 на якорь), степпер количества этого бандла заблокирован: кнопки +/− и поле количества отключены, а введённые значения не принимаются. Бандл всё ещё можно удалить.
• Строки подписки показывают свой план. Когда у строки есть план продаж, а вложенный блок Subscription upgrade выключен или не добавлен, строка Product показывает надпись плана только для чтения под вариантом — например, Delivers every month (save 30%). Когда этот вложенный блок включён, он представляет план в собственном выборе, поэтому надпись только для чтения скрывается, а не дублируется.

• Область: тело.
• Максимум: 1 на состояние корзины.
• Состояние: только заполненная корзина.
• Заблокирован и добавлен по умолчанию. Cart items нельзя удалить или скрыть, только переместить.

function CustomTemplate(props) {
  return (
    <div className="cart-external-cart-items__row" style={{ display: 'flex', gap: '12px', opacity: props.busy ? 0.6 : 1 }}>
      {props.imageUrl && <img src={props.imageUrl} alt="" width={64} height={64} />}

      <div style={{ flex: 1 }}>
        {props.url ? <a href={props.url}>{props.title}</a> : <span>{props.title}</span>}
        {props.variantTitle && <div style={{ opacity: 0.6 }}>{props.variantTitle}</div>}
        {props.sellingPlanLabel && <div style={{ opacity: 0.6 }}>{props.sellingPlanLabel}</div>}

        {props.discountTags.map((tag) => (
          <span key={tag} style={{ fontSize: '11px', border: '1px solid', borderRadius: '4px', padding: '1px 5px' }}>
            {tag}
          </span>
        ))}

        {!props.stepperLocked && (
          <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginTop: '6px' }}>
            <button type="button" onClick={props.decrement} disabled={props.busy}>&minus;</button>
            <input
              value={props.quantityInput}
              onInput={props.onQuantityInput}
              onBlur={props.commitQuantity}
              onKeyDown={props.onQuantityKeyDown}
              size={2}
            />
            <button type="button" onClick={props.increment} disabled={props.busy}>+</button>
            <button type="button" onClick={props.remove} disabled={props.busy}>
              {props.pending === 'remove' ? 'Removing…' : 'Remove'}
            </button>
          </div>
        )}
      </div>

      <div style={{ textAlign: 'right' }}>
        <div>{props.price}</div>
        {props.compareAtPrice && <s style={{ opacity: 0.5 }}>{props.compareAtPrice}</s>}
        {props.savingsHtml && <div dangerouslySetInnerHTML={{ __html: props.savingsHtml }} />}
      </div>
    </div>
  );
}

function CustomTemplate(props) {
  return (
    <div>
      <div>{props.title} {props.price}</div>

      {props.bundle && (
        <ul style={{ margin: '4px 0 0 12px', fontSize: '12px', opacity: 0.7 }}>
          {props.bundle.children.map((child, i) => (
            <li key={child.key ?? i}>{child.quantity} × {child.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}