JavaScript-based product customization app

Question

I'm developing a JS-based app that allows you to customize a product. I still consider myself a super newbie to javascript and especially to object oriented programming. So far, so good, the app does what I want it to do, so no trouble there.

My background is mostly in jQuery, so my main concern is how I'm sharing and reusing variables between functions, and how I can make this code prettier and more maintainable through optimizing those functions and vars.

The point of the app is:

Click a product option
Select a finish type
Select a finish color
If there is an additional price for that finish, update the price

I broke up what was once one big file into 3 modules and am loading them using LABjs:

$LAB
    .script(homeUrl + "/assets/js/product/product.js").wait()
    .script(homeUrl + "/assets/js/product/product-color.js")
    .script(homeUrl + "/assets/js/product/product-events.js")

PRODUCT.JS

(function (window, document, $) {
    "use strict";

    // Set some general element variables used throughout this script
    var $nodes = {
        list: $('.cust-list'),
        steps: $('.steps'),
        step: $('.cust-step'),
        stepsSlide: $('.steps-slide'),
        subtotal: $('.customizer .total .price'),
        allTypes: $('.finish-type a'),
        allColors: $('.finish-color a'),
        options: $('.cust-option'),
        checks: $('.cust-option-checklist a')
    };

    function Product (name) {
        this.name = name;
        this.options = [];
    }

    // Loops through the options slide divs
    function optionsLoop($options, callback) {
        for(var i = 0; i < $options.length; i++) {
            callback(i, $options[i]);
        }
    }

    // Loops through the array of product options within the product object
    function productOptionsLoop(productOptions, callback) {
        for(var i = 0; i < productOptions.length; i++) {
            callback(i, productOptions[i]);
        }
    }

    // Populate the product object with an array of options
    function getProductOptions($nodes, product) {
        optionsLoop($nodes.options, function(index,value) {
            var $me = $(value),
                name = $me.attr('data-option'),
                type = $me.attr('data-option-type'),
                option = {
                    option: name,
                    type: type
                };

            product.options.push(option);
        });
    }

    // Change the cost according to the added options / variations
    function updateCost(addCost, productOptions, totalPrice, $subtotal, productPrice, $nodes) {
        var currentSubtotal = $subtotal.attr('data-subtotal');

        addCost = 0;

        // Go through all the product options, if an additional cost has been set, add them up
        productOptionsLoop(productOptions, function(index,value){
            var $me = value,
                cost = $me.cost;

            if(cost) {
                addCost += cost;
            }
        });

        productPrice = +productPrice;
        totalPrice = productPrice + addCost;

        animateNumber($nodes.subtotal, currentSubtotal, totalPrice);

        // Update the data attribute on the subtotal to reflect the user's choices
        $nodes.subtotal.attr('data-subtotal',totalPrice);

        // animating number produces rounding errors, so shortly after we animate, update the text with the exact total
        setTimeout(function(){
            $nodes.subtotal.text(totalPrice).digits();
        },325);
    }

    function updateOptions(productOptions, myOption, myName, myCost, myType) {
        // Go through the array of options and add the selected color and cost to this option
        productOptionsLoop(productOptions, function(index,value) {
            var $this = value;
            if($this.option === myOption){
                $this.name = myName;
                $this.cost = Math.floor(myCost);
                if(myType) {
                    $this.type = myType;
                }
                return false;
            }
        });
    }

    $.extend(window, {
        '$nodes': $nodes,
        'Product': Product,
        'optionsLoop': optionsLoop,
        'productOptionsLoop': productOptionsLoop,
        'getProductOptions': getProductOptions,
        'updateCost': updateCost,
        'updateOptions': updateOptions
    });
}(window, document, jQuery));

PRODUCT-COLOR.JS

$(document).ready(function(){
    var productName = $('#product').attr('data-product-name'),
        // Create a new product object with the name of the currently viewed product
        product = new Product(productName),
        // This is set to true when the slide animation has completed, to avoid multiple fast clicks
        animReady = true,
        productPrice,
        totalPrice,
        productOptions,
        addCost,
        inAnim = {},
        outAnim = {opacity: 0},
        outCss = {opacity: 1};

    getProductOptions($nodes, product);
    productOptions = product.options;

    productPrice = $nodes.subtotal.attr('data-subtotal');

    // Color selecting
    $nodes.checks.add($nodes.allColors).add($nodes.allTypes).on('click',function(){
        if($(this).hasClass('current')) {
            return false;
        }

        var $me = $(this),
            $parent = $me.parent(),
            $granpa = $me.parents('.cust-step'),
            granpaEq = $granpa.index() - 1,
            myOption = $granpa.attr('data-option'),
            $myCheck = $('.option-list li:eq(' + granpaEq + ')'),

            myCost = $me.attr('data-option-cost'),
            myName = $me.attr('data-option-name'),
            myType = null,

            $optTypes,
            $optColors,
            $curColor,
            $curType,
            $myParentType,
            $myColors,

            className,
            $add,
            $remove,

            isCheck = $me.is('.cust-option-checklist a'),
            isColor = $me.is('.finish-color a'),
            isType = $me.is('.finish-type a');

        if(isCheck) {
            var $curCheck = $granpa.find('a.selected');

            className = 'selected';
            $add = $me;
            $remove = $curCheck;
        }

        if(isColor || isType) {
            if(isColor) {
                // If we're clicking a color, select the <a> links
                myType = $parent.attr('data-finish-type');
                $optColors = $granpa.find('.finish-color a');
            } else {
                // If we're clicking a color, select the divs containing each color <a>
                myType = $me.attr('data-finish-type');
                $optColors = $granpa.find('.finish-color');
            }

            // All types and colors for the current option
            $optTypes = $granpa.find('.finish-type a');

            $curColor = $optColors.filter('.current');
            $curType = $optTypes.filter('.current');

            if(isColor) {
                var myBg = $me.css('backgroundColor'),
                    myBgImg = $me.css('backgroundImage'),
                    bg = myBgImg;

                $myParentType = $optTypes.filter('[data-finish-type=' + myType + ']');
                $remove = $curColor.add($optTypes);
                $add = $me.add($myParentType);
                className = 'current ic-check selected';
            } else {
                $myColors = $optColors.filter('[data-finish-type=' + myType + ']');

                className = 'current';
                $remove = $curColor.add($curType);
                $add = $me.add($myColors);
            }
        }

        // Add selected class to chosen finish + type
        setCurrent($add,$remove,className);

        if(isColor) {       
            $curType = $optTypes.filter('.current');

            // Set the background image for parent type to reflect chosen color
            if(myBgImg === 'none') {
                bg = myBg;
            }

            $curType.css({'background' : bg});
        }

        // If you select a color or a checkbox, mark the list item as selected
        if( (isColor || isCheck) && !$myCheck.hasClass('.selected') ) {
            $myCheck.add($granpa).addClass('selected');
        }

        updateOptions(productOptions, myOption, myName, myCost, myType);
        updateCost(addCost, productOptions, totalPrice, $nodes.subtotal, productPrice, $nodes);

        // Remove existing price indicator
        $myCheck.find('.price').remove();

        // Add price indicator to checklist if there is an extra cost, or else
        if(myCost > 0) {
            $myCheck.addClass('extra').find('a').append('<span class="f9 price">$' + myCost + '</span>');
        } else {
            $myCheck.removeClass('extra');
        }
    });

    // Navigation
    $('.cust-btn:not(.go-back)').on('click',function(){
        var $me = $(this),
            $curStep = $nodes.step.filter('.cust-step-cur'),
            $nextStep = $curStep.next(),
            $prevStep = $curStep.prev(),
            isPrev = $me.hasClass('prev'),
            $tar = $nextStep,
            curIndex,
            offset,
            speed = 350;

        if(isPrev) {
            $tar = $prevStep;
            if($tar.length === 0) {
                $tar = $nodes.step.filter(':last');
            }
        } else {
            if($tar.length === 0) {
                $tar = $nodes.step.filter(':first');
                speed = 0;
            }
        }

        setCurrent($tar, $curStep, 'cust-step-cur');

        $curStep = $nodes.step.filter('.cust-step-cur');
        curIndex = $curStep.index('.cust-step');
        offset = curIndex * 160;

        $nodes.stepsSlide.animate({
            right: -offset
        },speed);
    });

    // Checklist Click
    $('.option-list a').on('click',function(){
        var $me = $(this),
            myIndex = ($me.parent().index()) + 1,
            $mySlide = $nodes.step.eq(myIndex),
            offset = myIndex * 160;

        setCurrent($mySlide, $nodes.list, 'cust-step-cur');

        $nodes.stepsSlide.animate({
            right: -offset
        }, 0);
    });

    $('.cust-btn.go-back').on('click',function(){
        var $curStep = $nodes.step.filter('.cust-step-cur');
        setCurrent($nodes.list, $curStep, 'cust-step-cur');

        $nodes.stepsSlide.animate({
            right: 0
        }, 0);      
    });
});

PRODUCT-EVENTS.JS

$(document).ready(function(){
    var $productImg = $('.customizer-wrap .image'),
        productImgUrl = $productImg.find('img').attr('src'),
        spinnner,
        $stepsSlide = $nodes.stepsSlide,
        slideCount = $stepsSlide.find('.cust-step').length,
        slidesLength = slideCount * 160;

    $stepsSlide.css({width: slidesLength});

    // Initialize loading graphic
    if(!productImgUrl) {
        return false;
    }

    spinner = startSpinner('product-image', 10, 4, 15, false);

    // Preload the big image, when loaded, fade in
    $.imgpreload(productImgUrl, function(){
        $productImg
            .zoom();

        $('.spinner').fadeOut(2000, function(){
            spinner.stop();
            $('html').removeClass('img-loading');
        });
    });
});

In updateCost(), why do you pass addCost when you set it to 0? — Larry Battle, Commented Sep 3, 2012 at 21:16

3 revs, 2 users 69% · Accepted Answer · 2016-11-30 21:28:56Z

Here are few things that I noticed with Product.js:

The Module design pattern is normally used to create private functions and variables. Unless if "use strict" is required, then there's no point in wrapping your code inside a closure when all the functions and variables are appended to the global namespace.
Variables shouldn't be passed to a function that won't get used. This is a problem in updateCost() for the variables addCost and totalPrice. This is also a problem for the document variable.

Try to only create varaibles for complex or redundant object references. So name and type aren't needed.

Previous code:

var $me = $(value),
    name = $me.attr('data-option'),
    type = $me.attr('data-option-type'),
    option = {
        option: name,
        type: type
    };
product.options.push(option);

New code:

var $me = $(value),
    option = {
        option: $me.attr('data-option'),
        type: $me.attr('data-option-type')
    };
product.options.push(option);

Instead of extending to the window, just add window. to the desired global variable or function name.

Example:
```
window.$nodes = {};
```
You should rename getProductOptions() to addOptionsToProduct() since the word get implies a return value.

This is redundant:

productPrice = +productPrice;
totalPrice = productPrice + addCost;

Just add productPrice to the end of a numeric operation for it to convert to a number:

totalPrice = addCost + productPrice;

Use existing functions instead of writing new ones. For example, take advance of jQuery.each and jQuery.map for interating through collections.

Example:

Previous code:

function productOptionsLoop(productOptions, callback) {
    for(var i = 0; i < productOptions.length; i++) {
        callback(i, productOptions[i]);
    }
}

New code (productOptionsLoop() is the same as below):

// if jQuery object
productOptions.each( callback );
// else
$.each( productOptions, callback );

Just add the cost, since 0 doesn't affect the value. But it would be even better if you got rid of addCost and used totalCost instead.

productOptionsLoop(productOptions, function(index,value){
    var $me = value,
        cost = $me.cost;
    if(value.cost) {
        addCost += value.cost;
    }
});

Becomes

productOptions.each(function(index,value){
    addCost += value.cost;
});

animateNumber() should call a callback once the animation part is complete. This way you don't need a setTimeout function.

Final code

// Set some general element variables used throughout this script
var $nodes = {
    list: $('.cust-list'),
    steps: $('.steps'),
    step: $('.cust-step'),
    stepsSlide: $('.steps-slide'),
    subtotal: $('.customizer .total .price'),
    allTypes: $('.finish-type a'),
    allColors: $('.finish-color a'),
    options: $('.cust-option'),
    checks: $('.cust-option-checklist a')
};
var Product = function(name) {
    this.name = name;
    this.options = [];
};
// Populate the product object with an array of options
var addProductOptions = function($nodes, product) {
    $nodes.options.each(function(index,value) {
        var $me = $(value),
            option = {
                option: $me.attr('data-option'),
                type: $me.attr('data-option-type')
            };

        product.options.push(option);
    });
};
// Change the cost according to the added options / variations
var updateCost = function(productOptions, $subtotal, productPrice, $nodes) {
    var totalPrice = productPrice, currentSubtotal = $subtotal.attr('data-subtotal');

    productOptions.each(function(index,value){
        totalPrice += value.cost;
    });
    animateNumber($nodes.subtotal, currentSubtotal, totalPrice, function(){
        $nodes.subtotal.text(totalPrice).digits();
    });
    $nodes.subtotal.attr('data-subtotal',totalPrice);
};
var updateOptions = function(productOptions, myOption, myName, myCost, myType) {
    // Go through the array of options and add the selected color and cost to this option
    productOptions.each(function(index,$this) {
        if($this.option !== myOption){
            return;
        }
        $this.name = myName;
        $this.cost = Math.floor(myCost);
        if(myType) {
            $this.type = myType;
        }
    });
};

Peter · Accepted Answer · 2012-09-04 09:12:03Z

3

Larry has already mentioned avoiding adding your functions/variables to the global namespace. One way you can do this is to create an object and use it in your extend method like so -

(function (window, document, $) {
    "use strict";

    var myNamespace = myNamespace || {};

    // @param {string} name
    myNamespace.Product = function (name) {
        // do stuff
    };

    // etc
    ...

    $.extend(window, myNamespace);

}(window, document, jQuery));

answered Sep 4, 2012 at 9:12

community wiki

Peter

Add a comment |

Stack Exchange Network

JavaScript-based product customization app

2 Answers 2

Final code

Your Answer

Not the answer you're looking for? Browse other questions tagged
javascript
object-oriented
or ask your own question.

Hot Network Questions

JavaScript-based product customization app

2 Answers 2

Final code

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascriptobject-oriented or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
javascript
object-oriented
or ask your own question.