Cart items-blok

Cart items-blokken er listen over linjevarer i carten, som viser hvert produkt, kunden har tilføjet, med billede, titel, variant, pris, antalsvælger og fjern-kontrol. Det er en påkrævet blok, og det er containeren, der rummer cartens under-blokke (Product-rækken, Subscription upgrade og Custom code), og som leverer den struktur, under-blokke pr. linje hæftes på.

• Product title — produktnavnet på hver linje. Understøtter også en tilpasset skriftfamilie.
• Variant — variantetiketten (for eksempel Size: Medium).
• Subscription plan — den skrivebeskyttede planetiket, der vises på abonnementslinjer.

• Price — linjens aktuelle pris.
• Compare-at price — den gennemstregede oprindelige pris.
• Savings — besparelsesetiketten (for eksempel Save $5.00). Kun størrelse og linjehøjde — fed og farve indstilles i Rich Text Editor ovenfor.

• Bundle toggle — udfoldelseshovedet, der udvider en bundles komponentliste.
• Bundle item title — titlen på hver komponent inde i en bundle.
• Bundle item variant — variantetiketten for hver bundle-komponent.

• Under-blokke placeret før Product-rækken vises over produktindholdet i hver linje.
• Under-blokke placeret efter Product-rækken vises under produktindholdet i hver linje.

• Når carten ikke har nogen varer, skifter skuffen til den tomme tilstand, og denne blok vises ikke.
• Én cart-ændring kører ad gangen. Mens en antalsopdatering eller fjernelse er i gang, er rækkens kontroller deaktiveret for at holde carten konsistent, og genaktiveres, når ændringen er gennemført.
• At sænke en linjes antal under 1 fjerner den. Et antal, som butikken afviser (for eksempel ud over tilgængeligt lager), synkroniseres tilbage til den sidste gyldige værdi.
• Bundles ændres som en enhed. Justering af antallet på en bundles ankerlinje skalerer hele bundlen i én operation — hvis en underordnet vare er inkluderet med 3 pr. anker, tager en ændring af ankeret fra 1 til 2 den underordnede vare til 6. Fjernelse af ankeret fjerner alle bundlens medlemmer på én gang.
• Nogle bundles kan ikke få ændret antal. Hvis en af en bundles underordnede varer er inkluderet med en brøkdel (fx 1,5 pr. anker), er antalsvælgeren på den bundle låst: +/−-knapperne og antalsfeltet er begge deaktiveret, og indtastede antal accepteres ikke. Bundlen kan stadig fjernes.
• Abonnementslinjer viser deres plan. Når en linje har en salgsplan, og Subscription upgrade-under-blokken er slået fra eller ikke tilføjet, viser Product-rækken en skrivebeskyttet planetiket under varianten — for eksempel Delivers every month (save 30%). Når den under-blok er aktiveret, præsenterer den planen i sin egen vælger, så den skrivebeskyttede etiket undertrykkes i stedet for at blive duplikeret.

• Region: brødtekst.
• Maksimum: 1 pr. cart-tilstand.
• Tilstand: kun fyldt cart.
• Låst og tilføjet som standard. Cart items kan ikke fjernes eller skjules, kun flyttes.

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