> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Ukrywaj pozycje koszyka i zmieniaj ich etykiety

> Przypadek użycia Cart SDK wykorzystujący transformacje pozycji i komparatory do ukrywania pozycji dodanych przez aplikacje, zmiany ich nazw i kontroli kolejności renderowania.

Ukrywaj pozycje, których kupujący nie powinien widzieć, zmieniaj nazwy pozycji, które źle wyglądają, i kontroluj kolejność renderowania — wszystko bez dotykania rzeczywistej zawartości koszyka.

Zastępuje to starszy schemat ukrywania elementów koszyka przez CSS lub `style.display = 'none'`. Transformacja pozycji jest stosowana przy każdym renderze koszyka, więc przetrwa aktualizacje, ponowne rendery i ponowne otwarcia szuflady.

<div id="hide-a-line">
  ## Ukryj pozycję
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Hide free lines from the drawer. The cart total is unchanged.
window.aftersell.cart.hooks.registerLineTransform((line) => {
  if (line.finalLinePrice === 0) {
    line.setHidden(true);
  }
});
```

<Warning>
  **Ukrywanie to nie usuwanie.** Ukryta pozycja pozostaje w koszyku kupującego, pozostaje w sumie i przechodzi do checkoutu; po prostu nie jest rysowana w szufladzie. Znika za to z `getCart().items` i `itemCount`, więc Twój własny kod również przestaje ją widzieć. Jeśli chcesz się jej pozbyć naprawdę, użyj [`removeItem`](/pl/aftersell/cart/sdk-actions#removeitemkey).
</Warning>

Typowe rzeczy warte ukrycia:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerLineTransform((line) => {
  // An app-injected line, tagged with a private property.
  if (line.properties?._bundle_child) {
    line.setHidden(true);
  }

  // A specific SKU that shouldn't be shopper-managed.
  if (line.variantId === HIDDEN_VARIANT_ID) {
    line.setHidden(true);
  }

  // Gift cards issued by a loyalty app.
  if (line.isGiftCard && line.finalLinePrice === 0) {
    line.setHidden(true);
  }
});
```

<div id="relabel-a-line">
  ## Zmień etykietę pozycji
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerLineTransform((line) => {
  // Flag discounted lines.
  if (line.finalLinePrice < line.originalLinePrice) {
    line.setTitle(`${line.title} (On sale)`);
  }

  // Make the subscription cadence read naturally.
  if (line.sellingPlan) {
    line.setVariantTitle(`Delivered ${line.sellingPlan.name.toLowerCase()}`);
  }

  // Drop a meaningless variant label.
  if (line.variantTitle === 'Default Title') {
    line.setVariantTitle(null);
  }
});
```

Cztery settery dostępne na pozycji:

| Setter                            | Efekt                                                                                                                                                |
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setHidden(bool)`                 | Ukrywa pozycję w szufladzie.                                                                                                                         |
| `setTitle(string)`                | Zmienia wyświetlany tytuł.                                                                                                                           |
| `setVariantTitle(string \| null)` | Zmienia wyświetlaną etykietę wariantu. `null` ją usuwa.                                                                                              |
| `setInternalProperties(obj)`      | Scala właściwości tylko do renderowania, do odczytu przez [blok Custom code](/pl/aftersell/cart/custom-code-blocks). Nigdy nie zapisywane w Shopify. |

<div id="control-the-order">
  ## Kontroluj kolejność
</div>

Komparator ma ten sam kształt, jakiego oczekuje `Array.prototype.sort`, i działa po ukrywaniu i zmianie nazw:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Subscriptions first, then everything else.
window.aftersell.cart.hooks.registerLineComparator((lineA, lineB) => {
  return (lineB.sellingPlan ? 1 : 0) - (lineA.sellingPlan ? 1 : 0);
});
```

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Push free gifts and add-ons to the bottom.
window.aftersell.cart.hooks.registerLineComparator((lineA, lineB) => {
  return (lineA.finalLinePrice === 0 ? 1 : 0) - (lineB.finalLinePrice === 0 ? 1 : 0);
});
```

Zwracaj `0` dla par, które Cię nie interesują. Komparatory składają się jako tie-breakery, więc pierwszy, który zwróci wartość niezerową, decyduje o danej parze, a zwrócenie `0` przekazuje decyzję następnemu, zamiast wymuszać kolejność.

<div id="hide-a-whole-block-not-a-line">
  ## Ukryj cały blok, nie pozycję
</div>

Transformacja pozycji działa na pozycjach koszyka. Aby pokazywać różne ustawienia **bloków** według kraju, rynku lub waluty (na przykład różne progi Rewards), użyj [warunków w edytorze koszyka](/pl/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency). Kod nie jest potrzebny, a rozwiązanie przetrwa przeprojektowania koszyka. Suma i zawartość koszyka **nie** są typami warunków w edytorze.

Sięgaj po SDK, gdy Twojej reguły warunki nie potrafią wyrazić (ID produktów w koszyku, niestandardowa suma itd.). W takim przypadku odpytaj [shadow root](/pl/aftersell/cart/sdk-overview#shadowroot) o publiczną klasę `cart-external-*`:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.events.on('cart_updated', (state) => {
  const root = window.aftersell.cart.shadowRoot;
  if (!root) return;

  const rewards = root.querySelector('.cart-external-rewards');
  if (!rewards) return;

  const hasExcluded = state.items.some((line) => EXCLUDED_PRODUCT_IDS.includes(line.productId));
  rewards.style.display = hasExcluded ? 'none' : '';
});
```

<Warning>
  To działa po każdym renderze, więc blok może mignąć, zanim Twój kod go ukryje. Renderowanie warunkowe nie ma tego problemu, więc preferuj je wszędzie, gdzie pasuje.
</Warning>

<div id="things-to-get-right">
  ## Rzeczy, które trzeba zrobić dobrze
</div>

* **Transformacje to wywołania konfiguracyjne.** Rejestruj je na początku skryptu Initialization; `ready()` nie jest potrzebne.
* **Działają transformacje wszystkich.** Twoja składa się z transformacjami zarejestrowanymi przez inne aplikacje. Nie możesz zastąpić ich transformacji, a one nie mogą odrzucić Twojej.
* **Transformacja nie może zmienić ceny, ilości ani tożsamości.** Zmienia tylko to, co się renderuje. Do prawdziwych zmian używaj [akcji](/pl/aftersell/cart/sdk-actions).
* **Transformacja, która rzuci błąd, jest pomijana po cichu.** Pozostałe nadal działają. Podczas rozwoju sprawdzaj [`aftersellCartDebugEvents`](/pl/aftersell/cart/sdk-overview#debugging).
* **`registerLineTransform` zwraca funkcję wyrejestrowującą**, jeśli będziesz chciał później to cofnąć.

<div id="where-to-go-next">
  ## Co dalej
</div>

* **[Hooks](/pl/aftersell/cart/sdk-hooks)**: pełne odniesienie do hooków.
* **[Obiekt koszyka](/pl/aftersell/cart/sdk-cart-object)**: każde pole, od którego możesz uzależniać logikę.
* **[Custom CSS](/pl/aftersell/cart/custom-css)**: konwencja klas `cart-external-*`.