Bloki Custom code

Blok Custom code dodaje twój własny HTML lub React do koszyka. Umieść go w dowolnej sekcji szuflady albo zagnieźdź wewnątrz Cart items jako sub-blok, aby powtarzał się dla każdej linii. W odróżnieniu od innych bloków nie ma ustawień Content ani sekcji Design: blok jest kodem, więc pracujesz wyłącznie w jego karcie Code.

1. Dodaj blok Custom code do dowolnej sekcji albo jako sub-blok pod Cart items.
2. Zaznacz go i otwórz kartę Code.
3. Wybierz HTML lub React component. Nowe bloki domyślnie używają HTML.
4. Napisz swój kod.
5. Jeśli wybierzesz React, kliknij Compile.
6. Włącz „Use custom template”. Dla tego bloku ten przełącznik oznacza „pokaż mój niestandardowy kod” i domyślnie jest wyłączony, więc nic się nie renderuje, dopóki go nie włączysz.
7. Zostaw włączony przełącznik oka w pasku bocznym, aby blok pozostał widoczny dla kupujących.

• Blok nie renderuje niczego, dopóki koszyk się nie załaduje.
• Nie renderuje też niczego, gdy oko w pasku bocznym jest wyłączone, „Use custom template” jest wyłączone, kod jest pusty albo React nie skompiluje się lub nie wyrenderuje. Ponieważ awaria jest cicha, sprawdź swój blok w podglądzie przed publikacją.

• Wbudowane tagi <script> nie działają, a tryb HTML nie ma dostępu do SDK ani window.
• Dla logiki użyj trybu React lub Niestandardowych skryptów z Cart SDK.

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

• Edytor blokuje wrapper na function CustomCode(props: CustomCodeProps) { … }, a ty edytujesz tylko treść między tymi liniami.
• Musisz kliknąć Compile, a następnie włączyć „Use custom template”, zanim blok się pokaże.
• Twój komponent może używać useState, useEffect, useMemo, useRef i useCallback.
• W odróżnieniu od trybu HTML, React działa w kontekście strony, więc może wywoływać window i Cart SDK, gdy są dostępne.
• Jeśli twój komponent rzuca błędy w czasie działania, blok nie renderuje niczego, a reszta koszyka działa dalej.

• line jest ustawiony tylko na sub-bloku Cart items, gdzie twój komponent renderuje się raz per linia. Umieszczony jako sekcja, line jest null i zamiast tego czytasz cart.items.
• Elementy podrzędne pakietu nie są w cart.items. Gdy linie są zgrupowane w pakiet, pojawia się tylko linia kotwicy; jej elementy podrzędne znajdują się w line.bundle.children.
• Linii ukrytych przez transformację linii też tam nie ma, choć nadal liczą się do 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: dowolny (góra, treść lub dół). Dostępny także jako sub-blok Cart items.
• Maksimum: bez limitu.
• Stan: wypełniony i pusty koszyk (jako blok sekcji). Jako sub-blok Cart items renderuje się tylko wtedy, gdy koszyk ma linie — jedna instancja per linia.
• Nie jest zablokowany, więc możesz go usunąć lub ukryć.
• Nie ma sekcji Design per blok. Stylizuj przez własną strukturę, Custom CSS i globalne Ustawienia designu.