Cart items-blok

Het Cart items-blok is de lijst met regelitems in de cart, die elk product dat de shopper heeft toegevoegd rendert met afbeelding, titel, variant, prijs, aantal-stepper en verwijderknop. Het is een verplicht blok, en het is de container die de sub-blokken van de cart host (de Product-rij, Subscription upgrade en Custom code), en biedt de structuur waaraan sub-blokken per regel worden vastgemaakt.

• Product title — de productnaam op elke regel. Ondersteunt ook een aangepaste font family.
• Variant — het variantlabel (bijvoorbeeld Size: Medium).
• Subscription plan — het alleen-lezen planlabel dat op abonnementsregels wordt getoond.

• Price — de huidige prijs van de regel.
• Compare-at price — de doorgestreepte oorspronkelijke prijs.
• Savings — het besparingslabel (bijvoorbeeld Save $5.00). Alleen size en line height — bold en color worden ingesteld in de Rich Text Editor hierboven.

• Bundle toggle — de uitklapkop die de onderdelenlijst van een bundel uitklapt.
• Bundle item title — de titel van elk onderdeel binnen een bundel.
• Bundle item variant — het variantlabel voor elk bundelonderdeel.

• Sub-blokken die vóór de Product-rij zijn geordend, verschijnen boven de productcontent in elke regel.
• Sub-blokken die na de Product-rij zijn geordend, verschijnen onder de productcontent in elke regel.

• Wanneer de cart geen items bevat, schakelt de drawer over naar de lege status en wordt dit blok niet getoond.
• Er loopt één cartwijziging tegelijk. Terwijl een aantal-update of verwijdering bezig is, zijn de bedieningen van de rij uitgeschakeld om de cart consistent te houden, en worden ze weer ingeschakeld zodra de wijziging is afgerond.
• Het aantal van een regel onder 1 verlagen verwijdert de regel. Een aantal dat de winkel weigert (bijvoorbeeld boven de beschikbare voorraad) wordt teruggezet naar de laatst geldige waarde.
• Bundels wijzigen als één geheel. Het aanpassen van het aantal op de ankerregel van een bundel schaalt de hele bundel in één bewerking — als een kind is opgenomen met 3 per anker, gaat dat kind van 3 naar 6 wanneer het anker van 1 naar 2 gaat. Het verwijderen van het anker verwijdert alle onderdelen van de bundel tegelijk.
• Sommige bundels kunnen niet in aantal worden aangepast. Als een van de kinderen van een bundel met een fractionele verhouding is opgenomen (bijvoorbeeld 1,5 per anker), is de aantal-stepper van die bundel vergrendeld: de +/−-knoppen en het aantalveld zijn beide uitgeschakeld, en getypte aantallen worden niet geaccepteerd. De bundel kan nog wel worden verwijderd.
• Abonnementsregels tonen hun plan. Wanneer een regel een selling plan heeft en het Subscription upgrade-sub-blok is uitgeschakeld of niet toegevoegd, toont de Product-rij een alleen-lezen planlabel onder de variant — bijvoorbeeld Delivers every month (save 30%). Wanneer dat sub-blok is ingeschakeld, presenteert het het plan in zijn eigen kiezer, zodat het alleen-lezen label wordt onderdrukt in plaats van gedupliceerd.

• Regio: midden.
• Maximum: 1 per cart-status.
• Status: alleen gevulde cart.
• Vergrendeld en standaard toegevoegd. Cart items kan niet worden verwijderd of verborgen, alleen verplaatst.

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