Blok Cart items

Blok Cart items to lista pozycji w koszyku, renderująca każdy produkt dodany przez kupującego wraz z obrazem, tytułem, wariantem, ceną, selektorem ilości i przyciskiem usunięcia. To blok wymagany i zarazem kontener obsługujący sub-bloki koszyka (wiersz Product, Subscription upgrade i Custom code), zapewniający strukturę, do której przypinają się sub-bloki per linia.

• Product title — nazwa produktu na każdej linii. Obsługuje też niestandardowy krój.
• Variant — etykieta wariantu (na przykład Size: Medium).
• Subscription plan — etykieta planu tylko do odczytu pokazywana na liniach subskrypcyjnych.

• Price — bieżąca cena linii.
• Compare-at price — przekreślona cena oryginalna.
• Savings — etykieta oszczędności (na przykład Save $5.00). Tylko rozmiar i wysokość wiersza — pogrubienie i kolor ustawiasz w Rich Text Editor powyżej.

• Bundle toggle — nagłówek rozwijany otwierający listę składników pakietu.
• Bundle item title — tytuł każdego składnika w pakiecie.
• Bundle item variant — etykieta wariantu dla każdego składnika pakietu.

• Sub-bloki ustawione przed wierszem Product pojawiają się nad treścią produktu w każdej linii.
• Sub-bloki ustawione po wierszu Product pojawiają się pod treścią produktu w każdej linii.

• Gdy koszyk nie ma pozycji, szuflada przełącza się na stan pusty i ten blok nie jest pokazywany.
• Jedna zmiana koszyka naraz. Podczas trwającej aktualizacji ilości lub usuwania kontrolki wiersza są wyłączone, aby zachować spójność koszyka, a potem ponownie włączone po zakończeniu zmiany.
• Obniżenie ilości linii poniżej 1 usuwa ją. Ilość odrzucona przez sklep (na przykład powyżej dostępnego stanu magazynowego) ponownie synchronizuje się z ostatnią prawidłową wartością.
• Pakiety zmieniają się jako całość. Zmiana ilości na linii kotwicy pakietu skaluje cały pakiet w jednej operacji — jeśli element podrzędny jest dołączony w liczbie 3 na kotwicę, zwiększenie kotwicy z 1 do 2 zwiększa ten element do 6. Usunięcie kotwicy usuwa naraz wszystkie elementy pakietu.
• Niektórych pakietów nie można przeliczać. Jeśli którykolwiek element podrzędny pakietu jest dołączony w ułamkowej proporcji (np. 1,5 na kotwicę), selektor ilości na tym pakiecie jest zablokowany: przyciski +/− i pole ilości są wyłączone, a wpisane ilości nie są akceptowane. Pakiet nadal można usunąć.
• Linie subskrypcyjne pokazują swój plan. Gdy linia ma plan sprzedaży, a sub-blok Subscription upgrade jest wyłączony lub niedodany, wiersz Product pokazuje etykietę planu tylko do odczytu pod wariantem — na przykład Delivers every month (save 30%). Gdy ten sub-blok jest włączony, prezentuje plan we własnym selektorze, więc etykieta tylko do odczytu jest ukrywana, a nie duplikowana.

• Region: treść (body).
• Maksimum: 1 na stan koszyka.
• Stan: tylko wypełniony koszyk.
• Zablokowany i dodawany domyślnie. Cart items nie można usunąć ani ukryć, można tylko zmienić jego pozycję.

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