Advanced Links - JavaScript

Introduction

This code is really old. It was written before JSON, REST, and all the other modern means of dynamically displaying prices. Most of your javascript needs can be met these days by the REST APIs.

Using the UCJavaScript URL you can include some dynamic information about the cart and item inventory on your static website.

All of the JavaScript links need to be used with a traditional script tag:

JSON Cart

For the extreme case where you cannot run a proxy and need to dynamically display an UltraCart shopping cart on a third party site, you may request a REST cart object.

Syntax:

https://secure.ultracart.com/cgi-bin/UCJavaScript?merchantid=DEMO&type=json&cartvar=my_cart&callback=function_to_run

Parameter	Comment
`merchantId`	Your merchant id.
`type`	"json". always. Always put "json"
`cartvar`	The name of the cart variable. This will be a global variable.
`callback`	A function that should be run. The code will return with bootstrap code to call that function.

Example

<script type='text/javascript'>
	function display_cart(){
	   if(my_cart){
		var total = my_cart.totalLocalizedFormatted; // make it pretty
		var itemCount = my_cart.items ? my_cart.items.length : 0;
	   
	    // now do something with these values... 
	   }	
	}
</script>
<script type='text/javascript' src='//secure.ultracart.com/cgi-bin/UCJavaScript?merchantid=DEMO&type=json&cartvar=my_cart&callback=display_cart'></script>

UCJavascript Sample Content

var my_cart = {
    "merchantId": "DEMO",
    "items": [],
    "cartId": "806F511B57E2D90153D30FF833020A00",
    "paymentMethod": "Unknown",
    "creditCardTypes": ["AMEX", "Diners Club", "Discover", "JCB", "MasterCard", "VISA"],
    "creditCardType": "",
    "creditCardNumber": "",
    "creditCardExpirationMonth": 0,
    "creditCardExpirationYear": 0,
    "creditCardVerificationNumber": "",
    "collectCreditCardVerificationNumber": true,
    "purchaseOrderNumber": "",
    "billToFirstName": "",
    "billToLastName": "",
    "billToTitle": "",
    "billToCompany": "",
    "billToAddress1": "",
    "billToAddress2": "",
    "billToCity": "",
    "billToState": "",
    "billToPostalCode": "",
    "billToCountry": "United States",
    "billToDayPhone": "",
    "billToEveningPhone": "",
    "email": "",
    "emailConfirm": "",
    "shipToFirstName": "",
    "shipToLastName": "",
    "shipToTitle": "",
    "shipToCompany": "",
    "shipToAddress1": "",
    "shipToAddress2": "",
    "shipToCity": "",
    "shipToState": "",
    "shipToPostalCode": "",
    "shipToCountry": "United States",
    "shipToPhone": "",
    "shipToEveningPhone": "",
    "shippingMethod": "",
    "needShipping": false,
    "subtotal": 0,
    "subtotalDiscount": 0,
    "subtotalWithDiscount": 0,
    "taxRate": 0,
    "tax": 0,
    "taxableSubtotal": 0,
    "taxableSubtotalDiscount": 0,
    "taxableSubtotalWithDiscount": 0,
    "shippingHandling": 0.00,
    "shippingHandlingDiscount": 0,
    "shippingHandlingWithDiscount": 0.00,
    "giftCharge": 0,
    "giftWrapCost": 0.00,
    "gift": false,
    "surcharge": 0,
    "total": 0,
    "buysafeBondAvailable": false,
    "buysafeBondFree": false,
    "buysafeBondWanted": true,
    "taxExempt": false,
    "shipToResidential": true,
    "mailingListOptIn": true,
    "specialInstructions": "",
    "screenBrandingThemeCode": "CSTM",
    "advertisingSource": "",
    "coupons": [],
    "hasPayPal": false,
    "payPalCompatible": false,
    "hasGoogleCheckout": false,
    "googleCheckoutCompatible": false,
    "loggedIn": false,
    "insureShipAvailable": false,
    "insureShipSeparate": false,
    "insureShipWanted": false,
    "taxCounty": "",
    "liftGate": false,
    "storeCreditCard": false,
    "hasAmazon": false,
    "needPayment": true,
    "currencyCode": "USD",
    "subtotalLocalized": 0.00,
    "subtotalDiscountLocalized": 0.00,
    "subtotalWithDiscountLocalized": 0.00,
    "taxLocalized": 0.00,
    "taxableSubtotalLocalized": 0.00,
    "taxableSubtotalDiscountLocalized": 0.00,
    "taxableSubtotalWithDiscountLocalized": 0.00,
    "shippingHandlingLocalized": 0.00,
    "shippingHandlingDiscountLocalized": 0.00,
    "shippingHandlingWithDiscountLocalized": 0.00,
    "giftChargeLocalized": 0.00,
    "giftWrapCostLocalized": 0.00,
    "surchargeLocalized": 0.00,
    "totalLocalized": 0.00,
    "subtotalLocalizedFormatted": "$0.00",
    "subtotalDiscountLocalizedFormatted": "$0.00",
    "subtotalWithDiscountLocalizedFormatted": "$0.00",
    "taxLocalizedFormatted": "$0.00",
    "taxableSubtotalLocalizedFormatted": "$0.00",
    "taxableSubtotalDiscountLocalizedFormatted": "$0.00",
    "taxableSubtotalWithDiscountLocalizedFormatted": "$0.00",
    "shippingHandlingLocalizedFormatted": "$0.00",
    "shippingHandlingDiscountLocalizedFormatted": "$0.00",
    "shippingHandlingWithDiscountLocalizedFormatted": "$0.00",
    "giftChargeLocalizedFormatted": "$0.00",
    "giftWrapCostLocalizedFormatted": "$0.00",
    "surchargeLocalizedFormatted": "$0.00",
    "totalLocalizedFormatted": "$0.00",
    "baseCurrencyCode": "USD"
};
if (display_cart) {
    display_cart();
}

JavaScript Links

Show cart total item count

<script type="text/javascript" src="https://secure.ultracart.com/cgi-bin/UCJavaScript?merchantid=DEMO&type=count"></script>

Replace the DEMO merchant ID with your own merchant ID. IF you are using a storefront, make sure that the host address represents your storefront host (replace the "secure.ultracart.com" with the storefront host, such as "demo.ultracartstore.com" for the DEMO account.)

Show cart total amount

<script type="text/javascript" src="https://secure.ultracart.com/cgi-bin/UCJavaScript?merchantid=DEMO&type=total"></script>

Replace the DEMO merchant ID with your own merchant ID. IF you are using a storefront, make sure that the host address represents your storefront host (replace the "secure.ultracart.com" with the storefront host, such as "demo.ultracartstore.com" for the DEMO account.)

For the count and total links above, add &withCss=Y to have the output wrapped in span tags for css markup!
Here's what the resulting output will look like:

document.write('<span class="ucJsCount ucJsEmpty">No Items</span>');

For the count, the span will have a class of ucJsCount.
For the total, the span will have a class of ucJsTotal
If the cart is empty, and additional class of ucJsEmpty will be present, in case you wish to add further styling based on that.

Return both as XML (mainly used in flash):

<script type="text/javascript" src="https://secure.ultracart.com/cgi-bin/UCJavaScript?merchantid=DEMO&type=xml"></script>

Replace the DEMO merchant ID with your own.

Show Inventory

<script type="text/javascript" src="https://secure.ultracart.com/cgi-bin/UCJavaScript?merchantid=DEMO&type=inventory&itemid=ITEMID"></script>

Replace the DEMO merchant ID with your own and ITEMID with the item that you want inventory information about.

Display differences for merchants vs. customers

Please note that when you are viewing pages that have the "show inventory" script in them and you're viewing the page from the same browser in which you are logged into the UltraCart back-end, you'll see the inventory displayed with the Distribution Center code. The DC code that you will see in front of the inventory count will not appear to regular customers browsing the page.

If you have a custom SSL certificate, you should replace secure.ultracart.com in any of the above links with your secure host name.

Example Shopping Cart summary

Below is a simple example of the snippet of code that displays the customers current shopping cart details on your store web pages:

<form method="post" action="http://secure.ultracart.com/cgi-bin/UCEditor">
  <input type="hidden" name="merchantId" value="DEMO" />
    <table class="uc-cart-summary" border="1">
    <tr class="uc-cart-summary-details">
      <td class="uc-cart-item-count-label">  <script type="text/javascript" src="https://secure.ultracart.com/cgi-bin/UCJavaScript?merchantid=DEMO&type=count"></script> | cart total: <script type="text/javascript" src="https://secure.ultracart.com/cgi-bin/UCJavaScript?merchantid=DEMO&type=total"></script> <input type="submit" name="submit" value="checkout" /> </td>
    </tr>
  </table>
</form>

Example Shopping Cart summary with Cart image

Here is sample code using a custom cart image, replacing the form code with simple hyperlink:

| Items: <script type="text/javascript" src="https://secure.ultracart.com/cgi-bin/UCJavaScript?merchantid=DEMO&type=count"></script> | Total: <script type="text/javascript" src="https://secure.ultracart.com/cgi-bin/UCJavaScript?merchantid=DEMO&type=total"></script> | <a href="http://secure.ultracart.com/cgi-bin/UCEditor?merchantId=DEMO"><img src="http://secure.ultracart.com/cgi-bin/UCGraphic?merchantId=DEMO&ThemeCode=Z&Filename=cart" name="Shopping Cart" width="25" height="23"></a> |

Replace the DEMO merchant ID with your own.

You can combine the cart summary with a buy form that has the "sendtourl" redirect parameter to create a order process where the customer adds items to the shopping cart but stays on your page until they are ready to checkout out. See the following page for details:

https://secure.ultracart.com/catalog/DEMO/example-summary.html