Documentation

Setup

Implementing the Module is as simple as implementing a jQuery plugin:

1) Add a dom element to your page to act as a container for the SQD module.

<section id='sqd-module-target'></section>

2) Initialize the SQD Module.

<script src="https://s3-us-west-2.amazonaws.com/lms.squadlocker.com/SQD.module.min.js">
</script>
<script>
  var SQD = new Squadlocker({
    container: 'sqd-module-target',
    partnerId: 5,
    teamUid: "baseball",
    environment: "staging",
    productsPerPage: 8,
    intercom: false // Defaults to true
    theme: {
      textColor: '#1C1E1F',
      accentColor: '#29A3FF',
      backgroundColor: '#F0F2F4',
      borderRadius: true,
      boxShadow: true,
      fontFamily: "'Fort', 'Lucida Grande', tahoma, helvetica, arial"
    },
    onStoreInit: function (store){
     console.log(store);
    }
  });
  SQD.render();
</script>

First, we include our library. Please continue to use the remote source above as it will continue to be updated. This is a temporary url, we’ll be sending out a link to a minified version of the lib hosted on a CDN.

Next, we create our Squadlocker object with several configuration options.

container - This denotes the ID of the html element you wish to serve as the container for the Module.

partnerId - This is your unique Partner ID assigned to you by Squadlocker.

teamUid - This value should be a unique identifier for the team for whom we’re providing the locker. For example, John logs in to SupremeLMS.com and navigates to his team “The Tigers.” The Module is initiated with the unique ID for the team “The Tigers.”

lockerId - (Optional) Integer ID for an existing Teamlocker. If this is passed along with the partnerId and teamUid, then this existing locker will automatically become associated with your partner account, and will be loaded.

identityProvider - (Optional) This is an object that sets identity provider settings. Additional coordination with Squadlocker is required.

{
  "name": "someProviderName",
  "authorizationEndpoint": "https://identity.my-league-management.com/login",
  "callback": "https://my-league-management.com/app/callback.html",
  "logout": "https://my-league-management.com/logout.html"
}

environment - (Optional) Partners have access to both Staging and Production environments. Until you roll live, you should leave this set to “staging”.

productsPerPage - (Optional) Allows for pagination of products. The default is 8.

intercom - (Optional) Allows for disabling of the Intercom chat bubble. Defaults to true

teamStoreUrl - (Optional) If passed, this will be the “share” link provided to users in the Squadlocker dashboard.

teamAdminUrl - (Optional) If passed, this will be the “View your Store” link provided to users in the Squadlocker dashboard.

disableEmails - (Optional) Boolean. If set to true, users creating stores via the module will not receive registration emails, and the created lockers will not send open, closed, etc emails. NOTE: Only use this if your partner account has been configured for custom webhooks.

Styles - As part of the configuration options, we also give you some ability to control the general aesthetic of the Module.

textColor - Set the color of the primary text. Accepts any valid CSS color.

accentColor - Set the accent color. Accepts any valid CSS color.

backgroundColor - Set the background color. Accepts any valid CSS color.

borderRadius - A Boolean indicating whether or not you’d like the corners to be rounded. Future releases will allow more granulat control of the border radius.

boxShadow - A Boolean indicating whether or not to display a shadow behind Product cards.

fontFamily - Sets the font family to be used.

partner - (Optional) If configured (ask the squadlocker team), enter your organization name to trigger custom branding.

Finally, we render the Module with SQD.render().

onStoreInit The onStoreInit event includes the store payload. The store breaks down as such:

// If store is inactive:
store === { state: 'inactive' };

// If store is active:
store === {
	id: 1,
	name: 'My Team Name',
	state: 'open', // One of draft, open, closed, cancelled
	openDate: '4/11/16',
	closeDate: '4/22/16'
};

The store payload is now loaded prior to rendering the module. If the onStoreInit method returns a boolean of false, the module will not render.

onStoreInit: function(store) {
  if (store.state === 'inactive') return false;
  // Module will not render
}

Store States inactive - No store has been created for this partner and team.

draft - A store was created, but has not yet been completed and is not open. It could be missing logo, or selected products, etc.

open - The store has been completed and products are available for purchase.

closed - The store has run its course and the close date has passed.

cancelled - The team owner has requested that the store be manually cancelled. Products are no longer for sale, store is closed.

Before Locker Creation

If no teammember has created a Locker yet, we show them a very basic introduction to Squadlocker and prompt them to create a new Locker. A Locker created after clicking on “Create a Team Locker”, will be associated with the authenticated user’s Team.

After Locker Creation

After a Locker has been created, users see the Locker and are able to purchase all Products added to the Locker during the creation process.

Testing

To test the checkout functionality on our staging environment you can use the credit card number 4242 4242 4242 4242 with any address and any future expiration date.