@loophq/onstore-sdk

Loop Onstore SDK

An SDK for easily getting started with the Loop Returns onstore API.

Usage

Installing

Add via CDN

The easiest way to get started is to link it into your page via CDN and then use the global variable exposed to use the library.

<script src="https://unpkg.com/@loophq/onstore-sdk@latest/dist/loop-onstore-sdk.js"></script>
<script>
    LoopOnstore.init();
</script>

Module builds

If you have a build process in place you can install via npm or yarn and import and use it as you need.

npm i @loophq/onstore-sdk

import { init } from '@loophq/onstore-sdk';

init();

Examples

<script src="https://unpkg.com/@loophq/onstore-sdk@latest/dist/loop-onstore-sdk.js"></script>
<script>
    LoopOnstore.init({
        key: '1234567890',
        attach: '#checkout-button'
    });
</script>
...
<!-- sidecart -->
<button id="checkout-button">Check out</button>

There's a single method that must be called for Loop Onstore to work correctly. You must run init() on any page you want this to be active on. We generally suggest putting this just above the </body> tag in your theme.liquid file.

You'll need to pass in an options object that contains several things--an API key with the cart scope enabled, and any elements you want to attach to. An API key can be gotten by contacting support, and you'll need to find a selector for any checkout buttons you have, either on the cart page or in your sidecart if you use one.

API

Loop Onstore SDK exposes methods you can use to easily integrate with the Loop onstore API. If you're using the CDN link, you'll access these using the global variable LoopOnstore. If you're installing via package manager you can import the methods individually to use.

init(options)

Initializes the Loop onstore. You'll want to run this on every page load.

LoopOnstore.init({
    key: '1234567890',
    attach: '.checkout-button'
});

submit(variants)

Submit a list of variants to the Loop onstore API. If you pass in an array of variant ids, it will use that, otherwise it queries Shopify for the current cart and uses that to create a Loop cart. Once a Loop cart has been created, you'll be sent back to the Loop Returns app.

backToLoop(token)

Sends you back to Loop. You must set the token you get from the Loop Onstore API when calling this if you want your user to have their cart when they return. The submit() method calls this automatically as a part of that functionality.

testMode()

This will send you into the onstore experience with fake data. You'll want to walk through the entire flow to make sure it works properly, but this is nice for testing that all of the functionality is attaching properly.

debug()

Toggle debug messages on and off, which will log to the console what's happening. Running the testMode method will enable this automatically.

setKey(key)

Sets your Loop onstore api key. This is required to communicate with the Loop Onstore API.

attach(selector)

Pass this a css selector for your checkout button and the SDK will call the submit method automatically when a user is in the onstore flow. See examples to see how this works.

Versioning

We use SemVer for versioning.

Development

Run npm i to install dependencies.

Developing locally

To develop locally, run npm run dev. This will spin up a webpack dev server with everything you need to get going.

Building the library

Run npm run build and the library will be built in production mode in /dist.

License

This project is licensed under the MIT License.