I am currently working on developing an order tracking system using Wordpress, ACF, and a form plugin that is yet to be determined for the user interface.
While the back-end functionality is working smoothly, my focus now shifts towards creating a visual progress bar for users (Authors) to track the status of individual orders (posts).
Within my field groups, I have outlined 6 stages that need to be completed. In order to move on to the next stage, a specific option (radio button) must be selected to conditionally unlock the subsequent phase.
These defined stages are what I aim to visually display on the front end
For instance, when Order 123 is initially created as a new order, the first step would be triggered upon adding the necessary information in the back end (creating a New Post). Subsequently, completing step 2 (Edit post) would advance the progress bar to reflect the second stage, and so forth until the process is finished.
To clarify further, while editing a post will not automatically progress to the following stage, the act of editing marks a completion and triggers the opening of the next level or stage based on the set conditions (e.g., Step 3 or 3).
I am contemplating on converting word labels into numerical values such as Label=Step 1|Value=1 to facilitate this transition.
Various sliders, event trackers, and range plugins have been experimented with but they all require numeric values which cannot be directly linked to ACF fields. Is there a method to assign a text value from radio/select/checkbox as a number and represent it visually?
Alternatively, any recommendations for suitable plugins or scripts that can assist in achieving this goal?
Ideally, each step would be color-coded in a gradient fashion to indicate progression once the progress bar is successfully implemented.
Thank you for your assistance.