Using the Add to Cart API with JavaScript Guide

Transcription

1 About the Add to Cart API SHOPATRON INTEGRATION TOOLSET Using the Add to Cart API with JavaScript Guide FOR USE WITH VERSIONS 2.2 OR LATER OF SHOPATRON'S ADD TO CART SOFTWARE ADD TO CART XML API GUIDE 5/29/13 PAGE 1

2 Copyright 2013 Shopatron, Inc. Using the Add to Cart API with JavaScript Guide, Version 2.2 This document contains proprietary and confidential information of Shopatron, Inc., and is protected by Federal copyright law. The contents of this document may not be disclosed to third parties, translated, copied, or duplicated in any form, in whole or in part, (or by any means, electronic, mechanical, photocopying, or otherwise) without the express written permission of Shopatron, Inc. The information contained in this document is subject to change without notice. Neither Shopatron, Inc., its affiliates, nor their directors, officers, employees, or agents, are responsible for punitive or multiple damages or lost profits or other special, direct, indirect, incidental, or consequential damages, including any damages resulting from loss of business arising out of or resulting from the use of this material, or for technical or editorial omissions or errors made in it. Aspects of the Shopatron network are patented, patent-pending, or patent-applied for. Shopatron North America Shopatron, Inc. P.O. Box 5351 San Luis Obispo, CA, Shopatron Europe Shopatron UK, Ltd. Newport House Newport Street Old Town, Swindon SN1 3DX

3 Contents About the Add to Cart API... 4 Related Documentation... 4 Before You Modify Your Web Pages... 5 Get your API key... 5 Load the JavaScript library... 5 Include default styling... 5 Want to Try It Out?... 5 Place an Add to Cart Button... 5 Add a Quick Cart View and Icon... 7 Provide a Shopatron Cart... 9

4 About the Add to Cart API About the Add to Cart API Thank you for using Shopatron's Add to Cart! The Add to Cart web service makes it easy to add Shopatron ecommerce capabilities to your site. With Add to Cart, you can: 1. Place Add to Cart buttons on your site s product pages. The Add to Cart widget sends product data to a Shopatron cart. When a consumer clicks an Add to Cart button, your system makes an API call to add that product to the consumer s Shopatron shopping cart, at the correct price and quantity, with the specified options. 2. Add a Quick Cart view and icon to the header of your website. The Quick Cart retrieves the consumer s current cart contents from Shopatron. It displays cart information on the web page, and will update when the cart contents change. 3. Add a Shopatron shopping cart to your website. The shopping cart gets the HTML cart from Shopatron. 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 Shopatron shopping cart. The shopping cart area may be fully hosted by Shopatron or it may be hosted by your company. 4. Process your orders in Shopatron! NOTE: This document is for clients who manage their product data in Shopatron. A separate document (available late 2012) will describe how to use Add to Cart if you manage your products elsewhere. Related Documentation This document describes how to use JavaScript to add shopping cart functionality to your web pages. If you don t need a high level of flexibility and control and are looking for a simpler process, you can use XML instead. For details, see Using the Add to Cart API with XML Guide. USING THE ADD TO CART API WITH JAVASCRIPT GUIDE, VERSION 2.2 5/29/13 PAGE 4

5 Before You Modify Your Web Pages If you are seeking greater flexibility, see the JSON for Add to Cart User s Guide and the Add to Cart Developer's Guide. Before You Modify Your Web Pages Get your API key Before you can use the Add to Cart API on your own site, you must acquire an API key. This key gives you access to the API and identifies your site. Call Shopatron Merchant Support at (877) or mss@shopatron.com to get your API key. Load the JavaScript library Before you can modify any page, you must load our JavaScript library. 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 you modify. Replace xmvhrhuw with the API key you received from Shopatron. <script id="shopatroncart" src=" type="text/javascript">{"apikey":"xmvhrhuw"}</script> <script src=" min.js" type="text/javascript"></script Include default styling If you are not styling the Add to Cart button, quick cart view, and shopping cart, add the following code to the <head> tag for each page you modify: <link rel="stylesheet" href=" type="text/css" /> Want to Try It Out? You can see the Add to Cart API in action before you use it on your own web pages. Just follow the examples in this document, which use these API Key and Part Number values: API Key: xmvhrhuw Part Numbers: , , , , Place an Add to Cart Button You can place Add to Cart buttons on your web pages. When clicked, the buttons send a customer s cart information to a Shopatron cart. All you have to do is add a few simple lines of code to the page. USING THE ADD TO CART API WITH JAVASCRIPT GUIDE, VERSION 2.2 5/29/13 PAGE 5

6 Place an Add to Cart Button 1. Insert the following code on the page. Include appropriate values for Part Number and other variables. Don t forget to load the JavaScript library for the page, too! 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: <script type="text/javascript"> Shopatron('#atc_button_div_id').addToCartButton({ partnumber: '200001' { clicksuccess: function () { alert('successfully added item to cart'); } }); </script> Advanced: <script type="text/javascript"> Shopatron('#atc_button_div_id').addToCartButton({ partnumber: '100001', productlink: ' { 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> 2. In the location on the web page where you want the Add to Cart button to appear, insert this code: <div id="atc_button_div_id"></div> USING THE ADD TO CART API WITH JAVASCRIPT GUIDE, VERSION 2.2 5/29/13 PAGE 6

7 Add a Quick Cart View and Icon Table 1. Add to Cart button fields for JavaScript Field Type Default Description partnumber* string None The part number of the product being added to the cart. clicksuccess* function Required JavaScript that will be executed when an item is successfully added to the cart. productlink URL Current page A direct link to the product detail page. success function None JavaScript that will be executed if the Add to Cart button is loaded successfully. error function None JavaScript that will be executed if the button is not loaded successfully. complete function None JavaScript that will be executed when the button is loaded either successfully or unsuccessfully. clickerror function None JavaScript that will be executed when an item is not successfully added to the cart. clickcomplete function None JavaScript that will be executed when an item is added to the cart either successfully or unsuccessfully. * Required Add a Quick Cart View and Icon You can easily add a Quick Cart view that will show 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. 1. 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. Siimple: <script type="text/javascript"> Shopatron('#quick_cart_div_id').getQuickCart({ USING THE ADD TO CART API WITH JAVASCRIPT GUIDE, VERSION 2.2 5/29/13 PAGE 7

8 Add a Quick Cart View and Icon 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> 2. In the location on the web page where you want the Add to Cart button to appear, insert the following code: <div id="quick_cart_div_id"></div> Table 2. Quick Cart fields for JavaScript Field Type Default Description cartlink* URL None Links the Quick Cart to the specified cart page. success function None Called after a response is received from the server that the Quick Cart loaded successfully. error function None Called after a response is received from the server that the Quick Cart did not load successfully. complete function None Called after any response is received from the server that the Quick Cart has finished loading (whether successful or not). * Required USING THE ADD TO CART API WITH JAVASCRIPT GUIDE, VERSION 2.2 5/29/13 PAGE 8

9 Provide a Shopatron Cart Provide a Shopatron Cart You can provide a fully functional Shopatron shopping cart to the consumer, complete with Remove Item, Update Quantity, and Checkout functionality. This will show current cart data in an HTML Shopatron cart. When the customer clicks the shopping cart's Checkout button, they go to Shopatron checkout. 1. 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: <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> 2. In the location on web page where you want the Add to Cart button to appear, insert the following code: <div id="full_cart_div_id"></div> Table 3. Shopping Cart fields for JavaScript Field Type Default Description success function None Called after a success response is received from the server. error function None Called after an error response is received from the server. complete function None Called after any response is received from the server. USING THE ADD TO CART API WITH JAVASCRIPT GUIDE, VERSION 2.2 5/29/13 PAGE 9

10 Provide a Shopatron Cart Field Type Default Description imagewidth int 100 The width of the cart item image in pixels. imageheight int 100 The height of the cart item image in pixels. * Required USING THE ADD TO CART API WITH JAVASCRIPT GUIDE, VERSION 2.2 5/29/13 PAGE 10