Custom code-blokken

Het Custom code-blok voegt je eigen HTML of React toe aan de cart. Plaats het in elke sectie van de drawer, of nestel het binnen Cart items als sub-blok zodat het per regel wordt herhaald. In tegenstelling tot andere blokken heeft het geen Content-instellingen en geen Design-sectie: het blok is de code, dus je werkt volledig in het tabblad Code.

1. Voeg een Custom code-blok toe aan een sectie, of als sub-blok onder Cart items.
2. Selecteer het en open het tabblad Code.
3. Kies HTML of React component. Nieuwe blokken staan standaard op HTML.
4. Schrijf je code.
5. Als je React hebt gekozen, klik op Compile.
6. Zet “Use custom template” aan. Voor dit blok betekent die schakelaar “toon mijn aangepaste code”, en hij staat standaard uit, dus er wordt niets gerenderd totdat je hem inschakelt.
7. Houd de oog-schakelaar in de zijbalk aan zodat het blok zichtbaar blijft voor shoppers.

• Het blok rendert niets totdat de cart is geladen.
• Het rendert ook niets wanneer het oog in de zijbalk uitstaat, “Use custom template” uitstaat, de code leeg is, of React niet compileert of rendert. Omdat een fout stil is, controleer je blok in de voorvertoning voordat je publiceert.

• Inline <script>-tags worden niet uitgevoerd, en de HTML-modus heeft geen toegang tot de SDK of window.
• Gebruik voor logica de React-modus of Aangepaste scripts met de Cart SDK.

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

• De editor vergrendelt de wrapper op function CustomCode(props: CustomCodeProps) { … }, en je bewerkt alleen de body tussen die regels.
• Je moet op Compile klikken en daarna “Use custom template” inschakelen voordat het blok wordt getoond.
• Je component kan useState, useEffect, useMemo, useRef en useCallback gebruiken.
• In tegenstelling tot de HTML-modus draait React in de paginacontext, dus het kan window en de Cart SDK aanroepen wanneer die beschikbaar zijn.
• Als je component tijdens runtime fouten gooit, rendert het blok niets en blijft de rest van de cart werken.

• line is alleen ingesteld op een Cart items-sub-blok, waar je component één keer per regel rendert. Geplaatst als sectie is line null en lees je in plaats daarvan cart.items.
• Bundelkinderen staan niet in cart.items. Wanneer regels tot een bundel zijn gegroepeerd, verschijnt alleen de ankerregel; de kinderen staan op line.bundle.children.
• Regels die door een line transform zijn verborgen, staan er ook niet in, hoewel ze nog steeds meetellen in 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>
  );
}

• Regio: overal (boven, midden of onder). Ook beschikbaar als Cart items-sub-blok.
• Maximum: onbeperkt.
• Status: gevulde en lege cart (als sectieblok). Als Cart items-sub-blok rendert het alleen wanneer de cart regels heeft, één instantie per regel.
• Niet vergrendeld, dus je kunt het verwijderen of verbergen.
• Er is geen Design-sectie per blok. Style via je eigen markup, Aangepaste CSS en je globale Designinstellingen.