Headless Integration

🚧

Headless e-commerce confirmation page

If you're using Shopify as a headless e-commerce backend for a custom site build on your confirmation page, you'll have to add some information to your custom order confirmation page for the EnquireLabs survey to work correctly.

When our script loads, it inspects the order confirmation page to find order information to associate with the survey. First the script looks for a Shopify.checkout object on window. On a regular Shopify order confirmation page, Shopify makes this object available automatically. If the script can't find the Shopify.checkout object, it will fall back to using heuristics to find an order number on the page and use the order number to search for the order information via Shopify's API.

The simplest thing to do is expose a Shopify.checkout object on a window so that the Enquire script can find it. Its format is exactly the same as the response body example shown in the Shopify API Documentation. In the example, the response body has an order key with the order details. As an example, a script on your page may do something like the following:

window.Shopify = { 
  "checkout": { 
    "id": 1001, 
    "number": 1001, 
    "total_price": 
    "55.99",
    ... 
   } 
}

Alternatively, you can include an element with the order number with the class .os-order-number. The inner text of this element must have the format Order #XXXXX where XXXXX is the Shopify order number. An example:

<div class="os-order-number"> 
    Order #1001
</div>

Once you have done the above, you'll also need to add a custom tag with a data attribute where you would like the survey to display. The data attribute is data-post-purchase-survey. As an example:

<div data-post-purchase-survey></div>

When the survey loads, it will be inserted into this element.

Finally, you will need to include the survey script somewhere near the end of your order confirmation page, before the closing body tag. Contact us and we will provide you with your custom script tag.


Did this page help you?