The Wonderment Shipments Object

Brian Whalley Updated by Brian Whalley

The Wonderment Shipments object is intended for developers or people familiar with Javascript or other coding languages. Wonderment does not provide support for custom Javascript or other development on the tracking page, except for Plus plan users. Plus plan users can contact their Wonderment CSM or post in their hosted Slack channel for support.

Wonderment makes the data about a specific order / package available to developers through our wonderment.shipments object. Developers can use this object to use data like the current package status or package contents to modify the standard tracking page experience, or create customized experiences using the data.

Below is the shipments object that is returned for the search "preview", as a reference for the possible variables to interact with. It is important to also note that Wonderment does not post any potential PII (personally identifiable information) to the frontend, so this data is safe to work with in the browser.

If you require data beyond what is available here, we recommend using the Wonderment API or other APIs to instead extract that information in your backend and then publish it to the front, or if possible run them in the browser after the Wonderment object is ready.

Included Fields

The included fields in Wonderment Shipments are, for each shipment in an order:

  • Carrier Name
  • Package ETA, as a UTC datetime
  • Shipment events
  • Line Items
  • The associated order name and ID
  • Carrier Service Level, if available
  • Details of the most recent tracking event
  • Tracking Code
  • The carrier's tracking URL (from the fulfillment.trackingurl parameter in Shopify)

Note that line items not associated with a fulfillment and non-fulfillable items (ie: shipping insurance, digital downloads) will not be returned in the object. The object reflects the current fulfillment and shipping status of a given order.

Javascript Events

wonderment:app_loaded - Fires when the Wonderment app has loaded, whether a shipment search has happened or not.

wonderment:shipments_loaded - Fires when a shipment search returns. The wonderment shipments object will be available after this fires.

Example: Changing The Multi-Column Image Block Based On Package Contents

Here's a quick example of changing the image shown on the tracking page's multi-column layout depending on a specific product being in the order's shipment. Note that it is important to wait until the Wonderment object is available, and the image has rendered before changing it out.

<script type="text/javascript">

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

document.addEventListener("wonderment:shipments_loaded", function (event) {
  if(event?.detail?.shipments?.length >0) {
    const productTest = JSON.stringify(event.detail.shipments[0].lineItems);
    const target =  document.querySelector(
      ".wndr--image-block-container img"
    )
      console.log('product Test', productTest, 'target node', target)
    if (productTest?.includes("Test Product")) {
      waitForElm(".wndr--image-block-container img").then(target => {
        console.log('productTest === "Test Product"')
        target.src = "test.gif";
      })
    }
  }
});

</script>

In the basic three-column tracking page view, .wndr--image-block-container is a div wrapping the image tag for the image shown on the left-hand side. This example tests for the presence of a product named "Test Product", and if it exists, replaces that image with "test.gif". This code could be included in any standard HTML block in the page.

How did we do?

Collection Cross-Sell Section Setup

Contact