I have implemented a checkout cart like this :enter image description here

Navigation rules are as follows :

  • User can move to next step only on completing the current step.
  • But he is free to click on the previous tab and edit the past information.

Currently I have implemented this in a single page using jquery. However, the code appears extremely messy with lots of show and hides.
Is it a better solution to implement each tab as a separate page with separate url and use session variables to store data from previous tab ?
Or should I go for a rewrite with angular ?

  • Isn’t it bad U/X to have so many disparate steps to perform a checkout? Oct 24, 2017 at 13:35
  • That was my feeling as well. But I don't have a say in the U/X :(
    – zacurry
    Oct 25, 2017 at 5:14
  • Off topic, but if that is your feeling, I suggest you include instrumentation/metrics of step completion. You can use this data later to argue for a simpler workflow. Oct 25, 2017 at 16:25

2 Answers 2


If you use Jquery when using Angularjs you're doing it wrong, except if you do it from a directive.

Make a better usage of the templating capabilities of angularjs, it decreases all need to manipulate the DOM :

  • You can use ng-show/ng-hide to manage the display of your components.
  • Form handling, binding, validation is managed by Angularjs, you may need some custom directives check the documentation and the tons of samples online.
  • Let's say all your form are named "formX" where X is the number. You can put on each block wrapping each form except the first : ng-disabled="formX.$invalid". This will prevent from opening the others part of the forms as long the previous one are not completed.

Is it a better solution to implement each tab as a separate page with separate url and use session variables to store data from previous tab ?

Personnaly I have that, but I use ui-router (replace default router component of angularjs), so implemented as stated in a SPA so I don't need to store states in the session variables.

  • Thanks for the response. I am not currently using angular. What I implied was, is it worth rewriting the jquery code in angular , especially for better maintainability - somebody else may have to handle the code when I leave. I have rephrased the last line of the qn concerning angular, sorry for being vague.
    – zacurry
    Jun 26, 2017 at 7:44
  • From your answer it certainly looks like it is worth a rewrite in angular.
    – zacurry
    Jun 26, 2017 at 7:46
  • If it is for a professional job, ask them time for rewriting in another technologies may not pass. Otherwise if you can, make sure to learn the basics of angularJS : services, routings, forms, providers. Directives are for more advanced usage you shouldn't need that much to implements your own.
    – Walfrat
    Jun 26, 2017 at 7:55
  • Make sure you look into other single-page frameworks as well, just to see if any of them suit you better than Angular. React/Flux, VueJS, etc. But certainly using any one of these is better than a bunch of jQuery code. Oct 24, 2017 at 15:16

The workflow that you described (with multiple views and stateful steps) seems sufficiently complex that you will certainly benefit from using some sort of framework. Angular is a good choice, especially if you are already familiar with it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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