Blocchi Custom code

Il blocco Custom code aggiunge il tuo HTML o React al carrello. Mettilo in qualsiasi sezione del drawer, oppure annidalo dentro Cart items come sotto-blocco così si ripete per ogni riga. A differenza degli altri blocchi, non ha impostazioni Content né una sezione Design: il blocco è il codice, quindi lavori interamente nella sua scheda Code.

1. Aggiungi un blocco Custom code a qualsiasi sezione, o come sotto-blocco sotto Cart items.
2. Selezionalo e apri la scheda Code.
3. Scegli HTML o React component. I nuovi blocchi hanno HTML come predefinito.
4. Scrivi il tuo codice.
5. Se hai scelto React, fai clic su Compile.
6. Attiva “Use custom template”. Per questo blocco, quell’interruttore significa “mostra il mio codice personalizzato”, ed è disattivo per impostazione predefinita, quindi non viene renderizzato nulla finché non lo abiliti.
7. Mantieni attivo l’interruttore a occhio nella barra laterale così il blocco resta visibile agli acquirenti.

• Il blocco non renderizza nulla finché il carrello non è stato caricato.
• Non renderizza nulla nemmeno quando l’occhio della barra laterale è disattivo, “Use custom template” è disattivo, il codice è vuoto, oppure React non riesce a compilare o renderizzare. Poiché un errore è silenzioso, controlla il tuo blocco in anteprima prima di pubblicare.

• I tag <script> inline non vengono eseguiti, e la modalità HTML non ha accesso all’SDK né a window.
• Per la logica, usa la modalità React o gli script personalizzati con il Cart SDK.

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

• L’editor blocca il wrapper su function CustomCode(props: CustomCodeProps) { … }, e tu modifichi solo il corpo tra quelle righe.
• Devi fare clic su Compile e poi attivare “Use custom template”, prima che il blocco appaia.
• Il tuo componente può usare useState, useEffect, useMemo, useRef e useCallback.
• A differenza della modalità HTML, React viene eseguito nel contesto della pagina, quindi può chiamare window e il Cart SDK quando disponibili.
• Se il tuo componente genera errori a runtime, il blocco non renderizza nulla e il resto del carrello continua a funzionare.

• line è impostata solo su un sotto-blocco di Cart items, dove il tuo componente viene renderizzato una volta per riga. Posizionato come sezione, line è null e leggi invece cart.items.
• I figli dei bundle non sono in cart.items. Quando le righe sono raggruppate in un bundle, appare solo la riga anchor; i suoi figli si trovano in line.bundle.children.
• Nemmeno le righe nascoste da un line transform sono presenti, anche se contano comunque nel cart.totalPrice.

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

• Regione: qualsiasi (superiore, corpo o inferiore). Disponibile anche come sotto-blocco di Cart items.
• Massimo: illimitato.
• Stato: carrello pieno e vuoto (come blocco di sezione). Come sotto-blocco di Cart items, viene renderizzato solo quando il carrello ha righe, un’istanza per riga.
• Non è bloccato, quindi puoi rimuoverlo o nasconderlo.
• Non c’è una sezione Design per blocco. Personalizza lo stile attraverso il tuo markup, il CSS personalizzato e le tue impostazioni di design globali.