Skip to main content

Integrating your cart with Rokt

The in-transaction/cart integration notifies your frontend whenever a customer selects a Rokt upsell opportunity, allowing for the change to be reflected in a customer's cart. This is achieved by listening to the UPDATE_CART_ITEM_MESSAGE event of a placement, which is triggered every time a customer makes changes to selected items on the Rokt side. The payload of the event is described in UpdateCartItemBody.

Additionally, you can provide extra information using Rokt.setAttributes to better tailor offers to a customer. In some cases, depending on your catalog provider, additional information may be required for Rokt to retrieve catalog items.

rokt.onLoaded(function (rokt) {  // (...) existing integration logic
  rokt.getPlacements().then((placements) => {    placements.forEach((placement) => {      placement.on("UPDATE_CART_ITEM_MESSAGE").subscribe(function (update) {        // Below you should provide your code to reflect changes to your cart        clientCart.updateCart(update.updatedItem, update.oldItem);      });    });  });
  rokt.setAttributes({    // attributes required by Rokt to retrieve the catalog items    eventId: "eventId",    venueName: "venueName",    // any additional attributes    email: "email",  });});

Checking placement availability#

This extension involves your backend issuing a call to Rokt to check if any placements are available. You can then decide if your upsell page should be displayed or skipped. In this scenario, your pages have most likely already been generated on the backend, and you have already included customer and transactional data to Rokt in the initial call. Since that call may have already generated your session ID, the Rokt JavaScript API requires you to include your session ID in the Rokt.init method so both interactions can be paired together for identification and performance reasons.

rokt.onLoaded(function (rokt) {  rokt.init({    sessionId: "uniqueSessionId", // session ID generated by Rokt backend  });
  rokt.setAttributes({    // attributes required by Rokt to retrieve the catalog items    eventId: "eventId",    venueName: "venueName",    // any additional attributes    email: "email",  });});

Checking placement is valid#

Some Rokt offers contain fields the customer must complete before moving on in the transaction flow. An example of this is filling out a form or selecting yes/no on an offer.

These types of offers contain validation messaging that displays a warning to the customer indicating the action they must take before proceeding.

To check if the current placements are valid, use the rokt.getValidationStatus() method. getValidationStatus returns a JavaScript Promise that waits until the placements have resolved their first validation state as defined. The resolved value looks like:

interface PlacementValidationStatus {  // Allows you to quickly determine if there are any errors  isValid: boolean;  // This is the list of placements with validation  placements: Array<{    // This is the element of the placement containing an error,    // allowing you to scroll to it if an error is present    element: HTMLIFrameElement;    // Placements will show their error own messages but this is an    // array that provides you with the error messages should you    // want to repeat them somewhere. It will be empty if valid    errors: Array<{      message: string;    }>;  }>;}

Example usage

rokt.onLoaded(function (rokt) {  rokt.setAttributes({    /* ... */  });  rokt.init({    /* ... */  });
  // When the customer clicks this button, you check the validation status of the placements  document.querySelector("button.check-validation").onclick = async () => {    const result = await rokt.getValidationStatus();
    // Quickly determine if the placements contain an invalid placement    alert(result.isValid);
    // Loop through    for (const placement of result.placements) {      alert(        "element is: " +          element.getBoundingClientRect().top +          "px from the top of the page"      );      alert("placement has: " + placement.errors.length + " errors");
      for (const [i, error] of placement.errors.entries()) {        alert("placement error: " + i + " is " + error);      }    }  };});
Was this article helpful?