ARI/PSS E-Commerce Integration Overview: Webstore

Client-side libraries handling the mounting, rendering and API requests for PSS webstores.

Installation & Client-side Requirements

Example page.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="https://static.pss.cloud/webstore/js/Webstore.js"></script>
</body>
</html>

Production: https://static.pss.cloud/webstore/js/Webstore.js
Staging: https://static-staging.pss.cloud/webstore/js/Webstore.js

NOTE: The included script tags should be placed at or as close to the closing </body> tag as possible.

Once the necessary script has been loaded, the PSS e-commerce library will be bound to the PSS namespace on the window global located at window.PSS.

Exported Modules

The PSS library exports multiple modules and additional namespaces within the window.PSS global variable.

(module) WebstoreComponents - Used to render PSS assets on to the DOM.
(namespace) utils - Contains additional modules to interact with the PSS shopping cart on behalf of a user.
(namespace) api - Contains additional modules that assist external developers in communicating with the publicly exposed PSS endpoints.

Usage Recipes

Rendered Components

Render The Full PSS Webstore

var config = {}; //See below for optional configuration
var Webstore = new window.PSS.WebstoreComponents(config); //Create an instance of WebstoreComponents
Webstore.mountStore('div#app'); //Mount the store on a selector

Available Configuration Options

Additional configuration options can be supplied to WebstoreComponents during instantiation:

var Webstore = new window.PSS.WebstoreComponents({
    styleOverrides: {
        primary: "#000"
    },
    endpoint: 'http://localhost:8080'
})

(object) `styleOverrides`: Key-value pair of Bootstrap v4.x SASS variables
(string) `endpoint`: Override the default webstore endpoint to make requests to on behalf of the end-user
    Production Default: 'https://webstores.powersportsupport.com'
    Dev Default: 'http://webstores.dev.powersportsupport.com'

Render A "Feature Group" Row

var Webstore = new window.PSS.WebstoreComponents();
Webstore.mountFeatureGroup('AFX Helmets', 'div#some-container');

Render A "Feature Group" Row and The Full PSS Webstore (On The Same Page)

var Webstore = new window.PSS.WebstoreComponents();
Webstore.mountStore('div#store-container');
Webstore.mountFeatureGroup('AFX Helmets', 'div#some-other-container');

SDK & API Usage

Search Store By Keyword

window.PSS.api.baseClient().get('/categories', {
    keyword: 'Helmet',
    start: 0, //optional
    length: 48, //optional
}).then(response => {
    console.log(response.data)
});

Get A List Of Products For A Category

window.PSS.api.baseClient().get('/categories/Helmets', {
    start: 0, //optional
    length: 48, //optional
}).then(response => {
    console.log(response.data)
});

Get A List Of All Generically "Featured" Products

window.PSS.api.baseClient().get('/categories', {
    aggregate: "featured"
}).then(response => {
    console.log(response.data)
});

Get A List Of All Generically "Featured" Products For A Specific Category

window.PSS.api.baseClient().get('/categories/Helmets', {
    aggregate: "featured"
}).then(response => {
    console.log(response.data)
});

Get Details About A Product Group

window.PSS.api.productsClient().getProduct(351128).then(response => {
    console.log(response.data);
});

Shopping Cart Manipulation

Get All Cart Items

window.PSS.utils.cart.get().then(console.log)

Clear Cart Items

window.PSS.utils.cart.clear().then(() => console.log('items have been cleared'))

Add Cataloged Item

window.PSS.utils.product(1, 1624).add().then(() => console.log('product added to cart'))

Remove A Single Item

window.PSS.utils.product(1, 1624).remove().then(() => console.log('product removed cart'))

Add External Item

PROPOSED 6/23/2022 FOR OPE WEBSTORE SOLUTION

See:

As of 8/18/2022 the below example is not available in production and is only a proposal to facilitate the functionality requested by the tickets linked above.

/**
 * The fulfilled promise returned by `window.PSS.utils.createProduct()` will resolve to an object
 * of the same API as window.PSS.utils.product(). This can then be chained to add/remove/update
 * the cart with this specific product.
 */
window.PSS.utils.createProduct({
    manufacturer: 'My Manufacturer', //required
    name: 'My Product Name', //required
    manufacturerPartNumber: 'my-unique-manufacturer-part-number', //required
    salePrice: 3.50, //required
    msrp: null, //optional
    upc: null, //optional
    size: null, //optional
    color: null, //optional
    option: null, //optional
})
    .then(product => product.add())
    .then(() => console.log('the product has been added to your cart'))

Endpoint Usage

Browsing around a PSS webstore for a domain with the browser developer tools open and pointed to the network tab will allow developers to replay the requests that are made to the PSS webstore application servers. Any action taken in the browser can be captured and saved for later use using the network tab.

All requests to PSS endpoints will be made to the webstores.powersportsupport.com host and MUST contain the for query parameter dictating the domain that we are making a request for: https://webstores.powersportsupport.com/categories?for=mydealerdomain.com

NOTE: In order for PSS to respond to requests one of two conditions must be met:

The request must have the "Accept" header explicitly set to "application/json"

The request URI must define the .json extension.

Visiting the url http://webstores.powersportsupport.com/categories/Parts?for=mydealerdomain.com using a browser will return a 500 error however, adding the .json extension to the request URI will return a JSON response. E.g.: http://webstores.powersportsupport.com/categories/Parts.json?for=mydealerdomain.com.

Home