Expose slot

This section describes how to expose slot of a plugin.

Background

Architecture of Nocto gives you possibility to expose any place of your plugin where people can inject their UI elements. This is one of the most important aspects of Nocto.

Medusa Injection Zones:

Slots in Nocto are much more advanced than Medusa Injection Zones. Because of that, Nocto does not support injection zones, but you can easily migrate your plugin to Nocto slot.

Nocto slot

You can define a place in your plugin where people can inject UI element by wrapping your React component in <NoctoSlot>. Example below:

return (
    <TwoColumnPage
      widgets={{
        after: getWidgets("order.details.after"),
        before: getWidgets("order.details.before"),
        sideAfter: getWidgets("order.details.side.after"),
        sideBefore: getWidgets("order.details.side.before"),
      }}
      data={order}
      showJSON
      showMetadata
      hasOutlet
    >
      <TwoColumnPage.Main>
        <NoctoSlot pluginId="@order-detail" name="activeEdit" runtimeProps={{ order, orderPreview }} fallback={<OrderActiveEditSection order={order} />}/>
        <NoctoSlot pluginId="@order-detail" name="activeOrderClaim" runtimeProps={{ order, orderPreview }} fallback={<ActiveOrderClaimSection orderPreview={orderPreview!} />}/>
        <NoctoSlot pluginId="@order-detail" name="activeOrderExchange" runtimeProps={{ order, orderPreview }} fallback={<ActiveOrderExchangeSection orderPreview={orderPreview!} />}/>
        <NoctoSlot pluginId="@order-detail" name="activeOrderReturn" runtimeProps={{ order, orderPreview }} fallback={<ActiveOrderReturnSection orderPreview={orderPreview!} />}/>
        <NoctoSlot pluginId="@order-detail" name="general" runtimeProps={{ order, orderPreview }} fallback={<OrderGeneralSection order={order}/>}/>
        <NoctoSlot pluginId="@order-detail" name="summary" runtimeProps={{ order, orderPreview }} fallback={<OrderSummarySection order={order} plugins={plugins}/>}/>
        <NoctoSlot pluginId="@order-detail" name="payment" runtimeProps={{ order, orderPreview }} fallback={<OrderPaymentSection order={order} plugins={plugins}/>}/>
        <NoctoSlot pluginId="@order-detail" name="fulfillment" runtimeProps={{ order, orderPreview }} fallback={<OrderFulfillmentSection order={order}/>}/>
      </TwoColumnPage.Main>
      <TwoColumnPage.Sidebar>
        <OrderCustomerSection order={order} />
        <OrderActivitySection order={order} />
      </TwoColumnPage.Sidebar>
    </TwoColumnPage>
  )

Every <NoctoSlot> takes couple of parameters:

  • pluginId - mandatory parameter which is the unique id of the plugin. Please be aware that it shall be globally unique. Here are the rules which we recommend:
    • if you are introducing <NoctoSlot> as a part of core Nocto (so admin itself), please use prefix @.
    • if you are introducing <NoctoSlot> as a part of your plugin, please use plugin name (e.g. @yourcompany/my-plugin)
  • name - mandatory parameter which is the name of the slot of the plugin. The name shall be unique across the plugin.
  • runtimeProps - optional parameter. You can pass here the runtime properties, which are available when rendering the component. For instance, passing order means that people can take order as parameter in their UI element. It works similarly like AdditionalProps in widget injection zones.
  • fallback - optional parameter. It defines the default UI element in this slot. Please be aware that your slot can be empty and just gives the place to inject UI element.

Place around the slot:

Nocto slot automatically gives also possibility to inject UI element before or after the slot. Learn more here Injections