Using JavaScript Code to Pass Cart and Order Data

Customize the order and cart capture JavaScript code sample to collect cart and order data from your site and send it to Bronto.

About this task

Bronto automatically sets the Source field value to WEBSITE for all orders imported using JavaScript.

Add the Script Manager code to each page of your site.
Enable and configure your Script Manager features, Order Capture and/or Cart Recovery. See Configuring a Script Manager Feature
Copy the #r_script_order_capture__cart-capture-script.
Modify the code sample.
1. Identify the order and cart capture fields you want to collect. If you cannot identify the contact's email address with a contact capture selector, then emailAddress is a required field for order and cart capture. For order capture only, grandTotal is required. If you are sending line items with order or cart data, quantity and totalPrice are both required.
  Note: emailAddress should only be mapped when it contains a value. Do not include emailAddress when the field is blank/null.
2. Remove any fields that you do not want to collect from the code sample.
3. Set the cart phase to one of the following phases: SHOPPING, BILLING, SHIPPING_INFO, SHIPPING_METHOD, PAYMENT, ORDER_REVIEW, ORDER_COMPLETE. The cart will default to SHOPPING. For order capture, the cart phase must be set to ORDER_COMPLETE to convert a cart to an order.
4. Update the example values in the code sample with variables that dynamically generate values. For example, "USD" could become <?php print $order['currency']; ?>.
Add the cart and order capture code to any page on your site where cart or order data is captured. You need to include the full cart details each time you send a cart to Bronto.
Configure your order settings in Bronto.
Test that the order data is being captured correctly:
1. Place a test order on your site.
2. Go to Commerce > Orders.
3. Click Show Advanced Options.
4. Use the Order Date fields to search for orders from the current day.
5. Find your test order in the list and compare the order details in Bronto to the order details on your site.
6. Export your order data from both Bronto and your e-commerce platform and running a comparison.
Test that cart data is being captured correctly:
1. Open Chrome Developer Tools in your Chrome browser.
2. Open the Network tab.
3. Add an item to your cart on your e-commerce site.
4. Search the Network tab for maw. You should see results if you have items in your cart.
5. Verify that you have a POST request like maw.bronto.com/csites/LONG_IDENTIFIER/carts/CUSTOMER_CART_ID where the tokens are replaced with values.
6. Verify that your Request Payload contains all of the data that you sent to Bronto and that you see a newly generated customerCartId.

Order and Cart Capture JavaScript Code Sample

var brontoCart = {
        "customerCartId": "cart_ABC123", // This value will be auto-generated when not set. 
        "phase": "ORDER_COMPLETE", // Set as SHOPPING for Cart Recovery
        "currency": "USD",
        "subtotal": 35.98,
        "discountAmount": 0,
        "taxAmount": 0,
        "grandTotal": 35.98,
        "customerOrderId": "123ABC", // Not necessary for Cart Recovery
        "emailAddress": "example@example.com",
        "cartUrl": "http://brontogear.com/",
        "shippingAmount": 7.99, // Not necessary for Cart Recovery
        "shippingDate": "2019-11-02T18:47:57+00:00", // Not necessary for Cart Recovery
        "shippingDetails": "FedEx", // Not necessary for Cart Recovery
        "shippingTrackingUrl": "http://fedex.com/tracking/NIeX3KYLcPhgRzKy", // Not necessary for Cart Recovery
        "mobilePhoneNumber": "19195551234",
        "orderSmsConsentChecked": true,
        "lineItems": [{
                "sku": "576879",
                "name": "Shirt",
                "description": "A super great description of the product",
                "category": "Shirts > T-Shirts > Blue",
                "other": "This can be any string value you like",
                "unitPrice": 11.99,
                "salePrice": 11.99,
                "quantity": 2,
                "totalPrice": 23.98,
                "imageUrl": "http://brontogear.com/a/p/shirt.jpeg",
                "productUrl": "http://brontogear.com/index.php/shirt.html"
              },
             {
                 "sku": "1112296",
                 "name": "Fleece Jacket",
                 "description": "A well appointed Fleece jacket",
                 "category": "Jackets > Winter > Fleece",
                 "other": "This can be any string value you like",
                 "unitPrice": 65.99,
                 "salePrice": 55.50,
                 "quantity": 1,
                 "totalPrice": 55.50,
                 "imageUrl": "http://brontogear.com/a/p/fleece.jpeg",
                 "productUrl": "http://brontogear.com/index.php/fleece.html"    
            }
        ]
    };
    bronto("cart:send", brontoCart);

Note: If you capture mobile numbers, a country code is required.