Shopping Cart

Shopping Cart

This documentation refers to the properties and methods of this interface as accessed only through the "data-bind" html attribute used for interface theming. For information on how to access this interface and its properties using standard javascript code, have a look at our developer documentation.

The cart() data-bind accessor will give you access to the items and totals of the current users shopping cart. Additionally, you can use the cart data-bind accessor (without the parenthesis) to perform shopping cart manipulations (such as adding items, removing items, and initiating checkout). We'll run through all of the properties of each to see what data is available and the ways it can be used.

Note: Flex will not process your "data-bind" attributes automatically. Refer to the security implications section of our theming guide for more information on how to enable and use the "data-bind" attribute safely on your website.

Sandbox

Open SandboxWant to get hands on with the flex framework? Use any of the html examples from this guide in our sandbox!


Cart Items: cart().items Array

This property contains an array list of all the items in the users shopping cart. You can use it to build an interface to the shopping cart.


cart().items[index] Object

Each array item is an object which contains information about the item in the shopping cart.


Title: cart().items[index].title String

This property contains the title of the item in the cart.


Price: cart().items[index].price String

This property contains the price of the item in the cart. It does not include the currency symbol.


License: cart().items[index].license Object

This property is a license object with the same properties as nowplaying().licensing.options[index].


Quantity: cart().items[index].qty String

This property contains the quantity of the item in the shopping cart. For beat items, it will always be one. But since the shopping cart is linked to their shopping cart in the Beat Brokerz cloud, it is possible that the user would have an item other than a beat in their shopping cart.


Playlist Index: cart().items[index].playlistIndex Integer

This property contains the integer value of this item's position in the shopping cart playlist array. music.Playlist.cart()[index]


Beat ID: cart().items[index].nid String

This property contains the beat id of the item.


Example:
<ul data-bind="foreach: cart().items">
  <li>
    <span data-bind="text: qty + 'x'"></span>
    <span data-bind="html: title"></span>
    <span data-bind="text: '@ $' + price"></span>
    <a href="#" data-bind="click: $root.music.playMedia">Play</a>
  </li>
</ul>

Applied Discounts: cart().discounts Object

This property contains information about any discounts that are being actively applied to the order.

Total: cart().discounts.total String

This property contains the total discount amount applied to the order. It does not include the currency symbol.

Example:
Discounts Total: <span data-bind="text: '$' + cart().discounts.total"></span>

Discount Items: cart().discounts.items Array

This property contains an array of objects representing each discount that has been applied to the order.

cart().discounts.items[index] Object

Each array item is a discount object which contains specific information about the discount which has been applied.

Example:
Applied Discounts:
<ul data-bind="foreach: cart().discounts.items">
  <li><span data-bind="html: description"></span></li>
</ul>

Cart Subtotal: cart().sub_total String

This property contains the sub total price of the shopping cart (before any discounts are applied). It does not include the currency symbol.

Example:
Subtotal: <span data-bind="text: '$' + cart().sub_total"></span>

Cart Total: cart().total String

This property contains the total price of the shopping cart (after discounts have been applied). It does not include the currency symbol.

Example:
Total: <span data-bind="text: '$' + cart().total"></span>

Interface Methods

Add To Cart: cart.add Function

This method can be used on any event handler binding (i.e. "click") within the "foreach" binding of the licensing options for a beat object, such as nowplaying().licensing.options. When used, it will add the particular license in the foreach loop to the users shopping cart.

Example:
Purchase options for the currently playing beat:
<ul data-bind="foreach: nowplaying().licensing.options">
  <li>
    <strong data-bind="text: name"></strong> (<span data-bind="text: price"></span>)
    <a href="#" data-bind="click: $root.cart.add">More Info</a>
  </li>
</ul>

Important Note: Whenever you use this method inside of a control flow (i.e. "foreach") binding, you need to refer to the method like this: $root.cart.add. Learn more about binding contexts used in knockout.js.


Remove From Cart: cart.remove Function

This method can be used on any event handler binding (i.e. "click") within the "foreach" binding of a cart items array, such as cart().items. When used, it will remove the particular cart item in the foreach loop from the users shopping cart.

Example:
<ul data-bind="foreach: cart().items">
  <li>
    <strong data-bind="html: title"></strong> (<span data-bind="text: price"></span>)
    <a href="#" data-bind="click: $root.music.showLicense">License Info</a>
    <a href="#" data-bind="click: $root.cart.remove">Remove</a>
  </li>
</ul>

Important Note: Whenever you use this method inside of a control flow (i.e. "foreach") binding, you need to refer to the method like this: $root.cart.remove. Learn more about binding contexts used in knockout.js.


Show Cart: cart.show Function

This method can be used on any event handler binding (i.e. "click") to show an automatic dialog with the users shopping cart contents.

Example:
<a href="#" data-bind="click: cart.show">Show Cart</a>

Begin Checkout: cart.checkout Function

This method can be used on any event handler binding (i.e. "click") to send the user to the cart checkout screen. If the shopping cart is empty, then this command will be ignored.

Example:
<a href="#" data-bind="click: cart.checkout">Checkout Now</a>