Bloque Cart items

El bloque Cart items es la lista de artículos de línea del carrito, que renderiza cada producto que el comprador ha agregado con su imagen, título, variante, precio, control de cantidad y control de eliminación. Es un bloque obligatorio y es el contenedor que aloja los sub-bloques del carrito (la fila Product, Subscription upgrade y Custom code), proporcionando la estructura a la que se adjuntan los sub-bloques por línea.

• Product title — el nombre del producto en cada línea. También admite una familia de fuentes personalizada.
• Variant — la etiqueta de la variante (por ejemplo, Size: Medium).
• Subscription plan — la etiqueta de solo lectura del plan que se muestra en las líneas de suscripción.

• Price — el precio actual de la línea.
• Compare-at price — el precio original tachado.
• Savings — la etiqueta de ahorros (por ejemplo, Save $5.00). Solo Size y Line height — el bold y el color se configuran en el Rich Text Editor de arriba.

• Bundle toggle — el encabezado desplegable que expande la lista de componentes de un bundle.
• Bundle item title — el título de cada componente dentro de un bundle.
• Bundle item variant — la etiqueta de variante de cada componente del bundle.

• Los sub-bloques ordenados antes de la fila Product aparecen encima del contenido del producto en cada línea.
• Los sub-bloques ordenados después de la fila Product aparecen debajo del contenido del producto en cada línea.

• Cuando el carrito no tiene artículos, el cajón cambia al estado vacío y este bloque no se muestra.
• Se ejecuta un cambio del carrito a la vez. Mientras una actualización de cantidad o una eliminación está en curso, los controles de la fila se deshabilitan para mantener el carrito consistente, y luego se vuelven a habilitar una vez que el cambio se completa.
• Reducir la cantidad de una línea por debajo de 1 la elimina. Una cantidad que la tienda rechaza (por ejemplo, más allá del inventario disponible) se vuelve a sincronizar con el último valor válido.
• Los bundles cambian como una unidad. Ajustar la cantidad en la línea ancla de un bundle escala todo el bundle en una sola operación: si un componente se incluye a razón de 3 por ancla, llevar el ancla de 1 a 2 lleva ese componente a 6. Eliminar el ancla elimina todos los miembros del bundle a la vez.
• Algunos bundles no pueden cambiar de cantidad. Si alguno de los componentes de un bundle se incluye a una tasa fraccionaria (digamos, 1.5 por ancla), el control de cantidad de ese bundle se bloquea: los botones +/− y el campo de cantidad quedan deshabilitados, y las cantidades escritas no se aceptan. El bundle aún puede eliminarse.
• Las líneas de suscripción muestran su plan. Cuando una línea tiene un plan de venta y el sub-bloque Subscription upgrade está desactivado o no se ha agregado, la fila Product muestra una etiqueta de plan de solo lectura debajo de la variante; por ejemplo, Delivers every month (save 30%). Cuando ese sub-bloque está habilitado, presenta el plan en su propio selector, por lo que la etiqueta de solo lectura se suprime en lugar de duplicarse.

• Región: cuerpo.
• Máximo: 1 por estado del carrito.
• Estado: solo carrito con artículos.
• Bloqueado y agregado de forma predeterminada. Cart items no puede eliminarse ni ocultarse, solo reposicionarse.

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