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 XML

This document describes how to use XML to add shopping cart functionality to web pages. XML is not suggested for most clients, as pages made with XML cannot be customized to match styling and branding as much as the other methods. This functionality enables:

  1. Placing Add to Cart buttons on the site’s 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 header of the website. 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 website. 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 API Keys

An API key must be acquired before using the Add to Cart API. This key grants access to the API and identifies the site. Contact Kibo Merchant Support to get the 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 being modified. Replace “h003208w” with the API key received from Kibo.

<script id="shopatronCart" src="https://cdn.shptrn.com/media/js/product/shopatronAPI-2.4.min.js" type="text/javascript">{"apiKey":"h003208w"}</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 it is implemented on client web pages. Just follow the examples in this document, which use these API Key and Part Number values:

  • API Key: h003208w
  • Part Numbers: 200001, 200002, 200003, 200004, 200005

Place an Add to Cart Button

Add to Cart buttons can be placed on 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. Include appropriate values for Part Number and other variables, and load the JavaScript library for the page.

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

Simple:

<tron:ATCButton part_number="200001" onclick_success="alert('Item added to cart!')"></tron:ATCButton>

Advanced:

<tron:ATCButton product_link="https://13018.1.shptron.com/products/productdetail/part_number=20000 1/13018.1.1.1" part_number="200001" onclick_success="alert('Item added to cart!')" onclick_error="alert('Failed to add item')" ></tron:ATCButton>

Table One

Add to Cart button fields for XML.

* Required

FieldTypeDefaultDescription
part_number*stringNoneThe part number of the product being added to the cart.
catalog_IDIntNoneThe Kibo-assigned Catalog ID.
click_successJavaScriptNoneJavaScript that will be executed when an item is successfully added to the cart.
product_linkURLCurrent pageA direct link to the product detail page.
onsuccessJavaScriptNoneJavaScript that will be executed if the Add to Cart button is loaded successfully.
onerrorJavaScriptNoneJavaScript that will be executed if the button is not loaded successfully.
oncompleteJavaScriptNoneJavaScript that will be executed when the button is loaded — either successfully or unsuccessfully.
onclick_errorJavaScriptNoneJavaScript that will be executed when an item is not successfully added to the cart.
onclick_completeJavaScriptNoneJavaScript 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 shows a customer’s current cart information (number of items and product total). As the customer changes the contents of their cart, the Quick Cart view will update to show their changes.

The XML code for adding a Quick Cart view follows. (Don’t forget to load the JavaScript library first!) 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:

<tron:quickCart cart_link="/your_cart_URL" ></tron:quickCart>

Advanced:

<tron:quickCart onsuccess="my_success_handler()" cart_link="/your_cart_URL"
></tron:quickCart>

Table Two

Quick Cart fields for XML.

* Required

FieldTypeDefaultDescription
cart_link*URLNoneLinks the Quick Cart to the specified cart page.
onsuccessJaveScriptNoneCalled after a response is received from the server that the Quick Cart loaded successfully.
onerrorJaveScriptNoneCalled after a response is received from the server that the Quick Cart did not load successfully.
oncompleteJaveScriptNoneCalled after any response is received from the server that the Quick Cart has finished loading (whether successful or not).

Provide a Kibo Cart

A fully functional Kibo shopping cart should be provided to the consumer, 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. Insert the following code on the page, including appropriate values.

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:

<tron:cart></tron:cart>

Advanced:

<tron:cart onsuccess="my_success_handler()"></tron:cart>

Table Three

Shopping Cart fields for XML.

FieldTypeDefaultDescription
onsuccessJavaScriptNoneCalled after a response is received from the server that the shopping cart loaded successfully.
onerrorJavaScriptNoneCalled after a response is received from the server that the shopping cart did not load successfully.
oncompleteJavaScriptNoneCalled after a response is received from the server that the shopping cart finished loading—either successfully or unsuccessfully.
image_widthint100The width of the cart item image in pixels.
image_heightint100The height of the cart item image in pixels.
catalog_idintdefault_catalogcatalog_id
_idOverride the checkout catalog into which the cart will be loaded._idOverride the checkout catalog into which the cart will be loaded.

Example HTML

The following HTML example shows how this code could be used to link to a Kibo cart:

<!doctype html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Add to Cart - XML</title>
      <script id="shopatronCart" src="https://cdn.shptrn.com/media/js/product/shopatronAPI-2.4.min.js" type="text/javascript">{"apiKey":"h003208w"}</script>
      <script src="https://cdn.shptrn.com/media/js/product/shopatronJST-2.4.min.js" type="text/javascript"></script>
      <link rel="stylesheet" href="https://cdn.shptrn.com/media/css/product/shopatronJST-2.4.min.css" type="text/css" />
   </head>
   <body>
      <!-- Cart Container -->
      <tron:quickCart cart_link="/cart"></tron:quickCart>
      <!-- Add to Cart -->
      <tron:ATCButton part_number="200003" onclick_success="alert('Successfully added item to cart!')"></tron:ATCButton>
      <!-- Full Cart Container -->
      <tron:cart></tron:cart>
   </body>
</html>

Save this code to an HTML file. When viewed in the browser, there will be a functioning Add to Cart widget, which are used to select an item, specify the item’s quantity and size, then click Add to Cart and add the item to a cart.

Once the item is added to the cart, click the Checkout button and proceed to checkout.