1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Edit navigation bar

Discussion in 'jQuery' started by pgeo, Mar 14, 2018.

  1. #1
    Hello I am new here and i am new in JQuery. Can anyone help me how can i edit this file to make more steps and do it to work perfectly?
    SEMrush
    main.js

    
    jQuery(document).ready(function($){
        function ProductBuilder( element ) {
            this.element = element;
            this.stepsWrapper = this.element.children('.cd-builder-steps');
            this.steps = this.element.find('.builder-step');
            //store some specific bulider steps
            this.models = this.element.find('[data-selection="models"]');
            this.summary;
            this.optionsLists = this.element.find('.options-list');
            //bottom summary
            this.fixedSummary = this.element.find('.cd-builder-footer');
            this.modelPreview = this.element.find('.selected-product').find('img');
            this.totPriceWrapper = this.element.find('.tot-price').find('b');
            //builder navigations
            this.mainNavigation = this.element.find('.cd-builder-main-nav');
            this.secondaryNavigation = this.element.find('.cd-builder-secondary-nav');
            //used to check if the builder content has been loaded properly
            this.loaded = true;
           
            // bind builder events
            this.bindEvents();
        }
    
        ProductBuilder.prototype.bindEvents = function() {
            var self = this;
    
            //detect click on the left navigation
            this.mainNavigation.on('click', 'li:not(.active)', function(event){
                event.preventDefault();
                self.loaded && self.newContentSelected($(this).index());
            });
    
            //detect click on bottom fixed navigation
            this.secondaryNavigation.on('click', '.nav-item li:not(.buy)', function(event){
                event.preventDefault();
                var stepNumber = ( $(this).parents('.next').length > 0 ) ? $(this).index() + 1 : $(this).index() - 1;
                self.loaded && self.newContentSelected(stepNumber);
            });
            //detect click on one element in an options list (e.g, models, accessories)
            this.optionsLists.on('click', '.js-option', function(event){
                self.updateListOptions($(this));
            });
            //detect clicks on customizer controls (e.g., colors ...)
            this.stepsWrapper.on('click', '.cd-product-customizer a', function(event){
                event.preventDefault();
                self.customizeModel($(this));
            });
        };
    
        ProductBuilder.prototype.newContentSelected = function(nextStep) {
            //first - check if a model has been selected - user can navigate through the builder
            if( this.fixedSummary.hasClass('disabled') ) {
                //no model has been selected - show alert
                this.fixedSummary.addClass('show-alert');
            } else
                {
                //model has been selected so show new content
                //first check if the color step has been completed - in this case update the product bottom preview
                if( this.steps.filter('.active').is('[data-selection="colors"]') ) {
                    //in this case, color has been changed - update the preview image
                    var imageSelected = this.steps.filter('.active').find('.cd-product-previews').children('.selected').children('img').attr('src');
                    this.modelPreview.attr('src', imageSelected);
                }
                //if Summary is the selected step (new step to be revealed) -> update summary content
                if( nextStep + 1 >= this.steps.length ) {
                    this.createSummary();
                }
               
                this.showNewContent(nextStep);
                this.updatePrimaryNav(nextStep);
                this.updateSecondaryNav(nextStep);
            }
        }
    
        ProductBuilder.prototype.showNewContent = function(nextStep) {
            var actualStep = this.steps.filter('.active').index() + 1;
            if( actualStep < nextStep + 1 ) {
                //go to next section
                this.steps.eq(actualStep-1).removeClass('active back').addClass('move-left');
                this.steps.eq(nextStep).addClass('active').removeClass('move-left back');
            } else {
                //go to previous section
                this.steps.eq(actualStep-1).removeClass('active back move-left');
                this.steps.eq(nextStep).addClass('active back').removeClass('move-left');
            }
        }
    
        ProductBuilder.prototype.updatePrimaryNav = function(nextStep) {
            this.mainNavigation.find('li').eq(nextStep).addClass('active').siblings('.active').removeClass('active');
        }
    
        ProductBuilder.prototype.updateSecondaryNav = function(nextStep) {
            ( nextStep == 0 ) ? this.fixedSummary.addClass('step-1') : this.fixedSummary.removeClass('step-1');
    
            this.secondaryNavigation.find('.nav-item.next').find('li').eq(nextStep).addClass('visible').removeClass('visited').prevAll().removeClass('visited').addClass('visited').end().nextAll().removeClass('visible visited');
            this.secondaryNavigation.find('.nav-item.prev').find('li').eq(nextStep).addClass('visible').removeClass('visited').prevAll().removeClass('visited').addClass('visited').end().nextAll().removeClass('visible visited');
        }
    
        ProductBuilder.prototype.createSummary = function() {
            var self = this;
            this.steps.each(function(){
                //this function may need to be updated according to your builder steps and summary
                var step = $(this);
                if( $(this).data('selection') == 'colors' ) {
                    //create the Color summary
                    var colorSelected = $(this).find('.cd-product-customizer').find('.selected'),
                        color = colorSelected.children('a').data('color'),
                        colorName = colorSelected.data('content'),
                        imageSelected = $(this).find('.cd-product-previews').find('.selected img').attr('src');
                   
                    self.summary.find('.summary-color').find('.color-label').text(colorName).siblings('.color-swatch').attr('data-color', color);
                    self.summary.find('.product-preview').attr('src', imageSelected);
                } else if( $(this).data('selection') == 'accessoies' ) {
                    var selectedOptions = $(this).find('.js-option.selected'),
                        optionsContent = '';
    
                    if( selectedOptions.length == 0 ) {
                        optionsContent = '<li><p>No Accessories selected;</p></li>';
                    } else {
                        selectedOptions.each(function(){
                            optionsContent +='<li><p>'+$(this).find('p').text()+'</p></li>';
                        });
                    }
    
                    self.summary.find('.summary-accessories').children('li').remove().end().append($(optionsContent));
                }
            });
        }
    
        ProductBuilder.prototype.updateListOptions = function(listItem) {
            var self = this;
           
            if( listItem.hasClass('js-radio') ) {
                //this means only one option can be selected (e.g., models) - so check if there's another option selected and deselect it
                var alreadySelectedOption = listItem.siblings('.selected'),
                    price = (alreadySelectedOption.length > 0 ) ? -Number(alreadySelectedOption.data('price')) : 0;
    
                //if the option was already selected and you are deselecting it - price is the price of the option just clicked
                ( listItem.hasClass('selected') )
                    ? price = -Number(listItem.data('price'))
                    : price = Number(listItem.data('price')) + price;
    
                //now deselect all the other options
                alreadySelectedOption.removeClass('selected');
                //toggle the option just selected
                listItem.toggleClass('selected');
                //update totalPrice - only if the step is not the Models step
                (listItem.parents('[data-selection="models"]').length == 0) && self.updatePrice(price);
            } else {
                //more than one options can be selected - just need to add/remove the one just clicked
                var price = ( listItem.hasClass('selected') ) ? -Number(listItem.data('price')) : Number(listItem.data('price'));
                //toggle the option just selected
                listItem.toggleClass('selected');
                //update totalPrice
                self.updatePrice(price);
            }
           
            if( listItem.parents('[data-selection="models"]').length > 0 ) {
                //since a model has been selected/deselected, you need to update the builder content
                self.updateModelContent(listItem);
            }
        };
    
        ProductBuilder.prototype.updateModelContent = function(model) {
            var self = this;
            if( model.hasClass('selected') ) {
                var modelType = model.data('model'),
                    modelImage = model.find('img').attr('src');
    
                //need to update the product image in the bottom fixed navigation
                this.modelPreview.attr('src', modelImage);
    
                //need to update the content of the builder according to the selected product
                //first - remove the contet which refers to a different model
                this.models.siblings('li').remove();
                //second - load the new content
                $.ajax({
                    type       : "GET",
                    dataType   : "html",
                    url        : modelType+".html",
                    beforeSend : function(){
                        self.loaded = false;
                        model.siblings().removeClass('loaded');
                    },
                    success    : function(data){
                        self.models.after(data);
                        self.loaded = true;
                        model.addClass('loaded');
                        //activate top and bottom navigations
                        self.fixedSummary.add(self.mainNavigation).removeClass('disabled show-alert');
                        //update properties of the object
                        self.steps = self.element.find('.builder-step');
                        self.summary = self.element.find('[data-selection="summary"]');
                        //detect click on one element in an options list
                        self.optionsLists.off('click', '.js-option');
                        self.optionsLists = self.element.find('.options-list');
                        self.optionsLists.on('click', '.js-option', function(event){
                            self.updateListOptions($(this));
                        });
    
                        //this is used not to load the animation the first time new content is loaded
                        self.element.find('.first-load').removeClass('first-load');
                    },
                    error     : function(jqXHR, textStatus, errorThrown) {
                        //you may want to show an error message here
                    }
                });
    
                //update price (no adding/removing)
                this.totPriceWrapper.text(model.data('price'));
            } else {
                //no model has been selected
                this.fixedSummary.add(this.mainNavigation).addClass('disabled');
                //update price
                this.totPriceWrapper.text('0');
    
                this.models.find('.loaded').removeClass('loaded');
            }
        };
    
        ProductBuilder.prototype.customizeModel = function(target) {
            var parent = target.parent('li')
                index = parent.index();
           
            //update final price
            var price = ( parent.hasClass('selected') )
                ? 0
                : Number(parent.data('price')) - parent.siblings('.selected').data('price');
    
            this.updatePrice(price);
            target.parent('li').addClass('selected').siblings().removeClass('selected').parents('.cd-product-customizer').siblings('.cd-product-previews').children('.selected').removeClass('selected').end().children('li').eq(index).addClass('selected');
        };
    
        ProductBuilder.prototype.updatePrice = function(price) {
            var actualPrice = Number(this.totPriceWrapper.text()) + price;
            this.totPriceWrapper.text(actualPrice);
        };
    
        if( $('.cd-product-builder').length > 0 ) {
            $('.cd-product-builder').each(function(){
                //create a productBuilder object for each .cd-product-builder
                new ProductBuilder($(this));
            });
        }
    });
    Code (JavaScript):
     
    pgeo, Mar 14, 2018 IP
    SEMrush