Custom-Code-Blöcke

Der Block Custom code fügt dein eigenes HTML oder React zum Warenkorb hinzu. Platziere ihn in einem beliebigen Bereich des Drawers oder verschachtele ihn als Sub-Block innerhalb von Cart items, sodass er für jede Position wiederholt wird. Anders als andere Blöcke hat er keine Content-Einstellungen und keinen Design-Bereich: Der Block ist der Code, du arbeitest also ausschließlich in seinem Code-Tab.

1. Füge einen Custom code-Block zu einem beliebigen Bereich hinzu, oder als Sub-Block unter Cart items.
2. Wähle ihn aus und öffne den Code-Tab.
3. Wähle HTML oder React component. Neue Blöcke stehen standardmäßig auf HTML.
4. Schreibe deinen Code.
5. Wenn du React gewählt hast, klicke auf Compile.
6. Aktiviere “Use custom template”. Bei diesem Block bedeutet dieser Schalter „meinen Custom Code anzeigen“, und er ist standardmäßig aus — es wird also nichts gerendert, bis du ihn aktivierst.
7. Lass den Augen-Schalter in der Seitenleiste aktiviert, damit der Block für Käufer sichtbar bleibt.

• Der Block rendert nichts, bis der Warenkorb geladen ist.
• Er rendert außerdem nichts, wenn das Auge in der Seitenleiste ausgeschaltet ist, “Use custom template” deaktiviert ist, der Code leer ist oder React nicht kompiliert bzw. rendert. Da ein Fehler stillschweigend geschieht, prüfe deinen Block in der Vorschau, bevor du veröffentlichst.

• Inline-<script>-Tags werden nicht ausgeführt, und der HTML-Modus hat keinen Zugriff auf das SDK oder window.
• Für Logik nutze den React-Modus oder Custom Scripts mit dem Cart SDK.

<div class="cart-external-custom-code_html">
  You saved {{savings_amount}} ({{savings_percentage}})
</div>

• Der Editor fixiert den Wrapper auf function CustomCode(props: CustomCodeProps) { … }, und du bearbeitest nur den Rumpf zwischen diesen Zeilen.
• Du musst auf Compile klicken und dann “Use custom template” aktivieren, bevor der Block angezeigt wird.
• Deine Komponente kann useState, useEffect, useMemo, useRef und useCallback verwenden.
• Anders als im HTML-Modus läuft React im Seitenkontext und kann daher window und das Cart SDK aufrufen, sofern verfügbar.
• Wenn deine Komponente zur Laufzeit Fehler wirft, rendert der Block nichts, und der Rest des Warenkorbs funktioniert weiter.

• line ist nur bei einem Cart-items-Sub-Block gesetzt, wo deine Komponente einmal pro Position rendert. Als Bereich platziert ist line gleich null, und du liest stattdessen cart.items.
• Bundle-Kinder sind nicht in cart.items. Wenn Positionen zu einem Bundle gruppiert sind, erscheint nur die Anker-Position; ihre Kinder liegen unter line.bundle.children.
• Positionen, die durch eine Line-Transform ausgeblendet wurden, fehlen ebenfalls, obwohl sie weiterhin in cart.totalPrice einfließen.

function CustomCode(props) {
  return (
    <div className="cart-external-custom-code_jsx">
      {props.cart.itemCount} items
    </div>
  );
}

function CustomCode(props) {
  if (!props.line) return null;
  return (
    <div className="cart-external-custom-code_jsx">
      {props.line.productTitle}
      {props.line.variantTitle ? ` · ${props.line.variantTitle}` : ''}
    </div>
  );
}

function CustomCode(props) {
  return (
    <ul>
      {(props.cart.items ?? []).map((item) => {
        const note = item.metadata?.shipping?.shippingNote;
        return (
          <li key={item.key}>
            {item.title}
            {note ? ` · ${note.value}` : ''}
          </li>
        );
      })}
    </ul>
  );
}

function CustomCode(props) {
  const codes = props.cart.discountCodes;
  return (
    <div>
      {codes.length > 0 && (
        <p>Active discounts: {codes.join(', ')}</p>
      )}
      <ul>
        {(props.cart.items ?? []).map((item) => {
          return (
            <li key={item.key}>
              {item.title}
              {item.discountAllocations.map(
                (discount) => ` · ${discount.title} (-${(discount.amount / 100).toFixed(2)})`
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

• Bereich: beliebig (oben, Hauptbereich oder unten). Auch als Cart-items-Sub-Block verfügbar.
• Maximum: unbegrenzt.
• Zustand: gefüllter und leerer Warenkorb (als Bereichsblock). Als Cart-items-Sub-Block rendert er nur, wenn der Warenkorb Positionen enthält, eine Instanz pro Position.
• Nicht gesperrt, du kannst ihn also entfernen oder ausblenden.
• Es gibt keinen blockeigenen Design-Bereich. Style ihn über dein eigenes Markup, Custom CSS und deine globalen Design settings.