simpleCart(js)

Documentation » Cart Columns

Cart Columns

The Cart Columns allow the user to specify how the cart will be formatted and displayed. There is a lot of flexibility here, take a look at the default setup:

simpleCart({
    cartColumns: [
        { attr: "name" , label: "Name" } ,
        { attr: "price" , label: "Price", view: 'currency' } ,
        { view: "decrement" , label: false , text: "-" } ,
        { attr: "quantity" , label: "Qty" } ,
        { view: "increment" , label: false , text: "+" } ,
        { attr: "total" , label: "SubTotal", view: 'currency' } ,
        { view: "remove" , text: "Remove" , label: false }
    ]
});

Each column is represented by an object, the most basic setup simple specifies which attribute to display and how to label the column:

{ attr: "name" , label: "Name" }

There are also some built in ‘views’ that will create a special column. For example, an ‘increment’ view:

{ view: "increment" , label: false , text: "+" }

will have a link that increments the quantity. Setting the label:false will hide the label for the view. You can specify the text of the link with that text: attribute.

You can add view: “currency” to format the column as currency (see the currency section on more information on currency formatting).

There are a number of built-in views, and you can create your own. Here are what is already available:

Attribute

This is the basic view that displays an attribute of the item, and looks like

{ attr: "name" , label: "Name" }

will output

Awesome T-Shirt

This will simply display the attribute value and set the header label. Notice you do not need to specify the view in the object: this is the default view

Currency

This view is exactly like the attribute view, except that it will format the attribute value as currency:

{ attr: "price" , label: "Price", view: 'currency' }

$139.86

Decrement

This view will output a link that will decrement the quantity of the item:

{view:'decrement', label: false }

-

Optionally, you can set the text attribute which will set the innerHTML of the link (default is ‘-’):

{view:'decrement' , label: false, text: 'Less' }

Less

Increment

This view will output a link that will increment the quantity of the item:

{view:'increment', label: false }

+

Optionally, you can set the text attribute which will set the innerHTML of the link (default is ‘+’):

{view:'increment' , label: false, text: 'More' }

More

Remove

This view will output a link that will remove the item from the cart when clicked:

{view:'remove', label: 'Remove' }

X

Optionally, you can set the text attribute which will set the innerHTML of the link (default is ‘X’):

{view:'remove' , label: 'Remove', text: 'Remove' }

Remove

Link

This view will output a link, using the attribute provided as the href, and the text value as the innerHTML:

{view:'link' , label: 'Details' , attr: 'pageLink' , text: 'View More' }

View More

Image

This view will output an image, using the attribute specified as the source:

{view:'image' , attr:'thumb', label: false}

Input

This view will create an input, with the value set to the attribute provided. When the user alters the input text, simpleCart(js) will input the item attribute. This example makes the quantity an input that the user can alter:

{view:'input', attr:'quantity', label: "Quantity" }

Creating your own view

You can create custom views for the cart by setting the view to a function instead of a string. The function should take two arguments, the item for that row, and the column details you specify.

{ view: function( item , column ){
        // return some html
  } ,
  label: "My Custom Column" 
}

As an example, let’s say you wanted to have one column that displayed the total quantity, along with the links for incrementing and decrementing the quantity:

{ view: function(item, column){
    return  ""+ item.quantity() +"" + 
            "
" +
                "+" +
                "-" +
            "
";
  } , 
  attr: "custom" ,
  label: "Quantity"
},