javascript - Need to refactor this JS, not sure where to start -

just inherited function dropdown menu , it's ugly sin, , seems pretty fragile in several browsers(mostly older versions of safari), im not sure start, suggestions appreciated. feel need break several smaller functions remove hard coded html(not sure how that)

the offending code:

function mini_cart_populate(){   var order;   $.get('/get_current_order.json',   function(data) {     $('#minicart-thumbnails').html('');     order = data.order;      if (order.order.line_items.length == 1) {        $('#minicart_content').addclass('single');        $('.cart_pulldown').addclass('single');        $('#minicart_footer').addclass('single');     } else {       $('#minicart_content').removeclass('single');       $('.cart_pulldown').removeclass('single');       $('#minicart_footer').removeclass('single');     }     if (order.order.line_items.length > 0) {       $('#cart_pulldown').removeclass('empty_minicart');       $('#minicart_header').show();       $('#minicart_content').show();       $('#minicart_footer').show();       $('.clearboth').show();       (var = 0; < order.order.line_items.length ; ++ ) {         var char_limit = 80;         var variant = data.variant_information[i];         var item_string = "<div class='minicart_item_wrapper'>";         //image string         item_string += "<a href='"+ variant.path +"'><img src='"+ variant.image_url +"'></a>";         //assume title , description items         item_string += "<div class='mini_item_detail'>"+           "<p class='mini_item_description'><strong>"+variant.title+           "</strong>"+"<br/>"+variant.description.slice(0,char_limit)+           (variant.description.slice(char_limit).length > 0 ? "..." : "" ) + "</p>";         //assume items have price         item_string += "<li>"+"$"+math.round(variant.price)+"</li>";         //check variant measurements , foreign sizes; add '|' if there          if (variant.variant_size) { item_string += " | <li>"+variant.variant_size+"</li>"; }         if (variant.foreign_size) { item_string += " | <li>"+variant.foreign_size+"</li>"; }         var delete_button_string = "<div class='cart-item-delete minicart' data-hook='cart_item_delete'>" +            "<a href='javascript:;' class='delete' id='delete_line_item_"+            variant.line_item_id +"' line_item_id='" +            variant.line_item_id + "'>x</a></div></div></div>"          if (window.location.pathname.split("/")[1] == "checkout"){           delete_button_string = '';           }         $('#minicart-thumbnails').append( item_string + delete_button_string )         bind_delete_button();         $('#minicart_info').show();         $('#minicart-thumbnails').show();         }     } else {       $('.cart_pulldown').addclass('empty_minicart');       $('#minicart_info').hide();       $('#minicart-thumbnails').hide();       $("#mini_empty_message").show();       $('#minicart_header').hide();       $('#minicart_content').hide();       $('#minicart_footer').hide();       $('.clearboth').hide();     }      set_product_page_variant_state();      var new_count = order.order.line_items.length + " item";      if (order.order.line_items.length > 1) { new_count += "s" };      $("#mini-item-count").text(new_count);   }).done(function(){      var item_total = parsefloat(order.order.item_total);     var subtotal = item_total.tofixed(2);     $('#minicart_subtotal').text('$' + subtotal);   }) } 

i start formatting code , breaking logical sections:

• the ajax request
• separate functions dom modifications
• a function contains loop

so function may start instead:

function mini_cart_populate() {     // find longhand ajax form more readable     $.ajax(         type: "get",         url: "/get_current_order.json"     ).done(current_order); }  function current_order(data) {     var order = data.order;     if (order.order.line_items.length == 1) {         add_single();     } else {         remove_single();     } }  function add_single() {     $('#minicart_content').addclass('single');      $('.cart_pulldown').addclass('single');      $('#minicart_footer').addclass('single'); }  // ...etc, idea 

sort out formatting of actual code well: http://jsbeautifier.org/ work you, may have finish yourself. opinions divided on it, think should camelcase variable names in js, if working jquery (as that's jquery functions in code like). find consistency makes js easier read.

you build html jquery, or @ templating solution mustache, or if want sort out, looks comes kind of project full refactor using mvc library (e.g. angular.js or ember.js).

they may seem little daunting @ first, you'll learn better practices in terms of application design , maintainability future projects.