OMS DOCUMENTATIONRESOURCE CENTER

These guides provide examples for many tasks that a developer will need to be familiar with during implementation.

KIBO OMS DEVELOPMENT

Documentation

Add to Cart with Javascript

This document describes how to use JavaScript to add shopping cart functionality to web pages. This technique is the easiest to implement, as Kibo-provided snippets are ready to be plugged into an existing template or CMS environment. Buttons may be styled and matched to the existing site, but prices must be displayed using the existing Content Management System on the client-side. The Add to Cart with Javascript method enables the following abilities:

  1. Placing Add to Cart buttons on a site product. The Add to Cart widget sends product data to a Kibo cart. When a consumer clicks an Add to Cart button, the system makes an API call to add that product to the consumer’s Kibo shopping cart, at the correct price and quantity, with the specified options.
  2. Adding a Quick Cart view and icon to the website header. The Quick Cart retrieves the consumer’s current cart contents from Kibo. It displays cart information on the web page, and will update when the cart contents change.
  3. Adding a Kibo shopping cart to the site. The shopping cart gets the HTML cart from Kibo. Shopping cart data may be provided in a rendered HTML format that can be embedded into the central area of a shopping cart page, or it may be in a raw-data JSON format that can be formatted to create a cart page. Finally, in its simplest form, the shopping cart data may be provided as a standard Kibo shopping cart. The shopping cart area may be fully hosted by Kibo or it may be hosted by the client.
  4. Processing orders in Kibo.

Before Modifying Web Pages

Get an API Key

An API key is required to use the Add to Cart API. This key grants access to the API and identifies the site. Contact Kibo Merchant Support to get an API key.

Load the JavaScript Library

Before modifying any page, the JavaScript library must be loaded. The process for loading the library is the same for every page. Simply add the following code to the <head> tag of the HTML for every page that is being modified. Replace “xmvhrhuw” with the API key from Kibo.

<script id="shopatronCart" src="https://cdn.shptrn.com/media/js/product/shopatronAPI-2.4.min.js" type="text/javascript">{"apiKey":"xmvhrhuw"}</script>
<script src="https://cdn.shptrn.com/media/js/product/shopatronJST-2.4.min.js" type="text/javascript"></script>

Include Default Styling

If the Add to Cart button, quick cart view, and shopping cart are not being styled, add the following code to the <head> tag for each page being modified.

<link rel="stylesheet" href="https://cdn.shptrn.com/media/css/product/shopatronJST-2.4.min.css" type="text/css" />

Want to Try It Out?

The Add to Cart API can be previewed in action before being implemented on the client website. Just follow the examples in this document, which use these API Key and Part Number values:

  • API Key: xmvhrhuw
  • Part Numbers: 100001, 100002, 100003, 100004, 100005

Place an Add to Cart Button

Add to Cart buttons will be placed on the client web pages. When clicked, the buttons send a customer’s cart information to a Kibo cart. This is implemented by adding a few simple lines of code to the page.

Step One

Insert the code (Simple or Advanced, shown below) on the page. Include appropriate values for Part Number and other variables. Load the JavaScript library for the page.

The Simple example below includes only the required fields. The Advanced example includes more of the available values. For information about available fields, see Table 1.

To use the example code provided in this guide, include the jQuery library (if not already included), as shown in the example code below.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

All code samples are recommended to be in the head tag and wrapped in some type of document ready handler. This simple example includes the document ready handler.

<script type="text/javascript">
    $(document).ready(function() {
        Shopatron('#atc_button_div_id').addToCartButton({
            partNumber: '200001'
        }, {
            clickSuccess: function() {
                alert('Successfully added item to cart');
            }
        });
    });
</script>

This is a more advanced example than the above.

<script type="text/javascript">
    $(document).ready(function() {
        Shopatron('#atc_button_div_id').addToCartButton({
            partNumber: '100001',
            productLink: 'https://www.domain.com/img/product/100001.html'
            catalogID: '1'
        }, {
            success: function() {
                alert('Add to Cart button loaded');
            },
            error: function() {
                alert('Failed to load Add to Cart button');
            },
            complete: function() {
                alert('Button load attempt completed');
            },
            clickSuccess: function() {
                alert('Item added to cart');
            },
            clickError: function() {
                alert('Failed to add item to cart');
            },
            clickComplete: function() {
                alert('Attempt to add item complete');
            }
        });
    });
</script>

Step Two

In the location on the web page where the Add to Cart button should appear, insert this code.

<div id="atc_button_div_id"></div>

Table One

These are the Add to Cart button fields for JavaScript.

FieldTypeDefaultDescription
productOptions. partNumber*stringNoneThe part number of the product being added to the cart.
productOptions. catalogIDintegerDefault catalogIDThis field is only necessary when working with multi- catalog sites.
options. clickSuccessfunctionNoneJavaScript that will be executed when an item is successfully added to the cart.
options. productLinkURLCurrent pageA direct link to the product detail page.
options.successfunctionNoneJavaScript that will be executed if the Add to Cart button is loaded successfully.
options.errorfunctionNoneJavaScript that will be executed if the button is not loaded successfully.
options. completefunctionNoneJavaScript that will be executed when the button is loaded — either successfully or unsuccessfully.
options. clickErrorfunctionNoneJavaScript that will be executed when an item is not successfully added to the cart.
options. clickCompletefunctionNoneJavaScript that will be executed when an item is added to the cart — either successfully or unsuccessfully.

Add a Quick Cart View and Icon

A Quick Cart view that will show a customer’s current cart information (number of items and product total) can easily be added. As the customer changes the contents of their cart, the Quick Cart view will update to show their changes.

Step One

Insert the following code on the page, including appropriate values for the cart_URL and other parameters. The Simple example includes only the required fields. The Advanced example includes more of the available values. For information about available fields, see Table 2.

Simple:

<script type="text/javascript"> Shopatron('#quick_cart_div_id').getQuickCart({
cartLink: '/cart_URL'});
</script>

Advanced:

<script type="text/javascript">
    Shopatron('#quick_cart_div_id').getQuickCart({
        cartLink: '/cart_URL'
    }, {
        success: function(data, textStatus) {
            alert("Cart loaded succesfully");
        },
        error: function(textStatus, errorThrown) {
            alert("Cart failed to load");
        },
        complete: function(textStatus) {
            alert("Cart loaded");
        }
    });
</script>

Step Two

In the location on the web page where the Add to Cart button should appear, insert the following code:

<div id="quick_cart_div_id"></div>

Table Two

Quick Cart fields for JavaScript.

* Required

FieldTypeDefaultDescription
cartOptions. cartLink*URLNoneLinks the Quick Cart to the specified cart page.
options.successfunctionNoneCalled after a response is received from the server that the Quick Cart loaded successfully.
options.errorfunctionNoneCalled after a response is received from the server that the Quick Cart did not load successfully.
options. completefunctionNoneCalled after any response is received from the server that the Quick Cart has finished loading (whether successful or not).

Provide a Kibo Cart

The consumer should be provided with a fully functional Kibo shopping cart, complete with Remove Item, Update Quantity, and Checkout functionality. This will show current cart data in an HTML Kibo cart. When the customer clicks the shopping cart’s Checkout button, they go to Kibo checkout.

Step One

Insert the following code on the page, including appropriate. The Simple example includes only the required fields. The Advanced example includes more of the available values. For information about available fields, see Table 3.

Simple:

<script type="text/javascript"> Shopatron('#full_cart_div_id').getCart();
</script>

Advanced:

<script type="text/javascript">
    Shopatron('#full_cart_div_id').getCart({
        imageWidth: 100,
        imageHeight: 100
    }, {
        success: function(cartData) {
            alert("Successfully retrieved cart");
        },
        error: function() {
            alert("Failed to retrieve cart");
        },
        complete: function() {
            alert("Cart retrieved");
        }
    }); 
</script>

Step Two

In the location on web page where the Add to Cart button should appear, insert the following code:

<div id="full_cart_div_id"></div>

Table Three

Shopping Cart fields for JavaScript.

* Required

FieldTypeDefault
options.successfunctionNone
options.errorfunctionNone
options. completefunctionNone
cartOptions. catalogIDintdefault_catalog
_idOverride the checkout catalog into which the cart will be loaded._id
cartOptions. imageHeightint100
cartOptions. imageWidthint100