Custom code-blokke

Custom code-blokken tilføjer din egen HTML eller React til carten. Placér den i en hvilken som helst sektion af skuffen, eller indlejr den i Cart items som en under-blok, så den gentages for hver linje. I modsætning til andre blokke har den ingen Content-indstillinger og ingen Design-sektion: blokken er koden, så du arbejder udelukkende i dens Code-fane.

1. Tilføj en Custom code-blok til en hvilken som helst sektion, eller som en under-blok under Cart items.
2. Vælg den, og åbn Code-fanen.
3. Vælg HTML eller React component. Nye blokke er som standard HTML.
4. Skriv din kode.
5. Hvis du valgte React, skal du klikke på Compile.
6. Slå “Use custom template” til. For denne blok betyder den kontakt “vis min tilpassede kode”, og den er som standard slået fra, så intet vises, før du aktiverer den.
7. Hold sidebarens øje-knap slået til, så blokken forbliver synlig for kunder.

• Blokken viser intet, før carten er indlæst.
• Den viser heller intet, når sidebarens øje er slået fra, “Use custom template” er slået fra, koden er tom, eller React ikke kan kompilere eller rendere. Fordi en fejl er tavs, bør du tjekke din blok i forhåndsvisning, før du publicerer.

• Inline <script>-tags kører ikke, og HTML-tilstanden har ingen adgang til SDK’et eller window.
• Til logik skal du bruge React-tilstand eller Tilpassede scripts med Cart SDK.

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

• Editoren låser wrapperen til function CustomCode(props: CustomCodeProps) { … }, og du redigerer kun kroppen mellem de linjer.
• Du skal klikke på Compile og derefter slå “Use custom template” til, før blokken vises.
• Din komponent kan bruge useState, useEffect, useMemo, useRef og useCallback.
• I modsætning til HTML-tilstanden kører React i sidens kontekst, så den kan kalde window og Cart SDK, når de er tilgængelige.
• Hvis din komponent kaster fejl ved kørsel, viser blokken intet, og resten af carten fungerer fortsat.

• line er kun sat på en Cart items-under-blok, hvor din komponent renderes én gang pr. linje. Placeret som en sektion er line null, og du læser i stedet cart.items.
• Bundle-underordnede er ikke i cart.items. Når linjer er grupperet i en bundle, vises kun ankerlinjen; dens underordnede ligger på line.bundle.children.
• Linjer skjult af en linjetransformation er der heller ikke, selvom de stadig tæller med i 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>
  );
}

• Region: alle (top, brødtekst eller bund). Også tilgængelig som en Cart items-under-blok.
• Maksimum: ubegrænset.
• Tilstand: fyldt og tom cart (som sektionsblok). Som en Cart items-under-blok renderes den kun, når carten har linjer, én instans pr. linje.
• Ikke låst, så du kan fjerne eller skjule den.
• Der er ingen Design-sektion pr. blok. Stil gennem din egen markup, Tilpasset CSS og dine globale Designindstillinger.