Blocco Cart items

Il blocco Cart items è l’elenco degli articoli nel carrello, che renderizza ogni prodotto aggiunto dall’acquirente con immagine, titolo, variante, prezzo, selettore di quantità e controllo di rimozione. È un blocco obbligatorio ed è il contenitore che ospita i sotto-blocchi del carrello (la riga Product, Subscription upgrade e Custom code), fornendo la struttura a cui si agganciano i sotto-blocchi per riga.

• Product title — il nome del prodotto su ogni riga. Supporta anche una famiglia di font personalizzata.
• Variant — l’etichetta della variante (per esempio, Size: Medium).
• Subscription plan — l’etichetta del piano in sola lettura mostrata sulle righe in abbonamento.

• Price — il prezzo attuale della riga.
• Compare-at price — il prezzo originale barrato.
• Savings — l’etichetta dei risparmi (per esempio, Save $5.00). Solo dimensione e interlinea — grassetto e colore si impostano nel Rich Text Editor sopra.

• Bundle toggle — l’intestazione a scomparsa che espande l’elenco dei componenti di un bundle.
• Bundle item title — il titolo di ogni componente all’interno di un bundle.
• Bundle item variant — l’etichetta della variante per ogni componente del bundle.

• I sotto-blocchi ordinati prima della riga Product appaiono sopra il contenuto del prodotto in ogni riga.
• I sotto-blocchi ordinati dopo la riga Product appaiono sotto il contenuto del prodotto in ogni riga.

• Quando il carrello non ha articoli, il drawer passa allo stato vuoto e questo blocco non viene mostrato.
• Viene eseguita una modifica del carrello alla volta. Mentre un aggiornamento di quantità o una rimozione è in corso, i controlli della riga sono disabilitati per mantenere il carrello coerente, poi vengono riabilitati una volta completata la modifica.
• Abbassare la quantità di una riga sotto 1 la rimuove. Una quantità che il negozio rifiuta (per esempio, oltre le scorte disponibili) viene risincronizzata all’ultimo valore valido.
• I bundle cambiano come un’unità. Regolare la quantità sulla riga anchor di un bundle scala l’intero bundle in un’unica operazione: se un articolo figlio è incluso in ragione di 3 per anchor, portare l’anchor da 1 a 2 porta quel figlio a 6. Rimuovere l’anchor rimuove tutti i membri del bundle in una volta.
• Alcuni bundle non possono cambiare quantità. Se uno degli articoli figli di un bundle è incluso con un rapporto frazionario (per esempio 1,5 per anchor), il selettore di quantità su quel bundle è bloccato: i pulsanti +/− e il campo quantità sono entrambi disabilitati, e le quantità digitate non vengono accettate. Il bundle può comunque essere rimosso.
• Le righe in abbonamento mostrano il loro piano. Quando una riga ha un selling plan e il sotto-blocco Subscription upgrade è disattivato o non aggiunto, la riga Product mostra un’etichetta del piano in sola lettura sotto la variante — per esempio, Delivers every month (save 30%). Quando quel sotto-blocco è abilitato, presenta il piano nel proprio selettore, quindi l’etichetta in sola lettura viene soppressa anziché duplicata.

• Regione: corpo.
• Massimo: 1 per stato del carrello.
• Stato: solo carrello pieno.
• Bloccato e aggiunto per impostazione predefinita. Cart items non può essere rimosso o nascosto, solo riposizionato.

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