Available Slots (nube.api.getAvailableSlots())

The Available Slots API lets your app discover the slots present on the current page at runtime — both static (predefined) slots and dynamic section slots — so it can render into them without guessing.

Availability

This API is not available in the Patagonia theme or in Checkout at this time. Calling it in those contexts will not return slots. Support for these contexts is planned for a future release.

This matters because the set of slots on a page varies:

• Predefined slots differ by theme (see the coverage table in Storefront Slots ).
• Dynamic section slots carry a per-page instance id that can't be hardcoded.

import type { NubeSDK } from "@tiendanube/nube-sdk-types";

export function App(nube: NubeSDK) {
  const availableSlots = nube.api.getAvailableSlots();
}

getAvailableSlots() returns a cached AvailableSlotsCommands instance — repeated calls return the same object. See the API overview for how the namespace is materialized and how errors are surfaced.

Methods

All methods are asynchronous and return a Promise, because the slot data lives on the main thread (the DOM) and is fetched across the worker / main-thread boundary.

getStatic(): Promise<StaticSlot[]>;
getDynamic(): Promise<DynamicSlot[]>;
getAll(): Promise<{ static: StaticSlot[]; dynamic: DynamicSlot[] }>;

Method	Returns	Description
getStatic()	StaticSlot[]	Only the static (predefined checkout/storefront) slots on the page.
getDynamic()	DynamicSlot[]	Only the dynamic section slots on the page.
getAll()	{ static: StaticSlot[]; dynamic: DynamicSlot[] }	Both buckets at once — the whole slot registry.

Slot shapes

StaticSlot

type StaticSlot = {
  slotId: CheckoutUISlot | StorefrontUISlot;
  pick: string | null;
  isRepeatable: boolean;
};

Field	Type	Description
slotId	CheckoutUISlot \| StorefrontUISlot	The slot name. This is what you pass to render / clearSlot.
pick	string \| null	Disambiguation key for repeatable slots (e.g. a product.id for product-grid items, or a line-item id). null for non-repeatable slots.
isRepeatable	boolean	Whether the slot repeats on the page. Auto-derived: isRepeatable === (pick !== null).

DynamicSlot

type DynamicSlot = {
  type: "before_dynamic_section" | "after_dynamic_section";
  sectionType: string;
  sectionId: string;
  sectionIndex: number;
  slotId: DynamicUISlot;
};

Field	Type	Description
type	"before_dynamic_section" \| "after_dynamic_section"	Whether the slot sits before or after its section.
sectionType	string	The section's type, e.g. "product-list".
sectionId	string	The section instance id generated when the page is built.
sectionIndex	number	The section's position among the page's dynamic sections.
slotId	DynamicUISlot	The dynamic slot's name. This is what you pass to render / clearSlot.

Rendering with a discovered slot

render and clearSlot accept a StaticSlot or DynamicSlot descriptor object directly, in addition to a plain slot name. Pass the object returned by discovery — no need to read slotId yourself:

import type { NubeSDK } from "@tiendanube/nube-sdk-types";
import { Box, Text } from "@tiendanube/nube-sdk-jsx";

export async function App(nube: NubeSDK) {
  const dynamics = await nube.api.getAvailableSlots().getDynamic();

  const target = dynamics.find((slot) => slot.sectionType === "product-list");

  if (target) {
    nube.render(target, [
      <Box key="promo">
        <Text>Injected next to a product-list section.</Text>
      </Box>,
    ]);
  }
}

Examples

Only render when a slot exists

import type { NubeSDK } from "@tiendanube/nube-sdk-types";
import { Box, Text } from "@tiendanube/nube-sdk-jsx";

export async function App(nube: NubeSDK) {
  const statics = await nube.api.getAvailableSlots().getStatic();

  const hasFooter = statics.some((slot) => slot.slotId === "before_footer");

  if (hasFooter) {
    nube.render("before_footer", [
      <Box key="banner">
        <Text>Sign up for our newsletter and get 10% off.</Text>
      </Box>,
    ]);
  }
}

Inspecting the full registry

import type { NubeSDK } from "@tiendanube/nube-sdk-types";

export async function App(nube: NubeSDK) {
  const { static: statics, dynamic: dynamics } =
    await nube.api.getAvailableSlots().getAll();

  console.log(`${statics.length} static slots, ${dynamics.length} dynamic slots`);
}

Notes

• All methods are asynchronous. On failure the promise rejects with an Error in the form "<code>: <message>" — see Return values and errors .
• The returned data reflects the current page. Re-query after navigation, since the available slots (especially dynamic ones) change from page to page.