Bloco Cart items

O bloco Cart items é a lista de itens de linha do carrinho, renderizando cada produto que o comprador adicionou com sua imagem, título, variante, preço, seletor de quantidade e controle de remoção. É um bloco obrigatório, e é o contêiner que hospeda os sub-blocos do carrinho (a linha Product, Subscription upgrade e Custom code), fornecendo a estrutura à qual os sub-blocos por linha se anexam.

• Product title — o nome do produto em cada linha. Também suporta uma família de fonte personalizada.
• Variant — o rótulo da variante (por exemplo, Size: Medium).
• Subscription plan — o rótulo somente leitura do plano exibido nas linhas de assinatura.

• Price — o preço atual da linha.
• Compare-at price — o preço original riscado.
• Savings — o rótulo de economia (por exemplo, Save $5.00). Apenas Size e Line height — negrito e cor são definidos no Rich Text Editor acima.

• Bundle toggle — o cabeçalho expansível que abre a lista de componentes de um bundle.
• Bundle item title — o título de cada componente dentro de um bundle.
• Bundle item variant — o rótulo de variante de cada componente do bundle.

• Sub-blocos ordenados antes da linha Product aparecem acima do conteúdo do produto em cada linha.
• Sub-blocos ordenados depois da linha Product aparecem abaixo do conteúdo do produto em cada linha.

• Quando o carrinho não tem itens, o drawer muda para o estado vazio e este bloco não é exibido.
• Apenas uma alteração no carrinho é executada por vez. Enquanto uma atualização de quantidade ou remoção está em andamento, os controles da linha ficam desativados para manter o carrinho consistente, e são reativados quando a alteração é concluída.
• Reduzir a quantidade de uma linha abaixo de 1 a remove. Uma quantidade que a loja rejeita (por exemplo, acima do estoque disponível) é ressincronizada com o último valor válido.
• Bundles mudam como uma unidade. Ajustar a quantidade na linha âncora de um bundle escala o bundle inteiro em uma única operação — se um item filho está incluído a 3 por âncora, levar a âncora de 1 para 2 leva esse filho a 6. Remover a âncora remove todos os membros do bundle de uma vez.
• Alguns bundles não podem ter a quantidade alterada. Se qualquer filho de um bundle estiver incluído a uma taxa fracionária (1,5 por âncora, por exemplo), o seletor de quantidade desse bundle é bloqueado: os botões +/− e o campo de quantidade ficam desativados, e quantidades digitadas não são aceitas. O bundle ainda pode ser removido.
• Linhas de assinatura mostram seu plano. Quando uma linha tem um plano de venda e o sub-bloco Subscription upgrade está desativado ou não foi adicionado, a linha Product mostra um rótulo de plano somente leitura abaixo da variante — por exemplo, Delivers every month (save 30%). Quando esse sub-bloco está ativado, ele apresenta o plano no seu próprio seletor, então o rótulo somente leitura é suprimido em vez de duplicado.

• Região: corpo.
• Máximo: 1 por estado do carrinho.
• Estado: apenas carrinho cheio.
• Bloqueado e adicionado por padrão. Cart items não pode ser removido nem ocultado, apenas reposicionado.

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>
  );
}