Saltar al contenido principal

Script Structure

peligro

This SDK is a Work In Progress! All features are subject to change.

Script structure​

The main entry point for the script is located in src/main.ts. 

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

export function App(nube: NubeSDK) {
  // your code goes here
}

This exported function, App(nube: NubeSDK) is called by the NubeSDK during initialization, and it's the main entry point for your application's script.

The received nube: NubeSDK object contains all the helper functions required to interact with the sdk.

export type NubeSDK = {
  // Start listening to an event
  on(event: NubeSDKListenableEvent, listener: NubeSDKListener): void;
  // Stop listening to an event
  off(event: NubeSDKListenableEvent, listener: NubeSDKListener): void;
  // Dispatch an event
  send(event: NubeSDKSendableEvent, modifier?: NubeSDKStateModifier): void;
  // Get current state
  getState(): Readonly<NubeSDKState>;
};

The programming model used by NubeSDK is mostly event based, that is, the SDK dispatches events to report changes in the store, and sometimes expects events as response.

Listening to events​

Listening to events is done through the received nube instance:

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

export function App(nube: NubeSDK) {
// Listen to cart update event, dispatched every time that the cart is updated
nube.on("cart:update", ({ cart }) => {
  // Log the total price of the cart to console
  console.log(cart.prices.total); 
});
}

Dispatching events​

Dispatching events is done through the received nube instance:

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

export function App(nube: NubeSDK) {
  // Listen to cart update event, dispatched every time that the cart is updated
  nube.on("cart:update", ({ cart }) => {
    // Reject the cart if it has fewer than 5 items
    if (cart.items.length < 5) {
      // Dispatch a failed `cart:validate` event with the reason why it failed to validate
      nube.send("cart:validate", () => ({
        cart: {
          validation: {
            status: "fail",
            reason: "Cart must have at least 5 items!",
          },
        },
      }));
    } else {
      // Dispatch a successful `cart:validate` event
      nube.send("cart:validate", () => ({
        cart: {
          validation: {
            status: "success",
          },
        },
      }));
    }
  });
}

Script configuration​

There is a special event that can be dispatched by the script to configure some special parameters related to the behavior of the script:

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

export function App(nube: NubeSDK) {
// Tell NubeSDK that this script wants to validate the content of the cart
nube.send("config:set", () => ({
  config: {
    has_cart_validation: true
  },
}));
}

In this example, the script is telling NubeSDK that it wants to validate the content of the cart.

Next Steps​