Cart items-Block

Der Cart items-Block ist die Liste der Positionen im Cart. Er rendert jedes vom Kunden hinzugefügte Produkt mit Bild, Titel, Variante, Preis, Mengenwähler und Entfernen-Steuerung. Er ist ein Pflichtblock und der Container, der die Unterblöcke des Carts beherbergt (die Product-Zeile, Subscription upgrade und Custom code). Er bietet die Struktur, an der sich zeilenbasierte Unterblöcke anheften.

• Product title — der Produktname in jeder Zeile. Unterstützt außerdem eine benutzerdefinierte Schriftfamilie.
• Variant — die Variantenbezeichnung (zum Beispiel Size: Medium).
• Subscription plan — die schreibgeschützte Plan-Bezeichnung auf Abonnementzeilen.

• Price — der aktuelle Preis der Zeile.
• Compare-at price — der durchgestrichene ursprüngliche Preis.
• Savings — die Ersparnis-Beschriftung (zum Beispiel Save $5.00). Nur Größe und Zeilenhöhe — Fettschrift und Farbe werden im Rich Text Editor oberhalb festgelegt.

• Bundle toggle — der ausklappbare Header, der die Komponentenliste eines Bundles öffnet.
• Bundle item title — der Titel jeder Komponente innerhalb eines Bundles.
• Bundle item variant — die Variantenbezeichnung für jede Bundle-Komponente.

• Unterblöcke, die vor der Product-Zeile angeordnet sind, erscheinen in jeder Zeile über dem Produktinhalt.
• Unterblöcke, die nach der Product-Zeile angeordnet sind, erscheinen in jeder Zeile unter dem Produktinhalt.

• Wenn der Cart keine Artikel enthält, wechselt der Drawer in den leeren Zustand und dieser Block wird nicht angezeigt.
• Es läuft immer nur eine Cart-Änderung gleichzeitig. Während eine Mengenänderung oder Entfernung läuft, sind die Steuerelemente der Zeile deaktiviert, um den Cart konsistent zu halten, und werden wieder aktiviert, sobald die Änderung abgeschlossen ist.
• Das Absenken der Menge einer Zeile unter 1 entfernt sie. Eine Menge, die der Store ablehnt (zum Beispiel über den verfügbaren Bestand hinaus), wird auf den letzten gültigen Wert zurückgesetzt.
• Bundles ändern sich als Einheit. Das Anpassen der Menge auf der Ankerzeile eines Bundles skaliert das gesamte Bundle in einem Vorgang — wenn ein Kind mit 3 pro Anker enthalten ist, bringt eine Erhöhung des Ankers von 1 auf 2 dieses Kind auf 6. Das Entfernen des Ankers entfernt alle Bundle-Mitglieder auf einmal.
• Manche Bundles lassen sich nicht in der Menge ändern. Wenn eines der Kinder eines Bundles mit einer gebrochenen Rate enthalten ist (zum Beispiel 1,5 pro Anker), ist der Mengenwähler dieses Bundles gesperrt: Die +/−-Schaltflächen und das Mengenfeld sind beide deaktiviert, und eingetippte Mengen werden nicht akzeptiert. Das Bundle kann weiterhin entfernt werden.
• Abonnementzeilen zeigen ihren Plan. Wenn eine Zeile einen Selling Plan hat und der Unterblock Subscription upgrade deaktiviert oder nicht hinzugefügt ist, zeigt die Product-Zeile eine schreibgeschützte Plan-Beschriftung unter der Variante — zum Beispiel Delivers every month (save 30%). Wenn dieser Unterblock aktiviert ist, präsentiert er den Plan in seiner eigenen Auswahl, sodass die schreibgeschützte Beschriftung unterdrückt statt dupliziert wird.

• Bereich: Body.
• Maximum: 1 pro Cart-Zustand.
• Zustand: nur gefüllter Cart.
• Gesperrt und standardmäßig hinzugefügt. Cart items kann nicht entfernt oder ausgeblendet, nur neu positioniert werden.

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