Checkout logic and templating @ Købstaden

checkout_kobstaden.js

/**
 * Renders the checkout process
 */
APP.checkOutFullView = new Class({

    Implements: GritView,

    template: new Mooml.Template("", function(o){
        div({id: 'main'},
            div({'class': 'layout-sidebar'},
                h2({text: _('Køb i 3 lette trin:'),'class': 'banner-headline'}),
                div({'class': 'sidebar-wrap'},
                    div({'class': 'sidebar-container box-wrapper'},
                        ul({'class': 'step-wrapper'},
                            li({text: _('Indkøbskurv'),'class': 'step-item'},
                                span({text: _('1'),'class': 'step-number'})
                            ),
                            li({text: _('Levering'),'class': 'step-item'},
                                span({text: _('2'),'class': 'step-number'})
                            ),
                            li({text: _('Betaling'),'class': 'step-item'},
                                span({text: _('3'),'class': 'step-number'})
                            )
                        ),
                        div({'class': 'feature-wrapper'},
                            div({'class': 'feature feature-secure'},
                                o.feature1SecureImg,
                                o.feature1CheckmarkImg,
                                h3({text: _('Sikker handel via HTTPS'),'class': 'title'})
                            ),
                            div({'class': 'feature feature-secure'},
                                o.feature2Shipping,
                                o.feature2CheckmarkImg,
                                h3({text: _('Fri fragt resten af året!'),'class': 'title'})
                            ),
                            div({'class': 'feature feature-returns'},
                                o.feature3ReturnImg,
                                o.feature3CheckmarkImg,
                                h3({text: _('14 dages fuld returret'),'class': 'title'})
                            )
                        )
                    )
                )
            ),
            div({'class': 'layout-main'},
                div({"class": 'step-wrap', id:"cart-wrap"},
                    div({'class': 'banner'},
                        h2({text: _('1. Er du klar til at checke ud?')})
                    ),
                    div({id:"cart-container", "class": 'step-container'})
                ),
                div({"class": 'step-wrap', id:"info-wrap"},
                    div({'class': 'banner'},
                        h2({text: _('2. Hvem er du?')})
                    ),
                    div({id:"info-container", "class": 'step-container'})
                )
            )
        );
    }),

    options: {
        setBodyScope: 'page-checkout',
        transition: 'test',
        target: 'main-wrapper',
        autoEmptyTarget: true
    },

    assets: function(){
        // preload image assets for faster load
        return {
            feature1SecureImg: new Asset.image('/static/images/icons/checkout-secure.png', {'class': 'icon'}),
            feature1CheckmarkImg: new Asset.image('static/images/icons/checkmark_green.png', {'class': 'checkmark'}),
            feature2Shipping: new Asset.image('/static/images/icons/checkout-shipping.png', {'class': 'icon'}),
            feature2CheckmarkImg: new Asset.image('static/images/icons/checkmark_green.png', {'class': 'checkmark alt'}),
            feature3ReturnImg: new Asset.image('/static/images/icons/checkout-returns.png', {'class': 'icon'}),
            feature3CheckmarkImg: new Asset.image('static/images/icons/checkmark_green.png', {'class': 'checkmark alt2'})
        };
    },

    render: function () {
        // create #main div
        this.templateData = {
            feature1SecureImg: this.loadetAssets.feature1SecureImg,
            feature1CheckmarkImg: this.loadetAssets.feature1CheckmarkImg,
            feature2Shipping: this.loadetAssets.feature2Shipping,
            feature2CheckmarkImg: this.loadetAssets.feature2CheckmarkImg,
            feature3ReturnImg: this.loadetAssets.feature3ReturnImg,
            feature3CheckmarkImg: this.loadetAssets.feature3CheckmarkImg
        };
    },

    afterRender:function(){
        // load cart and info views
        GRIT.loadView('checkout-cart', {}, $("cart-container"));
        GRIT.loadView('checkout-address', {}, $("info-container"));
    }
});