Question

I’m using simplecart.js to build a small store on a website I created before. I have one problem. The whole shopping cart is displayed with only one line of code:

<div class="simpleCart_items"></div>

And the javascript prints the table, you can’t see it in the source code. BUT, inspect element in chrome is a good friend of mine, and the table created will look something like this:

<table>
    <tbody>
        <tr class="headerRow">
            <th class="item-name">Tuote</th>
            <th class="item-price">Hinta</th>
            <th class="item-decrement"></th>
            <th class="item-quantity">Määrä</th>
            <th class="item-increment"></th>
            <th class="item-total">Yhteensä</th>
            <th class="item-remove"></th>
        </tr>
        <tr class="itemRow row-0 odd" id="cartItem_SCI-3">
            <td class="item-name">Teipit (Valkoinen hiilikuitu)</td>
            <td class="item-price">€48.00</td>
            <td class="item-decrement">
                <a href="javascript:;" class="simpleCart_decrement">-</a>
            </td>
            <td class="item-quantity">1</td>
            <td class="item-increment">
                <a href="javascript:;" class="simpleCart_increment">+</a>
            </td>
            <td class="item-total">€48.00</td>
            <td class="item-remove">
                <a href="javascript:;" class="simpleCart_remove">Poista</a>
            </td>
        </tr>
    </tbody>
</table>

And I want it to print something like this:

<table>
    <tbody>
        <tr class="headerRow">
            <th class="item-name">Tuote</th>
            <th class="item-price">Hinta</th>
            <th class="item-decrement"></th>
            <th class="item-quantity">Määrä</th>
            <th class="item-increment"></th>
            <th class="item-total">Yhteensä</th>
            <th class="item-remove"></th>
        </tr>
        <tr class="itemRow row-0 odd" id="cartItem_SCI-3">
            <td class="item-name">Teipit (Valkoinen hiilikuitu)</td>
            <td class="item-price">€48.00</td>
            <td class="item-decrement">
                <a href="javascript:;" class="simpleCart_decrement">-</a>
            </td>
            <td class="item-quantity">1</td>
            <td class="item-increment">
                <a href="javascript:;" class="simpleCart_increment">+</a>
            </td>
            <td class="item-total">€48.00</td>
            <td class="item-remove">
                <a href="javascript:;" class="simpleCart_remove">Poista</a>
            </td>
        </tr>
        <tr class="shippingtotal" id="shipping">
            <td class="item-name">Shipping</td>
            <td class="shipping-cost">€5.00</td>
            <td class="item-decrement">
                <a href="javascript:;" class="simpleCart_decrement">-</a>
            </td>
            <td class="item-quantity">1</td>
            <td class="item-increment">
                <a href="javascript:;" class="simpleCart_increment">+</a>
            </td>
            <td class="item-total">€48.00</td>
            <td class="item-remove">
                <a href="javascript:;" class="simpleCart_remove">Poista</a>
            </td>
        </tr>
    </tbody>
</table>

So, here’s the simplecart.js itself:
http://pastebin.com/j5VKGkV1

I think that I should add something to this part of the code:

// write out cart
                writeCart: function (selector) {
                    var TABLE = settings.cartStyle.toLowerCase(),
                        isTable = TABLE === 'table',
                        TR = isTable ? "tr" : "div",
                        TH = isTable ? 'th' : 'div',
                        TD = isTable ? 'td' : 'div',
                        cart_container = simpleCart.$create(TABLE),
                        header_container = simpleCart.$create(TR).addClass('headerRow'),
                        container = simpleCart.$(selector),
                        column,
                        klass,
                        label,
                        x,
                        xlen;

                    container.html(' ').append(cart_container);

                    cart_container.append(header_container);


                    // create header
                    for (x = 0, xlen = settings.cartColumns.length; x < xlen; x += 1) {
                        column = cartColumn(settings.cartColumns[x]);
                        klass = "item-" + (column.attr || column.view || column.label || column.text || "cell") + " " + column.className;
                        label = column.label || "";

                        // append the header cell
                        header_container.append(
                        simpleCart.$create(TH).addClass(klass).html(label));
                    }

                    // cycle through the items
                    simpleCart.each(function (item, y) {
                        simpleCart.createCartRow(item, y, TR, TD, cart_container);
                    });

                    return cart_container;
                },

                // generate a cart row from an item
                createCartRow: function (item, y, TR, TD, container) {
                    var row = simpleCart.$create(TR).addClass('itemRow row-' + y + " " + (y % 2 ? "even" : "odd")).attr('id', "cartItem_" + item.id()),
                        j,
                        jlen,
                        column,
                        klass,
                        content,
                        cell;

                    container.append(row);

                    // cycle through the columns to create each cell for the item
                    for (j = 0, jlen = settings.cartColumns.length; j < jlen; j += 1) {
                        column = cartColumn(settings.cartColumns[j]);
                        klass = "item-" + (column.attr || (isString(column.view) ? column.view : column.label || column.text || "cell")) + " " + column.className;
                        content = cartCellView(item, column);
                        cell = simpleCart.$create(TD).addClass(klass).html(content);

                        row.append(cell);
                    }
                    return row;
                }

            });

But what? the shipping can be displayed with this:
<span class="simpleCart_shipping"></span> I’ve tried adding that after the cart, but it looks kind of silly.

Update: This is an example without the mofication (before):

And this is what it should be like..

Answer 1

Start off by adding this:

    // [..]
    header_container = simpleCart.$create(TR).addClass('headerRow'),

    // Added line
    total_container = simpleCart.$create(TR).addClass('shippingtotal').attr('id', "shipping" ),

    container = simpleCart.$(selector),
    // [..]

And

    // create header
    // [..]

    // cycle through the items
    // [..]

    // create total
    cart_container.append(total_container);
    total_container.append( createTotalShippingRow() );   // Even though invoked just once

    return cart_container;

And

createCartRow: function (item, y, TR, TD, container) {
    // [..]
},

createCartTotalShippingRow: function() {

    // Impl. look other update
}

createTotalShippingRow: function() {

    // Impl. look other update
}

I’ll work on the impl. now 🙂

Add the following to your settings.. (from http://pastebin.com/j5VKGkV1)

settings = {

    cartTotalColumns: [{
        attr: "name",
        label: "Name"
    }, {
        attr: "price",
        label: "Price",
        view: 'currency'
    }, {
        view: "empty",      // replaces decrement
        label: false
    }, {
        attr: "empty",      // replaces quantity
        label: false        // Qty
    }, {
        view: "empty",      // replaces increment
        label: false
    }, {
        attr: "total",
        label: "SubTotal",
        view: 'currency'
    }, {
        view: "empty",      // replaces remove
//      text: "Remove",
        label: false
    }],
}

Update [..]
[..removed code from update..]
Try to write reusable code (you want similair output for items & total).
Try to let the methods do what they describe they do (appending outside container, you returned the row anyways).
Try to use proper variable names.
Try to seperate different kinds of functionality.
Even in the writeCart method, you could split ‘createHeader(..) createItems(..) createTotal(..)’.

Further, try to use semantic names. At least the ‘y’ variable should be renamed as ‘rowIndex’ or something.

Update:

createTotalShippingRow: function( TR, TD ) {

    // I think we shouldn't instantiate the item here, but you could test if this works?
    var item = {
        name: "Shipping",
        price: 5,               
//      view: "empty",      // decrement
//      attr: "empty",      // quantity
//      view: "empty",      // increment
        total: this.total(),
//      view: "empty",      // remove
        };

    var rowid = "shipping";

    return createCartTotalShippingRow( item, rowid, TR, TD );
},

createCartTotalShippingRow: function( item, rowclass, rowid, TR, TD ) {
    var row = simpleCart.$create(TR).addClass( rowclass ).attr( 'id', rowid ),
        i = 0,
        cartTotalColumns = settings.cartTotalColumns,
        ln = cartTotalColumns.length,
        column,
        classname;

    for ( ; i < ln; i++ ) {
        column = cartColumn( cartTotalColumns[ i ] );
        classname = "item-" + ( column.attr || ( isString( column.view ) ? column.view : column.label || column.text || "cell" ) ) + " " + column.className;
        content = cartCellView( item, column );
        cell = simpleCart.$create(TD).addClass(classname).html(content);
        row.append(cell);
    }

    return row;
}

UPDATE:

whole file.. But I have the same error as I had with your original code (the method create doesn’t exist). But that has nothing to do with your request by itself.