Shopping Cart

Cart Functional Overview

All carts have a similar set of functions. They must be able to add items to the cart, change quantity of items in the cart and remove items from the cart. Ideally they should also be able to estimate shipping and taxes for an order and optionally allow for entry of promotional codes (aka coupons).

Because StoreBuilder is designed for customization with an open development layer, you can implement these core functions any way you like or remove/hide these functions.

Cart Implementation Details

The cart page by default will be routed to the /cart url. The cart page will be rendered using the CartViewModel class (including any mixins or extenders for customization) and the sb-cart handlebars template in your active StoreBuilder theme.

POST Request Parameters

You may POST to /cart with either a JSON payload or Form Url Encoded values payload. It the incoming request has a Content-Type:application/json header present then StoreBuilder will look for a JSON payload. If the incoming POST request has a Content-Type:application/x-www-form-urlencoded header present then StoreBuilder will look for Form values.

GET/POST Response Body

If the incoming request has an Accept:application/json header present, then StoreBuilder will return a JSON payload in the response. Otherwise StoreBuilder will return a rendered view as text/html.

If the incoming request is not requesting a json response, then StoreBuilder will additionally look for a X-Requested-With:XMLHttpRequest header to determine whether the response should be a partial view or a complete page. If the X-Requested-With:XMLHttpRequest header is present, then StoreBuilder will return the results of the handlebars template directly, otherwise Storebuilder will route the results to be "wrapped" with any (optional) surrounding view (such as wrapping the results with a Razor view to add all the surrounding page header/footer/etc).

GET/POST Response Data

The data that will either be supplied to Handlebars for rendering a template or serialized as JSON in the response body is defined by the CartViewModel and any mixins that your custom code or other plugins have added to the CartViewModel.

CartViewModel Data

Sample JSON Data

{  
    "Id":"8cc4b11e-43b3-4d0d-86c9-a5c30133a49d",
    "RowId":1409,
    "CreatedBy":"user@domain.com",
    "CreatedOn":"2016-03-08T18:40:06.1212567Z",
    "CreatedOnTimestamp":1457462406121,
    "ModifiedBy":"user@domain.com",
    "ModifiedOn":"2016-03-08T18:40:10.3711124Z",
    "ModifiedOnTimestamp":1457462410371,
    "IsTrashed":false,
    "CurrencyId":"f5d2d8b4-81f4-11e2-9e96-0800200c9a66",
    "Currency":{  
        "isoCode":"CAD",
        "name":"Canadian Dollar",
        "exchangeRate":1.00,
        "symbol":"$",
        "formatString":null,
        "displayOrder":0,
        "id":"f5d2d8b4-81f4-11e2-9e96-0800200c9a66",
        "rowId":2,
        "createdBy":null,
        "createdOn":"2015-04-29T03:00:03.9Z",
        "createdOnTimestamp":1430276403900,
        "modifiedBy":null,
        "modifiedOn":"2015-04-29T03:00:03.9Z",
        "modifiedOnTimestamp":1430276403900,
        "isTrashed":false,
        },
    "BillingFirstName":null,
    "BillingLastName":null,
    "BillingOrganization":null,
    "BillingPhoneNumber":null,
    "BillingEmail":"user@domain.com",
    "BillingLine1":null,
    "BillingLine2":null,
    "BillingCity":null,
    "BillingRegionId":null,
    "BillingRegionCode":null,
    "BillingRegionName":"",
    "BillingPostalCode":null,
    "BillingCountryId":null,
    "BillingCountryCode":null,
    "BillingCountryName":"",
    "BillingAddressTypeId":"e5d2d8b7-81f4-11e2-9e96-0800200c9a66",
    "BillingAddressType":null,
    "ShippingInfoSameAsBilling":true,
    "ShippingFirstName":null,
    "ShippingLastName":null,
    "ShippingOrganization":null,
    "ShippingPhoneNumber":null,
    "ShippingEmail":"user@domain.com",
    "ShippingLine1":null,
    "ShippingLine2":null,
    "ShippingCity":null,
    "ShippingRegionId":"49b98b6d-fdd8-49fc-9a11-bf61621919a2",
    "ShippingRegionCode":"BC",
    "ShippingRegionName":"British Columbia",
    "ShippingPostalCode":null,
    "ShippingCountryId":"2b9a5e17-5569-49fd-858e-7bcfa39bac15",
    "ShippingCountryCode":"CA",
    "ShippingCountryName":"Canada",
    "ShippingAddressTypeId":"e5d2d8b7-81f4-11e2-9e96-0800200c9a66",
    "ShippingAddressType":null,
    "ItemsLength":1,
    "Items":[  
        {  
            "Id":"c61bbe23-e4e2-453d-93cf-a5c30133a525",
            "RowId":1493,
            "CreatedBy":"user@domain.com",
            "CreatedOn":"2016-03-08T18:40:06.1212567Z",
            "CreatedOnTimestamp":1457462406121,
            "ModifiedBy":"user@domain.com",
            "ModifiedOn":"2016-03-08T18:40:06.1212567Z",
            "ModifiedOnTimestamp":1457462406121,
            "IsTrashed":false,
            "Sku":"CON-CORE-TOD-LOWPK-5",
            "RetailSku":"CONCTL103-0005",
            "OnlineSku":"CONCTL106PK-5",
            "Name":"Converse Chuck Taylor Toddler Optical Low Top, Pink, 6 Toddlers",
            "Description":"",
            "Quantity":"1",
            "UnitPrice":29.99,
            "UnitPriceAmount":"$29.99",
            "SubTotal":29.990,
            "SubTotalAmount":"$29.99",
            "TotalDiscount":0.0,
            "TotalDiscountAmount":"$0.00",
            "TotalAmount":"$29.99",
            "Url":"https://dev.domain.com/very-cool-product-slug",
            "ThumbnailUrl":"https://dev.domain.com/images/products/small/very-cool-product.jpg",
            "ThumbnailAlt":"Converse Chuck Taylor Toddler Optical Low Top"
            "ViewData":{  
                "ActionResult":"item-added",
                "QuantityChange":1.0
            },
            "CartId":"8cc4b11e-43b3-4d0d-86c9-a5c30133a49d",
            "ProductVariantId":"38fa84b7-d617-45b3-91f2-a48900335d18"
        }
    ],
    "TotalDiscount":0.0,
    "TotalDiscountAmount":"$0.00",
    "RequiresShipping":true,
    "TotalItems":1.0,
    "TotalValue":29.990,
    "TotalValueAmount":"$29.99",
    "TotalShipping":0.0,
    "TotalShippingAmount":"$0.00",
    "TotalTax":0.0,
    "TotalTaxAmount":"$0.00",
    "GrandTotal":29.990,
    "GrandTotalAmount":"$29.99",
    "ContactPaymentMethods":null,
    "ContactPaymentMethodId":null,
    "PaymentValidationMessage":null,
    "Newsletter":false,
    "AddBillingAddressToAddressBook":false,
    "AddShippingAddressToAddressBook":false,
    "CouponError":null,
    "CouponCode":null
}

Data Element Descriptions

The CartViewModel exposes the following data elements for use in your cart Handlebars templates.