Initialization

Background

TryNow provides a JavaScript SDK that powers it's Shopper-facing components and exposes a series of methods that can be used by developers to create rich Try Before You Buy experiences. Once initialized in the browser through the methods described below, the SDK is made available through window.trynow. Once initialized, a window.trynow.initialized boolean property is set to true.

Prerequisites

In order to ensure a successful launch of your TryNow implementation, we suggest reviewing some of the below requirements to streamline your process.

Requirements

• If using App Blocks, product templates must be using Shopify 2.0.
• Use a form submit action to add items to a cart. If that is not being used, whichever method adds items to the cart should be able to accept or pass a Selling Plan in the request.
• Shopify Payments are enabled.

Nice-to-haves

• If using App Blocks, the collection template should be Shopify 2.0 in order to better streamline integration.
• Cart line items render the selling plan name on the Cart Page or Side Carts to give visibility to shoppers about their cart.

Shopify App Blocks

Typically, the TryNow SDK is initialized automatically when using the TryNow Shopify App Blocks. To enable this:

1. Open the Shopify Theme Customizer and open the App Embeds section on the lefthand side.
2. Turn on the "Enable Try Before You Buy" App Embed Block

Once enabled, window.trynow will be available for use.

Via <script> Tag

The TryNow SDK can be injected via static URL as well. For storefronts who cannot use Shopify App Blocks (such as headless stores or legacy storefronts) or who need to customize their initialization configuration, TryNow initialization can be performed manually.

// initTryNow() MUST be defined before including the TryNow SDK asset.
<script>
  const config = {
    myshopifyDomain: 'acme-store.myshopify.com', // required
    waitForEvent: 'test-string', //optional
    debug: false // optional
  }
  function initTryNow() {
    window.trynow.initialize(config)
  }
</script>

<script async src='https://components.trynow.net/shopify/1.2.0/trynow.min.js' onload='initTryNow()'>
</script>

waitForEvent is helpful when you need to delay initializing TryNow. React and Vue applications, for example, may need to load completely or partially before TryNow is loaded onto the page.

If you chose to add a waitForEvent string, you must dispatch that event in order to initialize TryNow properly:

window.dispatchEvent(new CustomEvent('test-string'))