Edit navigation bar

Edit navigation bar

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?

main.js
  2. jQuery(document).ready(function($){
  3. function ProductBuilder( element ) {
  4. this.element = element;
  5. this.stepsWrapper = this.element.children('.cd-builder-steps');
  6. this.steps = this.element.find('.builder-step');
  7. //store some specific bulider steps
  8. this.models = this.element.find('[data-selection="models"]'); 
  9. this.summary;
  10. this.optionsLists = this.element.find('.options-list');
  11. //bottom summary 
  12. this.fixedSummary = this.element.find('.cd-builder-footer');
  13. this.modelPreview = this.element.find('.selected-product').find('img');
  14. this.totPriceWrapper = this.element.find('.tot-price').find('b');
  15. //builder navigations
  16. this.mainNavigation = this.element.find('.cd-builder-main-nav');
  17. this.secondaryNavigation = this.element.find('.cd-builder-secondary-nav');
  18. //used to check if the builder content has been loaded properly
  19. this.loaded = true;
  21. // bind builder events
  22. this.bindEvents();
  23. }

  25. ProductBuilder.prototype.bindEvents = function() {
  26. var self = this;

  28. //detect click on the left navigation
  29. this.mainNavigation.on('click', 'li:not(.active)', function(event){
  30. event.preventDefault();
  31. self.loaded && self.newContentSelected($(this).index());
  32. });

  34. //detect click on bottom fixed navigation
  35. this.secondaryNavigation.on('click', '.nav-item li:not(.buy)', function(event){ 
  36. event.preventDefault();
  37. var stepNumber = ( $(this).parents('.next').length > 0 ) ? $(this).index() + 1 : $(this).index() - 1;
  38. self.loaded && self.newContentSelected(stepNumber);
  39. });
  40. //detect click on one element in an options list (e.g, models, accessories)
  41. this.optionsLists.on('click', '.js-option', function(event){
  42. self.updateListOptions($(this));
  43. });
  44. //detect clicks on customizer controls (e.g., colors ...)
  45. this.stepsWrapper.on('click', '.cd-product-customizer a', function(event){
  46. event.preventDefault();
  47. self.customizeModel($(this));
  48. });
  49. };

  51. ProductBuilder.prototype.newContentSelected = function(nextStep) {
  52. //first - check if a model has been selected - user can navigate through the builder
  53. if( this.fixedSummary.hasClass('disabled') ) {
  54. //no model has been selected - show alert
  55. this.fixedSummary.addClass('show-alert');
  56. } else 
  57. {
  58. //model has been selected so show new content 
  59. //first check if the color step has been completed - in this case update the product bottom preview
  60. if( this.steps.filter('.active').is('[data-selection="colors"]') ) {
  61. //in this case, color has been changed - update the preview image
  62. var imageSelected = this.steps.filter('.active').find('.cd-product-previews').children('.selected').children('img').attr('src');
  63. this.modelPreview.attr('src', imageSelected);
  64. }
  65. //if Summary is the selected step (new step to be revealed) -> update summary content
  66. if( nextStep + 1 >= this.steps.length ) {
  67. this.createSummary();
  68. }
  70. this.showNewContent(nextStep);
  71. this.updatePrimaryNav(nextStep);
  72. this.updateSecondaryNav(nextStep);
  73. }
  74. }

  76. ProductBuilder.prototype.showNewContent = function(nextStep) {
  77. var actualStep = this.steps.filter('.active').index() + 1;
  78. if( actualStep < nextStep + 1 ) {
  79. //go to next section
  80. this.steps.eq(actualStep-1).removeClass('active back').addClass('move-left');
  81. this.steps.eq(nextStep).addClass('active').removeClass('move-left back');
  82. } else {
  83. //go to previous section
  84. this.steps.eq(actualStep-1).removeClass('active back move-left');
  85. this.steps.eq(nextStep).addClass('active back').removeClass('move-left');
  86. }
  87. }

  89. ProductBuilder.prototype.updatePrimaryNav = function(nextStep) {
  90. this.mainNavigation.find('li').eq(nextStep).addClass('active').siblings('.active').removeClass('active');
  91. }

  93. ProductBuilder.prototype.updateSecondaryNav = function(nextStep) {
  94. ( nextStep == 0 ) ? this.fixedSummary.addClass('step-1') : this.fixedSummary.removeClass('step-1');

  96. this.secondaryNavigation.find('.nav-item.next').find('li').eq(nextStep).addClass('visible').removeClass('visited').prevAll().removeClass('visited').addClass('visited').end().nextAll().removeClass('visible visited');
  97. this.secondaryNavigation.find('.nav-item.prev').find('li').eq(nextStep).addClass('visible').removeClass('visited').prevAll().removeClass('visited').addClass('visited').end().nextAll().removeClass('visible visited');
  98. }

  100. ProductBuilder.prototype.createSummary = function() {
  101. var self = this;
  102. this.steps.each(function(){
  103. //this function may need to be updated according to your builder steps and summary
  104. var step = $(this);
  105. if( $(this).data('selection') == 'colors' ) {
  106. //create the Color summary
  107. var colorSelected = $(this).find('.cd-product-customizer').find('.selected'),
  108. color = colorSelected.children('a').data('color'),
  109. colorName = colorSelected.data('content'),
  110. imageSelected = $(this).find('.cd-product-previews').find('.selected img').attr('src');
  112. self.summary.find('.summary-color').find('.color-label').text(colorName).siblings('.color-swatch').attr('data-color', color);
  113. self.summary.find('.product-preview').attr('src', imageSelected);
  114. } else if( $(this).data('selection') == 'accessoies' ) {
  115. var selectedOptions = $(this).find('.js-option.selected'),
  116. optionsContent = '';

  118. if( selectedOptions.length == 0 ) {
  119. optionsContent = '<li><p>No Accessories selected;</p></li>';
  120. } else {
  121. selectedOptions.each(function(){
  122. optionsContent +='<li><p>'+$(this).find('p').text()+'</p></li>';
  123. });
  124. }

  126. self.summary.find('.summary-accessories').children('li').remove().end().append($(optionsContent));
  127. }
  128. });
  129. }

  131. ProductBuilder.prototype.updateListOptions = function(listItem) {
  132. var self = this;
  134. if( listItem.hasClass('js-radio') ) {
  135. //this means only one option can be selected (e.g., models) - so check if there's another option selected and deselect it
  136. var alreadySelectedOption = listItem.siblings('.selected'),
  137. price = (alreadySelectedOption.length > 0 ) ? -Number(alreadySelectedOption.data('price')) : 0;

  139. //if the option was already selected and you are deselecting it - price is the price of the option just clicked
  140. ( listItem.hasClass('selected') ) 
  141. ? price = -Number(listItem.data('price'))
  142. : price = Number(listItem.data('price')) + price;

  144. //now deselect all the other options
  145. alreadySelectedOption.removeClass('selected');
  146. //toggle the option just selected
  147. listItem.toggleClass('selected');
  148. //update totalPrice - only if the step is not the Models step
  149. (listItem.parents('[data-selection="models"]').length == 0) && self.updatePrice(price);
  150. } else {
  151. //more than one options can be selected - just need to add/remove the one just clicked
  152. var price = ( listItem.hasClass('selected') ) ? -Number(listItem.data('price')) : Number(listItem.data('price'));
  153. //toggle the option just selected
  154. listItem.toggleClass('selected');
  155. //update totalPrice
  156. self.updatePrice(price);
  157. }
  159. if( listItem.parents('[data-selection="models"]').length > 0 ) {
  160. //since a model has been selected/deselected, you need to update the builder content
  161. self.updateModelContent(listItem);
  162. }
  163. };

  165. ProductBuilder.prototype.updateModelContent = function(model) {
  166. var self = this;
  167. if( model.hasClass('selected') ) {
  168. var modelType = model.data('model'),
  169. modelImage = model.find('img').attr('src');

  171. //need to update the product image in the bottom fixed navigation
  172. this.modelPreview.attr('src', modelImage);

  174. //need to update the content of the builder according to the selected product
  175. //first - remove the contet which refers to a different model
  176. this.models.siblings('li').remove();
  177. //second - load the new content
  178. $.ajax({
  179.         type       : "GET",
  180.         dataType   : "html",
  181.         url        : modelType+".html",
  182.         beforeSend : function(){
  183.         self.loaded = false;
  184.         model.siblings().removeClass('loaded');
  185.         },
  186.         success    : function(data){
  187.         self.models.after(data);
  188.         self.loaded = true;
  189.         model.addClass('loaded');
  190.         //activate top and bottom navigations
  191.         self.fixedSummary.add(self.mainNavigation).removeClass('disabled show-alert');
  192.         //update properties of the object
  193. self.steps = self.element.find('.builder-step');
  194. self.summary = self.element.find('[data-selection="summary"]');
  195. //detect click on one element in an options list
  196. self.optionsLists.off('click', '.js-option');
  197. self.optionsLists = self.element.find('.options-list');
  198. self.optionsLists.on('click', '.js-option', function(event){
  199. self.updateListOptions($(this));
  200. });

  202. //this is used not to load the animation the first time new content is loaded
  203. self.element.find('.first-load').removeClass('first-load');
  204.         },
  205.         error     : function(jqXHR, textStatus, errorThrown) {
  206.             //you may want to show an error message here
  207.         }
  208. });

  210. //update price (no adding/removing)
  211. this.totPriceWrapper.text(model.data('price'));
  212. } else {
  213. //no model has been selected
  214. this.fixedSummary.add(this.mainNavigation).addClass('disabled');
  215. //update price
  216. this.totPriceWrapper.text('0');

  218. this.models.find('.loaded').removeClass('loaded');
  219. }
  220. };

  222. ProductBuilder.prototype.customizeModel = function(target) {
  223. var parent = target.parent('li')
  224. index = parent.index();
  226. //update final price
  227. var price = ( parent.hasClass('selected') )
  228. ? 0
  229. : Number(parent.data('price')) - parent.siblings('.selected').data('price');

  231. this.updatePrice(price);
  232. 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');
  233. };

  235. ProductBuilder.prototype.updatePrice = function(price) {
  236. var actualPrice = Number(this.totPriceWrapper.text()) + price;
  237. this.totPriceWrapper.text(actualPrice);
  238. };

  240. if( $('.cd-product-builder').length > 0 ) {
  241. $('.cd-product-builder').each(function(){
  242. //create a productBuilder object for each .cd-product-builder
  243. new ProductBuilder($(this));
  244. });
  245. }
  246. });